I'm working on a 2 player pong game, and I'm using the W, D, S, A keys for the 2nd player. It works but the 2nd player's paddle Y direction is doubled.
If you don't understand see this Demo. I tried to redraw the paddle after a key was pressed but that did nothing.
JS
/* VARIABLES */
//Canvas and context
var canvas, ctx;
//Balls x and y
var ballX, ballY;
var ballSpeedX, ballSpeedY; //Balls x and y speed
//Player1 x, y
var player1X, player1Y;
//Player2 x, y
var player2X, player2Y;
var playerSpeedY; //Players speed
//Players w and h
const PLAYER_WIDTH = 10;
const PLAYER_HEIGHT = 100;
const WIN_SCORE = 3; //Max score
/* FUNCTIONS */
//Draw stuff
function draw() {
//Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
//Draw player 1
drawPlayer1(player1X, player1Y, PLAYER_WIDTH, PLAYER_HEIGHT, "white");
//Draw player 2
drawPlayer2(player2X, player2Y, PLAYER_WIDTH, PLAYER_HEIGHT, "white");
//Draw ball
drawBall(ballX, ballY, 10, "white");
//Draw score board
}
//Animate stuff
function animate() {
ballX += ballSpeedX;
ballY += ballSpeedY;
}
//Detect collisiom
function collision() {
//If ball hits x and y walls
//X walls
if (ballX >= canvas.width) { //Right wall
ballSpeedX = -ballSpeedX;
}
if (ballX <= 0) { //:Left wall
ballSpeedX = -ballSpeedX;
}
//Y walls
if (ballY >= canvas.height) { //Bottom wall
ballSpeedY = -ballSpeedY;
}
if (ballY <= 0) { //Top wall
ballSpeedY = -ballSpeedY;
}
}
//Reset ball
function resetBall() {}
//Player 1's control (W, S, D, A)
function player1Control(e) {}
//Player 2's control (Arrow keys)
function player2Control(e) {
if (e.keyCode == "40") {
player2Y += 0.2;
drawPlayer2(player2X, player2Y, PLAYER_WIDTH, PLAYER_HEIGHT, "white");
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
if (e.keyCode == "38") {
player2Y -= 0.2;
drawPlayer2(player2X, player2Y, PLAYER_WIDTH, PLAYER_HEIGHT, "white");
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
}
//Detect if a player gets up to max score
function scoreCheck() {}
/* OBJECT FUNCTIONS */
//Draw ball
function drawBall(x, y, r, color) {
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI * 2);
ctx.fill();
}
//Draw player 1's paddle
function drawPlayer1(x, y, w, h, color) {
ctx.fillStyle = color;
ctx.fillRect(x, y, w, h);
}
//Draw player 2's paddle
function drawPlayer2(x, y, w, h, color) {
ctx.fillStyle = color;
ctx.fillRect(x, y, w, h);
}
//Draw score board
function drawScore(x, y, text, font, color) {}
/* WHEN DOCUMENT IS READY */
$(document).ready(function () {
//Call canvas
canvas = $("#canvas")[0];
//Get context
ctx = canvas.getContext("2d");
//Set values to object variables
//ball x and y
ballX = 200;
ballY = 200;
ballSpeedX = 2;
ballSpeedY = 2;
//Player 1
player1X = 0;
player1Y = canvas.height / 2 - PLAYER_HEIGHT / 2;
player2X = canvas.width - PLAYER_WIDTH;
player2Y = canvas.height / 2 - PLAYER_HEIGHT / 2;
playerSpeedY = 2;
var fps = 60;
setInterval(function () {
draw();
animate();
collision();
$(window).bind("keydown", player1Control);
$(window).bind("keydown", player2Control);
}, fps / 1000);
});
HTML
<!DOCTYPE html>
<html>
<head>
<title>Pong - 2 Player</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<center>
<canvas id="canvas" width="800" height="600" style="background-color: #000"></canvas>
</center>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="main.JS"></script>
</body>
</html>
You are adding an event listener inside of a setInterval
setInterval(function () {
draw();
animate();
collision();
$(window).bind("keydown", player1Control);
$(window).bind("keydown", player2Control);
}, fps / 1000);
so every time that interval runs the event is registered again. That results in player1Control and player2Control running multiple times.
Just move those two lines out of the interval
setInterval(function () {
draw();
animate();
collision();
}, fps / 1000);
$(window).bind("keydown", player1Control);
$(window).bind("keydown", player2Control);