使用JS和Canvas做一个html5小游戏_html canvas用javascript制作一款网页游戏

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

};
monsterImage.src = “images/monster.png”;

### 3.添加英雄，怪物，记录分数的变量


资源都加载完成后，我们就构造英雄怪物的对象，因为游戏很简单，所以怪物静止不动只需要随机刷新位置，而英雄只需要一个速度属性就好了，而分数一开始为0。

// Game objects
var hero = {
speed: 256 // movement in pixels per second
};
var monster = {};
var monstersCaught = 0;

 


### 4.获取用户的输入


因为在前端开发中，一般是用户触发了点击事件然后才去执行动画或发起异步请求之类的，但这里希望游戏的逻辑能够更加紧凑同时又要及时响应输入。所以我们就把用户的输入先保存下来而不是立即响应。为此，用`keysDown`这个对象来保存用户按下的键值(`keyCode`)，如果按下的键值在这个对象里，那么就做相应处理。


默认是键盘输入，所以我们监听keysdown和keysup。

// Handle keyboard controls
var keysDown = {};

addEventListener(“keydown”, function (e) {
keysDown[e.keyCode] = true;
}, false);

addEventListener(“keyup”, function (e) {
delete keysDown[e.keyCode];
}, false);

 


### 5.开始一轮游戏


reset方法用于开始新一轮游戏，在这个方法里我们将英雄放回画布的中心同时将怪物放到一个随机的地方。

// Reset the game when the player catches a monster
var reset = function () {
hero.x = canvas.width / 2;
hero.y = canvas.height / 2;

// Throw the monster somewhere on the screen randomly
monster.x = 32 + (Math.random() * (canvas.width - 64));
monster.y = 32 + (Math.random() * (canvas.height - 64));

};

 


### 6.更新对象


用于更新画面的update函数，会被规律的重复调用。首先它检查用户当前按住的是不是方向键，然后再让英雄朝英雄相应方向移动。这个传入的`modifier` 变量是基于1开始且随时间变化的一个因子。例如1秒过去了，它的值就是1，英雄的速度将会乘以1，也就是每秒移动256像素；如果半秒钟则它的值为0.5，英雄的速度就乘以0.5也就是说这半秒内英雄以正常速度一半的速度移动。理论上说因为这个`update` 方法被调用的非常快且频繁，所以`modifier`的值会很小，但有了这一因子后，不管我们的代码跑得快慢，都能够保证英雄的移动速度是恒定的。


我们还要给英雄移动增加边界检查，不然会跑到地图外面去了。

// Update game objects
var update = function (modifier) {
if (38 in keysDown && hero.y > 32) { // Player holding up
hero.y -= hero.speed * modifier;
}
if (40 in keysDown && hero.y < canvas.height-64) { // Player holding down
hero.y += hero.speed * modifier;
}
if (37 in keysDown&& hero.x > 32) { // Player holding left
hero.x -= hero.speed * modifier;
}
if (39 in keysDown&& hero.x < canvas.width-64) { // Player holding right
hero.x += hero.speed * modifier;
}

// Are they touching?
if (
	hero.x <= (monster.x + 32)
	&& monster.x <= (hero.x + 32)
	&& hero.y <= (monster.y + 32)
	&& monster.y <= (hero.y + 32)
) {
	++monstersCaught;
	reset();
}

};

 


### 7.渲染物体


首先把背景画出来，然后如法炮制把英雄和怪物也画出来，顺序有讲究不然后面的物体会覆盖之前的物体。


之后我们通过canvas的相关属性改变记分牌。

// Draw everything
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("抓住的怪物: " + monstersCaught, 10, 10);

};

 


### 8.主循环函数


主函数控制整个游戏的流程，先是拿到当前的时间用来计算时间差（距离上次主函数被调用时过了多少毫秒）。得到`modifier`后除以1000(也就是1秒中的毫秒数)再传入`update`函数。最后调用`render` 函数并且将本次的时间保存下来。

// The main game loop
var main = function () {
var now = Date.now();
var delta = now - then;

update(delta / 1000);
render();

then = now;

// Request to do this again ASAP
requestAnimationFrame(main);

};

因为运用的是requestAnimationFrame，所以我们要注意浏览器兼容性处理。

// Cross-browser support for requestAnimationFrame
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;

 


## 9.我们就可以在浏览器启动游戏了


先是设置一个初始的时间变量`then`用于首先运行`main`函数使用。然后调用 `reset` 函数来开始新一轮游戏

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上C C++开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以戳这里获取

147)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上C C++开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以戳这里获取