Gente, resolvi escrever o código do jogo do pong no VSCode e até que consegui fazer funcionar como nas aulas, mas estou tendo um pouco de dificuldade com uma implementação de um fator de dificuldade. Do jeito que escrevi o código, o adversário sempre ganha, alguém poderia me dar uma ideia de como fazer com que a raquete do adversário se movimente de acordo com um fator de dificuldade? Do tipo, quanto mais difícil o jogo, mais próximo do yBolinha? quanto mais fácil, mais distante ela se movimenta... Também se puderem me dar dicas de como melhorar o código, agradeço...
Segue o códgio:
<meta charset="UTF-8">
<body>
<canvas width="600" height="400"></canvas>
</body>
<script>
let sentidoX = 1;
let sentidoY = 1;
let xBolinha = 300;
let yBolinha = 200;
let raioBolinha = 10;
let velocidade = 1;
var yRaquete = 200;
let xRaquete = 20;
let larguraRaquete = 10;
let alturaRaquete = 80;
var meusPontos = 0;
var pontosAdversario = 0;
var xRaqueteAdversario = xRaquete + 550;
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'lightgray';
pincel.fillRect(0, 0, 600, 400);
function desenhaCirculo(x, y, raio) {
pincel.fillStyle = 'white';
pincel.beginPath();
pincel.arc(x, y, raio, 0, 2 * Math.PI);
pincel.fill();
}
function desenhaQuadrado(x, y, tamanhoX, tamanhoY, cor) {
pincel.fillStyle = cor;
pincel.fillRect(x, y, tamanhoX, tamanhoY)
pincel.fill();
}
function desenhaPontos(texto, xPontos) {
pincel.font = "30px Comic Sans MS";
pincel.fillStyle = "white";
pincel.textAlign = "center";
pincel.fillText(texto, xPontos, 50);
}
function limpaTela() {
pincel.clearRect(0, 0, 600, 400);
pincel.fillStyle = 'black';
pincel.fillRect(0, 0, 600, 400)
}
function movimentaRaquete() {
document.querySelector('body').addEventListener('keydown', function (evento) {
var tecla = evento.keyCode;
if (tecla == 38) {
yRaquete -= 10;
}
if (tecla == 40) {
yRaquete += 10;
}
})
}
function pontos() {
if (xBolinha === tela.offsetWidth) {
meusPontos++;
} else if (xBolinha === tela.offsetLeft) {
pontosAdversario++;
}
}
function atualizaTela() {
limpaTela();
if (yBolinha === tela.offsetHeight) {
sentidoY = -1;
} else if (xBolinha === tela.offsetWidth) {
sentidoX = -1;
} else if (yBolinha === tela.offsetTop) {
sentidoY = 1;
} else if (xBolinha === tela.offsetLeft) {
sentidoX = 1;
}
var yRaqueteAdversario = yBolinha - 40;
if (((xBolinha + raioBolinha) > xRaqueteAdversario) &&
(yBolinha > yRaqueteAdversario) &&
(yBolinha < (yRaqueteAdversario + alturaRaquete))) {
sentidoX = -1;
}
if (((xBolinha - raioBolinha) < (xRaquete + larguraRaquete)) &&
(yBolinha > yRaquete) &&
(yBolinha < (yRaquete + alturaRaquete))) {
sentidoX = 1;
}
desenhaCirculo(xBolinha, yBolinha, raioBolinha);
xBolinha += sentidoX;
yBolinha += sentidoY;
desenhaQuadrado(xRaqueteAdversario, yRaqueteAdversario, larguraRaquete, alturaRaquete, 'white');
desenhaQuadrado(xRaquete, yRaquete, larguraRaquete, alturaRaquete, 'white');
pontos();
desenhaPontos(meusPontos, 400);
desenhaPontos(pontosAdversario, 200);
}
movimentaRaquete();
setInterval(atualizaTela, velocidade);
</script>
