Sign in to follow this  

Is this acceptable JS?

Recommended Posts

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();, 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.

Share this post

Link to post
Share on other sites

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.

Share this post

Link to post
Share on other sites

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;, 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;, 'gameCanvas');}GameCanvas.prototype = Object.create(Canvas.prototype);GameCanvas.prototype.constructor = GameCanvas;GameCanvas.prototype.setFPS = function (fps) {  this.fps = fps;}

var canvas = new GameCanvas();


Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.