如何通过更改单选按钮来更改球拍宽度?

时间:2017-04-11 08:34:05

标签: javascript

在PONG游戏中工作,我想从玩家改变球拍的大小。在html页面中有2个单选按钮,简单或困难 当我点击一个单选按钮切换容易或困难。怎么做?

var paddlePlayerWidth = 50;

function handleClick(myRadio1) {
  paddlePlayerWidth = 40;
} else {
  paddlePlayerWidth = 100;
}
}

// Player size paddle
function Player() {
  this.paddle = new Paddle(canvas.width / 2 - 25, canvas.height - 20, paddlePlayerWidth, 10); // 50=100
}
// Update paddle
Player.prototype.render = function() {
  this.paddle.render();
};
// move players paddle left and right
Player.prototype.update = function() {
  this.paddle.move(0, 0);
  for (var key in keysDown) {
    var value = Number(key);
    if (value == 37) {
      this.paddle.move(-4, 0);
    } else if (value == 39) {
      this.paddle.move(4, 0);
    }
  }
  // move players paddle up and down
  for (var key in keysDown) {
    var value = Number(key);
    if (value == 38) {
      this.paddle.move(0, -4);
    } else if (value == 40) {
      this.paddle.move(0, 4);
    }
  }
};




  <script src="pong_base.js"></script>
  <script>
    pongStart("pongArena");
    pongStop()
  </script>
  <p id="p2"></p>


  <input type="radio" name="group1" onclick="myFunction();" value="Gemakkelijk">Gemakkelijk
  <input type="radio" name="group1" onclick="myFunction();" value="Moeilijk" checked>Moeilijk<br>
  <p id="demo"></p>

  <script>
    //var scoreComputer = "0";
    //var scorePlayer = "0";
    //var paddlePlayerWidth = 50;
    document.getElementById("p1").innerHTML =
      "Computer Score: "; // + scoreComputer;
    document.getElementById("p2").innerHTML =
      "Speler Score: "; // + scorePlayer;
  </script>



</body>

</html>

1 个答案:

答案 0 :(得分:1)

您可以尝试以下内容。单击单选按钮时,该值将传递给myFunction,并且将使用该值更新paddleWidth变量。

JS

var paddlePlayerWidth = 50;

function myFunction(value) {
  paddlePlayerWidth = value;
}

HTML

<input type="radio" name="group1" onclick="myFunction(40);" value="Gemakkelijk">Gemakkelijk
<input type="radio" name="group1" onclick="myFunction(100);" value="Moeilijk" checked>Moeilijk<br>