如何通過更改單選按鈕來更改槳寬？

Question

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

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>