一个HTML 5 躲避游戏的实现(1)
前段时间BrowserQuest激起了我对html5的乐趣，接下来记下一个小型html5躲避游戏的实现。
先上图
游戏很简单，键盘控制人物上下左右移动，躲开怪物，时间越长越牛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;
- var bgImage = new Image();
- bgImage.src = "move/background.png";
- bgImage.onload = function(){
- bgReady = true;
- }
- var heroReady = false;
- var heroImage = new Image();
- heroImage.src = "move/hero.png";
- heroImage.onload = function(){
- heroReady = true;
- }
- var monsterReady = false;
- var monsterImage = new Image();
- monsterImage.src = "move/monster.png";
- monsterImage.onload = function(){
- monsterReady = true;
- }
这个游戏用了三张图片，依次为背景、英雄、怪物。这段代码很容易理解，为了不在图片没有加载完成的时候就draw图片。