了解 Javascript 中基于 Tile 的碰撞，用于简单的 2d 射击游戏

编程问答 2022-05-26

问题描述

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

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

enter image description here

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

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,467,499,500,501,282,258,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,dH);
}

function drawSprite(img,dH);
}

函数 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,tileHeight);
                break;

            case 499:
                ctx.drawImage(map499,tileHeight);
                break;
            case 500:
                ctx.drawImage(map500,tileHeight);
                break;
            case 501:
                ctx.drawImage(map501,tileHeight);
                break;
            case 528:
                ctx.drawImage(map528,tileHeight);
                break;
            case 282:
                ctx.drawImage(map282,tileHeight);
                break;
            case 258:
                ctx.drawImage(map258,tileHeight);
                break;
        }
    }
}

}

function animate() { // animation loop
    ctx.clearRect(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.enemyHeight);
    drawSprite(playerSprite,player.width * player.frameX,player.height * player.frameY,player.width,player.height,player.x,player.y,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;
    }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptjstilemap