详细讲解碰撞检测地图网格算法示例JS/HTML5游戏常用算法

本文通过一个实例来说明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，1，0，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 {边框： 1px纯色浅灰色；}/style/head dy canvas id=' stage '/canvas/body脚本窗口。onload=function(){ var stage=document。queryselector(' # stage ')，CTX=stage。get context(' 2d ')；舞台宽度=400舞台高度=400;var mapArr=[ 1，0，0，1，0，0，1，0，1，0，0，1，0，0，0，0，1 ]，recidx=5；//栅格线条函数drawGrid(上下文、颜色、stepx、stepy){ context。strokestyle=colorcontext.lineWidth=0.5对于(var i=stepx 0.5I上下文。帆布。宽度；I=stepx){ context。begin path()；context.moveTo(i，0)；context.lineTo(i，context。帆布。高度)；语境。笔画()；} for(var I=stepy 0.5；一.背景。帆布。身高；I=stepy){ context。begin path()；context.moveTo(0，I)；语境。行到(上下文。帆布。宽度，I)；语境。笔画()；} }函数创建矩形(x，y，r，c){ CTX。begin path()；CTX。FillStyle=c；ctx.rect(x，y，r，r)；CTX。fill()；}文档。onkey down=function(event){ var e=event | | window。事件| |参数。打电话的人。打电话的人。参数[0]；//根据地图数组碰撞将测开关（例如键码){ case 37:控制台。日志('左')；如果(整流二极管- 1=0(整流二极管- 1) % 4!==3 !mapArr[低温甲醇洗- 1]) {低温甲醇洗-1;} breakcase 38:控制台。日志(“顶部”)；如果(整流dx - 4=0！mapArr[低温甲醇洗- 4]) {低温甲醇洗-4;}休息案例39:控制台。日志('右')；if(((rectDx)1)% 4！==0 !mapArr[低温甲醇洗1]) {低温甲醇洗=1;} breakcase 40:控制台。原木(“底部”)；如果(低温甲醇洗4 mapArr.length！mapArr[低温甲醇洗4]) {低温甲醇洗=4;} breakdefault:返回false } }函数update() { ctx.clearRect(0，0，400，400)；drawGrid(ctx，'浅灰色',100,100);var rect={ x: rectIdx % 4 * 100，y: rectIdx % 4===0？rect dx/4 * 100 :数学。地板(rect dx/4)* 100，r: 100，c : '蓝色' }；createRect(Rect.x，rect.y，rect.r，rect。c)；//根据地图数组创建色块for (var i=0，len=mapArr.length我透镜；I){ if(mapArr[I]){ createRect(I % 4 * 100，i % 4===0？I/4 * 100 :数学。楼层(1/4)* 100，100 '红色');} } requestAnimationFrame(更新);} update()；};/script/html使用在线HTML/CSS/JavaScript代码运行工具：http://工具。JB 51。net/code/HTMljsrun测试运行上述代码，可得到如下运行结果：

开源代码库地址：https://github。com/krapnikkk/JS-游戏数学

采用这种方式判断逻辑极其简单，效率也比较高，但不太精确，如果A物体的大小比格子小很多，则物体行动的时候可能看起来离B物体有些距离就无法行走了，所以做这种类型游戏最好保证格子足够小或者保证人物大小和格子相差不大

更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript数学运算用法总结》 、 《JavaScript数据结构与算法技巧总结》 、 《JavaScript数组操作技巧总结》 、 《JavaScript排序算法总结》 、 《JavaScript遍历算法与技巧总结》 、 《JavaScript查找算法技巧总结》 及《JavaScript错误与调试技巧总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。