Is this acceptable JS?

[Chuxx]

Hi, I'm fairly new to game programming using HTML5. Although saying that I have been using Javascript for many years and will continue to do so for years to come. Basically I have made a couple of very basic games up to now just practising in general for when I decide to consider making a more serious attempt at a game for people to play.

 

I noticed while learning some of the basics that there was quite a lot of code that I had to rewrite almost exactly the same for all the basic games I made, so I figured "Why not make a file that I can reuse for almost all games I intend to make?". Well I begun doing so and soon ran into a few "scope" problems, I figured out a way around them but then after reading a few threads on these forums when I first landed here yesterday, I am afraid that my style of OOP (So to speak) with Javascript is not the best way to go about things.

 

I was just looking for pointers in regards to where this file can be improved due to not programming the way accepted by most Javascript developers?

 

function Canvas(canvasID){		this.canvasID = canvasID;	this.canvasDOM = document.getElementById(this.canvasID);	this.ctx = this.canvasDOM.getContext('2d');	this.width = this.canvasDOM.width;	this.height = this.canvasDOM.height;		this.clear = function(){		this.ctx.clearRect(0, 0, this.width, this.height);	};		this.fill = function(color){		this.ctx.fillStyle = color;		this.ctx.fillRect(0, 0, this.width, this.height);	};}var engine = new function(){		this.running = false;	this.animator = 	window.requestAnimationFrame ||							window.webkitRequestAnimationFrame ||							window.mozRequestAnimationFrame ||							window.oRequestAnimationFrame ||							window.msRequestAnimationFrame;			this.start = function(){		this.running = true;		this.tick();	};		this.stop = function(){		this.running = false;	};		this.tick = function(){		if(!this.running)			return;		update();		render();		this.animator.call(window, function(){			engine.tick();		});	};}

 

 

Now there are a few things I am sure are terribly wrong, the most prominent being in the tick method of the engine instance where I call itself by using "engine.tick()" . This is where, as I mentioned before, I had "scope" issues. Any advice regarding how I should change that would be much appreciated.

 

Now the way in which I currently (And intend to continue if possible) using this file for my games is like so -

 

var canvas = new Canvas("gameCanvas");engine.start();function update(){	canvas.clear();	//update game}function render(){	//render game}

 

 

 

I hope you manage to decipher what I mean by this and understand my programming. Thanks in advance, Chuxx.

[Quetzacotl]

One thing I noticed is that your physic loop (game update loop) has the same rate as render loop which is not good, because rendering speed will vary on different machines and physics needs constant rate everywhere. But you can add some additional checking in update function, then it will be ok.

[kuu]

As you mentioned, accessing the instance of class from within the class's method "engine.tick()" is a bad idea because it doesn't work if you create multiple instances.

Instead, use a closure variable to save the context "this".

this.tick = function(){  if(!this.running)    return;  update();  render();  var self = this;  this.animator.call(window, function(){    self.tick();  });};

 

And, I would like to change the methods Canvas.clear/fill to be defined as prototype properties.

So that they can be extended as follows:

Canvas.prototype.clear = function(){  this.ctx.clearRect(0, 0, this.width, this.height);};                                  Canvas.prototype.fill = function(color){  this.ctx.fillStyle = color;  this.ctx.fillRect(0, 0, this.width, this.height);};// GameCanvas inherits from Canvas.function GameCanvas() {  this.fps = 60;  Canvas.prototype.constructor.call(this, 'gameCanvas');}GameCanvas.prototype = Object.create(Canvas.prototype);GameCanvas.prototype.constructor = GameCanvas;GameCanvas.prototype.setFPS = function (fps) {  this.fps = fps;}

var canvas = new GameCanvas();

engine.start();