Caros quero compartilhar com vocês um jogo de avião que fiz, com base nas aulas aprendidas aqui neste curso! Pretendo melhorar ao longo do tempo. Para testar só precisam de copiar o código abaixo:
<meta charset="utf-8">
<h1>Fuja dos obstaculos!</h1>
<canvas id="tela" width="600" height="400"></canvas>
<br/>
<button id="bEsquerdo"><<</button>
<button id="bDireito">>></button>
<script type="text/javascript">
alert("Utilize o click esquerdo do rato para mover o avião para esquerda e direito para mover para direita dentro da área cincenta. Tambem pode utilizar os botões. Fuja dos obstaculos!");
function pulaLinha(){
document.write("<br/>");
}
function mostra(frase){
document.write(frase);
pulaLinha();
}
var tela = document.getElementById("tela");
var c = tela.getContext("2d");
var bEsquerdo= document.getElementById("bEsquerdo");
var bDireito= document.getElementById("bDireito");
c.fillStyle="gray";
c.fillRect(0,0,600,400);
function obstaculo (x,y,raio,cor){
c.beginPath();
c.fillStyle=cor;
c.arc(x,y,raio,0,Math.PI*2);
c.fill();
}
function aviao(x){
c.fillStyle = "white";
c.beginPath();
c.moveTo(290+x,390);
c.lineTo(305+x,340);
c.lineTo(320+x,390),
c.fill();
}
function limpaTela(){
c.clearRect(0,0,600,400);
c.fillStyle="gray";
c.fillRect(0,0,600,400);
}
var meusPontos=[];
var x1= 225;
var x2= 225;
var x3= 225;
var y= 0;
var y2=y-120;
var y3=y2-120;
var localizao=0;
var pontos=0;
function moverAviaoParaEsquerda(evento){
if(localizao==0){
localizao=1;
}
else if(localizao==2){
localizao=0;
}
}
function moverAviaoParaDireita(evento){
evento.preventDefault();
if(localizao==0){
localizao=2;
}
else if(localizao==1){
localizao=0;
}
}
function verificaAcidente(x){
if(((x > x1 - 15) && (x < x1 + 15) &&
(365 > y - 15) && (365 < y + 15)) ||(
(x > x2 - 15) && (x < x2 + 15) &&
(365 > y2 - 15) && (365 < y2 + 15))||(
(x > x3 - 15) && (x < x3 + 15) &&
(365 > y3 - 15) && (365 < y3 + 15))) {
y=y+30;
y2=y2+30;
y3=y3+30;
meusPontos.push(pontos);
meusPontos.sort(function(a, b){return b-a});
alert("Você perdeu com: "+pontos+" PONTOS!! A sua pontuação máxima é: " + meusPontos[0]+".");
pontos=0;
}
}
var desenha=function(){
limpaTela();
pontos=pontos+1;
if(localizao==0){
aviao(0);
verificaAcidente(305);
}else if(localizao==1){
aviao(-80);
verificaAcidente(225);
}else if(localizao==2){
aviao(75);
verificaAcidente(375);
}
obstaculo(x1,y,15,"blue");
obstaculo(x2,y2,15,"red");
obstaculo(x3,y3,15,"yellow");
y=y+1;
y2=y2+1;
y3=y3+1;
if(y==390){
y=0;
if((Math.round(Math.random()*3)*1)==1){
x1=225;
}
else if((Math.round(Math.random()*3)*1)==2){
x1=305;
} else{
x1=375;
}
}
if(y2==390){
y2=0;
if((Math.round(Math.random()*3)*1)==1){
x2=225;
}
else if((Math.round(Math.random()*3)*1)==2){
x2=305;
} else{
x2=375;
}
}
if(y3==390){
y3=0;
if((Math.round(Math.random()*3)*1)==1){
x3=225;
}
else if((Math.round(Math.random()*3)*1)==2){
x3=305;
} else{
x3=375;
}
}
}
setInterval(desenha,5);
tela.onclick= moverAviaoParaEsquerda;
tela.oncontextmenu = moverAviaoParaDireita;
bEsquerdo.onclick=moverAviaoParaEsquerda;
bDireito.onclick=moverAviaoParaDireita;
</script>