Reputation: 535
im trying create a class, that can start this game, as a method of my class Game. As you can see i add my request animation frame as a function inside a method, but it give me a error: 'Maximum call stack size exceeded'
function Game(){
this.player = null;
this.anim = null;
}
Game.prototype.start = function () {
this.anim = requestAnimFrame( this.start() );
//code
}
Game.prototype.end = function() {
cancelAnimFrame ( this.anim );
}
//create game
var game = new Game();
//start game
game.start();
This work if I use this :
function render(){
requestAnimFrame(render);
};
//start anim
render();
So I dont know what it doesnt work if is inside a method.
this is the code for anim frame I use:
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback,element){
window.setTimeout(callback, 1000 / 60);
};
})();
window.cancelAnimFrame = (function(){
return window.cancelAnimationFrame ||
window.mozCancelAnimationFrame ||
function(callback,element){
window.setTimeout(callback, 1000 / 60);
};
})();
Im not use if you know what im trying to do, thanks.
Upvotes: 0
Views: 1164
Reputation: 535
I found the answer, the problem is that when I call :'this.start' im refering of 'window' as 'this', so the the problem goes if I save it as 'that' or 'window', then excecute it, thanks all.
var Game = function () {
this.anim = null;
}
Game.prototype.startAnimation = function(){
window.requestAnimFrame(this.startAnimation.bind(this));
}
var game = new Game();
game.startAnimation();
Upvotes: 1
Reputation: 1395
Game.prototype.start = function () {
this.anim = requestAnimFrame( this.start() );
//code
}
For requestAnimFrame( this.start() );
, you are calling the start within itself, which causes an infinite loop.
You should try requestAnimFrame(this.start);
even if it would still looks weird :(.
Upvotes: 0