我真的希望你能够帮助我。我完全是个新手，所以我只是想学习。我正在尝试创建一个乒乓球游戏。
我现在的问题是桨和球之间没有碰撞。
这是我的代码。我必须承认这很困惑。
</head>
<body>
<canvas id="canvas" width="500" height="500" style="border:1px solid #000000;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var gradientMag = 375;
var gradient = ctx.createLinearGradient(0,0,0, gradientMag);
var ball_x = canvas.width/2;
var ball_y = canvas.height-30;
var dx = -2;
var dy = -2;
var ballRadius = 5;
var p_Height = 100;
var p_Width = 10;
var player1x = (canvas.width-p_Width);
var player1y = canvas.height-p_Height;
var player2y = 0;
var player2x = 0;
var player2Right = false;
var player2Left = false;
var player1Right = false;
var player1Left = false;
var startScreen = true;
var gameRunning = false;
var player1wins = false;
var player2wins = false;
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
function keyDownHandler(e) {
if(e.keyCode == 40) {
player1Right = true;
} if(e.keyCode == 38) {
player1Left = true;
} if(e.keyCode == 83) {
player2Right = true;
} else if(e.keyCode == 87) {
player2Left = true;
} }
function keyUpHandler(e) {
if(e.keyCode == 40) {
player1Right = false;
} if(e.keyCode == 38) {
player1Left = false;
} if(e.keyCode == 83) {
player2Right = false;
} if(e.keyCode == 87) {
player2Left = false;
}
else if (e.keyCode == 13){
gameRunning = true;
startScreen = false;
player1wins = false;
player2wins = false;
}
}
/*
function loadGame(){
if (startScreen){
var gradient = ctx.createLinearGradient(0,0,0,gradientMag);
gradient.addColorStop(0,blue );
gradient.addColorStop(1,red);
ctx.fillStyle = gradient;
ctx.fillRect(0,0, 500, 500);
ctx.font = "40px Verdana";
ctx.fillstyle = "blue";
ctx.fillText("Press Enter to begin", 150, 110);
}
}
*/
function ball() {
ctx.beginPath();
ctx.arc(ball_x, ball_y, ballRadius, 0, Math.PI*2);
ctx.fillStyle = "red";
ctx.fill();
ctx.closePath();
}
function paddle() {
ctx.beginPath();
ctx.rect(player1x, player1y, p_Width, p_Height);
ctx.fillStyle = "green";
ctx.fill();
ctx.closePath();
}
function player2() {
ctx.beginPath();
ctx.rect(player2x, player2y, p_Width, p_Height);
ctx.fillStyle = "blue";
ctx.fill();
ctx.closePath();
}
function draw() {
if (startScreen){
/*var gradient = ctx.createLinearGradient(0,0,0,gradientMag);
gradient.addColorStop(0,blue );
gradient.addColorStop(1,red);
ctx.fillStyle = gradient;
ctx.fillRect(0,0, 500, 500);
*/
ctx.font = "20px Verdana";
ctx.fillstyle = "blue";
ctx.fillText("Press Enter to begin", 100, 90);
}
if (gameRunning){
ctx.clearRect(0, 0, canvas.width, canvas.height);
ball();
paddle();
player2();
//bounce of the walls
if(ball_y + dy > canvas.width-ballRadius || ball_y+dy < ballRadius){
dy = -dy;
}
//if the ball hits the top
if(ball_x + dx < ballRadius) {
//if the ball hits the paddle of player 2
if(ball_x + dx < player2x + p_Height && ball_y > player2y && ball_y < player2y + p_Width){
console.log("hit the paddle");
dx = -dx;
}
//if the ball hits the top - do this first
else if(ball_x + dx < canvas.height)
{
//alert("Player 1 Wins!");
//document.location.reload();
player1wins = true;
gameRunning = false;
}
}
//if the ball hits the bottom
if(ball_x + dx > canvas.height-ballRadius) {
//the ball hits the paddle
if(ball_x + dx > player1x && ball_y > player1y && ball_y < player1y + p_Width){
dx = -dx;
}
//the ball hits the base
else if(ball_x + dx > canvas.height)
{
//alert("Player 2 Wins!");
//document.location.reload();
player2wins = true;
gameRunning = false;
}
}
if(player1Right && player1y < canvas.width-p_Width) {
player1y += 5;
}else if(player1Left && player1y > 0) {
player1y -= 5;
}
if(player2Right && player2y < canvas.width-p_Width) {
player2y += 5;
}else if(player2Left && player2y > 0) {
player2y -= 5;
}
ball_y += dy;
ball_x += dx;
}
else if (player1wins) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
//background();
ctx.font = "20px Verdana";
ctx.fillstyle = "blue";
ctx.fillText("Well done player 1, you win!", 100, 90);
ctx.fillText("Hit F5 to play again!", 100, 110);
} else if (player2wins) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
//background();
ctx.font = "20px Verdana";
ctx.fillstyle = "blue";
ctx.fillText("Well done player 2, you win!", 100, 90);
ctx.fillText("Hit F5 to play again!", 100, 110);
}
}
setInterval(draw, 10);
//loadGame();
</script>
</body>
</html>
最佳答案
你选择 y 来表示宽度有点伤人，但是，在我看来，你只是在球经过玩家桨后才检查碰撞？ ( ball_x + dx > player1x )
难道不应该反过来吗？ ball_x + dx < player1x
关于javascript - 在 Netbeans 中创建乒乓球游戏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39124941/