Question

我真的希望你能够帮助我。我是一个新手，所以我只是想学习。我正在尝试创建一个乒乓球比赛。

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

这是我的代码。我必须承认这很麻烦。

</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>

Answer 1

你选择y来表示宽度有点疼，但是，在我看来你只是在球通过球员桨后才检查碰撞？（ball_x + dx > player1x）不应该是相反的方式吗？ ball_x + dx < player1x

在Netbeans中创建一个乒乓球游戏

1 个答案: