Javascript 如何处理二维中的侧向碰撞？_Javascript_Html5 Canvas_Collision Detection

Javascript 如何处理二维中的侧向碰撞？

javascript html5-canvas

Javascript 如何处理二维中的侧向碰撞？,javascript,html5-canvas,collision-detection,Javascript,Html5 Canvas,Collision Detection,我一直在试验html元素。我正在尝试制作一个2d侧滚游戏，但我遇到了物体侧面碰撞的问题在物体的顶部行走效果很好，撞击物体的底部也很好，但我不能与物体的侧面碰撞。我做了几十次尝试，结果都引入了几十个新的bug，但也没有解决问题这是密码 <html> <canvas id="canvas" width="200" height="200" style="border-style:solid; border-width:1px"></canvas> <s

我一直在试验html元素。我正在尝试制作一个2d侧滚游戏，但我遇到了物体侧面碰撞的问题

在物体的顶部行走效果很好，撞击物体的底部也很好，但我不能与物体的侧面碰撞。我做了几十次尝试，结果都引入了几十个新的bug，但也没有解决问题

这是密码

<html>
<canvas id="canvas" width="200" height="200" style="border-style:solid; border-width:1px"></canvas>
<script>if (typeof module === 'object') { window.module = module; module = undefined; }</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>if (window.module) module = window.module;</script>

<span id="x"></span>
<span id="y"></span>
<br>
<br>
<span id="test"></span>

<script>
    let canvas = document.getElementById("canvas");
    let ctx = canvas.getContext("2d");

    function clear() {
        ctx.fillStyle = "#FFFFFF"
        ctx.fillRect(0, 0, 200, 200);
        ctx.fillStyle = "#000000"
    }
    let keys = {};
    $(document).keydown(function (e) { //Records keystrokes
        keys[e.which] = true;
    })
    $(document).keyup(function (e) {
        delete keys[e.which];
    });

    let worldx = 10;
    const x = 90;
    let y = 0;

    let yVel = 0;

    let grounded = false;

    let objects = { //I'm representing the game world as an array of boxes
        "boxes": [
            { "width": 50, "height": 10, "x": 45, "y": 100 },
            { "width": 75, "height": 20, "x": 60, "y": 150 },
            { "width": 10, "height": 100, "x": 125, "y": 40 }
        ]
    }

    let id = window.setInterval(function () { //Lock it at ~60fps
        clear();
        $("span").empty();
        ctx.fillRect(x, y, 10, 20) //Player character
        yVel += 9.8 * 0.016 // force of gravity
        y += yVel

        for (let check = 0; check != objects.boxes.length; check++) { //Loop through objects
            if (y >= objects.boxes[check].y - 20 && y <= objects.boxes[check].y + objects.boxes[check].height && x < objects.boxes[check].x + worldx + objects.boxes[check].width && x >= objects.boxes[check].x - 10 + worldx) { //Check if there is a collision.
                yVel = 0;

                //TODO add something here that will handle side-on collisions

                if (y <= objects.boxes[check].y + objects.boxes[check].height / 2) {
                    y = objects.boxes[check].y - 20
                    grounded = true
                }
                else {
                    y = objects.boxes[check].y + objects.boxes[check].height
                }
            }
            ctx.fillRect(objects.boxes[check].x + worldx, objects.boxes[check].y, objects.boxes[check].width, objects.boxes[check].height) // draw object

        }


        $("#x").append(Math.floor(x - worldx) + ", ")
        $("#y").append(Math.floor(y))

        for (i in keys) {
            if (!keys.hasOwnProperty(i)) { continue; }
            if (i == 32 && grounded) { //Space bar
                yVel -= 5;
                grounded = false;
            }

            if (i == 65) { //A
                worldx += 3;
            }
            if (i == 68) { //D
                worldx -= 3;
            }
        }
    }, 16)
</script>

</html>


if（typeof module==='object'）{window.module=module；module=undefined；}
如果（window.module）module=window.module；




让canvas=document.getElementById（“canvas”）；
设ctx=canvas.getContext（“2d”）；
函数clear（）{
ctx.fillStyle=“#FFFFFF”
ctx.fillRect（0,0200200）；
ctx.fillStyle=“#000000”
}
让keys={}；
$（文档）.keydown（函数（e）{//记录击键
键[e.which]=true；
})
$（文档）.keyup（函数（e）{
删除键[e.which]；
});
设worldx=10；
常数x=90；
设y=0；
设yVel=0；
让接地=假；
让objects={//我将游戏世界表示为一个盒子数组
“盒子”：[
{“宽度”：50，“高度”：10，“x”：45，“y”：100}，
{“宽度”：75，“高度”：20，“x”：60，“y”：150}，
{“宽度”：10，“高度”：100，“x”：125，“y”：40}
]
}
设id=window.setInterval（函数（）{//将其锁定在~60fps
清除（）；
$（“span”）.empty（）；
ctx.fillRect（x，y，10，20）//玩家角色
yVel+=9.8*0.016//重力
y+=yVel
for（让check=0；check！=objects.boxes.length；check++）{//循环对象
如果（y>=objects.box[check].y-20&&y=objects.box[check].x-10+worldx）{//检查是否存在冲突。
yVel=0；
//TODO在此添加将处理侧面碰撞的内容
如果（y这对您来说是一个好的开始（这段代码是从零开始的，您的代码对我来说有点难理解）：
var px=0；//玩家的x和y
var-py=0；
var-velX=0；
var=0；
var接地=假；
var pw=20；//播放器的宽度
var ph=20；//球员身高
变量块=函数（x，y，w，h）{
如果（px+pw>x&&pxy&&py+ph0）{//Top
f=0；
接地=正确；
py=y-ph；
}
如果（px+pw>x&&pxy+h-5&&vly<0）{//
velY=2；//砰
py=y+h；
}
如果（px+pw>x&&pxy&&py0）{//左
velX=0；
px=x-pw；
}
如果（px>x+w-5&&pxy&&py

var px = 0;//player's x and y
var py = 0;
var velX = 0;
var velY = 0;
var grounded = false;
var pw = 20;//player's width
var ph = 20;//player's height

var block = function(x, y, w, h) {
    if (px + pw > x && px < x + w && py + ph > y && py + ph < y + 5 && velY > 0) {//Top
    velY = 0;
    grounded = true;
    py = y - ph;
    }
    if (px + pw > x && px < x + w && py < y + h && py > y + h - 5 && velY < 0) {//bottom
    velY = 2;//bonk
    py = y + h;
    }
    if (px + pw > x && px < x + 5 && py + ph > y && py < y + h && velX > 0) {//left
    velX = 0;
    px = x - pw;
    }
    if (px > x + w - 5 && px < x + w && py + ph > y && py < y + h && velX < 0) {//right
    velX = 0;
    px = x + w;
    }
};