0
Ich arbeite an einem 2-Spieler-Pong-Spiel, und ich verwende die W, D, S, A-Tasten für den 2. Spieler. Es funktioniert, aber die Y-Richtung des zweiten Spielers wird verdoppelt.JS keydown funktioniert nicht
Wenn Sie nicht verstehen, sehen Sie dies Demo. Ich habe versucht, das Paddel neu zu zeichnen, nachdem eine Taste gedrückt wurde, aber das hat nichts getan.
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>
Dank der Code arbeitete –