HTML5 键盘监听原理实现的抓怪兽游戏+代码
程序员文章站
2023-01-25 18:26:40
html5小游戏抓怪兽,应用canvas等超多的html5技巧编写而成,下面来向大家汇报实现步骤:
1、创建游戏画布:
.代码
var canvas = document.createel...
html5小游戏抓怪兽,应用canvas等超多的html5技巧编写而成,下面来向大家汇报实现步骤:
1、创建游戏画布:
.代码- var canvas = document.createelement("canvas");
- var ctx = canvas.getcontext("2d");
- canvas.width = 512;
- canvas.height = 480;
-
document.body.appendchild(canvas);
我们需要做的第一件事是创建一个 canvas元素。我这样做的javascript,而不是html演示如何轻松完成。一旦我们拥有的元素,我们得到一个参考的情况下,设置它的尺寸,它附加到文档的身体。前端框架分享
2、包括图像:
.代码- var bgready = false;
- var bgimage = new image();
- bgimage.onload = function () {
- bgready = true;
- };
-
bgimage.src = "images/background.png";
我们加载一些图像。我想,以做这个尽可能简单,所以它是只是一个图像,而不是被包裹起来的一个很好的类或东西。 使用bgready让画布知道,当它的安全来绘制它。
3、 游戏对象:
.代码- var hero = {//英雄
- speed: 256, // 每秒256像素
- x: 0,
- y: 0
- };
- var monster = {//怪兽
- x: 0,
- y: 0
- };
-
var monsterscaught = 0; //抓到了几个怪兽
4、 玩家输入:前端框架分享
.代码- // 处理键盘输入
- var keysdown = {};
- addeventlistener("keydown", function (e) {
- keysdown[e.keycode] = true;
- }, false);
- addeventlistener("keyup", function (e) {
- delete keysdown[e.keycode];
-
}, false);
5、 新游戏
.代码- //当怪兽被抓住时,需执行
- var reset = function () {
- hero.x = canvas.width / 2;
- hero.y = canvas.height / 2;
- // 使怪物出现在场景的某个地方(随机化)
- monster.x = 32 + (math.random() * (canvas.width - 64));
- monster.y = 32 + (math.random() * (canvas.height - 64));
-
};
6、 更新对象:
.代码- var update = function (modifier)
- {
- if (38 in keysdown) { // 向上
- hero.y -= hero.speed * modifier;
- }
- if (40 in keysdown) { // 向下
- hero.y += hero.speed * modifier;
- }
- if (37 in keysdown) { // 向左
- hero.x -= hero.speed * modifier;
- }
- if (39 in keysdown) { //
- hero.x += hero.speed * modifier;
- }
- // are they touching?
- if (
- hero.x =>
- && monster.x =>
- && hero.y =>
- && monster.y =>
- ) {
- ++monsterscaught;
- reset();
- }
-
};
7、 渲染对象:前端资源分享
.代码- var render = function () {
- if (bgready) {
- ctx.drawimage(bgimage, 0, 0);
- }
- if (heroready) {
- ctx.drawimage(heroimage, hero.x, hero.y);
- }
- if (monsterready) {
- ctx.drawimage(monsterimage, monster.x, monster.y);
- }
- // score
- ctx.fillstyle = "rgb(250, 250, 250)";
- ctx.font = "24px helvetica";
- ctx.textalign = "left";
- ctx.textbaseline = "top";
- ctx.filltext("goblins caught: " + monsterscaught, 32, 32);
-
};
8、 游戏主循环:
.代码- var main = function () {
- var now = date.now();
- var delta = now - then;
- update(delta / 1000);
- render();
- then = now;
-
};
9、 开始游戏:
.代码- reset();
- var then = date.now();
- setinterval(main, 1);