一个HTML 五躲避游戏的实现-HTML教程-爱易网页

一个HTML 五躲避游戏的实现

日期：2014-05-17　浏览次数：20657 次

一个HTML 5 躲避游戏的实现

前段时间BrowserQuest激起了我对html5的乐趣，接下来记下一个小型html5躲避游戏的实现。

先上图

QQ20120921 3

游戏很简单，键盘控制人物上下左右移动，躲开怪物，时间越长越牛x。

主要是两部分组成:一部分就是人物、地图的结构搭建，另一部分就是让英雄、怪物相应地动起来。

HTML5写游戏和传统的游戏思路完全一样，同样也是不停刷新屏幕，游戏实际上也就是图片的适时摆放问题，HTML5无非就只用到了一个canvas(画布)的性质用来摆放图片。

Step 1 做好准备

新建一个html文件，命名为index.html，用作游戏的容器。代码如下:


<html>? ?

<head>? ?


<meta?http-equiv="Content-Type"?content="text/html;?charset=UTF-8"?/>? ?


<title>html5?game</title>? ?


</head>? ?


<body>? ?


<h1>html5?game</h1>? ?


<script?type="text/javascript"?src="move.js"></script>? ?


</body>? ?


</html>?

ps:script的引用最好放在body里放在body会有问题。

再新建个文件,move.js


var?canvas?=?document.createElement("canvas");?//创建元素canvas，即我们要用的画布? ?

var?ctx?=?canvas.getContext("2d");//说明我们要用的画布是2d，因为canvas也有WebGL支持3d? ?


canvas.width?=?512;//设置画布的长宽? ?


canvas.height?=?480;? ?

document.body.appendChild(canvas);//前面基本信息都设置好了之后，将这个元素添加到body标签下。?

这样画布就算是搭建好了。

顺带在下面加几个和图片有关的函数。


var?bgReady?=?false;? ?

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

一个HTML 五躲避游戏的实现

相关资料更多>

推荐阅读更多>

一个HTML 五 躲避游戏的实现

相关资料更多>

推荐阅读更多>

一个HTML 五躲避游戏的实现