HTML

Question

我在Javascript中编写了一个简单的乒乓球游戏。但是我遇到了两个问题。

我不知道为什么球没有偏离计算机的球拍，这是球员B＆＃34;根据代码。
当球从桨叶偏转时，如何创建一些随机性？目前游戏似乎非常重复。

如何解决这两个问题？

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Pong game</title>
  <script type="text/javascript" src="jquery-2.1.4.min.js"></script>
  <script type="text/javascript" src="js/pong.js"></script>
  <link rel="stylesheet" href="css/pong.css">
</head>
<body>
  <header>
    <p>
    Computer:<span id="scoreB"></span> Human:<span id="scoreA"></span>
    </p>
  </header>
  <div id="playground">
    <div id="ball"></div>
    <div id="playerA" class="paddle right"></div>
    <div id="playerB" class="paddle left"></div>
  </div>
</body>
</html>

CSS

html,body{
  margin: 0 atuo;
  height:100%;
}
#playground{
  position: relative;
  width:700px;
  height:400px;
  border: 1px solid grey;
  overflow:hidden;
}
#ball{
  position: absolute;
  background: #fbb;
  width:20px;
  height:20px;
  left:200px;
  top:100px;
  border-radius:10px;
}
.paddle{
  position: absolute;
  border:1px solid grey;
  width:10px;
  height:80px;
}
.left.paddle{
  left:0px;
  background-color: green;
}
.right.paddle{
  right:0px;
  background-color: blue;
}

的Javascript

$(document).ready(function(){
  var values = {
    ball:{
      speed:5,
      x:50,
      y:50,
      directionX: 1,
      directionY: 1,
      radius: 10
    },
    playground:{
      width: parseInt($("#playground").width()),
      height: parseInt($("#playground").height())
    },
    playerA:{
      y:0,
      top: $("#playerA").offset().top,
      height: $("#playerA").height(),
      width: $("#playerA").width(),
      score:0
    },
    playerB:{
      y:0,
      top: $("#playerB").offset().top,
      height: $("#playerB").height(),
      width: $("#playerB").width(),
      score:0
    }
  };
  //collision detection
  function hitsTopBottom(){
    var y = values.ball.y;
    return y>values.playground.height-20 || y < 0;
  }
  function hitsRight(){
    return values.ball.x > values.playground.width-20;
  }
  function hitsLeft(){
    return values.ball.x < 0;
  }
  //ball hits playerA's paddle. Works properly but open to improvement
  function hitsPlayerA(){
    var ballX = values.ball.x;
    var ballY = values.ball.y;
    var playerAY = values.playerA.y;
    return ballY<=playerAY+values.playerA.height && ballY>playerAY && ballX>=700-values.playerA.width-values.ball.radius;
  }
  //ball hits playerB's paddle. Doesn't work at all
  function hitsPlayerB(){
    var ballX = values.ball.x;
    var ballY = values.ball.y;
    var playerBY = values.playerB.y;
    return ballY<=playerBY+values.playerB.height && ballY>=playerBY && ballX<=values.playerB.width-values.ball.radius;
  }
  //rendering the position of the ball
  function renderball(){
    $("#ball").css("left",values.ball.x);
    $("#ball").css("top",values.ball.y);
    $("#scoreB").text(values.playerB.score);
    $("#scoreA").text(values.playerA.score);
  }
  //moving ball
  function moveball(){
    if(hitsTopBottom()){
      values.ball.directionY *= -1;
    }
    if(hitsPlayerA()){
      values.ball.directionX *= -1;
    }
    if(hitsPlayerB()){
      values.ball.directionX = 1;
    }
    if(hitsRight()){
      values.ball.x = 200;
      values.ball.y = 200;
      values.playerB.score += 1;
    }
    if(hitsLeft()){
      values.ball.x = 200;
      values.ball.y = 200;
      values.playerA.score += 1;
    }
    values.ball.x += values.ball.speed*values.ball.directionX;
    values.ball.y += values.ball.speed*values.ball.directionY;
    renderball();
    var playerB_pos = values.ball.y - values.playerB.height/2;
    $("#playerB").css("top",playerB_pos);
  }
  //player movements
  $("#playground").mousemove(function(e){
    values.playerA.y = e.pageY-values.playerA.top-parseInt($("#playerA").height()/2);
    $("#playerA").css("top",values.playerA.y);
  });
  setInterval(moveball,1000/30);
});

Answer 1

球没有偏离计算机板，因为它的位置没有存放。通过在循环中设置values.playerB.y = playerB_pos，它将立即正确反弹。然而，由于它与球的y位置相同，因此计算机永远不会丢失。为了纠正这个问题并添加一些随机性，我使用了jQuery的animate函数来补间点和假动量之间的计算机划分：

 if(!isAnimating) {
    isAnimating = true;
    $("#playerB").animate({"top": playerB_pos}, {
      duration: (values.ball.speed*16),
      easing: "linear",
      step: function( now, fx ) {
        values.playerB.y = parseInt($("#playerB").offset().top - parseInt($("#playerA").height()));
      }, 
      complete: function() {
        isAnimating = false;
      }
    }); 
  }

您可以在此处看到它：http://jsfiddle.net/yb290ow9/5/

Answer 2

您忘了编辑实际的playerB.y值（您刚刚更改了css）：

var playerB_pos = values.ball.y - values.playerB.height/2;
values.playerB.y = playerB_pos; // Forgot this!
$("#playerB").css("top",playerB_pos);

使用JSFiddle：http://jsfiddle.net/yb290ow9/6/

关于随机性：你可以制作球拍＆＃34;弹跳＆＃34;：改变球的速度，而不仅仅是方向

如何在Javascript pong游戏中正确地转移球？

HTML

CSS

的Javascript

2 个答案: