Tentei fazer um joguinho diferente com os conhecimento até agora, utilizando as setas para jogar, mas depois de umas 5 horas acabei desistindo... Não consegui fazer o movimento da "nave", apesar de redesenhar a tela toda, a cada vez, parece que o desenho da nave não apaga... não consegui saber o está errado, pois na função de redesenhar a tela, eu a principio apago tudo e redesenho a tela toda, e só depois chamo a função da nave... era pras "naves" anteriores sumirem atras da tela cinza... Frustrei... haha, até tentei acertar o timing da bala, tentando fazer uma função para o tiro em si (para guardar a posição X do momento do tiro) e depois ia fazer outra para verificar se o tiro acertou o alvo, mas acabei desistindo antes... hehe.Se alguém puder me ajudar pra ver onde errei ali na nave, agradeço.
botei ele online se alguém quiser ver funcionado https://abel83.000webhostapp.com/joguin.html
<meta charset="UTF-8">
<center>
<canvas id="mytela" width="810" height="610"></canvas>
<script>
var tela = document.getElementById('mytela');
var pincel = tela.getContext('2d');
var xnave = 400
var xalvo = 300
var diralvo = true
var xtiro = 395
var ytiro1 = 500
var ytiro2 = 100
var ybarra = 595
function fps() {
console.log("xnave " + xnave);
faztela()
fazalvo()
fazbarra()
faztiro()
faznave()
}
function faztela() {
pincel.fillStyle = 'black';
pincel.fillRect(0, 0, 800, 600);
pincel.fillStyle = 'gray';
pincel.fillRect(5, 5, 790, 590);
}
function faznave() {
pincel.fillStyle = 'darkblue';
pincel.moveTo(xnave-70, 595);
pincel.lineTo(xnave-50, 565);
pincel.lineTo(xnave-50, 545);
pincel.lineTo(xnave-5, 525);
pincel.lineTo(xnave-5, 515);
pincel.lineTo(xnave+5, 515);
pincel.lineTo(xnave+5, 525);
pincel.lineTo(xnave+50, 545);
pincel.lineTo(xnave+50, 565);
pincel.lineTo(xnave+70, 595);
pincel.fill();
pincel.stroke();
}
function fazalvo() {
if(xalvo < 30) { diralvo = true }
if(xalvo > 680) { diralvo = false }
if(diralvo) { xalvo = xalvo + 30 } else { xalvo = xalvo -30}
pincel.fillStyle = "black";
pincel.fillRect(xalvo-2, 24, 104, 76);
pincel.fillStyle = "darkred";
pincel.fillRect(xalvo, 26, 100, 72);
}
function faztiro() {
if(ytiro1 >= 100) {
pincel.fillStyle = "blue"
pincel.fillRect(xtiro, ytiro1, 10, 10)
ytiro1 = ytiro1 - 10
} else {
ytiro1 = 500
}
}
function veracerto() {
xtiro = xnave - 5
setTimeout(fazacerto, 1600)
}
function fazacerto() {
}
function fazbarra() {
pincel.fillStyle = "black";
pincel.fillRect(750, 390, 45, 210)
pincel.fillStyle = "#333333"
pincel.fillRect(755, 395, 40, 200)
pincel.fillStyle = "red"
if(ybarra != 395) {
ybarra = ybarra - 10
} else if(ybarra = 395) {
ybarra = 595
}
pincel.fillRect(755, ybarra, 40, 595-ybarra)
faztiro()
}
function leDoTeclado(evento) {
if(evento.keyCode == 37) {
if(xnave > 85) { xnave = xnave - 10; }
} else if (evento.keyCode == 39) {
if(xnave < 715) {xnave = xnave + 10; }
}
}
document.onload = fps();
setInterval(fps, 160)
setInterval(veracerto, 3200)
document.onkeydown = leDoTeclado;
</script>