欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

【H5/JS】游戏常用算法-碰撞检测-地图格子算法

程序员文章站 2022-03-13 13:53:04
...

这种算法经常用于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>
在线预览地址：https://github.com/krapnikkk/JS-gameMathematics

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

相关标签： javascript 游戏算法 地图格子算法

上一篇： 【H5/JS】游戏常用算法-碰撞检测-包围盒检测算法(3)-凹多边形（分离轴检测算法）

下一篇： 四叉树 - 碰撞检测算法 Lua版

推荐阅读