html5游戏开发--"动静"结合用地图块拼成大地图 & 初探lufyl
一、前言 本次教程将向大家讲解如何用html5将小地图块拼成大地图,以及如何用现有的高级html5游戏开发库件lufylegend.js开发游戏。 首先让我们来了解了解如何用html5实现动画,毕竟“动静结合”是先有动再有静。看了上一章的内容,或许你就有了对html5实现动画有了初步了解: 二、html5实现用小地图块拼成大地图 早在上一章以前我就向大家介绍过,许多游戏的地图是用小地图块拼成的。那么既然那些游戏能通过AS或者其他编程语言实现,那我们的html5也丝毫不逊色于它们。接下来就是今天我要为大家准备的图片:
这张图片具体来自哪里我不太清楚,不过它是为我们来服务的,做好事不留名的,因此暂且将他的来源放在一边,我们只用知道它叫map.png就OK; window.onload = function (){ var mapimg = new Image(); function gamemap(){ mapimg.src = "./image/map.png"; mapimg.onload = function(){ for(i = 0; i < 13; i++){ function drawTile(x, y, type){ 现在的形式相当于我说了一句莫名其妙的英语,而我接下来就要自说自译。首先html里的代码等于我说了一句连农村人都懂的“hello”,因此不解释。当然不排除有些朋友是无意间中计被迫到这里来看的,如果这类朋友对此感兴趣但有看不懂的话,在下也不妨给你们提供一些服务: 2.Foreign friends: 游戏论坛:http://www.jiushun8.com,The above detailed introduction of the programming Frist,我定义了两个用来确定地图块在地图数组所对应的变量j和i,这句话说得很模糊,大家看到最后便会懂得。如下: 现在貌似已经准备齐全,但缺少核心部分,因此我用了gamemap()的方法配合drawTile()方法一起用。那么再现一下核心内容:function gamemap(){ mapimg.src = "./image/map.png"; mapimg.onload = function(){ for(i = 0; i < 13; i++){ function drawTile(x, y, type){ 首先在gamemap()中在下取出<body>里的<canvas>的id,然后用mapimg.src="";定义了要显示的图片,具体用canvas显示图片可以去w3cschool上看看,或者去我上一篇看看,这里不多说了。然后进行绘画。首先我画了一个矩形,看注释就知道。然后进入我最爱的循环for。因为要画13*13的地图,所以要循环十三次,然后在循环里再进行循环,使i和j遍历数组map,当i的值为0时,j对应的值如下:
由此可见,当i为0时,也就是说遍历二维数组map第一行,然后进入j的循环,从而把第一行遍历所有数据都读完。当i为2使,就是说遍历二维数组map第二行,然后又进入j的循环,从而把第二行遍历所有数据都读完。由此类推,整个二维数组map就被读完了。然后每当j变一次,就调用drawTile()并给他的参数赋值,再在drawTile()中进行绘制,从而达到画出地图的效果。 参数描述 那么我们接下来就来研究研究程序大师张路斌的html5开源引擎——lufylegend.js。 |
html5游戏开发--"动静"结合用地图块拼成大地图 & 初探lufyl的更多相关文章
- html5游戏开发--"动静"结合(二)-用地图块拼成大地图 & 初探lufylegend
一.前言 本次教程将向大家讲解如何用HTML5将小地图块拼成大地图,以及如何用现有的高级html5游戏开发库件lufylegend.js开发游戏. 首先让我们来了解了解如何用html5实现动画,毕竟“ ...
- HTML5游戏开发进阶指南(亚马逊5星畅销书,教你用HTML5和JavaScript构建游戏!)
HTML5游戏开发进阶指南(亚马逊星畅销书,教你用HTML5和JavaScript构建游戏!) [印]香卡(Shankar,A.R.)著 谢光磊译 ISBN 978-7-121-21226-0 201 ...
- HTML5游戏开发进阶指南
<HTML5游戏开发进阶指南> 基本信息 作者: (印)香卡(Shankar,A.R.) 译者: 谢光磊 出版社:电子工业出版社 ISBN:9787121212260 上架时间:20 ...
- Html5游戏开发-145行代码完成一个RPG小Demo
lufy前辈写过<[代码艺术]17行代码的贪吃蛇小游戏>一文,忽悠了不少求知的兄弟进去阅读,阅读量当然是相当的大.今天我不仿也搞一个这样的教程,目地不在于忽悠人,而在于帮助他人. 先看de ...
- HTML5游戏开发系列教程6(译)
原文地址:http://www.script-tutorials.com/html5-game-development-lesson-6/ 这是我们最新一篇HTML5游戏开发系列文章.我们将继续使用c ...
- HTML5游戏开发进阶指南 中文pdf扫描版
HTML5游戏开发进阶指南介绍了HTML5游戏开发的一般过程和技巧.全书共分12章,第1章介绍了本书相关的HTML5的诸多新特性,包括在canvas上绘图.播放声音等,另外还引入了子画面页的概念:第2 ...
- CutJS – 用于 HTML5 游戏开发的 2D 渲染引擎
CutJS 是轻量级的,快速的,基于 Canvas 开发的 HTML5 2D 渲染引擎,可以用于游戏开发.它是开源的,跨平台的,与现代的浏览器和移动设备兼容.CutJS 提供了一个类似 DOM 树的 ...
- 优秀工具推荐:两款很棒的 HTML5 游戏开发工具
HTML5 众多强大特性让我们不需要多么高深技术就能创建好玩的网页游戏,同时证明了开放的 Web 技术能与任何其他在游戏开发中使用的技术竞争.正如标题所说,这篇文章推荐的几款很棒 HTML5 游戏开发 ...
- HTML5游戏开发引擎,初识CreateJS
CreateJS为CreateJS库,可以说是一款为HTML5游戏开发的引擎.打造 HTML5 游戏,构建新游戏,提供构建最新 HTML5 的技术.你可以通过这个网站学习如何构建跨平台和跨终端游戏.这 ...
随机推荐
- <META http-equiv=Content-Type content="text/html; charset=gb2312">
META,网页Html语言里Head区重要标签之一 HTTP-EQUIV类似于HTTP的头部协议,它回应给浏览器一些有 用的信息,以帮助正确和精确地显示网页内容.常用的HTTP- EQUIV类型有: ...
- 五毛的cocos2d-x学习笔记05-场景与场景动画,动作
场景切换函数: Director->getInstance()->replaceScene(Scene*); Director->getInstance()->runWithS ...
- win7如何快速设置开机启动项?
添加开机启动项方法: 找到windows开始菜单->所有程序->启动,右键打开, 进入C:\Users\Ocean\AppData\Roaming\Microsoft\Windows\St ...
- Jquery调用webService的四种方法 转载-记录
我总结几个关键点 1. 服务必须声明为ScriptService(否则会出现下面的问题) 2.服务的方法不需要任何更改,保持原状 3.客户端用jquery的.ajax方法来调用 3.1 type必须是 ...
- Clob对象转为字符串
项目中遇到一个问题,对方公司把打印好的报表数据存到数据库中,实际上就是把html存在Oracle中,然后需要我们在社保系统里进行查询. 但是他们把数据存放在B数据库,而我们的社保系统用的数据库是B.A ...
- ligh@local-host$ ssh-copy-id -i ~/.ssh/id_rsa.pub root@192.168.0.3
ligh@local-host$ ssh-copy-id -i ~/.ssh/id_rsa.pub root@192.168.0.3
- Android图片异步加载的方法
很多时候,我们在加载大图片或者需要处理较多图像数据的时候,希望显示效果能好点,不至于因为图片解码耗时产生ANR等情况,不得不说异步加载是个不错的方法.说到异步加载,避免application出现ANR ...
- Android 启动APP时黑屏白屏的三个解决方案(转载)
你会很奇怪,为什么有些app启动时,会出现一会儿的黑屏或者白屏才进入Activity的界面显示,但是有些app却不会如QQ手机端,的确这里要做处理一下.这里先了解一下为什么会出现这样的现象,其实很简单 ...
- golang channel初次接触
goroutine之间的同步 goroutine是golang中在语言级别实现的轻量级线程,仅仅利用go就能立刻起一个新线程.多线程会引入线程之间的同步问题,经典的同步问题如生产者-消费者问题,在c, ...
- ContentType
常用的 ContentType XML <% response.ContentType ="text/xml" %> GIF images <% respons ...