本文摘自PHP中文网,作者黄舟,侵删。
在阅读一本HTML5游戏开发相关书籍时发现一个很好的例子,通过这个例子可以对面向对象的开发进行更深入的理解。这个对象要实现的是:将一个CSS sprite中的图像绘制到canvas中。首先创建一个SpriteSheet对象,代码如下:1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
首先使用了new function(){},保证了只会有一个实例被创建。
接下来对象内部,通过this为其绑定了两个方法和一个属性。load方法起到加载image的作用,传递两个参数,第一个参数是图像信息,即要绘制的图像在sprite中的位置大小以及在画布上的位置大小。注意callback的用法,这里面的this.image.onload = callbak;当图像加载完成后执行传入的回调函数。
draw方法用来进行图像的绘制,传入canvas的上下文环境,需要绘制的图像对象信息以及图像位置。
这个对象的逻辑构造相对复杂,基本的思路就是自定义load方法,通过load方法完成图像信息的加载。这里的图像信息指的是图像在sprite中的位置、大小等。
使用该对象的方法代码如下:
1 2 3 4 5 6 7 8 9 |
|
这里使用load方法,首先传入所需切图部分的相关数据,接下来在回调函数中调用对象的draw方法进行图像绘制。
以上就是HTML5面向对象的游戏开发简单实例分享的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
exports和module.expors之间有什么区别及联系?
更多相关阅读请进入《HTML5》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者