《HTML5 2D游戏编程核心技术》——第1章,第1.5节开始Snail Bait游戏编程-阿里云开发者社区

开发者社区> 华章出版社> 正文
登录阅读全文

《HTML5 2D游戏编程核心技术》——第1章,第1.5节开始Snail Bait游戏编程

简介: 1.5 开始Snail Bait游戏编程 图1.16显示了Snail Bait游戏的初始文件集合。在本书中,我们将逐步增加更多的文件。但是现在,我们需要一个HTML文件来定义游戏中HTML元素的结构;一个CSS文件来定义这些元素的可见属性;一个JavaScript文件来定义游戏的逻辑;以及两张图像,一个作为背景,一个作为跑步小人。

1.5 开始Snail Bait游戏编程
图1.16显示了Snail Bait游戏的初始文件集合。在本书中,我们将逐步增加更多的文件。但是现在,我们需要一个HTML文件来定义游戏中HTML元素的结构;一个CSS文件来定义这些元素的可见属性;一个JavaScript文件来定义游戏的逻辑;以及两张图像,一个作为背景,一个作为跑步小人。

图1.16 Snail Bait游戏的初始文件集合


237005386c79d3cfbb305662b5ce84d2eb21ed7e

图1.17显示了游戏的开始时间点,只绘制出了背景和跑步小人。开始时,跑步小人并不是一个sprite对象,而是直接绘制出来的。

图1.17 绘制背景和跑步小人


d0aca8293e3c9ef69041a19bb42212bb3a408201

程序清单1.3列出了游戏开始时的HTML代码,但仅是程序清单1.2的简化版本。
程序清单1.3 Snail Bait游戏开始时的HTML代码


f3ce237717b84f26fd0a1198d6de2124b961160b

初始化时,arena仅仅包含800像素宽,400像素高的游戏canvas,而且有一个细的蓝色边框。程序清单1.4显示了开始阶段Snail Bait游戏的CSS代码。
程序清单1.4 Snail Bait游戏开始时的CSS代码


0ab1d94753eb0735150798a2c45ca3e66e4f647a

程序清单1.5显示了开始阶段Snail Bait游戏的JavaScript代码。
程序清单1.5 Snail Bait游戏开始时的JavaScript代码


71fc9d6d9b3fad220a05e33e8b3d6a02597a0113


7a7716b6837e7b92d31445ad5ae22619a4fbf08e

前面提到的JavaScript会访问canvas元素,然后获得一个canvas 2D环境的指针。代码通过使用3参数变量的drawImage()函数,画出背景和跑步小人,canvas中图像的位置是确定的。
背景图像加载完成时,游戏开始。现在,启动游戏仅仅是简单地完成绘制背景和跑步小人。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:

华章出版社

官方博客
官网链接