本文摘自PHP中文网，作者黄舟，侵删。
功能说明：游戏中在躲避敌人攻击的同时，需要收集三种不同的钥匙，开启对应的门，最后到达目的地。
该游戏同样基于自己开发的HTML5游戏框架cnGameJS。
推荐用chrome浏览器查看。
效果预览：
方向键控制移动，空格键射击，shift键打开门。
实现分析：
在上一篇文章《HTML5实现3D迷宫》中，通过放射线法模拟出3D场景的效果，而本文则在3D效果的基础上，添加更多的游戏元素，构建成一个较完整的第一人称射击游戏。
关于如何模拟出3D场景效果上文中已经有较详细的描述，本文则主要介绍如何实现游戏互动部分。
1.游戏元素在地图上的对象和在屏幕上的对象的对应关系？
首先，每个游戏元素都对应两个游戏对象，一个游戏对象为左边地图上的对象，另一个则为右边屏幕上的对象。例如，一个敌人的位置，是否射击状态等信息都由左边的地图对象来表示，而敌人在屏幕上的显示，则是根据在左边地图上对象的信息进行绘制。简而言之，左边的地图对象负责游戏元素位置，状态的判别，它真正存储游戏信息。而右边的屏幕对象则只负责游戏元素的呈现。
1
2
newEnemy.relatedObj= enemy2({src:srcObj.enemy,context:screenContext});
newEnemy.relatedObj.relatedParent=newEnemy;
如上，地图上的对象和屏幕上的对象保持互相引用的关系，这样就可以轻易通过地图对象访问屏幕对象，反之亦然。
2.如何使敌人在发现玩家后进行射击？
要实现该功能，我们需要知道玩家相对于敌人的角度，该参数我们可以根据敌人到玩家的距离和它们x，y的差值求出。之后我们就可以在敌人对象的位置向该方向发射出一条射线，如果该射线能在不触碰墙壁的时候触碰到玩家，就证明敌人可以看到玩家。这时候敌人就可以向玩家射击了。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
nextX = enemyCenter[0];
nextY = enemyCenter[1];
while (this.map.getPosValue(nextX, nextY) == 0) {
distant += 1;
x = nextX;
y = nextY;
if (cnGame.collision.col_Point_Rect(x, y, playerRect)&&!spriteList[i].relatedObj.isCurrentAnimation("enemyDie")) {
//如果地图上敌人能看到玩家，则向玩家射击
spriteList[i].isShooting = true;
if (spriteList[i].lastShootTime > spriteList[i].shootDuration) {//检查是否超过射击时间间隔，超过则射击玩家
spriteList[i].shoot(player);
spriteList[i].relatedObj.setCurrentImage(srcObj.enemy1);
spriteList[i].lastShootTime = 0;
}
else {
if (spriteList[i].lastShootTime > 0.1) {
spriteList[i].relatedObj.setCurrentImage(srcObj.enemy);
}
spriteList[i].lastShootTime += duration;
}
break;
}
else {
spriteList[i].isShooting = false;
}
nextX = distant * Math.cos(angle) + enemyCenter[0];
nextY = enemyCenter[1] - distant * Math.sin(angle);
}
}
3.如何检测是否获得钥匙？
检测钥匙获取其实就是简单地检测玩家对象和钥匙对象是否产生碰撞，产生碰撞则获取到钥匙。碰撞检测同样发生在左边的地图对象。
阅读剩余部分
相关阅读 >>
HTML5实现图片的3d旋转效果
HTML5 学习filereader接口代码实例分享9（图）
使用HTML5 canvas api中的clip()方法裁剪区域图像代码实例
浅谈HTML5新增及移除的元素
关于HTML5 canvas旋转动画的2个例子
HTML5 webworkers防止浏览器假死的示例代码分享
HTML5网络拓扑图性能优化的图文详解
HTML5容易被忽略的小知识
HTML5优势到底有哪些？
简单介绍HTML5中的文件导入
更多相关阅读请进入《HTML5》频道 >>
书籍 Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
￥83.86元 人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » HTML5第一人称射击游戏实现的代码分享
