炸弹人游戏开发过程（3） 显示地图2014-10-17 cnblogs 码农终结者前言上文我们进行了初步的高层设计，现在我们将实现图片预加载和显示地图的功能需求。本文开始我采用TDD开发，大家可以看到在实现的过程中我们会修改设计，修改设计后又会修改对应的实现代码，这是一个不断迭代的过程。在有测试套件的保护下，我们可以放心地重构。本文目的掌握地图绘制的技术。回顾上文与显示地图相关的领域模型
开发策略使用我的控件YPreLoadImg来实现图片预加载，结合progressBar插件，能够显示出加载进度条。只建一个ShowMap类，用这个类来进行实验，找到显示地图的方法，然后在重构的时候再分离出Main类和MapData数据类。原因因为我对canvas很不熟悉，需要先集中精力熟悉canvas的使用，而不是把精力放在架构设计上。因为我是采用TDD开发，因此可以安全地进行重构。可以在实现“显示地图”功能后，再在重构时提炼出Main和MapData类。开发策略也是迭代修正的开发策略只是就当前的知识指定的大概计划，会随着开发的进行而进行细化和修正。如现在的开发策略并没有考虑到在重构时会增加Game类。预加载图片预加载的目的将图片下载到本地内存中。为什么要预加载必须等到图片完全加载后才能使用canvas对图片进行操作。如果试图在图片未完全加载之前就将其呈现到canvas上，那么canvas将不会显示任何图片。如果不使用预加载，则在使用图片之前需要先下载图片到本地。即使有浏览器优化，第一次使用图片时也需要先下载图片，这样在第一次使用图片时，会有卡的感觉。因此，在游戏开始之前，先要进行游戏初始化，预加载游戏所需的图片。如何进行预加载基本示例：
var img = new Image（）;//创建一个图片对象img.src = "test.png"; //下载该路径的图片 img.onload = function （） { //图片下载完毕时异步调用callback函数。 callback（img）; };预加载网上教程js图片预加载js 实现图片预加载浏览器重图片的预加载问题onload事件显示进度条YPreLoadImg控件结合进度条插件progressbar，可以显示出进度条。新增ShowMap类并实现预加载图片新增ShowMap类，使用TDD开发并实现预加载图片，需要先写测试用例。这里先简单介绍下测试驱动开发的步骤：写一个测试用例，验证行为运行测试，检查测试用例本身是否有错误（测试是否按自己所期望的方式失败）。写实现代码，使得测试通过重构代码运行测试，使得测试通过URL：http://www.bianceng.cn/Programming/project/201410/45931.htm
易网时代-编程资源站