衡水做网站,126网易企业邮箱,家政服务网站做推广有效果吗,傻瓜建网站一、前言 本次教程将向大家讲解如何用html5将小地图块拼成大地图#xff0c;以及如何用现有的高级html5游戏开发库件lufylegend.js开发游戏。 首先让我们来了解了解如何用html5实现动画#xff0c;毕竟“动静结合”是先有动再有静。看了上一章的内容#xff0c;或许你就有了…一、前言 本次教程将向大家讲解如何用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
titlehtml5 map/title
meta nameviewport contentwidthdevice-width,initial-scale1,maximum-scale1,user-scalableno
script typetext/javascript src./map.js/script
/head
bodycanvas idmap width415px height415px styleborder: 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的值10020130240450560670780890910010110111201213013由此可见当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的开发包含了LSpriteLBitmapDataLBitmapLLoaderLURLLoaderLTextFieldLEvent等多个AS开发人员熟悉的类 支持Google ChromeFirefoxOperaIE9IOSAndroid等多种热门环境。利用lufylegend可以轻松的使用面向对象编程并且可以配合Box2dWeb制作物理游戏 另外它还内置了LTweenLite缓动类等非常实用的功能现在开始使用它吧它可以让你更快的进入HTML5的世界 关注CSDN的朋友不难发现有一位牛人就在我们身边他就是张路斌。我第一次看见他的文章是在去年当我看到他用他的引擎开发愤怒的小鸟时我别提我对他有多佩服了。后来我进一步了解开始学习他的html5引擎lufylegend。那么我还是别在这里吹捧作者了开始进如正题。 lufylegend下载地址和API介绍http://lufylegend.com/lufylegend官方博客http://blog.csdn.net/lufy_legend联系官方lufy.legendgmail.com 以下是几个lufylegend的几个例子 1).lufylegend实现游戏进度条 !DOCTYPE html
html
head
titlehtml5 game/title
script typetext/javascript src./lufylegend-1.5.2.min.js/script
script typetext/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
bodydiv idmylegendloading....../div
/body
/html 2)lufylegend实现动画播放 !DOCTYPE html
html langenheadmeta charsetutf-8 /titlehtml5 game/titlescript typetext/javascript src./lufylegend-1.5.2.min.js/scriptscript typetext/javascriptinit(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/headbodydiv idlegendloading……/div/body
/html 3)lufylegend实现绘画 !DOCTYPE html
html
head
script typetext/javascript src./lufylegend-1.5.2.min.js/script
scriptinit(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
bodydiv idmylegend/div
/body
/html今天对lufylegend的初探就到此为止下次我将对lufylegend的具体使用进行介绍希望大家多支持谢谢我将以更好的文章来回报大家。 ---------------------------------------------------------------- 欢迎大家转载我的文章。 转载请注明转自Yorhoms Game Box 欢迎继续关注我的博客转载于:https://www.cnblogs.com/java20130808/archive/2013/01/23/3241573.html
