html5教程-html5游戏开发--"动静"结合用地图块拼成大地图 & 初探lufyl
脚本宝典收集整理的这篇文章主要介绍了html5教程-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";
mapimg.onload = function(){
context.fillRect(0, 0, 416, 416);
//画一个长416，宽416的矩形
for(i = 0; i < 13; i++){
for(j = 0; j < 13; j++){
drawTile(i*32, j*32, map[j]);
}
}
//循环调用绘制地图的函数，直到画完为止
}
}
function drawTile(x, y, tyPE){
var canvas = document.getElementById("map");
var context = canvas.getContext("2d");
context.drawImage(mapimg, type*32, 0, 32, 32, x, y, 32, 32);
}
//画地图的函数
html里很少的几行代码：
<!DOCTYPE html>
<html>
<head>
<tITle>html5 map</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<script type="text/JAVAscript" src="./map.js"></script>
</head>
<body>
<canvas id="map" width="415px" height="415px" style="border: 1px solid gray;"></canvas>
</body>
</html>
现在的形式相当于我说了一句莫名其妙的英语，而我接下来就要自说自译。首先html里的代码等于我说了一句连农村人都懂的“hello”，因此不解释。当然不排除有些朋友是无意间中计被迫到这里来看的，如果这类朋友对此感兴趣但有看不懂的话，在下也不妨给你们提供一些服务：
1.上面有详细的编程介绍
2.Foreign friends： The above detailed introduction of the PRogramming
P.S.在下并非是来打广告的，纯属真心想帮助大家。
进入正题，话虽扯到一边，但我想一些苦苦求学的同学依然在留恋那些代码。那么不消耗大家的兴趣，接下来就要让我来用我那"九"寸不烂之舌向大家倾述这些代码的意义。
Frist,我定义了两个用来确定地图块在地图数组所对应的变量j和i，这句话说得很模糊，大家看到最后便会懂得。如下：
var i;
var j;Then,我用window.onload对画地图函数进行调用。这里不多说，因为最主要不是这个。如下：
window.onload = function (){
gamemap();
}Next,就是我们建立的用来装图片的mapimg和地图数组了。地图数组中，0,1,2,3分别代表不同的图片样式，但其实，用到的就只有一张图，这张图就是我们做好事不留名的map.png，在后面的讲解中，大家会明白这是如何办的。如下代码：
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],
];
//创建构成地图的二维数组
现在貌似已经准备齐全，但缺少核心部分，因此我用了gamemap()的方法配合drawTile()方法一起用。那么再现一下核心内容：function gamemap(){
var canvas = document.getElementById("map");
var context = canvas.getContext("2d");
mapimg.src = "./image/map.png";
mapimg.onload = function(){
context.fillRect(0, 0, 416, 416);
//画一个长416，宽416的矩形
for(i = 0; i < 13; i++){
for(j = 0; j < 13; j++){
drawTile(i*32, j*32, map[j]);
}
}
//循环调用绘制地图的函数，直到画完为止
}
}
function drawTile(x, y, type){
var canvas = document.getElementById("map");
var context = canvas.getContext("2d");
context.drawImage(mapimg, type*32, 0, 32, 32, x, y, 32, 32);
}
//画地图的函数
首先在gamemap()中在下取出<body>里的<canvas>的id，然后用Mapimg.src="";定义了要显示的图片，具体用canvas显示图片可以去w3cschool上看看，或者去我上一篇看看，这里不多说了。然后进行绘画。首先我画了一个矩形，看注释就知道。然后进入我最爱的循环for。因为要画13*13的地图，所以要循环十三次，然后在循环里再进行循环，使i和j遍历数组map，当i的值为0时，j对应的值如下：
循环次数 i的值 j的值
1 0 0
2 0 1
3 0 2
4 0 4
5 0 5
6 0 6
7 0 7
8 0 8
9 0 9
10 0 10
11 0 11
12 0 12
13 0 13
由此可见，当i为0时，也就是说遍历二维数组map第一行，然后进入j的循环，从而把第一行遍历所有数据都读完。当i为2使，就是说遍历二维数组map第二行，然后又进入j的循环，从而把第二行遍历所有数据都读完。由此类推，整个二维数组map就被读完了。然后每当j变一次，就调用drawTile()并给他的参数赋值，再在drawTile()中进行绘制，从而达到画出地图的效果。
那么在drawTile中，我们做了什么处理呢？首先我们同样是取出id，这样可以方便绘制，然后用html5中drawImage()的方法，进行绘制。那么drawImage()怎么用呢？
看看w3cschool上的介绍吧，底下是几张截图
语法drawImage(image, x, y)
drawImage(image, x, y, width, height)
drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight,
destX, destY, destWidth, destHeight)
参数描述
image
所要绘制的图像。
这必须是表示 <img> 标记或者屏幕外图像的 Image 对象，或者是 Canvas 元素。
x, y要绘制的图像的左上角的位置。
width, height图像所应该绘制的尺寸。指定这些参数使得图像可以缩放。
sourceX, sourceY图像将要被绘制的区域的左上角。这些整数参数用图像像素来度量。
sourceWidth, sourceHeight图像所要绘制区域的大小，用图像像素表示。
destX, destY所要绘制的图像区域的左上角的画布坐标。
destWidth, destHeight图像区域所要绘制的画布大小。
看了介绍，相信大家对它有了了解，那么我就不解释了。当drawTile()的参数被赋值完成时，就会按照要求画出地图。由于没个地图块大小为32，所以大家可以看到很多32，哈哈。恐怕大家早就看得不赖烦了，因为这些对于大伙很简单，我还没讲，我相信大家早就明白了。至于代码下载，这次暂时没有，我最近越来越懒了。。。代码不多，大家就小心翼翼的复制粘贴吧。。。
本次教程将向大家讲解如何用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";
mapimg.onload = function(){
context.fillRect(0, 0, 416, 416);
//画一个长416，宽416的矩形
for(i = 0; i < 13; i++){
for(j = 0; j < 13; j++){
drawTile(i*32, j*32, map[j]);
}
}
//循环调用绘制地图的函数，直到画完为止
}
}
function drawTile(x, y, type){
var canvas = document.getElementById("map");
var context = canvas.getContext("2d");
context.drawImage(mapimg, type*32, 0, 32, 32, x, y, 32, 32);
}
//画地图的函数
html里很少的几行代码：
<!DOCTYPE html>
<html>
<head>
<title>html5 map</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<script type="text/JAVAscript" src="./map.js"></script>
</head>
<body>
<canvas id="map" width="415px" height="415px" style="border: 1px solid gray;"></canvas>
</body>
</html>
现在的形式相当于我说了一句莫名其妙的英语，而我接下来就要自说自译。首先html里的代码等于我说了一句连农村人都懂的“hello”，因此不解释。当然不排除有些朋友是无意间中计被迫到这里来看的，如果这类朋友对此感兴趣但有看不懂的话，在下也不妨给你们提供一些服务：
1.上面有详细的编程介绍
2.Foreign friends： The above detailed introduction of the programming
P.S.在下并非是来打广告的，纯属真心想帮助大家。
进入正题，话虽扯到一边，但我想一些苦苦求学的同学依然在留恋那些代码。那么不消耗大家的兴趣，接下来就要让我来用我那"九"寸不烂之舌向大家倾述这些代码的意义。
Frist,我定义了两个用来确定地图块在地图数组所对应的变量j和i，这句话说得很模糊，大家看到最后便会懂得。如下：
var i;
var j;Then,我用window.onload对画地图函数进行调用。这里不多说，因为最主要不是这个。如下：
window.onload = function (){
gamemap();
}Next,就是我们建立的用来装图片的mapimg和地图数组了。地图数组中，0,1,2,3分别代表不同的图片样式，但其实，用到的就只有一张图，这张图就是我们做好事不留名的map.png，在后面的讲解中，大家会明白这是如何办的。如下代码：
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],
];
//创建构成地图的二维数组
现在貌似已经准备齐全，但缺少核心部分，因此我用了gamemap()的方法配合drawTile()方法一起用。那么再现一下核心内容：function gamemap(){
var canvas = document.getElementById("map");
var context = canvas.getContext("2d");
mapimg.src = "./image/map.png";
mapimg.onload = function(){
context.fillRect(0, 0, 416, 416);
//画一个长416，宽416的矩形
for(i = 0; i < 13; i++){
for(j = 0; j < 13; j++){
drawTile(i*32, j*32, map[j]);
}
}
//循环调用绘制地图的函数，直到画完为止
}
}
function drawTile(x, y, type){
var canvas = document.getElementById("map");
var context = canvas.getContext("2d");
context.drawImage(mapimg, type*32, 0, 32, 32, x, y, 32, 32);
}
//画地图的函数
首先在gamemap()中在下取出<body>里的<canvas>的id，然后用mapimg.src="";定义了要显示的图片，具体用canvas显示图片可以去w3cschool上看看，或者去我上一篇看看，这里不多说了。然后进行绘画。首先我画了一个矩形，看注释就知道。然后进入我最爱的循环for。因为要画13*13的地图，所以要循环十三次，然后在循环里再进行循环，使i和j遍历数组map，当i的值为0时，j对应的值如下：
循环次数 i的值 j的值
1 0 0
2 0 1
3 0 2
4 0 4
5 0 5
6 0 6
7 0 7
8 0 8
9 0 9
10 0 10
11 0 11
12 0 12
13 0 13
由此可见，当i为0时，也就是说遍历二维数组map第一行，然后进入j的循环，从而把第一行遍历所有数据都读完。当i为2使，就是说遍历二维数组map第二行，然后又进入j的循环，从而把第二行遍历所有数据都读完。由此类推，整个二维数组map就被读完了。然后每当j变一次，就调用drawTile()并给他的参数赋值，再在drawTile()中进行绘制，从而达到画出地图的效果。
那么在drawTile中，我们做了什么处理呢？首先我们同样是取出id，这样可以方便绘制，然后用html5中drawImage()的方法，进行绘制。那么drawImage()怎么用呢？
看看w3cschool上的介绍吧，底下是几张截图
语法drawImage(image, x, y)
drawImage(image, x, y, width, height)
drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight,
destX, destY, destWidth, destHeight)
参数描述
image
所要绘制的图像。
这必须是表示 <img> 标记或者屏幕外图像的 Image 对象，或者是 Canvas 元素。
x, y要绘制的图像的左上角的位置。
width, height图像所应该绘制的尺寸。指定这些参数使得图像可以缩放。
sourceX, sourceY图像将要被绘制的区域的左上角。这些整数参数用图像像素来度量。
sourceWidth, sourceHeight图像所要绘制区域的大小，用图像像素表示。
destX, destY所要绘制的图像区域的左上角的画布坐标。
destWidth, destHeight图像区域所要绘制的画布大小。
看了介绍，相信大家对它有了了解，那么我就不解释了。当drawTile()的参数被赋值完成时，就会按照要求画出地图。由于没个地图块大小为32，所以大家可以看到很多32，哈哈。恐怕大家早就看得不赖烦了，因为这些对于大伙很简单，我还没讲，我相信大家早就明白了。至于代码下载，这次暂时没有，我最近越来越懒了。。。代码不多，大家就小心翼翼的复制粘贴吧。。。
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！
脚本宝典总结
以上是脚本宝典为你收集整理的html5教程-html5游戏开发--"动静"结合用地图块拼成大地图 & 初探lufyl全部内容，希望文章能够帮你解决html5教程-html5游戏开发--"动静"结合用地图块拼成大地图 & 初探lufyl所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
- 关于移动端h5开发相关内容总结 2022-05-17
- html5教程-学表单的第二天 2018-12-10
- html5教程-HTML5浏览器支持 2018-12-10
- html5教程-HTML5智能表单 2018-12-10
- html5教程-微信H5使用resLoader实现加载页效果 2018-12-10
- html5教程-day01-初级-JS0-热身运动、JS入门教程 2018-12-10
- html5教程-html5shiv.js和respond.min.js 2018-12-10
- html5教程-不同浏览器对于html5 audio标签和音频格式的兼容性 2018-12-10
- html5教程-使用Html5实现手风琴案例 2018-12-10
- html5教程-html5笔记 2018-12-10