javascript - 如何通过更改单选按钮来更改桨宽度？

Question

正在开发 PONG 游戏，我想更改玩家的 Racket 大小。在 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>

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