Eu fui fazendo o jogo do Pong no Sublime Text e rodando ele no Chrome, mas notei que o movimento da raquete é lenta, bem menos fluida comparado ao P5. Porque no P5 ela se move mais fluida? Tem alguma forma de eu fazer ela ficar mais fuida no Sublime Text?
Não está pronto mais seria mais ou menos assim:
<canvas width = '600' height = '400'></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
//variáveis do cenário
var xCenario = 0
var yCenario = 0
var alturaCenario = 400
var comprimentoCenario = 600
//variáveis da bolinha
var xBolinha = 300
var yBolinha = 200
var raio = 7.5
//velocidade da bolinha
var xVelocidadeBolinha = 6
var yVelocidadeBolinha = 6
//variáveis da raquete
var alturaRaquete = 90
var comprimentoRaquete = 10
var xRaquete = 5
var yRaquete = 155
//velocidade da raquete
var velocidadeRaquete = 10;
// códigos do teclado
var cima = 38
var baixo = 40
function cenario(){
pincel.fillStyle = 'black';
pincel.fillRect(xCenario, yCenario, comprimentoCenario, alturaCenario);
}
function raquete(){
pincel.fillStyle = 'white'
pincel.fillRect(xRaquete, yRaquete, comprimentoRaquete, alturaRaquete);
}
function bolinha(){
pincel.fillStyle = 'white'
pincel.beginPath();
pincel.arc (xBolinha, yBolinha, raio, 0, 2 * Math.PI);
pincel.fill();
}
function colisaoBorda(){
if(xBolinha > (600 - raio)
|| xBolinha < raio){
xVelocidadeBolinha *= -1
}
if(yBolinha > (400 - raio)
|| yBolinha < raio){
yVelocidadeBolinha *= -1
}
}
function movimentaBolinha(){
cenario();
raquete()
bolinha();
xBolinha += xVelocidadeBolinha
yBolinha += yVelocidadeBolinha
colisaoBorda();
}
setInterval(movimentoBolinha, 12)
function movimentaRaquete(evento){
if(evento.keyCode == cima) {
yRaquete -= velocidadeRaquete;
} else if (evento.keyCode == baixo) {
yRaquete += velocidadeRaquete;
}
}
document.onkeydown = movimentaRaquete;
</script>
