Right now I'm recreating an old arcade game called Pong (Check out the hyperlink).
I was able to move the bars of each player when that player presses either W/S or top arrow/bottom arrow. The problem is that you cant move both bars at once. This will really hamper the gameplay rendering it unplayable because when player one presses a key, player two won't be able to move their bar. Please tell me how to fix this. (aka. How to make it possible for both players to play the game simultaneously)
(IMPORTANT: PREVIEW THE GAME IN FULL-SCREEN)
Here's my code:
https://codepen.io/Undefined_Variable/full/Pavzvd/
HTML/JS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="Pong.css">
</head>
<body>
<canvas id="GameCanvas">No support for you, scrub!</canvas>
<!--Start of the script-->
<script>
var GameCanvas = document.body.querySelector('#GameCanvas');
var ctx = GameCanvas.getContext("2d");
var WindowWidth = window.innerWidth;
var WindowHeight = window.innerHeight;
var playerOne = {
x1: (0.02 * WindowWidth),
y1: (0.35 * WindowHeight),
x2: 30,
y2: 70
}
var playerTwo = {
x1: (0.71 * WindowWidth),
y1: (0.35 * WindowHeight),
x2: 30,
y2: 70
}
var LineOne = {
y1: 20
}
var LineTwo = {
y1: 535
}
var DashOne = { y1: 50 };
var DashTwo = { y1: 90 };
var DashThree = { y1: 130 };
var DashFour = { y1: 170 };
var DashFive = { y1: 210 };
var DashSix = { y1: 250 };
var DashSeven = { y1: 290 };
var DashEight = { y1: 330 };
var DashNine = { y1: 370 };
var DashTen = { y1: 410 };
var DashEleven = { y1: 450 };
var DashTwelve = { y1: 490 };
GameCanvas.width = 0.75 * WindowWidth;
GameCanvas.height = 0.75 * WindowHeight;
window.onload = function initial() {
window.addEventListener('resize', function (evt) {
GameCanvas.width = 0.75 * window.innerWidth;
GameCanvas.height = 0.75 * window.innerHeight;
playerTwo.x1 = (0.71 * window.innerWidth);
});
DrawPlayers();
DrawTopBottomLines(LineOne, LineTwo);
DrawDashes(DashOne);
DrawDashes(DashTwo);
DrawDashes(DashThree);
DrawDashes(DashFour);
DrawDashes(DashFive);
DrawDashes(DashSix);
DrawDashes(DashSeven);
DrawDashes(DashEight);
DrawDashes(DashNine);
DrawDashes(DashTen);
DrawDashes(DashEleven);
DrawDashes(DashTwelve);
}
function DrawPlayers() {
ctx.save();
ctx.fillStyle = "white";
ctx.fillRect(playerOne.x1, playerOne.y1, playerOne.x2, playerOne.y2);
ctx.fillRect(playerTwo.x1, playerTwo.y1, playerTwo.x2, playerTwo.y2);
ctx.restore();
requestAnimationFrame(DrawPlayers);
DrawTopBottomLines(LineOne);
DrawTopBottomLines(LineTwo);
}
function DrawTopBottomLines(Line) {
ctx.save();
ctx.fillStyle = "white";
ctx.fillRect(20, Line.y1, 1150, 20)
ctx.restore();
}
function DrawDashes(dash) {
ctx.save();
ctx.fillStyle = '#696969';
ctx.fillRect(GameCanvas.width / 2, dash.y1, 15, 30)
ctx.restore();
requestAnimationFrame(DrawDashes);
}
window.addEventListener("keydown", movePlayer, false);
function movePlayer(e) {
ctx.clearRect(0, 0, GameCanvas.width, GameCanvas.height);
if (e.keyCode == 83) {
console.log('Top arrow pressed!');
playerOne.y1 += 5;
DrawDashes(DashOne);
DrawDashes(DashTwo);
DrawDashes(DashThree);
DrawDashes(DashFour);
DrawDashes(DashFive);
DrawDashes(DashSix);
DrawDashes(DashSeven);
DrawDashes(DashEight);
DrawDashes(DashNine);
DrawDashes(DashTen);
DrawDashes(DashEleven);
DrawDashes(DashTwelve);
}
if (e.keyCode == 87) {
console.log('bottom arrow pressed!');
playerOne.y1 -= 5;
DrawDashes(DashOne);
DrawDashes(DashTwo);
DrawDashes(DashThree);
DrawDashes(DashFour);
DrawDashes(DashFive);
DrawDashes(DashSix);
DrawDashes(DashSeven);
DrawDashes(DashEight);
DrawDashes(DashNine);
DrawDashes(DashTen);
DrawDashes(DashEleven);
DrawDashes(DashTwelve);
}
if (e.keyCode == 38) {
console.log('W pressed!');
playerTwo.y1 -= 5;
DrawDashes(DashOne);
DrawDashes(DashTwo);
DrawDashes(DashThree);
DrawDashes(DashFour);
DrawDashes(DashFive);
DrawDashes(DashSix);
DrawDashes(DashSeven);
DrawDashes(DashEight);
DrawDashes(DashNine);
DrawDashes(DashTen);
DrawDashes(DashEleven);
DrawDashes(DashTwelve);
}
if (e.keyCode == 40) {
console.log('S pressed!');
playerTwo.y1 += 5;
DrawDashes(DashOne);
DrawDashes(DashTwo);
DrawDashes(DashThree);
DrawDashes(DashFour);
DrawDashes(DashFive);
DrawDashes(DashSix);
DrawDashes(DashSeven);
DrawDashes(DashEight);
DrawDashes(DashNine);
DrawDashes(DashTen);
DrawDashes(DashEleven);
DrawDashes(DashTwelve);
}
}
</script>
</body>
</html>
CSS:
#GameCanvas {
border: 1px solid black;
background-color: #2a2a2a;
margin-top: 10vh;
margin-bottom: 10vh;
margin-right: 12vw;
margin-left: 12vw;
}
body {
font-family: 'ArcadeFont';
font-size: 5em;
overflow: hidden;
}
@font-face {
font-family: 'ArcadeFont';
src: url('fonts/ARCADECLASSIC.TTF');
}
