[英]Changing a global variable value based on which radio button is selected
这是JS代码的一部分,可播放2个播放器TIC-TAC-TOE
<script type="text/javascript">
//Global Variables
var painted;
var content;
var winningCombinations;
var turn = 0;
var theCanvas;
var c;
var cxt;
var squaresFilled = 0;
var w;
var y;
//Instanciate Arrays
window.onload=function(){
painted = new Array();
content = new Array();
winningCombinations = [[0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,4,7],[2,5,8],[0,4,8],[2,4,6]];
for(var l = 0; l <= 8; l++){
painted[l] = false;
content[l]='';
}
}
//Game methods
function canvasClicked(canvasNumber){
theCanvas = "canvas"+canvasNumber;
c = document.getElementById(theCanvas);
cxt = c.getContext("2d");
if(painted[canvasNumber-1] ==false){
if(turn%2==0){
/* Draw X */
cxt.beginPath();
cxt.moveTo(10,10);
cxt.lineTo(40,40);
cxt.moveTo(40,10);
cxt.lineTo(10,40);
cxt.stroke();
cxt.closePath();
content[canvasNumber-1] = 'X';
}
else{
/* Draw circle */
cxt.beginPath();
cxt.arc(25,25,20,0,Math.PI*2,true);
cxt.stroke();
cxt.closePath();
content[canvasNumber-1] = 'O';
}
turn = turn + 1;
painted[canvasNumber-1] = true;
squaresFilled++;
checkForWinners(content[canvasNumber-1]);
if(squaresFilled==9){
alert("Game Over");
location.reload(true);
}
}
我想从单选按钮中选择一个值,即:
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="radio" name="players" id="playerx"/>
<label for="playerx"><b>TEAM - X</b></label>
<input type="radio" name="players" id="playery"/>
<label for="playery"><b>TEAM - O</b></label>
</fieldset>
假设如果玩家单击TEAM - X
我希望全局变量再增加2。
我无法从单选按钮中正确选择值或ID来解决此问题。 有人可以帮忙吗?
将事件侦听器附加到单选按钮上,以侦听change事件,然后在处理程序中增加一些全局变量。
var playerx = document.getElementById('playerx');
playerx.onchange = function(e){
if(playerx.checked)
globalVar+=1;
else
globalVar+=2;
}
终于设法回答了我自己的问题。 经过一些研究和学习。 当我尝试根据选择的X或O单选按钮"turn"
全局变量"turn"
增加到1或2时,我是不正确的。 这为错误铺平了道路。 这是一种简单而愚蠢的方法,但是它可以与Big-O一起使用。
这是完整的javascript代码,我将突出显示我更改的代码。
//Global Variables
var painted;
var content;
var winningCombinations;
var turn = 0;
var theCanvas;
var c;
var cxt;
var squaresFilled = 0;
var w;
var y;
//Instanciate Arrays
window.onload=function(){
painted = new Array();
content = new Array();
winningCombinations = [[0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,4,7],[2,5,8],[0,4,8],[2,4,6]];
for(var l = 0; l <= 8; l++){
painted[l] = false;
content[l]='';
}
}
function displayResult(plr_team)
{
playr_turn = browser; // making playr_turn global. Not good style but works.
// Also assigning the "value" that is playerx or playery
// to the global var playr_turn.
}
//Game methods
function canvasClicked(canvasNumber){
theCanvas = "canvas"+canvasNumber;
c = document.getElementById(theCanvas);
cxt = c.getContext("2d");
if(painted[canvasNumber-1] ==false){
if(playr_turn == "playerx"){ // checking the value returned
// from the radio button
/* Draw X */
cxt.beginPath();
cxt.moveTo(10,10);
cxt.lineTo(40,40);
cxt.moveTo(40,10);
cxt.lineTo(10,40);
cxt.stroke();
cxt.closePath();
content[canvasNumber-1] = 'X';
}
else{
/* Draw circle */
cxt.beginPath();
cxt.arc(25,25,20,0,Math.PI*2,true);
cxt.stroke();
cxt.closePath();
content[canvasNumber-1] = 'O';
}
/* The above code is a lot simpler than trying to check for turn%2 ===0 */
//turn = turn + 1; // Now needed now as we are not checking
painted[canvasNumber-1] = true;
squaresFilled++;
checkForWinners(content[canvasNumber-1]);
if(squaresFilled==9){
alert("THE GAME IS OVER!");
location.reload(true);
}
}
else{
alert("THAT SPACE IS ALREADY OCCUPIED WITH YOUR HEART!");
}
}
function checkForWinners(symbol){
for(var a = 0; a < winningCombinations.length; a++){
if(content[winningCombinations[a][0]]==symbol&&content[winningCombinations[a][1]]== symbol&&content[winningCombinations[a][2]]==symbol){
alert(symbol+ " WON!");
playAgain();
}
}
}
这是单选按钮代码。
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="radio" name="players" id="playerx" onclick="displayResult(this.value)" value = "playerx"/>
<label for="playerx"><b>TEAM - X</b></label>
<input type="radio" name="players" id="playery" onclick="displayResult(this.value)" value = "playery"/>
<label for="playery"><b>TEAM - O</b></label>
</fieldset>
</div>
希望有人利用这一点。 感谢所有提供帮助的人。 如果您想了解更多有关如何使用它的信息,请发表评论。 我会尽力帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.