一、前言
  本次教程将向大家讲解如何用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. windows上的tomcat配置

    下载及安装 首先要安装JDK:jdk-7windows-x64.zip 再安装tomcat:apache-tomcat-7.0.23-windows-x64.zip   配置环境变量: CATALIN ...

  2. JavaSE学习总结第02天_Java基础语法1

      02.01 关键字的概述和使用 关键字概述:被Java语言赋予特定含义的单词 关键字特点:组成关键字的字母全部小写 关键字注意事项:goto和const作为保留字存在,目前并不使用,类似Notep ...

  3. VPN各种方案

    http://www.maimiaovpn.com 大家都是用什么方法FQ的?我原来用的XskyWalker浏览器 但我用的电信网现在不行了.大家用的什么方法可否告诉我一下我用yes-vpn,10元一 ...

  4. VC中TRACE()的用法

    个人总结:最近看网络编程是碰到了TRACE语句,不知道在哪里输出,查了一晚上资料也没找出来,今天终于在CSDN上找到了,真是个高地方啊,方法如下: 1.在MFC中加入TRACE语句 2.在TOOLS- ...

  5. Selenium2使用vncserver启动firefox

    web自动化测试使用Selenium2使用vncserver启动firefox 1st startup vncserver(e.g. vncserver :1). 2nd set DISPLAY(e. ...

  6. iOS创建本地通知和删除对应的通知,工作日通知

    本文的代码主要是:创建本地通知,删除对应的本地通知,创建工作日闹钟 直接上代码: // // ViewController.m // LocalNSNotification // // Created ...

  7. E - Fibonacci Again(找规律)

    逐渐发现找规律的美妙之处啦,真不错,用普通方法解决很久或者很麻烦的问题,找到规律就很方便,算法最主要还是思想 Description There are another kind of Fibonac ...

  8. USACO March. 2012

    Connect the Cows Times17 水题 Landscaping Flowerpot Tractor 广搜 搜到边界就可以终止了 没什么难度 #include <stdio.h&g ...

  9. HTTP 教程 转自 http://www.w3cschool.cc/http/http-tutorial.html

    HTTP协议(HyperText Transfer Protocol,超文本传输协议)是因特网上应用最为广泛的一种网络传输协议,所有的WWW文件都必须遵守这个标准. HTTP是一个基于TCP/IP通信 ...

  10. php数组操作小结

    $x unset($x[3])      //key不重排