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


web前端/H5/javascript学习群:250777811

欢迎关注此公众号→【web前端EDU】跟大佬一起学前端!欢迎大家留言讨论一起转发

HTML5面向对象的游戏开发简单实例总结的更多相关文章

  1. 基于HTML5的SLG游戏开发(序)

          2012年前后,HTML5游戏凭借跨平台.易移植.部署简单.节省成本等优点被炒的火热,经过一两年的快速发展,市场出现了一些成功地HTML5游戏产品,像磊友的<修仙三国>,神奇时 ...

  2. HTML5 2D平台游戏开发#4状态机

    在实现了<HTML5 2D平台游戏开发——角色动作篇之冲刺>之后,我发现随着角色动作的增加,代码中的逻辑判断越来越多,铺天盖地的if() else()语句实在让我捉襟见肘: 这还仅仅是角色 ...

  3. [HTML5游戏开发]简单的《找不同汉字版》,来考考你的眼力吧

    本次 游戏 开发需要用到lufylegend.js开源游戏引擎,版本我用的是1.5.2(现在最新的版本是1.6.0).    引擎下载的位置: http://lufylegend.googlecode ...

  4. [HTML5游戏开发]简单的《找没有同汉字版〗爆去考考您狄综力吧

    [color=ize:18px]一,筹办工做   本次 游戏开发需求用到lufylegend.js开源游戏引擎,版本我用的是1.5.2(如今最新的版本是1.6.0).    引擎下载的位置:http: ...

  5. 基于HTML5的SLG游戏开发( 三):认识PureMVC

    在游戏开发中,对于一般网络游戏,由于需要多人协同开发,每个人负责不同的模块开发,为了减少耦合,需要用来一些MVC框架,减少模块之间的耦合.我们现在使用的mvc框架是pureMVC.pureMVC的官网 ...

  6. HTML5 2D平台游戏开发#6地图绘制

    此前已经完成了一部分角色的动作,现在还缺少可以交互的地图让游戏看起来能玩.不过在开始之前应当考虑清楚使用什么类型的地图,就2D平台游戏来说,一般有两种类型的地图,Tile-based和Art-base ...

  7. 基于HTML5的SLG游戏开发(一):搭建开发环境(2)

          游戏开发过程中经常需要处理各种事件,而HTML5游戏开发中,所有的场景和UI面板都是绘制在Canvas上面,假设需要对某一UI面板上的关闭按钮添加事件监听,采取的方法是对关闭按钮图片资源进 ...

  8. SpringMVC笔记——Spring+MyBatis组合开发简单实例

    简介 SSH框架很强大,适合大型项目开发.但学无止境,多学会一门框架组合开发会让自己增值许多. SSM框架小巧精致,适合中小型项目快速开发,对于新手来说也是简单上手的.在SSM框架搭建之前,我们先学习 ...

  9. html5游戏开发-简单tiger机

    http://blog.csdn.net/lufy_legend/article/details/7021965

随机推荐

  1. 使用Matrix-tree与它的行列式来解决生成树计数问题

    我又把Matrix写错啦 这东西讲课的时候竟然一笔带过了,淦 好吧这东西我不会证 那我们来愉快的看结论吧 啦啦啦 预备工作 你有一个 $ n $ 个点的图 比如说 5 /|\ / | \ 2--1-- ...

  2. pip 代理设置,坑爹的代理继续

    Linux ubuntu 3.2.0-23-generic-pae #36-Ubuntu SMP Tue Apr 10 22:19:09 UTC 2012 i686 i686 i386 GNU/Lin ...

  3. 找出Xcode没有使用的图片

    #! /bin/sh PROJ=`find . -name '*.xib' -o -name '*.[mh]'` for png in ` find . -name '*.png'` do name ...

  4. Pascal小游戏 俄罗斯方块怀旧版

    俄罗斯方块怀旧版(注释版) {$APPTYPE GUI}{$MODE DELPHI}program WinPiece; usesWindows; constAppName = 'WinPiece';p ...

  5. 手把手教你写Windows 64位平台调试器

    本文网页排版有些差,已上传了doc,可以下载阅读.本文中的所有代码已打包,下载地址在此. ------------------------------------------------------- ...

  6. 24、php知识点总结基础教程--part-2

    1.表单处理 ①post请求 <html> <body> <form action="welcome.php" method="post&q ...

  7. python 常见的错误类型 和 继承关系

    BaseException +-- SystemExit #系统结束 +-- KeyboardInterrupt #键盘中断 ctrl+D +-- GeneratorExit #主动结束 +-- Ex ...

  8. maven学习(十八)——用Nexus搭建Maven私服

    一.搭建nexus私服的目的 为什么要搭建nexus私服,原因很简单,有些公司都不提供外网给项目组人员,因此就不能使用maven访问远程的仓库地址,所以很有必要在局域网里找一台有外网权限的机器,搭建n ...

  9. 三、vue依赖收集

    Vue 会把普通对象变成响应式对象,响应式对象 getter 相关的逻辑就是做依赖收集,这一节我们来详细分析这个过程 Dep Dep 是整个 getter 依赖收集的核心,它的定义在 src/core ...

  10. [bzoj] 1176 Mokia || CDQ分治

    原题 给出W×W的矩阵(S没有用,题目有误),给出无限次操作,每次操作的含义为: 输入1:你需要把(x,y)(第x行第y列)的格子权值增加a 输入2:你需要求出以左下角为(x1,y1),右上角为(x2 ...