Question

这里我是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来解决此问题。有人可以帮忙吗？

Answer 1

将事件监听器附加到监听change事件的单选按钮，然后在处理程序中增加一些全局变量。

var playerx = document.getElementById('playerx');
playerx.onchange = function(e){
    if(playerx.checked)
        globalVar+=1;
    else
        globalVar+=2;
}

Answer 2

最后设法回答了我自己的问题。这是经过一番研究和学习。当我尝试将全局变量"turn"增加到1或2时，根据选择的X或O单选按钮，我不正确。这为错误铺平了道路。这是一个简单而愚蠢的方法，但它有效，有很好的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>

希望有人利用这个。感谢所有帮助过的人。如果您想了解更多关于如何使用它的信息，请发表评论。我会尽力帮忙。

根据选择的单选按钮更改全局变量值

2 个答案: