javascript 中旧代码的无形障碍

Question

我正在 JavaScript 中制作光线投射游戏，一切正常，除了我更改 canvas 和地图大小时，有一个隐形障碍我以前有一个障碍现货，（绿线）

但我已经删除了该代码并且无法找到任何会在那里构成障碍的代码。有人能帮忙吗，这应该是一个非常简单的修复方法，我一定是忽略了一些东西，我尝试清除缓存，重新加载，但没有任何效果。这是代码（使用wasd来控制播放器）

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>

    <canvas width="600px" height="400px" id="c"></canvas>
    </body>
    <script>
c = document.getElementById("c");
w = c.width;
h = c.height;
ctx = c.getContext("2d");
var tilesize = 50;
var walls = [];
var rays = [];
rayangle = 1;
lowrayangle = -1;

var player = {
    x: 80,
    y: 80,
    size: 10,
    speed: 0.5,
    dir: 0,
    rot: 0,
    rotSpeed: 0.02,
    rotDir: 0,
}

var map = []




for (y = 0; y < map.length; y++) {
    for (x = 0; x < map[y].length; x++) {

        ctx.fillStyle = ["white", "black"][map[y][x]];
        ctx.fillRect(x * tilesize, y * tilesize, tilesize, tilesize);

        if (map[y][x] == 1) {
            var wallSeg = {
                coordX: x * tilesize,
                coordY: y * tilesize,
                sizeX: tilesize,
                sizeY: 0,
            }
            var wallSeg2 = {
                coordX: x * tilesize,
                coordY: y * tilesize,
                sizeX: 0,
                sizeY: tilesize,
            }
            var wallSeg3 = {
                coordX: x * tilesize,
                coordY: (y * tilesize) + tilesize,
                sizeX: tilesize,
                sizeY: 0,
            }
            var wallSeg4 = {
                coordX: (x * tilesize) + tilesize,
                coordY: y * tilesize,
                sizeX: 0,
                sizeY: tilesize,
            }
            walls.push(wallSeg)
            walls.push(wallSeg2)
            walls.push(wallSeg3)
            walls.push(wallSeg4)

        }
    }
}




function keydown(event) {
    switch (event.keyCode) {
        case 87:
            player.dir = 1;
            break;
        case 83:
            player.dir = -1;
            break;
        case 68:
            player.rotDir = -1;
            break;
        case 65:
            player.rotDir = 1;
            break;
    }

}

function keyup(event) {
    switch (event.keyCode) {
        case 87:
            player.dir = 0;
            break;
        case 83:
            player.dir = 0;
            break;
        case 68:
            player.rotDir = 0;
            break;
        case 65:
            player.rotDir = 0;
            break;
    }

}

window.requestAnimationFrame(update)

function update() {
    var map = []
    var map = [
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],
    [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,],
    [1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1,],
    [1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1,],
    [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1,],
    [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,],
    [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1,],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,]
]
    ctx.clearRect(0, 0, w, h);
    rays = [];
    //move


    rotstep = player.rotSpeed * player.rotDir
    movestep = player.speed * player.dir;
    player.rot += rotstep;
    rayangle += rotstep;
    lowrayangle += rotstep;
    newY = player.y - Math.cos(player.rot) * movestep;
    newX = player.x - Math.sin(player.rot) * movestep;

    leftbY = (player.y - 10) - Math.cos(player.rot) * movestep;
    leftbX = (player.x - 10) - Math.sin(player.rot) * movestep;
    rightbY = (player.y + 10) - Math.cos(player.rot) * movestep;
    rightbX = (player.x + 10) - Math.sin(player.rot) * movestep;



    //borders 
    var leftcol = Math.floor((leftbX) / tilesize)
    var leftrow = Math.floor((leftbY) / tilesize)
    var rightcol = Math.floor((rightbX) / tilesize)
    var rightrow = Math.floor((rightbY) / tilesize)
    if (map[rightcol][rightrow] == 0 && map[leftcol][leftrow] == 0) {
        player.y = newY;
        player.x = newX;
    }

    //map
    for (y = 0; y < map.length; y++) {
        for (x = 0; x < map[y].length; x++) {

            ctx.fillStyle = ["white", "black"][map[y][x]];
            ctx.fillRect(x * tilesize, y * tilesize, tilesize, tilesize);

        }
    }



    //rays  

    for (i = lowrayangle; i < rayangle; i += 0.03) {

        var detail = 0.05;
        var rayLn = 1000;
        var memX;
        var memY;
        for (j = 0; j < rayLn; j += detail) {
            var lY = player.y - Math.cos(i) * j;
            var lX = player.x - Math.sin(i) * j;

            memX = lX;
            memY = lY;

            lX = lX - (lX % tilesize);
            lY = lY - (lY % tilesize);

            if (map[lY / tilesize][lX / tilesize] == 1) {
                break;
            }
        }

        var ray = {
            rayAngle: i,
            newY: memY,
            newX: memX,
            x: player.x,
            y: player.y
        }
        rays.push(ray)
    }
    for (i = 0; i < rays.length; i++) {
        ctx.beginPath();
        ctx.moveTo(rays[i].x, rays[i].y)
        ctx.lineTo(rays[i].newX, rays[i].newY)
        ctx.stroke();
    }
    //player
    markerY = player.y - Math.cos(player.rot) * 30;
    markerX = player.x - Math.sin(player.rot) * 30;
    ctx.fillStyle = "red";
    ctx.beginPath();
    ctx.ellipse(player.x, player.y, player.size, player.size, player.rot * (Math.PI / 180), 0, 2 * Math.PI);
    ctx.fill();
    
    window.requestAnimationFrame(update)
}

document.addEventListener("keydown", function(event) {
    keydown(event);
})
document.addEventListener("keyup", function(event) {
    keyup(event);
})
    </script>
</html>

Answer 1

地图碰撞时行列互换

if (map[rightrow][rightcol] == 0 && map[leftrow][leftcol] == 0) {
    player.y = newY;
    player.x = newX;
}

javascript 中旧代码的无形障碍

Invisible barrier from old code in javascript

javascript

html

canvas

2d

raycasting