1
Ich erstelle ein JS Pong-Spiel, aber der Ball im Pong-Spiel beginnt nach ein paar Sekunden zu verzögern. Ich habe versucht, den Animationsrahmen zu stoppen, meinen Code für bessere Leistung zu optimieren und den Code für den Ball neu zu schreiben, aber nichts funktioniert. Kann mir bitte jemand helfen?JavaScript Pong Spiel Lag
HTML (No CSS)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pong</title>
</head>
<body>
<canvas id="canvas" width="800" height="400" style="background: #000"></canvas>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="main.JS"></script>
Javascript (Mit jQuery)
/*
Created : 7/18/2016
*/
//Bottom comment is used to define JQuery
/*jslint browser: true*/
/*global $, jQuery, alert*/
//Define variables
var canvas, ctx;
var ballX, ballY; //Balls x and y pos
var ballSpeedX, ballSpeedY; //Speed of ball x and y pos
var paddleY, paddleHeight, paddleWidth, aiY; //PaddleY = paddle's y pos and paddleHeight = Centering mouse on paddle
//Score variables
var aiScore, playerScore;
//Set functions
//Gets mouse pos
function getMousePos(e) {
"use strict";
//Define variables
var rect, root, mouseX, mouseY;
rect = canvas.getBoundingClientRect(); //Get canvas outline
root = document.documentElement; //Get html document
mouseX = e.clientX - rect.left - root.scrollLeft;
mouseY = e.clientY - rect.top - root.scrollTop;
//Return x and y pos to page
return {
x: mouseX,
y: mouseY
};
}
//Move ai function
function moveAI() {
"use strict";
var aiYCenter = aiY + paddleHeight/2;
if (aiYCenter < ballY - 35) {
aiY += 6;
} else if (aiYCenter > ballY + 35) {
aiY -= 6;
}
}
//Animate objects
function animate() {
"use strict";
//Animate ball
ballX += ballSpeedX;
ballY += ballSpeedY;
//Make ai move
moveAI();
return false;
}
function resetBall() {
"use strict";
ballX = canvas.width/2;
ballY = canvas.height/2;
//Flip ball
ballSpeedX = -ballSpeedX;
return false;
}
//Detect collisiom
function collision() {
"use strict";
//Right wall
if (ballX > canvas.width) {
//If player paddle hits ball
if (ballY > aiY && ballY < aiY + paddleHeight) {
ballSpeedX = -ballSpeedX;
} else {
//If player paddle doesn't hit ball
resetBall(); //Reset ball function
playerScore += 1; //If ai scores add 1 point to ai's score
}
}
//Left wall
if (ballX < 0) {
//If player paddle hits ball
if (ballY > paddleY && ballY < paddleY + paddleHeight) {
ballSpeedX = -ballSpeedX;
} else {
//If player paddle doesn't hit ball
resetBall(); //Reset ball function
aiScore += 1; //If ai scores add 1 point to ai's score
}
}
if (ballY > canvas.height) { //If ballY does outside of 800px
ballSpeedY = -ballSpeedY;
}
if (ballY <= 0) { //If ballY goes outside of 0px
ballSpeedY = -ballSpeedY;
}
return false;
}
//Make paddle move
function movePaddle(e) {
"use strict";
var pos = getMousePos(e);
paddleY = pos.y - paddleHeight/2; //Set paddleY to y pos of function and center user's mouse on the paddle
return false;
}
//Draw objects
function draw() {
"use strict";
ctx.clearRect(0, 0, canvas.width, canvas.height); //Clear canvas after animation frame
ctx.fillStyle = "white"; //Set color
//Draw ball
ctx.beginPath();
ctx.arc(ballX, ballY, 10, 0, Math.PI * 2, true);
ctx.fill();
//Draw player paddle
ctx.fillRect(0, paddleY, paddleWidth, paddleHeight);
//Draw ai
ctx.fillRect(canvas.width - paddleWidth, aiY, paddleWidth, paddleHeight);
//Score boarc
ctx.font = "30px Roboto";
//Draw score
ctx.fillText(playerScore, 100, 100); //Player score
ctx.fillText(aiScore, canvas.width - 100, 100);
return false;
}
//When document is ready
$("document").ready(function() {
"use strict";
//Get canvas and set its context
canvas = $("#canvas")[0];
ctx = canvas.getContext("2d");
//Set values to variables
//Set fps
var fps = 30;
ballX = 100;
ballY = 100;
ballSpeedX = 2;
ballSpeedY = 2;
paddleHeight = 100; //Used for centering mouse on paddle
paddleY = canvas.height/2 - paddleHeight/1.5; //Set paddle's y pos
paddleWidth = 10; //Width of paddle
//Score variables
aiScore = 0;
playerScore = 0;
aiY = canvas.height/2 - paddleHeight/1.5; //Height of ai player
setInterval(function() {
animate();
collision();
$(canvas).bind("mousemove", movePaddle); //Move paddle
draw();
}, fps/1000);
return false;
});
Haben Sie versucht, ** setInterval ** durch ** requestAnimationFrame ** zu ersetzen? Wenn nicht, lesen Sie bitte https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame und versuchen Sie es zu implementieren. –
Warum nicht bewegen '$ (Leinwand) .bind (" mousemove ", movePaddle); 'Außerhalb der Spielschleife, so dass die Bindung nur einmal passiert und' requestAnimationFrame' anstelle von 'setInterval' für die Spielschleife verwendet wird? –