2D Array Platformer Wall Collision - Javascript

debugcn 发表于 Dev

斯特凡

我正在尝试用 javascript 构建一个平台游戏，使用二维数组进行关卡设计。

你可以在这里查看我的代码：https : //pastebin.com/bGRqsrPM

var c;
var ctx;

var gridMap = [

    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,2,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [1,1,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [1,1,1,1,1,1,1,1,1,1,1,1,2,2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]

];

var tileW = 40;
var tileH = 40;

var player = new Player(0, 0, 40, 0);

var floor = false;

var holdLeft;
var holdRight;

window.onload = function(){

    c = document.getElementById('game');
    ctx = c.getContext('2d');

    drawRect(0, 0, c.width, c.height, 'black');

    document.addEventListener('keydown', keyDown);
    document.addEventListener('keyup', keyUp);

    update();

}

function keyDown(e){

    switch(e.keyCode){

        case 38:
            if(floor){

                player.yVel = -5;   

            }           
            break;
        case 37:
            holdLeft = true;
            break;      
        case 39:
            holdRight = true;
            break;
    }


}

function keyUp(e){

    switch(e.keyCode){

        case 38:
            if(player.yVel < -5){

                    player.yVel = -5;               

                }                   
            break;
        case 37:
            holdLeft = false;
            break;
        case 39:
            holdRight = false;
            break;
    }


}


var drawRect = function (x, y, size, color){

    ctx.fillStyle = color;
    ctx.fillRect(x, y, size, size);

}

function Player(x, y, s, v){

    this.x = x;
    this.y = y;
    this.s = s;
    this.v = v;

    this.xVel = 0;
    this.yVel = 0;

    this.move = function(){

        this.y += this.yVel;
        this.x += this.xVel;

    }

    this.draw = function(){

        ctx.fillStyle =  'red';
        ctx.fillRect(this.x, this.y, this.s, this.s);
        ctx.fillStyle =  'black';   

    }


}

function gravity(){ 

        player.yVel += 0.2; 

}

function drawGrid(){

    for(col=0; col < gridMap.length; col++){

        for(row=0; row < gridMap[col].length; row++){

            if(gridMap[col][row] == 1){

                drawRect(row*tileW, col*tileH, tileH, 'white');

            }           

        }

    }
}



function checkFloor(){

    for(col=0; col < gridMap.length; col++){

        for(row=0; row < gridMap[col].length; row++){           

            if(gridMap[col][row] == 1){

                var tileX = row*tileW;
                var tileY = col*tileH;


                if(player.x + player.s >= tileX && player.x <= tileX + tileW && player.y + player.s >= tileY && player.y <= tileY + tileH){                 

                    floor = true;
                    player.yVel = 0;
                    player.y = tileY - player.s;

                }


            }                   

        }
    }

}


function update(){  

    drawRect(0, 0, c.width, c.height, 'black');

    drawGrid();

    if(floor){

        player.xVel *= 0.8;

    }
    else{

        gravity();  

    }

    floor = false;

    if(holdLeft){

        player.xVel = -2;
    }   

    if(holdRight){

        player.xVel = 2;
    }

    player.move();  

    checkFloor();

    player.draw();

    requestAnimationFrame(update);  

}

让玩家在平台上行走工作正常 - 但我找不到让我的角色在靠近墙壁时停止移动的逻辑解决方案。

很明显，它会被扔到顶部瓷砖上，因为我的代码正在检查玩家坐标是否与平台重叠。

因此，我需要检查我的玩家面前的下一块瓷砖是否是一堵墙，并阻止我的角色进一步移动。

关于如何实现这一点的任何建议？

谢谢

米哈尔扬

假设 2 号是一堵墙。由于您在 checkFloor 内循环，您可以检查与数字 2 的碰撞。希望这个例子能让您了解您可以做什么。

function checkFloor(){

for(col=0; col < gridMap.length; col++){

    for(row=0; row < gridMap[col].length; row++){           

        if(gridMap[col][row] == 1){

            var tileX = row*tileW;
            var tileY = col*tileH;


            if(player.x + player.s >= tileX && player.x <= tileX + tileW && player.y + player.s >= tileY && player.y <= tileY + tileH){                 

                floor = true;
                player.yVel = 0;
                player.y = tileY - player.s;

            }
        }else  if(gridMap[col][row] == 2){  
          var tileX = row*tileW;
          //if player + the next movement is same as tileX stop the movement
          if((player.xVel+player.x) == tileX){
             player.xVel = 0;
          }
         }
        }    
    }
}}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。