javascript - 在 Netbeans 中创建乒乓球游戏-6ren

javascript - 在 Netbeans 中创建乒乓球游戏

转载作者：行者123 更新时间：2023-11-28 05:38:38

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

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

这是我的代码。我必须承认这很困惑。

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

文章推荐： ios - 隐藏导航栏 ios swift 生命周期方法未调用导致问题

文章推荐： javascript - NWJS 在长循环 JavaScript 期间更新进度条

文章推荐： javascript - 通过键盘控制音频

文章推荐： javascript - 如何让 KendoUI MVC 与内容安全策略配合使用

java - 尝试 Java 乒乓球
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。已关
c# - 尝试在运行时调整 bat (桨，乒乓球)的速度
编辑 2: Pastebin link to the full ball, bat, and AIbat classes. 编辑:我已经更新了 turbo 代码，只是对其进行了更好的评论。我也有一个链
ios4 - 将 Opengl 纹理从第一个 fbo 绑定(bind)到第二个 fbo，使用着色器并渲染第二个结果(乒乓球)
我一直在研究乒乓球着色，并认为在我上一个问题之后我已经破解了它。但是，随着对着色器的进一步了解，看起来虽然我能够在 FBO A 和 FBO B 上运行着色器，但 A 的输出并未用作 B 的源。换句话说
c# - 在 Monogame 中 build 乒乓球，但球不会与玩家 1 的 Racket 互动
我是编程新手。基本上刚刚完成了几个教程和准系统说明。我想编写 pong 代码让自己开始尝试自己做一些事情，但我遇到了一些障碍。出于某种原因，我生成的球根本不会与我的玩家 1 Racket 互动，但它会

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 在 Netbeans 中创建乒乓球游戏