HTML5 键盘监听原理实现的抓怪兽游戏+代码

HTML5小游戏抓怪兽，应用Canvas等超多的HTML5技巧编写而成，下面来向大家汇报实现步骤：

1、创建游戏画布：

.代码  

1. var canvas = document.createElement("canvas");
2. var ctx = canvas.getContext("2d");
3. canvas.width = 512;
4. canvas.height = 480;
5. document.body.appendChild(canvas);

我们需要做的第一件事是创建一个 canvas元素。我这样做的JavaScript，而不是HTML演示如何轻松完成。一旦我们拥有的元素，我们得到一个参考的情况下，设置它的尺寸，它附加到文档的身体。前端框架分享

2、包括图像：

.代码  

1. var bgReady = false;
2. var bgImage = new Image();
3. bgImage.onload = function () {
4. bgReady = true;
5. };
6. bgImage.src = "images/background.png";

我们加载一些图像。我想，以做这个尽可能简单，所以它是只是一个图像，而不是被包裹起来的一个很好的类或东西。 使用bgReady让画布知道，当它的安全来绘制它。

3、 游戏对象：

.代码  

1. var hero = {//英雄
2. speed: 256, // 每秒256像素
3. x: 0,
4. y: 0
5. };
6. var monster = {//怪兽
7. x: 0,
8. y: 0
9. };
10. var monstersCaught = 0; //抓到了几个怪兽

4、 玩家输入：前端框架分享

.代码  

1. // 处理键盘输入
2. var keysDown = {};
3. addEventListener("keydown", function (e) {
4. keysDown[e.keyCode] = true;
5. }, false);
6. addEventListener("keyup", function (e) {
7. delete keysDown[e.keyCode];
8. }, false);

5、 新游戏

.代码  

1. //当怪兽被抓住时，需执行
2. Var  reset = function () {
3. hero.x = canvas.width / 2;
4. hero.y = canvas.height / 2;
5. // 使怪物出现在场景的某个地方（随机化）
6. monster.x = 32 + (Math.random() * (canvas.width - 64));
7. monster.y = 32 + (Math.random() * (canvas.height - 64));
8. };

6、 更新对象：

.代码  

1. var update = function (modifier)
2. {
3. if (38 in keysDown) {   // 向上
4. hero.y -= hero.speed * modifier;
5. }
6. if (40 in keysDown) { // 向下
7. hero.y += hero.speed * modifier;
8. }
9. if (37 in keysDown) { // 向左
10. hero.x -= hero.speed * modifier;
11. }
12. if (39 in keysDown) { //
13. hero.x += hero.speed * modifier;
14. }
15. // Are they touching?
16. if (
17. hero.x <= (monster.x + 32)
18. && monster.x <= (hero.x + 32)
19. && hero.y <= (monster.y + 32)
20. && monster.y <= (hero.y + 32)
21. ) {
22. ++monstersCaught;
23. reset();
24. }
25. };

7、 渲染对象：前端资源分享

.代码  

1. var render = function () {
2. if (bgReady) {
3. ctx.drawImage(bgImage, 0, 0);
4. }
5. if (heroReady) {
6. ctx.drawImage(heroImage, hero.x, hero.y);
7. }
8. if (monsterReady) {
9. ctx.drawImage(monsterImage, monster.x, monster.y);
10. }
11. // Score
12. ctx.fillStyle = "rgb(250, 250, 250)";
13. ctx.font = "24px Helvetica";
14. ctx.textAlign = "left";
15. ctx.textBaseline = "top";
16. ctx.fillText("Goblins caught: " + monstersCaught, 32, 32);
17. };

8、 游戏主循环：

.代码  

1. var main = function () {
2. var now = Date.now();
3. var delta = now - then;
4. update(delta / 1000);
5. render();
6. then = now;
7. };

9、 开始游戏：

.代码  

1. reset();
2. var then = Date.now();
3. setInterval(main, 1);

HTML5 键盘监听原理实现的抓怪兽游戏+代码