在Netbeans中创建一个乒乓游戏

Creating a pong game in Netbeans

本文关键字:一个 乒乓 游戏 Netbeans 创建      更新时间:2023-09-26

我真的希望你能给我一个机会。我完全是个新手,所以我只是在努力学习。我正在尝试创建一个乒乓球游戏。

我现在的问题是桨和球之间没有碰撞。

这是我的代码。我必须承认这很乱。
</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