檢測碰撞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