如何在Javascript乒乓球游戏中正确偏转球？

Question

如何在Javascript乒乓球游戏中正确偏转球？

Beh*_*roz 5 html javascript css jquery html5

我已经用Javascript编写了一个简单的pong游戏。但是我有两个问题。

我不知道为什么球不会从代码中的“ playerB”桨移开。
当球从桨移开时，如何产生一些随机性？目前，该游戏似乎非常重复。

我该如何解决这两个问题？

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

Run Code Online (Sandbox Code Playgroud)

的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;
}

Run Code Online (Sandbox Code Playgroud)

Java脚本

$(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);
});

Run Code Online (Sandbox Code Playgroud)

Answer 1

Áng*_*ela 1

您忘记编辑实际的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);

Run Code Online (Sandbox Code Playgroud)

工作 JSFiddle：http://jsfiddle.net/yb290ow9/6/

关于随机性：您可以使球拍“有弹性”：改变球的速度，而不仅仅是方向

归档时间：	10 年，2 月前
查看次数：	506 次
最近记录：	10 年，2 月前