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

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


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

图1.17　绘制背景和跑步小人


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


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


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



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

《HTML5 2D游戏编程核心技术》——第1章，第1.5节开始Snail Bait游戏编程相关推荐

  1. 《HTML5 2D游戏编程核心技术》——第1章，第1.1节Snail Bait游戏

    本节书摘来自华章出版社<HTML5 2D游戏编程核心技术>一书中的第1章,第1.1节,作者［美］ 戴维·吉尔里,更多章节内容可以访问云栖社区"华章计算机"公众号查看. ...

  2. core组件进阶（Opencv3编程入门 第五章） 第四节 图像对比度亮度调整

    core组件进阶(Opencv3编程入门 第五章) 第四节 图像对比度亮度调整 #include <opencv2/core/core.hpp> #include <opencv2/ ...

  3. java第五章 多线程_java多线程编程核心技术——第五章总结

    定时器Timer的使用 在JDK中Timer类主要负责计划任务的功能,也就是在指定的时间开始执行某一个任务. Timer类的主要作用是设置计划任务,但封装任务的类却是TimerTask类. 执行计划任 ...

  4. python趣味编程_第6章 旋转的方块（《Python趣味创意编程》教学视频）

    本章我们将实现旋转的方块,如图所示.首先实现方块的绘制,学习坐标系的平移.旋转与缩放:接着实现一行方块的绘制,学习坐标系的保存与恢复:然后利用循环嵌套实现方块阵列的绘制:最后学习中文字符串的处理,实现 ...

  5. 《HTML5 2D游戏编程核心技术》——第1章，第1.3节特别功能

    本节书摘来自华章出版社<HTML5 2D游戏编程核心技术>一书中的第1章,第1.3节特别功能,作者［美］ 戴维·吉尔里,更多章节内容可以访问云栖社区"华章计算机"公众号 ...

  6. 《HTML5 2D游戏编程核心技术》——第2章，第2.3节使用CSS背景

    **本节书摘来自华章出版社<HTML5 2D游戏编程核心技术>一书中的第2章,第2.3节,作者［美］ 戴维·吉尔里,更多章节内容可以访问云栖社区"华章计算机"公众号查看 ...

  7. 第二章　Qt编程核心技术

    QT编程核心技术介绍 第二章 Qt编程核心技术 Qt/X11与Qt/Embedded版本的Qt类库,尽管类的底层实现有一些细微区别,但类的声明及方法函数是一样的,对于编写Qt应用程序的编程者来说,几乎 ...

  8. 《HTML5 2D游戏编程核心技术》——第1章，第1.8节练习

    本节书摘来自华章出版社<HTML5 2D游戏编程核心技术>一书中的第1章,第1.8节练习,作者［美］ 戴维·吉尔里,更多章节内容可以访问云栖社区"华章计算机"公众号查看 ...

  9. 《HTML5游戏编程核心技术与实战》——第1章　游戏和HTML5初探1.1 网页游戏和HTML5...

    本节书摘来自异步社区<HTML5游戏编程核心技术与实战>一书中的第1章,第1.1节,作者: 向峰 更多章节内容可以访问云栖社区"异步社区"公众号查看. 第1章 游戏和H ...

最新文章

  1. shell 下的运算表达
  2. 信息系统项目管理知识--项目配置管理
  3. 密码学之hill密码
  4. eclipe安装中文语言包 CDT Pydev
  5. 统一建模语言UML轻松入门（1）――基本概念
  6. python loop until_python3-asyncio 学习笔记 3 -- run_until_complete
  7. matlab 可视化 —— imagesc、
  8. 请大家一起呼吁媒体不要进行幸还者回忆性采访
  9. 2020长安杯网站重构
  10. 三维激光扫描后处理软件_青出于蓝 尽锋芒——非白三维发布蓝激光手持三维扫描仪...
  11. Linux下文件压缩、打包，看这一篇就够了
  12. ActivityScenario启动失败Activity never becomes requested state [RESUMED, STARTED, CREATED, DESTROYED]
  13. python 程序员专属情话_拿来就能用！Python 每天定时发送一句情话 | 原力计划
  14. mac双系统装mysql启动不了了_详解ubuntu双系统启动时卡死解决办法
  15. postgres 通过zhparser实现全文搜索功能
  16. POI-----POI操作Excel-7、打印区域
  17. C语言技巧：有if时使用likely和unlikely让代码运行更快
  18. 网络的可靠性是设计出来的
  19. appium测试Cannot start the ‘XXX‘ application报错，无法打开app
  20. JAVA中REPLACE和REPLACEALL的区别（转）

热门文章

  1. 博客2.0时代——读者的赞赏，才是原创的动力
  2. js距离单位换算_JS数据容量单位转换(kb,mb,gb,tb)
  3. 以实验理解交换机原理
  4. 神奇玻璃制品：鲁珀特之泪
  5. 什么是CUDA和CUDNN？——GeForce NVIDIA显卡用于深度学习计算的GPU加速工具
  6. SharePoint 2013 Search KQL 介绍及实例分析
  7. 【Pyecharts50例】日历图/自定义日历图样式/CalendarOpts
  8. 计算机教室与黑板距离,教室灯具布置怎么做比较合理？
  9. 金蝶软件系统管理与维护常见问题
  10. java提取姓名_UDF-java获取名字中的姓