window.onload = function(){
class Objeto{
constructor(){
this.x = 10;
this.y = 10;
this.velY = 2;
}
dObjeto(){
ctx.beginPath();
ctx.rect(10,this.y,100,100);
ctx.closePath();
ctx.fill();
}
stop(){
cancelAnimationFrame(id);
}
anima(){
ctx.clearRect(0,0,canvas.width, canvas.height);
objeto.y += objeto.velY;
objeto.dObjeto();
//Eu queria que quando alcançasse o valor máximo ele parace com o método stop()
if(objeto.y + objeto.velY > canvas.height || objeto.y + objeto.velY < 0){
objeto.velY = -objeto.velY;
objeto.stop();
}
id = requestAnimationFrame(objeto.anima);
}
}
//Eventos
//Função para mecher na dimenssão da canvas
function canvasT(){
canvas.width = 700;
canvas.height = 450;
canvas.style.border = 'solid';
}
canvasT();
var id;
var ctx = document.getElementById('canvas').getContext('2d');
var objeto = new Objeto();
objeto.dObjeto();
objeto.anima();
window.addEventListener('keydown', objeto.pula, false);
//So funciona a cancelAnimationFrame() se eu apertar o click evento abaixo
window.addEventListener('click', objeto.stop, false);
}
Adicione um comentário
|
1 Resposta
Coloque um return;
após chamar objeto.stop();
dentro do anima()
, senão o código continuará na próxima linha id = requestAnimationFrame(objeto.anima);
que continua a animação:
window.onload = function(){
class Objeto{
constructor(){
this.x = 10;
this.y = 10;
this.velY = 2;
}
dObjeto(){
ctx.beginPath();
ctx.rect(10,this.y,100,100);
ctx.closePath();
ctx.fill();
}
stop(){
cancelAnimationFrame(id);
}
anima(){
ctx.clearRect(0,0,canvas.width, canvas.height);
objeto.y += objeto.velY;
objeto.dObjeto();
//Eu queria que quando alcançasse o valor máximo ele parace com o método stop()
if(objeto.y + objeto.velY > canvas.height || objeto.y + objeto.velY < 0){
objeto.velY = -objeto.velY;
objeto.stop();
console.log("PAROU!");
return;
}
id = requestAnimationFrame(objeto.anima);
}
}
//Eventos
//Função para mecher na dimenssão da canvas
function canvasT(){
canvas.width = 700;
canvas.height = 450;
canvas.style.border = 'solid';
}
canvasT();
var id;
var ctx = document.getElementById('canvas').getContext('2d');
var objeto = new Objeto();
objeto.dObjeto();
objeto.anima();
window.addEventListener('keydown', objeto.pula, false);
//So funciona a cancelAnimationFrame() se eu apertar o click evento abaixo
window.addEventListener('click', objeto.stop, false);
}
<canvas id="canvas"></canvas>