javascript - 为一个简单的 2d 射击游戏理解 Javascript 中基于 Tile 的碰撞

Question

我在这个用于大学项目的 Javascript 2d 射击游戏上遇到了很多麻烦。我已经完成了瓦片地图、玩家精灵、子弹机制，但现在我进入了 colisions 的部分......而且我不明白如何为此启动任何代码。

我希望我的播放器位于平台之上，我做了 playerx = map [10] 和 playery = map [9]，但如果我输入更多值，这就是我得到的位置，我知道这不是正确的方法但我真的迷路了：

我只想了解如何将我的播放器链接到我的瓦片地图，因为我的播放器没有瓦片属性？我需要什么变量或控制器才能让它工作？更重要的是，我是否需要更改我已经完成的代码才能使其正常工作？

window.onload = function () {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');

var cols = 25;
var rows = 18;
var tileWidth = 32;
var tileHeight = 32;
var tileX = 0;
var tileY = 0;
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: map [10],
    y: map [9],
    width: 48,
    height: 48,
    frameX: 0,
    frameY: 1,
    speed: 3,
    moving: false,
    movingLeft: false,
    movingRight: false,
    jump: false,
    jumpSpeed:10,
    jumpLeft: false,
    jumpRight: false,
    gravity: 0.5,
    jumpY: 500,
    velY: 0,
    ground: true,
    groundY: 552,
    direction: 0,
    facing: 'right',
    shot:false
};

var enemy = {
    enemyX: 0,
    enemyY:600-48,
    enemyWidth:48,
    enemyHeight:48,
    enemySpeed: 2,
    enemyFrameX: 0,
    enemyFrameY: 0,
};

var bullets = [];
var bullet = {
    color: '#FFFFFF',
    width: 4,
    height: 2,
    x: 0,
    y: 0,
    speed: 3.5,
    direction: null
}


var enemySprite = new Image();
enemySprite.src = "Sprites/trump_run_sprite.png";

var playerSprite = new Image();
playerSprite.src = "Sprites/sprite_sheet_soldier3.png";

function drawEnemy(img, sX, sY, sW, sH, dX, dY, dW, dH) {
    ctx.drawImage(img, sX, sY, sW, sH, dX, dY, dW, dH);
}

function drawSprite(img, sX, sY, sW, sH, dX, dY, dW, dH) {
    ctx.drawImage(img, sX, sY, sW, sH, dX, dY, dW, dH);
}

函数绘制地图（）{

    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);
                break;
            case 258:
                ctx.drawImage(map258, x*tileWidth ,y*tileHeight, tileWidth, tileHeight);
                break;
        }
    }
}

}

function animate() { // animation loop
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawMap();
    drawEnemy(enemySprite, enemy.enemyWidth * enemy.enemyFrameX, enemy.enemyHeight * enemy.enemyFrameY, enemy.enemyWidth, enemy.enemyHeight, enemy.enemyX, enemy.enemyY, enemy.enemyWidth, enemy.enemyHeight);
    drawSprite(playerSprite, player.width * player.frameX, player.height * player.frameY, player.width, player.height, player.x, player.y, player.width, player.height);
    movePlayer();
    drawBullet();
    MoveEnemy();
    MovingSprite();
    requestAnimationFrame(animate);
   
}

setTimeout(animate, 100);




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

    }
    //Right
    if (keys[39] && player.x < canvas.width - player.width) {
        player.x += player.speed;
        player.frameY = 3;
        player.movingRight = true
        player.movingLeft = false
        player.direction = 1;
        player.facing = "right";

    }
    // UP
    if (keys[38]) {
        player.jump = true;
        player.ground = false;
        player.y -= player.jumpSpeed;
        player.frameY = 5;
    }

    // JUMP + GRAVITY (BOUNCE EFFECT)
    if (player.jump === true) {
        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;
            player.ground = true

        }
    }
}

function MovingSprite() {
    // RUN LEFT & RIGHT + IDLE ANIMATION SPRITE + JUMP (LATER)
     if (player.frameX < 5) {
        player.frameX++
    } else player.frameX = 0;

    if (player.moving === false && player.movingLeft === true && player.movingRight === false ) {
        player.frameY = 4;
        player.direction = 0;
        if (player.frameX < 4) {
            player.frameX++
        } else player.frameX = 0;
    }

    if (  player.moving=== false && player.movingRight === true && player.movingLeft === false) {
        player.frameY = 1;
        player.direction = 1;
        if (player.frameX < 4) {
            player.frameX++
        } else player.frameX = 0;
    }
}