HTML5面向对象的游戏开发简单实例总结
程序员文章站
2022-05-10 22:42:36
在阅读一本HTML5游戏开发相关书籍时发现一个很好的例子,通过这个例子可以对面向对象的开发进行更深入的理解。这个对象要实现的是:将一个CSS sprite中的图像绘制到canvas...
在阅读一本HTML5游戏开发相关书籍时发现一个很好的例子,通过这个例子可以对面向对象的开发进行更深入的理解。这个对象要实现的是:将一个CSS sprite中的图像绘制到canvas中。首先创建一个SpriteSheet对象,代码如下:
var SpriteSheet = new function(){ this.map = { }; this.load = function(spriteData,callback){ this.image = new Image(); this.image.onload = callback; this.image.src = "images/sprites.png"; }; this.draw = function(ctx,sprite,x,y,frame){ var s = this.map[sprite]; if (!frame) { frame = 0; }; ctx.drawImage(this.image, s.sx+frame*s.w, s.sy, s.w, s.h, x, y, s.w, s.h); }; }
首先使用了new function(){},保证了只会有一个实例被创建。
接下来对象内部,通过this为其绑定了两个方法和一个属性。load方法起到加载image的作用,传递两个参数,第一个参数是图像信息,即要绘制的图像在sprite中的位置大小以及在画布上的位置大小。注意callback的用法,这里面的this.image.onload = callbak;当图像加载完成后执行传入的回调函数。
draw方法用来进行图像的绘制,传入canvas的上下文环境,需要绘制的图像对象信息以及图像位置。
这个对象的逻辑构造相对复杂,基本的思路就是自定义load方法,通过load方法完成图像信息的加载。这里的图像信息指的是图像在sprite中的位置、大小等。
使用该对象的方法代码如下:
function startGame(){ SpriteSheet.load({ ship:{sx:0, sy:0, w:18, h:35, frames:3} },function(){ SpriteSheet.draw(ctx,"ship",0,0); SpriteSheet.draw(ctx,"ship",100,50); SpriteSheet.draw(ctx,"ship",150,100,1); }); }
这里使用load方法,首先传入所需切图部分的相关数据,接下来在回调函数中调用对象的draw方法进行图像绘制。
推荐阅读
-
php面向对象的简单总结 $this $parent self
-
HTML5面向对象的游戏开发简单实例总结
-
HTML5开发Kinect体感游戏的实例应用
-
关于面向对象的简单总结
-
C语言实现简单的面向对象代码实例
-
超级玛丽 Super Mario java基础小游戏:基于JAVA面向对象实现的超级马里奥(Super Mario)游戏(简单小游戏,仅仅使用Java面向对象基础实现(附上源码))
-
php面向对象的简单总结 $this $parent self
-
HTML5游戏框架cnGameJS开发实录-核心函数模块篇的代码实例
-
面向对象实现简单版的超级马里奥小游戏
-
HTML5面向对象的游戏开发简单实例总结