前言
上文我们进行了初步的高层设计，现在我们将实现图片预加载和显示地图的功能需求。本文开始我采用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开发并实现预加载图片，需要先写测试用例。
这里先简单介绍下测试驱动开发的步骤：
写一个测试用例，验证行为
运行测试，检查测试用例本身是否有错误（测试是否按自己所期望的方式失败）。
写实现代码，使得测试通过
重构代码
运行测试，使得测试通过
以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索开发
， 图片
， 地图
， 测试
， 地图开发
， 重构
， 图片显示不完全
， 进度
， 预加载
， 显示加载中
， 不显示本地图片
， 预加载图片
， 类加载过程
图片预加载
游戏开发过程、大型游戏开发过程、百度地图游戏开发、游戏开发的过程、独立游戏的开发过程，以便于您获取更多的相关知识。