今天第一次做移动端地图游戏，游戏虽简，获益匪浅。
以前没做过地图游戏，一直不懂怎么构造地图和检测路径，我想这就是做web地图游戏的关键吧。慢慢地有了思路，有了常用方案，那么就算换了一个很复杂的图也不怕实现不了了。不过web app一直离不开性能问题，尤其在移动端。假如使用标签元素来构图的话（像本例），当操作的数量达到一定后，流畅度就好大打折扣。因为web app一般是无法得到硬件加速的，所以性能远不如native app。除非开启3D加速（GPU），如移动大图时使用translate3D，否则就会有明显的卡顿感。
还好，由于本例只用了几百个块，操作简单，所以暂时不会有卡顿感。下面我就分部讲讲如何实现一个web地图小游戏吧，有了这个基础，就算换上复杂的图也知道怎么实现了。
1、建图拿数据
首先介绍一款软件——Tiled Map Editor，这是一个地图编辑器工具，它可以辅助我们更快更准确地编辑web游戏地图。具体的操作我就不讲了，可以自行百度教程。
下载地址：http://www.mapeditor.org/
打开Tiled—>创建新图—>划分块大小与数量—>添加图块—>利用图块拼图—>导出JS文件
打开导出的js文件，我们可以看到很代码和参数，我这里就只需要layouts里面的data数组。它是地图小块的标注，0表示没图，其他数字表示相对应的图。
2、编写界面
（1）首先创建一个外部包裹容器wrap，宽高100%等于可视区域大小。设置超出隐藏，相对定位于body，根据情况设置背景；
（2）接着创建地图容器map，设置绝对定位，宽高等于地图大小，如3200X640px；
（3）然后创建地图小块，绝对定位，固定大小，如32X32px；
（4）最后编写其他样式，如移动块、按钮与加载等。
HTML&CSS代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 6 <title>迷宫游戏</title> 7 <style type="text/css"> 8 body,h1,h2,h3,h4,p,dl,dd,ul,ol,form,input,textarea,th,td,select{margin: 0;padding: 0;} 9 em{font-style: normal;} 10 li{list-style: none;} 11 a{text-decoration: none;} 12 img{border: none;vertical-align: top;margin: 0;} 13 table{border-collapse: collapse;} 14 input,textarea{outline: none;} 15 textarea{resize:none;overflow: auto;} 16 body{font-size:12px;font-family: arial;} 17 18 html,body,#wrap{ 19 height: 100%; 20 width: 100%; 21 } 22 #loading{ 23 position: absolute; 24 width: 32px; 25 height: 32px; 26 top: 50%; 27 left: 50%; 28 margin-left: -16px; 29 margin-top: -16px; 30 background: url(img/loading.gif) no-repeat; 31 z-index: 100; 32 } 33 #wrap{ 34 overflow: hidden; 35 position: relative; 36 background: url(img/bg.jpg) no-repeat; 37 z-index: 1; 38 } 39 #map{ 40 position: absolute; 41 left: 0; 42 top: 0; 43 width: 3200px; 44 height: 640px; 45 } 46 .wall{ 47 position: absolute; 48 width: 32px; 49 height: 32px; 50 background: url(img/stick.png) no-repeat; 51 } 52 #move{ 53 width: 96px; 54 height: 96px; 55 position: absolute; 56 background: url(img/dog.png) no-repeat; 57 top: 96px; 58 left: 64px; 59 } 60 #timer{ 61 height: 32px; 62 width: 30%; 63 position: absolute; 64 top: 0; 65 right: 0; 66 color: #bdb632; 67 font-size: 1em; 68 line-height: 32px; 69 } 70 .treasure{ 71 width: 96px; 72 height: 96px; 73 background: url(img/treasure.png) no-repeat; 74 position: absolute; 75 } 76 #start{ 77 display: none; 78 position: absolute; 79 width: 30%; 80 height: 32px; 81 color: #BDB632; 82 font-size: 1.5em; 83 text-align: center; 84 line-height: 32px; 85 left: 35%; 86 top: 50%; 87 margin-top: -17px; 88 border: #BDB632 1px solid; 89 z-index: 80; 90 } 91 #end{ 92 display: none; 93 position: absolute; 94 width: 40%; 95 height: 10%; 96 font-size: 2em; 97 left: 30%; 98 top: 40%; 99 text-align: center; 100 line-height: 2; 101 color: #BDB632; 102 font-weight: bold; 103 z-index: 50; 104 } 105 #cover{ 106 /*display: none;*/ 107 position: fixed; 108 left: 0; 109 width: 100%; 110 height: 100%; 111 background: #000; 112 -webkit-opacity: 0.6; 113 opacity: 0.6; 114 z-index: 10; 115 } 116 </style> 117 <script src="js/touch.js" type="text/javascript" charset="utf-8"></script> 118 </head> 119 <body> 120 <div id="wrap"> 121 <!--地图--> 122 <div id="map"> 123 <div id="move"></div> 124 </div> 125 <!--计时器--> 126 <div id="timer"> 127 <span>剩余时间：</span> 128 <span id="seconds">90</span> 129 <span>S</span> 130 </div> 131 <!--加载中--> 132 <div id="loading"></div> 133 <!--开始--> 134 <div id="start">开始游戏</div> 135 <!--结束--> 136 <div id="end">游戏结束!</div> 137 <!--覆盖层--> 138 <div id="cover"></div> 139 </div> 140 </body> 141 </html>