JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3962字，纯文字阅读大概需要6分钟。
内容图文
本文实例讲述了JS/HTML5游戏常用算法之碰撞检测 地图格子算法。分享给大家供大家参考，具体如下：
这种算法经常用于RPG（早期的《最终幻想》、《DQ》、《仙剑奇侠传》）、SLG（《炎龙骑士团》、《超级机器人大战》）、PUZ（《俄罗斯方块》、《宝石谜阵》）类型的游戏。这类游戏中，通常情况下整个地图都是由一些地图块元素组成，在制作的时候首先给制作出地图所需要的最基本的元素进行编号，然后把这些编号的地图块组合起来就可以根据需要形成任意大小的地图。
早期的RPG类型或者SLG类型的游戏可以明显地看出游戏中的地图是由一些小的地图块格子而成，采用这种方式组成地图的好处是节约内存的使用，并且不需要太多的地图元素就可以任意组合成足够大的地图，简单灵活，缺陷就是最后制作出的地图不太美观。但实际上为了便于游戏中的碰撞检测，比如人物碰到NPC或者是碰到不可跨越的障碍等情况，在游戏中实际上还是保存了一张看不见的逻辑层。这个层的大小和地图等大，并且也进行了格子划分，主要目的就是为了碰撞检测，通常我们在游戏中对这个碰撞逻辑层使用一个数组描述信息，使用 1 表示不可以通过，0表示可以通过，假设人物和NPC在游戏中行走，这种情况下我们就很容易检测地图中人物是否碰到了NPC或者障碍物。
var mapArr = [
1, 0, 0, 1,
0, 0, 0, 1,
0, 1, 0, 0,
1, 0, 0, 1
];
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta charset="UTF-8">
<title>地图格子算法</title>
<style>
#stage {
border: 1px solid lightgray;
}
</style>
</head>
<body>
<canvas id="stage"></canvas>
</body>
<script>
window.onload = function () {
var stage = document.querySelector('#stage'),
ctx = stage.getContext('2d');
stage.width = 400;
stage.height = 400;
var mapArr = [
1, 0, 0, 1,
0, 0, 0, 1,
0, 1, 0, 0,
1, 0, 0, 1
],rectIdx = 5;
//栅格线条
function drawGrid(context, color, stepx, stepy) {
context.strokeStyle = color;
context.lineWidth = 0.5;
for (var i = stepx + 0.5; i < context.canvas.width; i += stepx) {
context.beginPath();
context.moveTo(i, 0);
context.lineTo(i, context.canvas.height);
context.stroke();
}
for (var i = stepy + 0.5; i < context.canvas.height; i += stepy) {
context.beginPath();
context.moveTo(0, i);
context.lineTo(context.canvas.width, i);
context.stroke();
}
}
function createRect(x, y, r, c) {
ctx.beginPath();
ctx.fillStyle = c;
ctx.rect(x, y, r, r);
ctx.fill();
}
document.onkeydown = function (event) {
var e = event || window.event || arguments.callee.caller.arguments[0];
//根据地图数组碰撞将测
switch (e.keyCode){
case 37:
console.log("Left");
if (rectIdx - 1 >= 0 && (rectIdx - 1) % 4 !== 3 && !mapArr[rectIdx - 1]) {
rectIdx -= 1;
}
break;
case 38:
console.log("Top");
if (rectIdx - 4 >= 0 && !mapArr[rectIdx - 4]) {
rectIdx -= 4;
}
break;
case 39:
console.log("Right");
if ((rectIdx + 1) % 4 !== 0 && !mapArr[rectIdx + 1]) {
rectIdx += 1;
}
break;
case 40:
console.log("Bottom");
if (rectIdx + 4 < mapArr.length && !mapArr[rectIdx + 4]) {
rectIdx += 4;
}
break;
default:
return false;
}
};
function update() {
ctx.clearRect(0, 0, 400, 400);
drawGrid(ctx, 'lightgray', 100, 100);
var rect = {
x: rectIdx % 4 * 100,
y: rectIdx % 4 === 0 ? rectIdx / 4 * 100 : Math.floor(rectIdx / 4) * 100,
r: 100,
c: "blue"
};
createRect(rect.x, rect.y, rect.r, rect.c);
//根据地图数组创建色块
for (var i = 0, len = mapArr.length; i < len; i++) {
if (mapArr[i]) {
createRect(i % 4 * 100, i % 4 === 0 ? i / 4 * 100 : Math.floor(i / 4) * 100, 100, "red");
}
}
requestAnimationFrame(update);
}
update();
};
</script>
</html>
使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试运行上述代码，可得到如下运行结果：
github地址：https://github.com/krapnikkk/JS-gameMathematics
采用这种方式判断逻辑极其简单，效率也比较高，但不太精确，如果A物体的大小比格子小很多，则物体行动的时候可能看起来离B物体有些距离就无法行走了，所以做这种类型游戏最好保证格子足够小或者保证人物大小和格子相差不大
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript排序算法总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
内容总结
以上是互联网集市为您收集整理的JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解全部内容，希望文章能够帮你解决JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。