Eu tô tentando criar o pong pelo sublime ao invés de usar o p5.js e agora tenho que criar a colisão com a raquete, alguma sugestão? Eis o código:
<canvas width="600" height="400"></canvas>
<script type="text/javascript">
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'black';
pincel.fillRect(0,0,600,400);
function desenhaCirculo(x, y) {
pincel.fillStyle = 'white';
pincel.beginPath();
pincel.arc(x, y, 10, 0, 2 * Math.PI);
pincel.fill();
}
function desenhaRaquete(yr){ //!!!!
pincel.fillStyle = 'white';
pincel.fillRect(10, yr, 11, 60);
}
function limpaTela(){
pincel.clearRect(0,0,600,400);
pincel.fillStyle = 'black';
pincel.fillRect(0,0,600,400);
}
function exibeNoConsole(){
console.log('chamada');
}
var x = 300;
var y = 200;
var cx = false;
var cy = false;
//var ctlx = 11;
//var ctrly = yr;
function atualizaTela(i, j){
limpaTela();
desenhaCirculo(x, y);
/*
if(x == ctlx && y == ctrly){
cx = true;
cy = true;
} */
x == 600 ? (cx = true) : cx;
x == 5 ? (cx = false) : cx;
cx == false ? x++ : x--;
y == 400 ? (cy = true) : cy;
y == 5 ? ( cy = false) : cy;
cy == false ? y++ : y--;
console.log('x = ' + x + ' y = ' + y);
desenhaRaquete(yr);
}
var yr = 200;
var taxa = 20; // velocidade da raquete
function leDoTeclado(evento) {
switch(evento.key){
case 'ArrowUp':
yr = yr - taxa;
//y2 = y2 - taxa;
limpaTela();
atualizaTela(yr);
break;
case 'ArrowDown':
yr = yr + taxa;
//y2 = y2 + taxa;
limpaTela();
atualizaTela(yr);
break;
}
}
setInterval(atualizaTela, 5); //velocidade da bolinha
document.onkeydown = leDoTeclado;
</script>