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:
JavaScript
x
48
48
1
//Canvas2
mycan.style.display = "block";3
mycan.height = 600;4
mycan.width = 600;5
//make players6
let player = {x:511, y: 541, w:29, h:29};7
let player2 = {x:60, y:31, w:30, h:29};8
9
10
//Context11
const ctx = mycan.getContext("2d");12
13
14
//Start-position15
ctx.fillRect(player.x, player.y, player.w, player.h);16
ctx.fillRect(player2.x, player2.y, player2.w, player2.h);17
//No-smooth-movement18
window.onkeydown = move = (e) => {19
let key = e.keyCode;20
//player1(red)21
if (key === 68 && player2.x <= mycan.width-30) {player2.x += 30;} //right22
else if(key === 65 && player2.x >= 10) {player2.x -= 30;} //left23
else if(key === 83 && player2.y <= mycan.height-30) {player2.y += 30;} //down24
else if(key === 87 && player2.y >= 10) {player2.y -= 30;} //up 25
26
27
//player2(blue)28
if (key === 39 && player.x <= mycan.width-25) {player.x += 30;} //right29
else if(key === 37 && player.x >= 10) {player.x -= 30;} //left30
else if(key === 40 && player.y <= mycan.height-25) {player.y += 30;} //down31
else if(key === 38 && player.y >= 10) {player.y -= 30;} //up32
}33
34
const draw = ()=>{35
//player draw, and player colors36
ctx.clearRect(0,0, mycan.width, mycan.height);37
ctx.fillRect(player.x, player.y, player.w, player.h);38
ctx.fillStyle = "blue";39
ctx.fillRect(player2.x,player2.y, player2.w, player2.h);40
ctx.fillStyle = 'red';41
42
43
44
};45
46
setInterval(()=>{47
draw();48
},1000/60);JavaScript
1
15
15
1
html, body {2
margin:20;3
padding: 20;4
}5
canvas {6
display: block;7
}8
9
#mycan {10
background-size: 30px 30px;11
background-image:12
linear-gradient(to right, black 1px, transparent 1px),13
linear-gradient(to bottom, black 1px, green 1px);14
15
}JavaScript
1
18
18
1
<!DOCTYPE html>2
<html lang="en">3
<head>4
<link rel="stylesheet" type="text/css" href="style.css">5
<meta charset="utf-8" />6
<canvas id = "mycan" > </canvas>7
8
<font color = 'blue'> <h1>Player1 = blue</h1></font>9
<font color = 'red'> <h1>Player2 = red</h1></font>10
11
</head>12
<body>13
<main>14
</main>15
<script src="script.js"></script>16
17
</body>18
</html>Advertisement
Answer
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.)
JavaScript
1
75
75
1
//Canvas2
mycan.style.display = "block";3
mycan.height = 600;4
mycan.width = 600;5
//make players6
let player = {x:510, y: 541, w:30, h:30};7
let player2 = {x:60, y:31, w:30, h:30};8
9
//Context10
const ctx = mycan.getContext("2d");11
12
const moveHandler = (isPlayer1) => {13
if (player.x == player2.x && player.y == player2.y) {14
document.getElementById('info').textContent = isPlayer1 ? 'Player1 killed player2' : 'Player2 killed player1'15
}16
}17
18
//Start-position19
ctx.fillRect(player.x, player.y, player.w, player.h);20
ctx.fillRect(player2.x, player2.y, player2.w, player2.h);21
//No-smooth-movement22
window.onkeydown = move = (e) => {23
let key = e.key;24
//player1(red)25
switch (key) {26
case 'w':27
player2.y -= 30;28
moveHandler(false);29
break;30
case 'a':31
player2.x -= 30;32
moveHandler(false);33
break;34
case 's':35
player2.y += 30;36
moveHandler(false);37
break;38
case 'd':39
player2.x += 30;40
moveHandler(false);41
break;42
case 'ArrowRight':43
player.x += 30;44
moveHandler(true);45
break;46
case 'ArrowLeft':47
player.x -= 30;48
moveHandler(true);49
break;50
case 'ArrowDown':51
player.y += 30;52
moveHandler(true);53
break;54
case 'ArrowUp':55
player.y -= 30;56
moveHandler(true);57
break;58
}59
}60
61
const draw = ()=>{62
//player draw, and player colors63
ctx.clearRect(0,0, mycan.width, mycan.height);64
ctx.fillRect(player.x, player.y, player.w, player.h);65
ctx.fillStyle = "blue";66
ctx.fillRect(player2.x,player2.y, player2.w, player2.h);67
ctx.fillStyle = 'red';68
69
70
71
};72
73
setInterval(()=>{74
draw();75
},1000/60);JavaScript
1
15
15
1
html, body {2
margin:20;3
padding: 20;4
}5
canvas {6
display: block;7
}8
9
#mycan {10
background-size: 30px 30px;11
background-image:12
linear-gradient(to right, black 1px, transparent 1px),13
linear-gradient(to bottom, black 1px, green 1px);14
15
}JavaScript
1
18
18
1
<!DOCTYPE html>2
<html lang="en">3
<head>4
<link rel="stylesheet" type="text/css" href="style.css">5
<meta charset="utf-8" />6
<canvas id = "mycan" > </canvas>7
<p id="info"></p>8
<font color = 'blue'> <h1>Player1 = blue</h1></font>9
<font color = 'red'> <h1>Player2 = red</h1></font>10
11
</head>12
<body>13
<main>14
</main>15
<script src="script.js"></script>16
17
</body>18
</html>