HTML5 game programming style
- by fnx
I am currently trying learn javascript in form of HTML5 games. Stuff that I've done so far isn't too fancy since I'm still a beginner. My biggest concern so far has been that I don't really know what is the best way to code since I don't know the pros and cons of different methods, nor I've found any good explanations about them. So far I've been using the worst (and propably easiest) method of all (I think) since I'm just starting out, for example like this:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var width = 640;
var height = 480;
var player = new Player("pic.png", 100, 100, ...);
also some other global vars...
function Player(imgSrc, x, y, ...) {
this.sprite = new Image();
this.sprite.src = imgSrc;
this.x = x;
this.y = y;
...
}
Player.prototype.update = function() {
// blah blah...
}
Player.prototype.draw = function() {
// yada yada...
}
function GameLoop() {
player.update();
player.draw();
setTimeout(GameLoop, 1000/60);
}
However, I've seen a few examples on the internet that look interesting, but I don't know how to properly code in these styles, nor do I know if there are names for them. These might not be the best examples but hopefully you'll get the point:
1:
Game = {
variables: {
width: 640,
height: 480,
stuff: value
},
init: function(args) {
// some stuff here
},
update: function(args) {
// some stuff here
},
draw: function(args) {
// some stuff here
},
};
// from http://codeincomplete.com/posts/2011/5/14/javascript_pong/
2:
function Game() {
this.Initialize = function () {
}
this.LoadContent = function () {
this.GameLoop = setInterval(this.RunGameLoop, this.DrawInterval);
}
this.RunGameLoop = function (game) {
this.Update();
this.Draw();
}
this.Update = function () {
// update
}
this.Draw = function () {
// draw game frame
}
}
// from http://www.felinesoft.com/blog/index.php/2010/09/accelerated-game-programming-with-html5-and-canvas/
3:
var engine = {};
engine.canvas = document.getElementById('canvas');
engine.ctx = engine.canvas.getContext('2d');
engine.map = {};
engine.map.draw = function() {
// draw map
}
engine.player = {};
engine.player.draw = function() {
// draw player
}
// from http://that-guy.net/articles/
So I guess my questions are:
Which is most CPU efficient, is there any difference between these styles at runtime?
Which one allows for easy expandability?
Which one is the most safe, or at least harder to hack?
Are there any good websites where stuff like this is explained?
or...
Does it all come to just personal preferance? :)
