Convert dot net invaders to html5
UPDATE: Playable
UPDATE: Code Link
So, I wrote a dot net invaders clone and thought that I would try my hand at converting it into an html5 version using canvas, and the same cruddy graphics in the first version. The point of this blog, however, is not about graphics but instead of development. I hacked my way through a simple conversion at the start implementing some of the techniques I presented usage of in the render framework post. Then things turned ugly when I tried to implement inheritance. I was able to actually implement what I desired at first, but found some issues when creating multiple items using the same class seemed to use the same instance for a member object. This was undesireable, but I simply created a new “object” in the “constructor” with the same name and everything worked marvelously.
I won’t be implementing the code or the demo on the site today, as I have to implement an intersect rect function so that the game will somewhat work in a reasonable way. ( Ie allow at least missle collisions. I hope to have this completed in the next day or so though, so watch closely. For those of you who don’t want to bother watching – I will hopefully be implementing a user friendly subscribe system to notify those that wish to be notified of new posts.
In the meantime – here are some little things I developed quickly as little helpers.
HTML5 Image Loading for the player and enemy graphics.
SpaceInvaders.playerGraphic = new Image(); SpaceInvaders.playerGraphic.loaded = false ; SpaceInvaders.playerGraphic.onload = function(){ SpaceInvaders.playerGraphic.loaded = true ; }; SpaceInvaders.playerGraphic.src = 'player.png'; SpaceInvaders.enemyClass1 = new Image(); SpaceInvaders.enemyClass1.loaded = false ; SpaceInvaders.enemyClass1.onload = function(){ //SpaceInvaders.Log.Log ( "Enemy 1 graphics loaded" ) ; SpaceInvaders.enemyClass1.loaded = true ; }; SpaceInvaders.enemyClass1.src = 'enemy1.png'; SpaceInvaders.enemyClass2 = new Image(); SpaceInvaders.enemyClass2.loaded = false ; SpaceInvaders.enemyClass2.onload = function(){ // SpaceInvaders.Log.Log ( "Enemy 2 graphics loaded" ) ; SpaceInvaders.enemyClass2.loaded = true ; }; SpaceInvaders.enemyClass2.src = 'enemy2.png'; SpaceInvaders.enemyClass3 = new Image(); SpaceInvaders.enemyClass3.loaded = false ; SpaceInvaders.enemyClass3.onload = function(){ //SpaceInvaders.Log.Log ( "Enemy 3 graphics loaded" ) ; SpaceInvaders.enemyClass3.loaded = true ; }; SpaceInvaders.enemyClass3.src = 'enemy3.png'; SpaceInvaders.enemyClass4 = new Image(); SpaceInvaders.enemyClass4.loaded = false ; SpaceInvaders.enemyClass4.onload = function(){ //SpaceInvaders.Log.Log ( "Enemy 4 graphics loaded" ) ; SpaceInvaders.enemyClass4.loaded = true ; }; SpaceInvaders.enemyClass4.src = 'enemy4.png';
Logging function for log to console helper
SpaceInvaders.implement ( "internalLog", function(){ this.Log = function ( msg ){ if ( typeof ( console.log ) != "undefined" ){ console.log ( msg ) ; } return false ; } }); SpaceInvaders.implement("Log", new SpaceInvaders.internalLog());
SpaceInvaders.implement(‘inherits’, function (object, parent) {
if ( typeof ( object ) == “undefined” || typeof ( parent ) == “undefined” ){
return ;
}
var save = {} ;
save.prototype = new object() ;
object.prototype = new parent ();
object.prototype.constructor = object ;
object.prototype.parent = parent.prototype ;
for ( i in save.prototype ){
if ( i.substr(0,1) == “_” ){
object.prototype[i.substr(1)] = save.prototype[i]();
}
}
});
[/js]
Inherits Function – to take functions with a certain prefix and override
SpaceInvaders.implement('inherits', function (object, parent) { if ( typeof ( object ) == "undefined" || typeof ( parent ) == "undefined" ){ return ; } var save = {} ; save.prototype = new object() ; object.prototype = new parent (); object.prototype.constructor = object ; object.prototype.parent = parent.prototype ; for ( i in save.prototype ){ if ( i.substr(0,1) == "_" ){ object.prototype[i.substr(1)] = save.prototype[i](); } } });
The above function needs to be tested more thoroughly as well as some of the other techniques to improve useability.
Thanks,
Happy Coding.
Ya learn soeimhtng new everyday. It’s true I guess!