检测碰撞JavaScript

Question

我有2个盒子，1个是播放器，另一个是墙壁。如果玩家继续前进的方向有一堵墙，我希望玩家停止移动。
在这个问题的底部提供了一个plunker链接来显示2个盒子的功能。

使用移动盒子时，我需要知道玩家如何检测墙壁并在接触墙壁时停止移动？这意味着玩家和墙不能位于同一个位置，玩家必须绕墙而不是穿过墙。
今天我需要这个，我会整晚整夜，所以请不要犹豫，评论或回答问题，谢谢。

function Player(row, col) { 
    this.isUpKey = false; 
    this.isRightKey = false; 
    this.isDownKey = false; 
    this.isLeftKey = false; 
    this.row = row; 
    this.col = col; 
    this.color = "#f00"; 
} 

function drawWalls() { 
    var walls = new Array(); 

    function Wall (row,col) { 
     this.row = row; 
     this.col = col; 
     this.color = "#000"; 
    } 

    walls[walls.length] = new Wall(5,5); 

    for (var b = 0; b < walls.length; b++) { 
     ctxWall.fillStyle = walls[b].color; 
     ctxWall.fillRect(walls[b].row*25, walls[b].col*25, 25, 25); 
    } 
} 


var players = []; 
var ctxPlayer; 
var ctxWall; 
var currentPlayer; 

window.onload = function() { 
    ctxPlayer = document.getElementById('c').getContext('2d'); 
    ctxWall = document.getElementById('walls').getContext('2d'); 
    currentPlayer = players[players.length] = new Player(2, 2); 
    setInterval(render, 25); 
    drawWalls(); 
} 
window.onkeypress = doKeyDown; 

function render() { 
    ClearPlayer(); 
    drawPlayer(); 
} 

function drawPlayer() { 
    for (var p = 0; p < players.length; p++) { 
    ctxPlayer.fillStyle = players[p].color; 
    ctxPlayer.fillRect(players[p].row * 25, players[p].col * 25, 25, 25); 
    } 
} 

function doKeyDown(e) { 
    console.log(e); 
    if (e.keyCode == 97) { 
    currentPlayer.isUpKey = true; 
    --currentPlayer.row; 
    } 
    if (e.keyCode == 100) { 
    currentPlayer.isDownKey = true; 
    ++currentPlayer.row; 
    } 
    if (e.keyCode == 119) { 
    currentPlayer.isLeftKey = true; 
    --currentPlayer.col; 
    } 
    if (e.keyCode == 115) { 
    currentPlayer.isRightKey = true; 
    ++currentPlayer.col; 
    } 
} 

function ClearPlayer() { 
    ctxPlayer.clearRect(0, 0, 600, 400); 
} 

http://plnkr.co/edit/27URhP?p=preview

我已尝试添加该功能checkIfPlayerMovingIntoWall（），以玩家和墙对象，看到波纹管，却又什么都没有发生。

function Wall (row,col) { 
    this.row = row; 
    this.col = col; 
    this.color = "#000"; 

    this.width= 25 
    this.height= 25 
    this.leftX = this.row; 
    this.rightX = this.row + this.width; 
    this.topY = this.col; 
    this.bottomY = this.col + this.height; 
} 
function Player(row, col) { 
    this.isUpKey = false; 
    this.isRightKey = false; 
    this.isDownKey = false; 
    this.isLeftKey = false; 
    this.row = row; 
    this.col = col; 
    this.color = "#f00"; 

    this.width= 25 
    this.height= 25 
    this.leftX = this.row; 
    this.rightX = this.row + this.width; 
    this.topY = this.col; 
    this.bottomY = this.col + this.height; 
} 
function checkIfPlayerMovingIntoWall() { 
if (currentPlayer.topY < wall.bottomY && 
    currentPlayer.bottomY > wall.topY && 
    currentPlayer.leftX < wall.rightX && 
    currentPlayer.rightX > wall.leftX) { 
    alert("collision detected"); 
    } 
} 

，请不要犹豫，回答或基于你有什么到目前为止

Answer 1

评论，我会让它像这样：

•设置包含你的墙全局数组（右现在你正在比较你的函数Wall）。
•设置全局变量以定义行和列的网格大小。
•拨打​​处理程序中的checkIfPlayerMovingIntoWall()。添加到此功能的属性告诉他我们想去的地方。如果它在墙上，请返回false并且不要移动。

// Code goes here 
 

 
function Player(col, row) { 
 
    this.isUpKey = false; 
 
    this.isRightKey = false; 
 
    this.isDownKey = false; 
 
    this.isLeftKey = false; 
 
    this.row = row; 
 
    this.col = col; 
 
    this.color = "#f00"; 
 

 
    this.width = 25 
 
    this.height = 25 
 
    this.leftX = this.row; 
 
    this.rightX = this.row + this.width; 
 
    this.topY = this.col; 
 
    this.bottomY = this.col + this.height; 
 
} 
 

 
function Wall(row, col) { 
 
    this.row = row; 
 
    this.col = col; 
 
    this.color = "#000"; 
 

 
    this.width = 25 
 
    this.height = 25 
 
    this.leftX = this.row; 
 
    this.rightX = this.row + this.width; 
 
    this.topY = this.col; 
 
    this.bottomY = this.col + this.height; 
 
} 
 

 
function drawWalls(x,y) { 
 
    walls.push(new Wall(x, y)); 
 

 
    for (var b = 0; b < walls.length; b++) { 
 
    ctxWall.fillStyle = walls[b].color; // color the box that is on count which is being created by adding a new box to the count 
 
    ctxWall.fillRect(walls[b].row * gridSize, walls[b].col * gridSize, walls[b].width, walls[b].height); // the box is a rectangle with a length of 50 and a width of 50 and when a new line is added time the row by 50 and col by 50 
 
    } 
 
} 
 

 
function checkIfPlayerMovingIntoWall(direction) { 
 
    var playerPos = []; 
 
    switch (direction) { 
 
    case 'up': 
 
     playerPos = [currentPlayer.col, currentPlayer.row - 1]; 
 
     break; 
 
    case 'down': 
 
     playerPos = [currentPlayer.col, currentPlayer.row + 1]; 
 
     break; 
 
    case 'left': 
 
     playerPos = [currentPlayer.col - 1, currentPlayer.row]; 
 
     break; 
 
    case 'right': 
 
     playerPos = [currentPlayer.col + 1, currentPlayer.row]; 
 
     break; 
 
    default: 
 
     playerPos = [currentPlayer.col, currentPlayer.row]; 
 
    } 
 
    for (i = 0; i < walls.length; i++) { 
 
    var Wall = walls[i]; 
 
    if (playerPos[0] * gridSize < Wall.row * gridSize + Wall.width && playerPos[0] * gridSize + currentPlayer.width > Wall.row * gridSize && 
 
     playerPos[1] * gridSize < Wall.col * gridSize + Wall.height && playerPos[1] * gridSize + currentPlayer.height > Wall.col * gridSize) { 
 
     console.log("they are touching") 
 
     return true; 
 
    } 
 
    } 
 
return false; 
 
} 
 

 
var walls = []; 
 
var players = []; 
 
var ctxPlayer; 
 
var ctxWall; 
 
var currentPlayer; 
 
var gridSize = 25; 
 

 
window.onload = function() { 
 
    ctxPlayer = document.getElementById('c').getContext('2d'); 
 
    ctxWall = document.getElementById('walls').getContext('2d'); 
 
    currentPlayer = players[players.length] = new Player(2, 2); 
 
    setInterval(render, 25); 
 
    drawWalls(1,2); 
 
    drawWalls(2,1); 
 
    drawWalls(4,1); 
 
} 
 
window.onkeydown = doKeyDown; 
 

 
function render() { 
 
    ClearPlayer(); 
 
    drawPlayer(); 
 
} 
 

 
function drawPlayer() { 
 
    for (var p = 0; p < players.length; p++) { 
 
    ctxPlayer.fillStyle = players[p].color; 
 
    ctxPlayer.fillRect(players[p].col * gridSize, players[p].row * gridSize, players[p].width, players[p].height); 
 
    } 
 
} 
 

 
function doKeyDown(e) { 
 
    e.preventDefault(); 
 
    if (e.which == 87 || e.which == 38) { 
 
    currentPlayer.isUpKey = true; 
 
    if (checkIfPlayerMovingIntoWall('up')) { 
 
     return; 
 
    } 
 
    --currentPlayer.row; 
 
    } 
 
    if (e.which == 83 || e.which == 40) { 
 
    if (checkIfPlayerMovingIntoWall('down')) { 
 
     return; 
 
    } 
 
    currentPlayer.isDownKey = true; 
 
    ++currentPlayer.row; 
 
    } 
 
    if (e.which == 65 || e.which == 37) { 
 
    if (checkIfPlayerMovingIntoWall('left')) { 
 
     return; 
 
    } 
 
    currentPlayer.isLeftKey = true; 
 
    --currentPlayer.col; 
 
    } 
 
    if (e.which == 68 || e.which == 39) { 
 
    if (checkIfPlayerMovingIntoWall('right')) { 
 
     return; 
 
    } 
 
    currentPlayer.isRightKey = true; 
 
    ++currentPlayer.col; 
 
    } 
 

 
} 
 

 
function ClearPlayer() { 
 
    ctxPlayer.clearRect(0, 0, 600, 400); 
 
}

canvas { 
 
    margin: 20px auto 0; 
 
    display: block; 
 
} 
 
#canvasHUD, 
 
#canvasPlayer, 
 
#walls { 
 
    margin: -400px auto 0; 
 
}

<canvas width="600" height="400" id="c"></canvas> 
 
<canvas width="600" height="400" id="walls"></canvas>

而且，我做你的右上X-Y行的列东西一些清理。

Forked plunk