I wanted to recreate an old arcade game called Pong (Check out the hyperlink, it's necessary!)
Everything was fine until I reached the part where I had to move the bars of each player when the player pressed the up/down arrow keys. It resulted in weird behavior:
https://codepen.io/Undefined_Variable/pen/Pavzvd
<!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();
}
window.addEventListener("keydown", movePlayerOne, false);
function movePlayerOne(e) {
switch (e.keyCode) {
case 38:
console.log('Top arrow pressed!');
playerOne.y1 += 5;
playerOne.y2 += 5;
break;
case 40:
console.log('bottom arrow pressed!');
playerOne.y1 += 5;
playerOne.y2 += 5;
break;
case 87:
console.log('Top arrow pressed!');
deltaYTwo -= 5;
break;
case 83:
console.log('bottom arrow pressed!');
deltaYTwo += 5;
break;
}
}
</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');
}
IMPORTANT: RUN THE GAME IN FULL SCREEN!
When I try to press the up/down arrows, the bars start "expanding" instead of changing position. Please tell me how to fix it.
Note: I'm just a beginner, especially in JavaScript, so please don't include any jQuery/angularJS/React solutions/etc. I don't want any frameworks in my code. thanks in advance.
You are forgetting to clear the canvas before redrawing. What you are seeing is the new objects getting drawn over old objects.
This will clear the whole canvas, so you will need to redraw everything
ctx.clearRect(0, 0, GameCanvas.width, GameCanvas.height);
You could however, just clear the section of where the paddles are and redraw that area by replacing the the four values with something like this:
ctx.clearRect(paddleXOffset, paddleYOffset, paddleWidth, paddleHeight);