一、前言
  本次教程将向大家讲解如何用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.中文的朋友请看：http://www.shengshiyouxi.com/，上面有详细的编程介绍

2.Foreign friends：  游戏论坛：http://www.jiushun8.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]);
   }
  }
  //循环调用绘制地图的函数，直到画完为止
}
}

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，哈哈。恐怕大家早就看得不赖烦了，因为这些对于大伙很简单，我还没讲，我相信大家早就明白了。至于代码下载，这次暂时没有，我最近越来越懒了。。。代码不多，大家就小心翼翼的复制粘贴吧。。。
  运行效果：

r_html5map.png (17.91 KB, 下载次数: 1)

下载附件

2013-5-8 10:20 上传

 

那么我们接下来就来研究研究程序大师张路斌的html5开源引擎——lufylegend.js。
  
三、lufylegend.js的使用
  首先我引用官方的介绍作为开篇：lufylegend是一个HTML5开源引擎， 它实现了利用仿ActionScript3.0的语法进行HTML5的开发，包含了LSprite，LBitmapData，LBitmap，LLoader，LURLLoader，LTextField，LEvent等多个AS开发人员熟悉的类，

html5游戏开发--"动静"结合用地图块拼成大地图 & 初探lufyl的更多相关文章

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

    一.前言 本次教程将向大家讲解如何用HTML5将小地图块拼成大地图,以及如何用现有的高级html5游戏开发库件lufylegend.js开发游戏. 首先让我们来了解了解如何用html5实现动画,毕竟“ ...

  2. HTML5游戏开发进阶指南（亚马逊5星畅销书，教你用HTML5和JavaScript构建游戏！）

    HTML5游戏开发进阶指南(亚马逊星畅销书,教你用HTML5和JavaScript构建游戏!) [印]香卡(Shankar,A.R.)著 谢光磊译 ISBN 978-7-121-21226-0 201 ...

  3. HTML5游戏开发进阶指南

    <HTML5游戏开发进阶指南> 基本信息 作者: (印)香卡(Shankar,A.R.)    译者: 谢光磊 出版社:电子工业出版社 ISBN:9787121212260 上架时间:20 ...

  4. Html5游戏开发-145行代码完成一个RPG小Demo

    lufy前辈写过<[代码艺术]17行代码的贪吃蛇小游戏>一文,忽悠了不少求知的兄弟进去阅读,阅读量当然是相当的大.今天我不仿也搞一个这样的教程,目地不在于忽悠人,而在于帮助他人. 先看de ...

  5. HTML5游戏开发系列教程6(译)

    原文地址:http://www.script-tutorials.com/html5-game-development-lesson-6/ 这是我们最新一篇HTML5游戏开发系列文章.我们将继续使用c ...

  6. HTML5游戏开发进阶指南 中文pdf扫描版​

    HTML5游戏开发进阶指南介绍了HTML5游戏开发的一般过程和技巧.全书共分12章,第1章介绍了本书相关的HTML5的诸多新特性,包括在canvas上绘图.播放声音等,另外还引入了子画面页的概念:第2 ...

  7. CutJS – 用于 HTML5 游戏开发的 2D 渲染引擎

    CutJS 是轻量级的,快速的,基于 Canvas 开发的 HTML5  2D 渲染引擎,可以用于游戏开发.它是开源的,跨平台的,与现代的浏览器和移动设备兼容.CutJS 提供了一个类似 DOM 树的 ...

  8. 优秀工具推荐：两款很棒的 HTML5 游戏开发工具

    HTML5 众多强大特性让我们不需要多么高深技术就能创建好玩的网页游戏,同时证明了开放的 Web 技术能与任何其他在游戏开发中使用的技术竞争.正如标题所说,这篇文章推荐的几款很棒 HTML5 游戏开发 ...

  9. HTML5游戏开发引擎,初识CreateJS

    CreateJS为CreateJS库,可以说是一款为HTML5游戏开发的引擎.打造 HTML5 游戏,构建新游戏,提供构建最新 HTML5 的技术.你可以通过这个网站学习如何构建跨平台和跨终端游戏.这 ...

随机推荐

  1. JQuery隔行变色

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  2. PHP学习笔记10-图片加水印

    先找好一张图片,更名为face.jpeg,创建watermark.php: <?php /** * Created by PhpStorm. * User: Administrator * Da ...

  3. [LeetCode]题解（python）：015-3Sum

    题目来源: https://leetcode.com/problems/3sum/ 题意分析: 这道题目是输入一个数组nums.找出所有的3个数使得这3个数之和为0.要求1.输出的3个数按小到大排序, ...

  4. python3.4.3如何获取文件的路径

    #coding:utf-8from tkinter import *from tkinter import filedialogroot = Tk()root.filename = filedialo ...

  5. hibernate Criteria查询 2.3

    Criteria对象提供了一种面向对象的方式查询数据库.Criteria对象需要使用Session对象来获得一个Criteria对象表示对一个持久化类的查询 查询所有 Session session ...

  6. DIOR HOMME_百度百科

    DIOR HOMME_百度百科     DIOR HOMME    编辑    Dior Homme 男装品牌,中文名迪奥·桀傲,由迪奥 (Dior) 在2001年更名更来,品牌来源地法国.迪奥·桀傲 ...

  7. .NET通用权限系统快速开发框架源代码

    有兴趣的朋友欢迎加群讨论:312677516 一.开发技术:B/S(.NET C# ) 1.Windows XP以上 (支援最新Win 8) 2.Microsoft Visual Studio 201 ...

  8. onmouseover和onmouseout的烦恼

    一个DIV层,当鼠标移进的时候会触发onmouseover,移出的时候会触发onmouseout.   非常easy的逻辑,这也是我们想要的!但随之烦恼也就来了:onmouseover并不会仅仅在移进 ...

  9. linux脚本：ftp自动传输文件

    使用Shell脚本实现ftp的自动上传下载 http://liwenge.iteye.com/blog/566515 open 192.168.1.171 user guest 123456cd /h ...

  10. [Swust OJ 465]--吴奶奶买鱼(0-1背包+dfs)

    题目链接:http://acm.swust.edu.cn/problem/465/ 还有一道题只是描述不一样,方法一模一样(http://acm.swust.edu.cn/problem/644/) ...