javascript - 为什么我的玩家会与整个 y 块而不是 y 块 258 和 282 发生碰撞？

Question

我从 Javascript 上的 colisions 开始，他们正在工作，问题是我认为我的播放器没有与瓷砖碰撞。他正在与我在 colsion 函数上所做的整个 x 和 y 发生冲突。我在运行整个瓦片地图数组的 cicle “for” 之后使用了 switch/case。每个案例代表一个瓷砖......但我不太确定。

这是我拥有的代码 + 绘制地图代码 + 播放器属性。如果有人可以帮助我，那就太好了！

var cols = 25;
var rows = 18;
var tileWidth = 32;
var tileHeight = 32;
var tileX = 0;
var tileY = 0;
var solid = false;
canvas.width = cols * tileWidth;
canvas.height = rows * tileHeight;
var map = [
    467,468,468,468,468,468,468,467,468,468,468,468,468,468,468,468,467,468,468,468,468,468,467,468,468,
    499,500,501,468,468,468,468,499,500,501,468,468,468,468,468,468,499,500,501,468,468,468,499,500,501,
    468,468,468,468,468,467,468,468,468,468,468,499,500,501,468,468,468,468,468,467,468,468,468,468,468,
    468,468,468,468,468,499,500,501,468,468,468,468,468,468,468,468,468,468,468,499,500,501,468,468,468,
    468,467,468,468,468,468,468,468,468,467,468,468,468,468,467,468,468,468,468,468,468,468,467,468,468,
    468,499,500,501,468,468,468,468,468,499,500,501,468,468,499,500,501,468,468,468,468,468,499,500,501,
    468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,
    468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,
    468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,
    468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,
    468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,
    468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,
    468,468,468,468,468,468,468,468,282,282,282,282,282,282,282,282,282,468,468,468,468,468,468,468,468,
    468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,
    258,258,258,258,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,258,258,258,258,
    528,528,528,528,258,258,258,258,258,258,258,258,258,258,258,258,258,258,258,258,258,528,528,528,528,
    528,528,528,528,528,528,528,528,528,528,528,528,528,528,528,528,528,528,528,528,528,528,528,528,528,
    528,528,528,528,528,528,528,528,528,528,528,528,528,528,528,528,528,528,528,528,528,528,528,528,528
];

数学.地板（）

var map467 = new Image();
map467.src = "467_tile.png"
var map468 = new Image();
map468.src = "468_tile.png"
var map499 = new Image();
map499.src = "499_tile.png"
var map500 = new Image();
map500.src = "500_tile.png"
var map501 = new Image();
map501.src = "501_tile.png"
var map528 = new Image();
map528.src = "528_tile.png"
var map258 = new Image();
map258.src = "258_tile.png"
var map282 = new Image();
map282.src = "282_tile.png"



var keys = [];
var player = {
    x: 400,
    y: 439,
    width: 48,
    height: 48,
    frameX: 0,
    frameY: 1,
    speed: 3,
    moving: false,
    movingLeft: false,
    movingRight: false,
    jump: false,
    jumpSpeed:12,
    jumpLeft: false,
    jumpRight: false,
    gravity: 0.7,
    jumpY: 500,
    velY: 0,
    ground: true,
    groundY: 552,
    direction: 0,
    facing: 'right',
    shot:false
};

 function drawMap() {
    for (var y = 0; y < rows; y++){
        for (var x = 0; x<cols; x++) {
            switch (map[((y*cols)+x)]){
                case 467:
                    ctx.drawImage(map467, x*tileWidth ,y*tileHeight, tileWidth, tileHeight);
                    break;
                case 468:
                    ctx.drawImage(map468, x*tileWidth ,y*tileHeight, tileWidth, tileHeight);
                    break;

                case 499:
                    ctx.drawImage(map499, x*tileWidth ,y*tileHeight, tileWidth, tileHeight);
                    break;
                case 500:
                    ctx.drawImage(map500, x*tileWidth ,y*tileHeight, tileWidth, tileHeight);
                    break;
                case 501:
                    ctx.drawImage(map501, x*tileWidth,y*tileHeight, tileWidth, tileHeight);
                    break;
                case 528:
                    ctx.drawImage(map528, x*tileWidth ,y*tileHeight, tileWidth, tileHeight);
                    break;
                case 282:
                    ctx.drawImage(map282, x*tileWidth ,y*tileHeight, tileWidth, tileHeight);
                    solid = true;
                    break;
                case 258:
                    ctx.drawImage(map258, x*tileWidth ,y*tileHeight, tileWidth, tileHeight);
                    solid =true;
                    break;
            }
        }
    }
}


    function colisionLeft(x, y){
    if((player.x) >= x*tileWidth && (player.x) <= ((x*tileWidth) + tileWidth)){
        if((((player.y + 24) >= (y*tileWidth)) && ((player.y + 24) <= (y*tileWidth + tileHeight))))  {
            return true;
        }
    }
    return false;
}

function colisionRight(x, y){
    if(((player.x + player.width) >= x*tileWidth) && ((player.x + player.width) <= ((x*tileWidth) + tileWidth))){
        if((((player.y + 24) >= (y*tileWidth)) && ((player.y + 24) <= (y*tileWidth + tileHeight))))  {
            return true;
        }
    }
    return false;
}

function colisionBottom(x, y){
    if((player.y  + player.height) >= (y*tileHeight) && ((player.y + player.height) >= ((y*tileHeight) + tileHeight))) {
        if ((((player.y+ 10 ) >= (y * tileWidth)) && ((player.y+ 10 ) <= (y * tileWidth + tileHeight)))) {
            return true;
        }
    }
    return false;
}

function colisionTop(x, y){
    if(((player.y) <= (y*tileHeight + tileHeight))){
        if((((player.y) >= (y*tileWidth)) && ((player.y ) <= (y*tileWidth + tileHeight))))  {
            return true;
        }
    }
    return false;
}


function movePlayer() {
    // console.log('map');
    // console.log(map);
    //Left
    if (keys[37] && player.x > 0) {
        player.frameY = 2;
        player.movingLeft = true;
        player.movingRight = false;
        player.direction =0
        player.facing = "left"

        var erro = false;
        var bot = false
        for (var y = 0; y < rows; y++){
            for (var x = 0; x<cols; x++) {
                switch (map[((y*cols)+x)]){
                    case 258:
                        if(colisionLeft(x, y) == true){
                            erro = true;
                            console.log("colision left");

                        }
                        break;

                }
            }
        }
        if(erro == false){
            player.x -= player.speed;

        }



    }
    //Right
    if (keys[39] && player.x < canvas.width - player.width) {
        // console.log('right');

        player.frameY = 3;
        player.movingRight = true
        player.movingLeft = false
        player.direction = 1;
        player.facing = "right";

        var erro = false;
        for (var y = 0; y < rows; y++){
            for (var x = 0; x<cols; x++) {
                switch (map[((y*cols)+x)]){
                    case 258:

                        if(colisionRight(x, y) == true){
                            erro = true;
                            console.log("colision right");

                        }
                        break;
                }
            }
        }
        if(erro == false){
            player.x += player.speed;

        }
    }
    // UP
    if (keys[38]) {
        console.log('up');
        player.jump = true;
        player.ground = false;
        player.y -= player.jumpSpeed;
        player.frameY = 5;
        var top= false;
        var bot = false;
        for (var y = 0; y < rows; y++){
            for (var x = 0; x<cols; x++) {
                switch (map[((y*cols)+x)]){
                    case 258:
                        if(colisionBottom(x, y) == true){
                            bot = true;
                        }
                        break;

                    case 282:
                        if (colisionTop(x,y) == true){
                            top = true;

                            player.jump = false

                            console.log("colision top")
                        }
                        break;

                }
            }
        }

        if(bot == false){
            player.velY -= player.gravity;
        }
        if(top == false){
            

            player.velY -= player.gravity;



        }
    }

    // JUMP + GRAVITY (BOUNCE EFFECT)
    if (player.jump === true) {
        console.log("1111");
        player.velY += player.gravity
        player.y += player.velY
        if (player.y >= canvas.height - player.height && player.jump === true) {
            player.y = canvas.height - player.height
            player.velY = 0
            player.jump = false;
        }
    }

    if(player.ground === false){
        var top = false;
        var bot = false;
        for (var y = 0; y < rows; y++){
            for (var x = 0; x<cols; x++) {
                switch (map[((y*cols)+x)]){
                    case 258:
                        if(colisionBottom(x, y) == true){
                            bot = true;
                            //player.y = y - player.height
                            player.velY = 0
                            player.jump = false;
                            player.ground = true

                        }
                        break;

                }
            }
        }
        if(bot === false) {
              player.velY += player.gravity
            player.ground = false;


        }
       // if(top === false) {
       //     player.velY += player.gravity}
        // if(bot == false){
        //     player.velY += player.gravity
        //     player.y += player.velY
        // }
                    
    }

}

--------------------- COLISIONS CODE WITHOUT () 现在最糟糕 :( ----------------- 函数 colsionLeft (x, y){ if(player.x >= x tileWidth && player.x <= ((x tileWidth) + tileWidth)){ if((player.y + 24) >= (y tileWidth) && (player. y + 24) <= ((y tileWidth) + tileHeight)) { return true; } } return false; }

function colisionRight(x, y){
    if((player.x + player.width) >= (x*tileWidth) && (player.x + player.width) <= ((x*tileWidth) + tileWidth)){
        if((player.y + 24) >= (y*tileWidth) && (player.y + 24) <= ((y*tileWidth) + tileHeight))  {
            return true;
        }
    }
    return false;
}

function colisionBottom(x, y){
    if((player.y  + player.height) >= (y*tileHeight) && (player.y + player.height) >= ((y*tileHeight) + tileHeight)) {
        if ((player.y+ 10 ) >= (y * tileWidth) && (player.y+ 10 ) <= ((y * tileWidth) + tileHeight)) {
            return true;
        }
    }
    return false;
}

function colisionTop(x, y){
    if(player.y <= ((y*tileHeight) + tileHeight)){
        if(player.y >= (y*tileWidth) && player.y  <= ((y*tileWidth) + tileHeight))  {
            return true;
        }
    }
    return false;
}