html5游戏开发--"动静"结合(二)-用地图块拼成大地图 & 初探lufylegend
一、前言
本次教程将向大家讲解如何用HTML5将小地图块拼成大地图,以及如何用现有的高级html5游戏开发库件lufylegend.js开发游戏。
首先让我们来了解了解如何用html5实现动画,毕竟“动静结合”是先有动再有静。看了上一章的内容,或许你就有了对html5实现动画有了初步了解:
html5游戏开发--"动静"结合(一):
http://blog.csdn.NET/yorhomwang/article/details/8301451
二、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][i]);
}
}
//循环调用绘制地图的函数,直到画完为止
}
} 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.中文的朋友请看:http://www.w3school.com.cn/,上面有详细的编程介绍
2.Foreign friends: http://www.w3schools.com/ ,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][i]);
}
}
//循环调用绘制地图的函数,直到画完为止
}
} 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上的介绍吧,底下是几张截图
(来自http://www.w3school.com.cn/htmldom/met_canvasrenderingcontext2d_drawimage.asp)
语法
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开源引擎——lufylegend.js。
三、lufylegend.js的使用
首先我引用官方的介绍作为开篇:lufylegend是一个HTML5开源引擎, 它实现了利用仿ActionScript3.0的语法进行HTML5的开发,包含了LSprite,LBitmapData,LBitmap,LLoader,LURLLoader,LTextField,LEvent等多个AS开发人员熟悉的类, 支持Google Chrome,Firefox,Opera,IE9,iOS,Android等多种热门环境。利用lufylegend可以轻松的使用面向对象编程,并且可以配合Box2dWeb制作物理游戏, 另外它还内置了LTweenLite缓动类等非常实用的功能,现在开始使用它吧,它可以让你更快的进入HTML5的世界!
关注CSDN的朋友不难发现,有一位牛人就在我们身边,他就是张路斌。我第一次看见他的文章是在去年,当我看到他用他的引擎开发愤怒的小鸟时,我别提我对他有多佩服了。后来我进一步了解,开始学习他的html5引擎lufylegend。那么我还是别在这里吹捧作者了,开始进如正题。
- lufylegend下载地址和API介绍:http://lufylegend.com/lufylegend
- 官方博客:http://blog.csdn.net/lufy_legend
- 联系官方:lufy.legend@gmail.com
以下是几个lufylegend的几个例子:
1).lufylegend实现游戏进度条
<!DOCTYPE html>
<html>
<head>
<title>html5 game</title>
<script type="text/javascript" src="./lufylegend-1.5.2.min.js"></script>
<script type="text/javascript" src="./lufylegend-1.5.2.js"></script>
<script>
init(50,"mylegend",800,400,main);
var imgData = [
{name:"山水画",path:"./山水画.jpg"},
{name:"水墨古城",path:"./水墨古城.jpg"},
{name:"水墨画",path:"./水墨画.jpg"},
{name:"夕阳西下",path:"./夕阳西下.jpg"},
{name:"英国小镇",path:"./英国小镇.jpg"},
{name:"中国风的水墨画",path:"./中国风的水墨画.jpg"}
];
//图片path数组 var imglist = {};
//读取完的图片数组 var loadIndex = 0; var loadingLayer;
//建立加载进度层 var loadingText;
//建立loadingText打字区 function main(){
loadingLayer = new LSprite();
addChild(loadingLayer); loadingText = new LTextField();
loadingText.size = 32;
loadingText.font = "Tahoma";
loadingText.color = "dimgray";
loadingText.text = "Loading……";
loadingText.stroke = "ture";
loadingText.lineWidth = 2;
loadingText.x = 320;
loadingText.y = 140; loadingLayer.addChild(loadingText);
//实例化进度条层 loadImage();
//开始读取图片
} var loadingX = 250;
//设定进度条X坐标 var loadingLong = 350;
//设定进度条长度 function loadOver(){
loadingLayer.removeChild(loadingText);
removeChild(loadingLayer);
alert("COMPLETE");
} function loadImage(){
if(loadIndex == imgData.length){
loadingLayer.graphics.drawRect(1,"black",[loadingX, 203, loadingLong*(loadIndex/imgData.length), 24],true,"orange");
setTimeout(function(){loadOver();}, 500);
return;
}
//图片全部读取完成,开始初始化游戏 loader = new LLoader();
loader.addEventListener(LEvent.COMPLETE,loadComplete);
loader.load(imgData[loadIndex].path,"bitmapData");
//开始读取图片
} function loadComplete(event){
loadingLayer.graphics.clear();
loadingLayer.graphics.drawRect(1,"black",[loadingX, 200, loadingLong, 30],true,"white");
loadingLayer.graphics.drawRect(1,"black",[loadingX, 203, loadingLong*(loadIndex/imgData.length), 24],true,"orange");
//进度条显示 imglist[imgData[loadIndex].name] = loader.content;
//储存图片数据 loadIndex++;
loadImage();
//读取下一张图片
}
</script>
</head>
<body>
<div id="mylegend">loading......</div>
</body>
</html>
2)lufylegend实现动画播放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>html5 game</title>
<script type="text/javascript" src="./lufylegend-1.5.2.min.js"></script>
<script type="text/javascript">
init(150,"legend",800,450,main);
var imgData = [
{name:"player",path:"./player.png"}
];
var imglist;
var backLayer,hero;
function main(){
LLoadManage.load(imgData,null,gameInit);
}
function gameInit(result){
imglist = result;
backLayer = new LSprite();
addChild(backLayer);
var list = LGlobal.divideCoordinate(256, 256, 4, 4);
var data = new LBitmapData(imglist["player"],0,0,64,64);
hero = new LAnimation(backLayer,data,list); backLayer.addEventListener(LEvent.ENTER_FRAME,onframe);
}
function onframe(){
hero.onframe();
}
</script>
</head>
<body>
<div id="legend">loading……</div>
</body>
</html>
3)lufylegend实现绘画
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="./lufylegend-1.5.2.min.js"></script>
<script>
init(20,"mylegend",500,400,main);
function main(){
var backLayer = new LSprite();
addChild(backLayer);
backLayer.graphics.drawArc(2,"dimgray",[100,100,50,0,2*Math.PI],true,"lightgray");
backLayer.graphics.drawRect(2,"dimgray",[100,200,50,100],true,"lightgray");
}
</script>
</head>
<body>
<div id="mylegend"></div>
</body>
</html>
html5游戏开发--"动静"结合(二)-用地图块拼成大地图 & 初探lufylegend的更多相关文章
- html5游戏开发--"动静"结合用地图块拼成大地图 & 初探lufyl
一.前言 本次教程将向大家讲解如何用html5将小地图块拼成大地图,以及如何用现有的高级html5游戏开发库件lufylegend.js开发游戏. 首先让我们来了解了解如何用html5实现动画 ...
- HTML5游戏开发进阶指南(亚马逊5星畅销书,教你用HTML5和JavaScript构建游戏!)
HTML5游戏开发进阶指南(亚马逊星畅销书,教你用HTML5和JavaScript构建游戏!) [印]香卡(Shankar,A.R.)著 谢光磊译 ISBN 978-7-121-21226-0 201 ...
- HTML5游戏开发技术基础整理
随着HTML5标准终于敲定.HTML5将有望成为游戏开发领域的的热门平台. HTML5游戏能够执行于包含iPhone系列和iPad系列在内的计算机.智能手机以及平板电脑上,是眼下跨平台应用开发的最佳实 ...
- HTML5游戏开发进阶指南
<HTML5游戏开发进阶指南> 基本信息 作者: (印)香卡(Shankar,A.R.) 译者: 谢光磊 出版社:电子工业出版社 ISBN:9787121212260 上架时间:20 ...
- Html5游戏开发-145行代码完成一个RPG小Demo
lufy前辈写过<[代码艺术]17行代码的贪吃蛇小游戏>一文,忽悠了不少求知的兄弟进去阅读,阅读量当然是相当的大.今天我不仿也搞一个这样的教程,目地不在于忽悠人,而在于帮助他人. 先看de ...
- html5游戏开发-零基础开发《圣诞老人送礼物》小游戏
开言: 以前lufy前辈写过叫“ HTML5游戏开发-零基础开发RPG游戏”的系列文章,在那里面我学习了他的引擎以及了解了游戏脚本.自从看了那几篇文章,我便对游戏开发有了基本的认识.今天我也以零基础为 ...
- HTML5游戏开发系列教程7(译)
原文地址:http://www.script-tutorials.com/html5-game-development-lesson-7/ 今天我们将完成我们第一个完整的游戏--打砖块.这次教程中,将 ...
- HTML5游戏开发系列教程6(译)
原文地址:http://www.script-tutorials.com/html5-game-development-lesson-6/ 这是我们最新一篇HTML5游戏开发系列文章.我们将继续使用c ...
- HTML5游戏开发进阶指南 中文pdf扫描版
HTML5游戏开发进阶指南介绍了HTML5游戏开发的一般过程和技巧.全书共分12章,第1章介绍了本书相关的HTML5的诸多新特性,包括在canvas上绘图.播放声音等,另外还引入了子画面页的概念:第2 ...
随机推荐
- Netty中的那些坑
Netty中的那些坑(上篇) 最近开发了一个纯异步的redis客户端,算是比较深入的使用了一把netty.在使用过程中一边优化,一边解决各种坑.儿这些坑大部分基本上是Netty4对Netty3的改进部 ...
- Hadoop环境搭载
官网安装教程:[http://archive.cloudera.com/cdh5/cdh/5/hadoop-2.6.0-cdh5.13.0/hadoop-project-dist/hadoop-com ...
- 专题实验 Toad 用户的创建与管理( 包括 role 等 )
1. 用户登录数据库 是否可以通过操作系统权限来登录数据库, $ORACLE_HOME/network/admin/sqlnet.ora 这个文件中设置, 如果增加参数sqlnet.authentic ...
- 组合数学 - BZOJ 3997 - TJOI2015
TJOI2015 Problem's Link ---------------------------------------------------------------------------- ...
- EasyUI Ajax 表单
创建form <divstyle="width:230px;background:#E0ECFF;padding:10px;"> <formid=&quo ...
- 阿里云ecs开启x11图形化桌面
阿里云帮助文档:https://www.alibabacloud.com/help/zh/faq-detail/41227.htm 安装云服务器 ECS CentOS 7 图形化桌面 以安装 MATE ...
- matlab判断图像是彩色图还是灰度图
matlab怎样看图像是彩色还是灰度_莹莹_新浪博客 http://blog.sina.com.cn/s/blog_76088a1f0101diq0.html 解决一: isrgb(A) 如果A是RG ...
- JNI 各类数据类型处理
JNI和java数据类型转换: 1.基本数据类型下面一张表是描述了 Java 基本数据类型和JNI中基本数据类型的相对应关系已经占用空间大小. 随便观察就能发现,其实就基本数据类型而已,JNI基本数据 ...
- TreeSet排序,存储自己定义对象,自己定义比較器演示样例
Set:无序.不能够反复元素. |--HashSet:数据结构是哈希表.线程是非同步的. 保证元素唯一性的原理:推断元素的hashCode值是否同样. 假设同样,还会继续推断元素的equals方法.是 ...
- C语言字符串的输入输出
字符串的输出 在C语言中,输出字符串的函数有两个: puts():直接输出字符串,并且只能输出字符串. printf():通过格式控制符 %s 输出字符串.除了字符串,printf() 还能输出其他类 ...