HTML5面向对象的游戏开发简单实例总结

在阅读一本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方法进行图像绘制。

在阅读一本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方法进行图像绘制。

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！