html5游戏开发--"动静"结合(二)-用地图块拼成大地图 & 初探lufyl

一、前言   本次教程将向大家讲解如何用html5将小地图块拼成大地图，以及如何用现有的高级html5游戏开发库件lufylegend.js开发游戏。   首先让我们来了解了解如何用html5实现动画，毕竟“动静结合”是先有动再有静。看了上一章的内容，或许你就有了对html5实现动画有了初步了解：      二、html5实现用小地图块拼成大地图      早在上一章以前我就向大家介绍过，许多游戏的地图是用小地图块拼成的。那么既然那些游戏能通过AS或者其他编程语言实现，那我们的html5也丝毫不逊色于它们。接下来就是今天我要为大家准备的图片：    map.png 这张图片具体来自哪里我不太清楚，不过它是为我们来服务的，做好事不留名的，因此暂且将他的来源放在一边，我们只用知道它叫map.png就OK;   光有图还不行，得来点代码。   map.js里的几行代码： var i; var j; window.onload = function (){ gamemap(); } var mapimg = new Image(); var map = [ [2,2,3,3,0,0,2,2,2,3,3,3,2], [2,0,3,3,0,0,0,0,0,0,0,0,0], [2,0,0,0,0,0,0,0,0,0,0,0,2], [2,0,0,0,0,0,0,0,0,0,3,0,2],  [1,3,0,0,0,0,0,0,0,0,2,0,2], [1,3,0,0,0,0,2,2,3,3,2,0,2], [2,1,1,1,0,0,0,0,0,0,0,0,3], [2,1,1,1,0,0,0,0,0,0,0,0,3], [0,0,0,1,0,0,1,1,2,2,3,0,0], [2,0,0,1,0,0,0,0,0,0,0,0,0], [3,0,0,1,1,1,0,0,1,1,1,0,1], [3,0,0,0,0,0,0,0,0,0,0,0,1], [2,2,2,2,2,3,3,3,0,0,1,1,1], ]; //创建构成地图的二维数组 function gamemap(){ var canvas = document.getElementById("map"); var context = canvas.getContext("2d"); mapimg.src = "./image/map.png";