本文主要是介绍html5游戏开发--动静结合用地图块拼成大地图 初探lufyl,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
一、前言 本次教程将向大家讲解如何用html5将小地图块拼成大地图,以及如何用现有的高级html5游戏开发库件lufylegend.js开发游戏。 首先让我们来了解了解如何用html5实现动画,毕竟“动静结合”是先有动再有静。看了上一章的内容,或许你就有了对html5实现动画有了初步了解: 二、html5实现用小地图块拼成大地图 早在上一章以前我就向大家介绍过,许多游戏的地图是用小地图块拼成的。那么既然那些游戏能通过AS或者其他编程语言实现,那我们的html5也丝毫不逊色于它们。接下来就是今天我要为大家准备的图片: 光有图还不行,得来点代码。 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的矩形 |
这篇关于html5游戏开发--动静结合用地图块拼成大地图 初探lufyl的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!