Check collision, and the do something in js-CodePudding

I have a 2d, top-down game, where there are 2 players; one is controlled by the arrow keys, and the other one is controlled by the WASD keys. I want to make it to where when the 2 players overlap, I can make it to where it stops the program, or I can print something in the console, something like that, anything, really.(TO VIEW THE CODE SNIPPET, YOU HAVE TO CLICK "VIEW FULL PAGE", TO VIEW THE ENTIRE PROGRAM.)

Here is my code for the whole game in HTML, CSS, and JS:

//Canvas
mycan.style.display = "block";
mycan.height = 600;
mycan.width = 600;
//make players
let player = {x:511, y: 541, w:29, h:29};
let player2 = {x:60, y:31, w:30, h:29};


//Context
const ctx = mycan.getContext("2d");


//Start-position
ctx.fillRect(player.x, player.y, player.w, player.h);
ctx.fillRect(player2.x, player2.y, player2.w, player2.h);
//No-smooth-movement
window.onkeydown = move = (e) => {
    let key = e.keyCode;
  //player1(red)
    if     (key === 68 && player2.x <= mycan.width-30) {player2.x  = 30;} //right
    else if(key === 65 && player2.x >= 10) {player2.x -= 30;} //left
    else if(key === 83 && player2.y <= mycan.height-30) {player2.y  = 30;} //down
    else if(key === 87 && player2.y >= 10) {player2.y -= 30;} //up  
  
  
  //player2(blue)
    if     (key === 39 && player.x <= mycan.width-25) {player.x  = 30;} //right
    else if(key === 37 && player.x >= 10) {player.x -= 30;} //left
    else if(key === 40 && player.y <= mycan.height-25) {player.y  = 30;} //down
    else if(key === 38 && player.y >= 10) {player.y -= 30;} //up
}

const draw = ()=>{
//player draw, and player colors
  ctx.clearRect(0,0, mycan.width, mycan.height);
  ctx.fillRect(player.x, player.y, player.w, player.h);
  ctx.fillStyle = "blue";
  ctx.fillRect(player2.x,player2.y, player2.w, player2.h);
  ctx.fillStyle = 'red';
  
  
  
};

setInterval(()=>{
  draw();
},1000/60);

html, body {
  margin:20;
  padding: 20;
}
canvas {
  display: block;
}

#mycan {
  background-size: 30px 30px;
  background-image:
    linear-gradient(to right, black 1px, transparent 1px),
    linear-gradient(to bottom, black 1px, green 1px);

}

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />
<canvas id = "mycan" > </canvas>
    
    <font color = 'blue'> <h1>Player1 = blue</h1></font>
    <font color = 'red'> <h1>Player2 = red</h1></font>

  </head>
  <body>
    <main>
    </main>
    <script src="script.js"></script>

  </body>
</html>

CodePudding user response：

Here, I hope this helps! Basically, I call a handler method every time a player moves, checking if the coordinates of the 2 players match. If they do, update an info text stating so. I've also cleaned up the key handling code.

The collision detection is rather basic at the moment, please open another question if you'd need more advanced detection (e.g. detect if pieces are only partially colliding etc.)

//Canvas
mycan.style.display = "block";
mycan.height = 600;
mycan.width = 600;
//make players
let player = {x:510, y: 541, w:30, h:30};
let player2 = {x:60, y:31, w:30, h:30};

//Context
const ctx = mycan.getContext("2d");

const moveHandler = (isPlayer1) => {
    if (player.x == player2.x && player.y == player2.y) {
        document.getElementById('info').textContent = isPlayer1 ? 'Player1 killed player2' : 'Player2 killed player1'
    }
}

//Start-position
ctx.fillRect(player.x, player.y, player.w, player.h);
ctx.fillRect(player2.x, player2.y, player2.w, player2.h);
//No-smooth-movement
window.onkeydown = move = (e) => {
    let key = e.key;
  //player1(red)
    switch (key) {
        case 'w':
            player2.y -= 30;
            moveHandler(false);
            break;
        case 'a':
            player2.x -= 30;
            moveHandler(false);
            break;
        case 's':
            player2.y  = 30;
            moveHandler(false);
            break;
        case 'd':
            player2.x  = 30;
            moveHandler(false);
            break;
        case 'ArrowRight':
            player.x  = 30;
            moveHandler(true);
            break;
        case 'ArrowLeft':
            player.x -= 30;
            moveHandler(true);
            break;
        case 'ArrowDown':
            player.y  = 30;
            moveHandler(true);
            break;
        case 'ArrowUp':
            player.y -= 30;
            moveHandler(true);
            break;
    }
}

const draw = ()=>{
//player draw, and player colors
  ctx.clearRect(0,0, mycan.width, mycan.height);
  ctx.fillRect(player.x, player.y, player.w, player.h);
  ctx.fillStyle = "blue";
  ctx.fillRect(player2.x,player2.y, player2.w, player2.h);
  ctx.fillStyle = 'red';
  
  
  
};

setInterval(()=>{
  draw();
},1000/60);

html, body {
  margin:20;
  padding: 20;
}
canvas {
  display: block;
}

#mycan {
  background-size: 30px 30px;
  background-image:
    linear-gradient(to right, black 1px, transparent 1px),
    linear-gradient(to bottom, black 1px, green 1px);

}

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />
<canvas id = "mycan" > </canvas>
    <p id="info"></p>
    <font color = 'blue'> <h1>Player1 = blue</h1></font>
    <font color = 'red'> <h1>Player2 = red</h1></font>

  </head>
  <body>
    <main>
    </main>
    <script src="script.js"></script>

  </body>
</html>