一、前言
  本次教程将向大家讲解如何用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. UVa----------1594（Ducci Sequence）

    题目: 1594 - Ducci Sequence Asia - Seoul - 2009/2010A Ducci sequence is a sequence of n-tuples of inte ...

  2. apt-get 命令详解(中文),以及实例

    apt-get 命令详解(中文),以及实例 一,什么的是apt-get 高级包装工具(英语:Advanced Packaging Tools,简称:APT)是Debian及其衍生发行版(如:ubunt ...

  3. LNMP安装包sh脚本

    Xshell 5 (Build 0719) Copyright (c) 2002-2015 NetSarang Computer, Inc. All rights reserved. Type `he ...

  4. ASP.NET jQuery 随笔 在TextBox里面阻止复制、剪切和粘贴事件

    当用户要输入一些密码.信用卡信息和银行账号等敏感信息,用户更希望手工通过键盘敲入数据,而好过通过剪贴板复制粘贴. 我们先来看下实现后的效果: <%@ Page Language="C# ...

  5. git pull 出错 fatal: Could not read from remote repository.Please make sure you have the correct access rights.and the repository exists.

    Warning: Permanently added the RSA host key for IP address '192.30.252.131' to the list of known hos ...

  6. log4j:ERROR Could not find value for key log4j.appender.error

    我是在rootLogger末尾增加R就好了. 终于我的配置环境例如以下: #设置日志的级别 ,多个以,分开(没有给出的,则不会被输出) log4j.rootLogger=info,error,R #D ...

  7. A - Number Sequence（矩阵快速幂或者找周期）

    Description A number sequence is defined as follows: f(1) = 1, f(2) = 1, f(n) = (A * f(n - 1) + B * ...

  8. 转百度前辈的Trados使用心得

    我用Trados的时间不长,可以说是一个新手.但我在较短的时间内就已经初步掌握这个工具,说明它并不是那么神秘,并不是那么深不可测.这里,我说一说学习它的一点体会.在我转发的文章中有的内容,我就少讲一些 ...

  9. 【 D3.js 入门系列 — 3 】 做一个简单的图表！

    图1. 柱形图 1. 柱形图 前几章的例子,都是对文字进行处理.本章中将用 D3 做一个简单的柱形图.制作柱形图有很多种方法,比如用 HTML 的 <div> 标签,或在 SVG 上绘制 ...

  10. emoji表情键盘 回退删除方法