Question

我在HTML5 Canvas中制作了一个平台游戏，我遇到了一些碰撞问题。我一直在试验大量的碰撞算法，但我似乎无法开始工作。

我的问题：如何让阻挡/深灰色方块阻止我的球穿过呢？

关于我的代码的一些信息：

地图是动态生成的
我已多次尝试过碰撞算法
碰撞处理在canMoveHere函数中完成，并将true或false返回到moveAll函数，在此处确定球是否可以移动到下一个方格

回答我的问题时要记住的事情：

提供适用于我的代码的示例（最好也使用我的代码进行测试）
不要评论我应该访问的网站/其他已回答的问题，因为我提出这个问题是因为我无法找到可以在这些网站/其他已回答的问题中使用的答案
如果您不知道答案，或者您没有明显改善问题/答案，请不要发表评论
没有框架!!!

我的代码jsfiddle.net

我的代码从Google Drive下载

我的完整代码：

<html>
<head>
    <canvas id ="gameCanvas" width = "500" height = "500" style = "border:1px solid black;"></canvas>
    <script>
        var canvas, canvasContext;
        var framesPerSecond = 30;
        var gravity = .2;

        var leftKey = false;
        var rightKey = false;

        const TILE_H = 25;
        const TILE_W = 25;

        var map = [
            [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
            [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
            [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
            [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
            [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
            [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
            [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
            [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
            [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
            [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
            [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
            [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
            [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
            [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 1],
            [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
            [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
            [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
            [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
            [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
            [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
        ];

        var ball = {
            x:250,
            y:250,
            radius:10,
            color:"#ff9966",
            velocityX:5,
            velocityY:1,
            terminalVel:8,

            draw:function()
            {
                canvasContext.beginPath();
                canvasContext.fillStyle = this.color;
                canvasContext.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
                canvasContext.fill();
                canvasContext.closePath();
            }
        };

        document.addEventListener("keydown", function(evt)
        {
            if(evt.keyCode == 37)
            {
                leftKey = true;
            }
            if(evt.keyCode == 39)
            {
                rightKey = true;
            }
        });

        document.addEventListener("keyup", function(evt)
        {
            if(evt.keyCode == 37)
            {
                leftKey = false;
            }
            if(evt.keyCode == 39)
            {
                rightKey = false;
            }
        });

        window.onload = function()
        {
            canvas = document.getElementById("gameCanvas");
            canvasContext = canvas.getContext("2d");

            setInterval(function()
            {
                drawAll();
                moveAll();
            }, 1000/framesPerSecond);
        }

        var renderMap = function()
        {
            for(var eachRow=0; eachRow<20; eachRow++)
            {
                for(var eachCol=0; eachCol<20; eachCol++)
                {
                    if(map[eachRow][eachCol] == 0)
                    {
                        canvasContext.fillStyle = "#a6a6a6";
                        canvasContext.fillRect(TILE_W*eachCol, TILE_H*eachRow, TILE_W, TILE_H);
                    }
                    if(map[eachRow][eachCol] == 1)
                    {
                        canvasContext.fillStyle = "#666666";
                        canvasContext.fillRect(TILE_W*eachCol, TILE_H*eachRow, TILE_W, TILE_H);
                    }
                }
            }
        }

        var drawAll = function()
        {
            canvasContext.clearRect(0, 0, canvas.width, canvas.height);

            renderMap();

            ball.draw();
        }

        var canMoveHere = function(col, row)
        {
            if(map[row][col] == 1)
            {
                return false;
            }
            else
            {
                return true;
            }
        }

        var moveAll = function()
        {
            nextBallX = ball.x + ball.velocityX;
            nextBallY = ball.y + ball.velocityY;
            nextBallCol = Math.floor(nextBallX / TILE_W);
            nextBallRow = Math.floor(nextBallY / TILE_H);
            var canMove = canMoveHere(nextBallCol, nextBallRow);


            ball.velocityY += gravity;
            ball.y += ball.velocityY;

            if(ball.velocityY >= ball.terminalVel)
            {
                ball.velocityY = ball.terminalVel;
            }

            if(canMove === false)
            {
                ball.velocityY *= -1;
            }

            if(leftKey)
            {
                ball.x -= ball.velocityX;
            }
            if(rightKey)
            {
                ball.x += ball.velocityX;
            }
        }
    </script>
</head>
<body>

</body>
</html>

HTML5 Canvas - 在动态地图上阻止侧面碰撞

0 个答案: