简单的Javascript Tic-Tac-Toe游戏

时间:2013-11-07 01:46:06

标签: javascript html

我正在尝试编写一个简单的tic-tac toe游戏,但我遇到了两件事的问题:

  1. 我的3x3电路板没有分成不同的行 - 当我尝试制作更多游戏磁贴时,它只是将它放在同一行

  2. 我可以通过复制底部的代码来创建新的X和O图像,但我不知道如何在播放后将它们锁定到位。

  3. 这是我目前的HTML:

    <!DOCTYPE HTML>
        <html>
        <head>
        <style type="text/css">
        #div1 {
            width: 80px;
            height: 80px;
            padding: 10px;
            border: 1px solid #aaaaaa;
            float:left;
        }
        </style>
        <script type="text/javascript">
        function allowDrop(ev) {
            ev.preventDefault();
        }
        function drag(ev) {
            ev.dataTransfer.setData("Text",ev.target.id);
        }
        function drop(ev) {
            var data=ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(data));
            ev.preventDefault();
        }
        </script>
        <title>JavaScript  Drag &amp; Drop Tic-Tac-Toe</title>
        </head>
        <body>
            <p>Drag the X and O images into the tic-tac-toe board:</p>
            <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    
    
            <img id="drag1" src="X.png" draggable="true" 
                ondragstart="drag(event)" width="75" height="75" />
            <img id="drag2" src="O.png" draggable="true" 
                ondragstart="drag(event)" width="75" height="75" />
    
        </body>
        </html>
    

2 个答案:

答案 0 :(得分:1)

你不能给每个div赋予相同的id,id必须对每个div都是唯一的。你必须在id的地方上课。我们可以为许多div提供相同的类名。你可以尝试这段代码。

<SCRIPT>


if (document.all||document.getElementById){
    document.write('<style>.tictac{')
    document.write('width:50px;height:50px;')
    document.write('}</style>')
}

var sqr1
var sqr2
var sqr3
var sqr4
var sqr5
var sqr6
var sqr7
var sqr8
var sqr9
var sqr1T = 0
var sqr2T = 0
var sqr3T = 0
var sqr4T = 0
var sqr5T = 0
var sqr6T = 0
var sqr7T = 0
var sqr8T = 0
var sqr9T = 0
var moveCount = 0
var turn = 0
var mode = 1

function vari()
{
    sqr1 = document.tic.sqr1.value
    sqr2 = document.tic.sqr2.value
    sqr3 = document.tic.sqr3.value
    sqr4 = document.tic.sqr4.value
    sqr5 = document.tic.sqr5.value
    sqr6 = document.tic.sqr6.value
    sqr7 = document.tic.sqr7.value
    sqr8 = document.tic.sqr8.value
    sqr9 = document.tic.sqr9.value
}
function check()
{
    if(sqr1 == " X " && sqr2 == " X " && sqr3 == " X ")
    {
        alert("You Win!")
        reset()
    }
    else if(sqr4 == " X " && sqr5 == " X " && sqr6 == " X ")
    {
        alert("You Win!")
        reset()
    }
    else if(sqr7 == " X " && sqr8 == " X " && sqr9 == " X ")
    {
        alert("You Win!")
        reset()
    }
    else if(sqr1 == " X " && sqr5 == " X " && sqr9 == " X ")
    {
        alert("You Win!")
        reset()
    }
    else if(sqr1 == " X " && sqr4 == " X " && sqr7 == " X ")
    {
        alert("You Win!")
        reset()
    }
    else if(sqr2 == " X " && sqr5 == " X " && sqr8 == " X ")
    {
        alert("You Win!")
        reset()
    }
    else if(sqr3 == " X " && sqr6 == " X " && sqr9 == " X ")
    {
        alert("You Win!")
        reset()
    }
    else if(sqr1 == " X " && sqr5 == " X " && sqr9 == " X ")
    {
        alert("You Win!")
        reset()
    }
    else if(sqr3 == " X " && sqr5 == " X " && sqr7 == " X ")
    {
        alert("You Win!")
        reset()
    }
    else
    {
        winCheck()
        check2()
        drawCheck()
    }
}

function check2()
{
    vari()
    drawCheck()
    if(sqr1 == " O " && sqr2 == " O " && sqr3 == " O ")
    {
        alert("You Lose!")
        reset()
    }
    else if(sqr4 == " O " && sqr5 == " O " && sqr6 == " O ")
    {
        alert("You Lose!")
        reset()
    }
    else if(sqr7 == " O " && sqr8 == " O " && sqr9 == " O ")
    {
        alert("You Lose!")
        reset()
    }
    else if(sqr1 == " O " && sqr5 == " O " && sqr9 == " O ")
    {
        alert("You Lose!")
        reset()
    }
    else if(sqr1 == " O " && sqr4 == " O " && sqr7 == " O ")
    {
        alert("You Lose!")
        reset()
    }
    else if(sqr2 == " O " && sqr5 == " O " && sqr8 == " O ")
    {
        alert("You Lose!")
        reset()
    }
    else if(sqr3 == " O " && sqr6 == " O " && sqr9 == " O ")
    {
        alert("You Lose!")
        reset()
    }
    else if(sqr1 == " O " && sqr5 == " O " && sqr9 == " O ")
    {
        alert("You Lose!")
        reset()
    }
    else if(sqr3 == " O " && sqr5 == " O " && sqr7 == " O ")
    {
        alert("You Lose!")
        reset()
    }
}

function player1Check()
{
    if(sqr1 == " X " && sqr2 == " X " && sqr3 == " X ")
    {
        alert("Player 1 wins!")
        reset()
    }
    else if(sqr4 == " X " && sqr5 == " X " && sqr6 == " X ")
    {
        alert("Player 1 wins!")
        reset()
    }
    else if(sqr7 == " X " && sqr8 == " X " && sqr9 == " X ")
    {
        alert("Player 1 wins!")
        reset()
    }
    else if(sqr1 == " X " && sqr5 == " X " && sqr9 == " X ")
    {
        alert("Player 1 wins!")
        reset()
    }
    else if(sqr1 == " X " && sqr4 == " X " && sqr7 == " X ")
    {
        alert("Player 1 wins!")
        reset()
    }
    else if(sqr2 == " X " && sqr5 == " X " && sqr8 == " X ")
    {
        alert("Player 1 wins!")
        reset()
    }
    else if(sqr3 == " X " && sqr6 == " X " && sqr9 == " X ")
    {
        alert("Player 1 wins!")
        reset()
    }
    else if(sqr1 == " X " && sqr5 == " X " && sqr9 == " X ")
    {
        alert("Player 1 wins!")
        reset()
    }
    else if(sqr3 == " X " && sqr5 == " X " && sqr7 == " X ")
    {
        alert("Player 1 wins!")
        reset()
    }
    else
    {
        player2Check()
        drawCheck()
    }
}

function player2Check()
{
    vari()
    drawCheck()
    if(sqr1 == " O " && sqr2 == " O " && sqr3 == " O ")
    {
        alert("Player 2 wins!")
        reset()
    }
    else if(sqr4 == " O " && sqr5 == " O " && sqr6 == " O ")
    {
        alert("Player 2 wins!")
        reset()
    }
    else if(sqr7 == " O " && sqr8 == " O " && sqr9 == " O ")
    {
        alert("Player 2 wins!")
        reset()
    }
    else if(sqr1 == " O " && sqr5 == " O " && sqr9 == " O ")
    {
        alert("Player 2 wins!")
        reset()
    }
    else if(sqr1 == " O " && sqr4 == " O " && sqr7 == " O ")
    {
        alert("Player 2 wins!")
        reset()
    }
    else if(sqr2 == " O " && sqr5 == " O " && sqr8 == " O ")
    {
        alert("Player 2 wins!")
        reset()
    }
    else if(sqr3 == " O " && sqr6 == " O " && sqr9 == " O ")
    {
        alert("Player 2 wins!")
        reset()
    }
    else if(sqr1 == " O " && sqr5 == " O " && sqr9 == " O ")
    {
        alert("Player 2 wins!")
        reset()
    }
    else if(sqr3 == " O " && sqr5 == " O " && sqr7 == " O ")
    {
        alert("Player 2 wins!")
        reset()
    }
}

function drawCheck()
{
    vari()
    moveCount = sqr1T + sqr2T + sqr3T + sqr4T + sqr5T + sqr6T + sqr7T + sqr8T + sqr9T
    if(moveCount == 9)
    {
        reset()
        alert("Draw")
    }
}

function winCheck()
{
    check2()
    if(sqr1 == " O " && sqr2 == " O " && sqr3T == 0 && turn == 1)
    {
        document.tic.sqr3.value = " O "
        sqr3T = 1;
        turn = 0;
    }
    else if(sqr2 == " O " && sqr3 == " O " && sqr1T == 0 && turn == 1)
    {
        document.tic.sqr1.value = " O "
        sqr1T = 1;
        turn = 0;
    }
    else if(sqr4 == " O " && sqr5 == " O " && sqr6T == 0 && turn == 1)
    {
        document.tic.sqr6.value = " O "
        sqr6T = 1;
        turn = 0;
    }
    else if(sqr5 == " O " && sqr6 == " O " && sqr4T == 0 && turn == 1)
    {
        document.tic.sqr4.value = " O "
        sqr4T = 1;
        turn = 0;
    }
    else if(sqr7 == " O " && sqr8 == " O " && sqr9T == 0 && turn == 1)
    {
        document.tic.sqr9.value = " O "
        sqr9T = 1;
        turn = 0;
    }
    else if(sqr8 == " O " && sqr9 == " O " && sqr7T == 0 && turn == 1)
    {
        document.tic.sqr7.value = " O "
        sqr7T = 1;
        turn = 0;
    }
    else if(sqr1 == " O " && sqr5 == " O " && sqr9T == 0 && turn == 1)
    {
        document.tic.sqr9.value = " O "
        sqr9T = 1;
        turn = 0;
    }
    else if(sqr5 == " O " && sqr9 == " O " && sqr1T == 0 && turn == 1)
    {
        document.tic.sqr1.value = " O "
        sqr1T = 1;
        turn = 0;
    }
    else if(sqr3 == " O " && sqr5 == " O " && sqr7T == 0 && turn == 1)
    {
        document.tic.sqr7.value = " O "
        sqr7T = 1;
        turn = 0;
    }
    else if(sqr7 == " O " && sqr5 == " O " && sqr3T == 0 && turn == 1)
    {
        document.tic.sqr3.value = " O "
        sqr3T = 1;
        turn = 0;
    }
    else if(sqr1 == " O " && sqr3 == " O " && sqr2T == 0 && turn == 1)
    {
        document.tic.sqr2.value = " O "
        sqr2T = 1;
        turn = 0;
    }
    else if(sqr4 == " O " && sqr6 == " O " && sqr5T == 0 && turn == 1)
    {
        document.tic.sqr5.value = " O "
        sqr5T = 1;
        turn = 0;
    }
    else if(sqr7 == " O " && sqr9 == " O " && sqr8T == 0 && turn == 1)
    {
        document.tic.sqr8.value = " O "
        sqr8T = 1;
        turn = 0;
    }
    else if(sqr1 == " O " && sqr7 == " O " && sqr4T == 0 && turn == 1)
    {
        document.tic.sqr4.value = " O "
        sqr4T = 1;
        turn = 0;
    }
    else if(sqr2 == " O " && sqr8 == " O " && sqr5T == 0 && turn == 1)
    {
        document.tic.sqr5.value = " O "
        sqr5T = 1;
        turn = 0;
    }
    else if(sqr3 == " O " && sqr9 == " O " && sqr6T == 0 && turn == 1)
    {
        document.tic.sqr6.value = " O "
        sqr6T = 1;
        turn = 0;
    }
    else if(sqr1 == " O " && sqr5 == " O " && sqr9T == 0 && turn == 1)
    {
        document.tic.sqr9.value = " O "
        sqr9T = 1;
        turn = 0;
    }
    else if(sqr4 == " O " && sqr7 == " O " && sqr1T == 0 && turn == 1)
    {
        document.tic.sqr1.value = " O "
        sqr1T = 1;
        turn = 0;
    }
    else if(sqr5 == " O " && sqr8 == " O " && sqr2T == 0 && turn == 1)
    {
        document.tic.sqr2.value = " O "
        sqr2T = 1;
        turn = 0;
    }
    else if(sqr6 == " O " && sqr9 == " O " && sqr3T == 0 && turn == 1)
    {
        document.tic.sqr3.value = " O "
        sqr3T = 1;
        turn = 0;
    }
    else if(sqr1 == " O " && sqr4 == " O " && sqr7T == 0 && turn == 1)
    {
        document.tic.sqr7.value = " O "
        sqr7T = 1;
        turn = 0;
    }
    else if(sqr2 == " O " && sqr5 == " O " && sqr8T == 0 && turn == 1)
    {
        document.tic.sqr8.value = " O "
        sqr8T = 1;
        turn = 0;
    }
    else if(sqr3 == " O " && sqr6 == " O " && sqr9T == 0 && turn == 1)
    {
        document.tic.sqr9.value = " O "
        sqr9T = 1;
        turn = 0;
    }
    else if(sqr1 == " O " && sqr9 == " O " && sqr5T == 0 && turn == 1)
    {
        document.tic.sqr5.value = " O "
        sqr5T = 1;
        turn = 0;
    }
    else if(sqr3 == " O " && sqr7 == " O " && sqr5T == 0 && turn == 1)
    {
        document.tic.sqr5.value = " O "
        sqr5T = 1;
        turn = 0;
    }
    else
    {
        computer()
    }
    check2()
}
function computer()
{
    check2()
    if(sqr1 == " X " && sqr2 == " X " && sqr3T == 0 && turn == 1)
    {
        document.tic.sqr3.value = " O "
        sqr3T = 1;
        turn = 0;
    }
    else if(sqr2 == " X " && sqr3 == " X " && sqr1T == 0 && turn == 1)
    {
        document.tic.sqr1.value = " O "
        sqr1T = 1;
        turn = 0;
    }
    else if(sqr4 == " X " && sqr5 == " X " && sqr6T == 0 && turn == 1)
    {
        document.tic.sqr6.value = " O "
        sqr6T = 1;
        turn = 0;
    }
    else if(sqr5 == " X " && sqr6 == " X " && sqr4T == 0 && turn == 1)
    {
        document.tic.sqr4.value = " O "
        sqr4T = 1;
        turn = 0;
    }
    else if(sqr7 == " X " && sqr8 == " X " && sqr9T == 0 && turn == 1)
    {
        document.tic.sqr9.value = " O "
        sqr9T = 1;
        turn = 0;
    }
    else if(sqr8 == " X " && sqr9 == " X " && sqr7T == 0 && turn == 1)
    {
        document.tic.sqr7.value = " O "
        sqr7T = 1;
        turn = 0;
    }
    else if(sqr1 == " X " && sqr5 == " X " && sqr9T == 0 && turn == 1)
    {
        document.tic.sqr9.value = " O "
        sqr9T = 1;
        turn = 0;
    }
    else if(sqr5 == " X " && sqr9 == " X " && sqr1T == 0 && turn == 1)
    {
        document.tic.sqr1.value = " O "
        sqr1T = 1;
        turn = 0;
    }
    else if(sqr3 == " X " && sqr5 == " X " && sqr7T == 0 && turn == 1)
    {
        document.tic.sqr7.value = " O "
        sqr7T = 1;
        turn = 0;
    }
    else if(sqr7 == " X " && sqr5 == " X " && sqr3T == 0 && turn == 1)
    {
        document.tic.sqr3.value = " O "
        sqr3T = 1;
        turn = 0;
    }
    else if(sqr1 == " X " && sqr3 == " X " && sqr2T == 0 && turn == 1)
    {
        document.tic.sqr2.value = " O "
        sqr2T = 1;
        turn = 0;
    }
    else if(sqr4 == " X " && sqr6 == " X " && sqr5T == 0 && turn == 1)
    {
        document.tic.sqr5.value = " O "
        sqr5T = 1;
        turn = 0;
    }
    else if(sqr7 == " X " && sqr9 == " X " && sqr8T == 0 && turn == 1)
    {
        document.tic.sqr8.value = " O "
        sqr8T = 1;
        turn = 0;
    }
    else if(sqr1 == " X " && sqr7 == " X " && sqr4T == 0 && turn == 1)
    {
        document.tic.sqr4.value = " O "
        sqr4T = 1;
        turn = 0;
    }
    else if(sqr2 == " X " && sqr8 == " X " && sqr5T == 0 && turn == 1)
    {
        document.tic.sqr5.value = " O "
        sqr5T = 1;
        turn = 0;
    }
    else if(sqr3 == " X " && sqr9 == " X " && sqr6T == 0 && turn == 1)
    {
        document.tic.sqr6.value = " O "
        sqr6T = 1;
        turn = 0;
    }
    else if(sqr1 == " X " && sqr5 == " X " && sqr9T == 0 && turn == 1)
    {
        document.tic.sqr9.value = " O "
        sqr9T = 1;
        turn = 0;
    }
    else if(sqr4 == " X " && sqr7 == " X " && sqr1T == 0 && turn == 1)
    {
        document.tic.sqr1.value = " O "
        sqr1T = 1;
        turn = 0;
    }
    else if(sqr5 == " X " && sqr8 == " X " && sqr2T == 0 && turn == 1)
    {
        document.tic.sqr2.value = " O "
        sqr2T = 1;
        turn = 0;
    }
    else if(sqr6 == " X " && sqr9 == " X " && sqr3T == 0 && turn == 1)
    {
        document.tic.sqr3.value = " O "
        sqr3T = 1;
        turn = 0;
    }
    else if(sqr1 == " X " && sqr4 == " X " && sqr7T == 0 && turn == 1)
    {
        document.tic.sqr7.value = " O "
        sqr7T = 1;
        turn = 0;
    }
    else if(sqr2 == " X " && sqr5 == " X " && sqr8T == 0 && turn == 1)
    {
        document.tic.sqr8.value = " O "
        sqr8T = 1;
        turn = 0;
    }
    else if(sqr3 == " X " && sqr6 == " X " && sqr9T == 0 && turn == 1)
    {
        document.tic.sqr9.value = " O "
        sqr9T = 1;
        turn = 0;
    }
    else if(sqr1 == " X " && sqr9 == " X " && sqr5T == 0 && turn == 1)
    {
        document.tic.sqr5.value = " O "
        sqr5T = 1;
        turn = 0;
    }
    else if(sqr3 == " X " && sqr7 == " X " && sqr5T == 0 && turn == 1)
    {
        document.tic.sqr5.value = " O "
        sqr5T = 1;
        turn = 0;
    }
    else
    {
        AI()
    }
    check2()
}

function AI()
{
    vari()
    if(document.tic.sqr5.value == "     " && turn == 1)
    {
        document.tic.sqr5.value = " O "
        turn = 0
        sqr5T = 1
    }
    else if(document.tic.sqr1.value == "     " && turn == 1)
    {
        document.tic.sqr1.value = " O "
        turn = 0
        sqr1T = 1
    }
    else if(document.tic.sqr9.value == "     " && turn == 1)
    {
        document.tic.sqr9.value = " O "
        turn = 0
        sqr9T = 1
    }
    else if(document.tic.sqr6.value == "     " && turn == 1)
    {
        document.tic.sqr6.value = " O "
        turn = 0
        sqr6T = 1
    }
    else if(document.tic.sqr2.value == "     " && turn == 1)
    {
        document.tic.sqr2.value = " O "
        turn = 0
        sqr2T = 1
    }
    else if(document.tic.sqr8.value == "     " && turn == 1)
    {
        document.tic.sqr8.value = " O "
        turn = 0
        sqr8T = 1
    }
    else if(document.tic.sqr3.value == "     " && turn == 1)
    {
        document.tic.sqr3.value = " O "
        turn = 0
        sqr3T = 1
    }
    else if(document.tic.sqr7.value == "     " && turn == 1)
    {
        document.tic.sqr7.value = " O "
        turn = 0
        sqr7T = 1
    }
    else if(document.tic.sqr4.value == "     " && turn == 1)
    {
        document.tic.sqr4.value = " O "
        turn = 0
        sqr4T = 1
    }
    check2()
}

function reset()
{
    document.tic.sqr1.value = "     "
    document.tic.sqr2.value = "     "
    document.tic.sqr3.value = "     "
    document.tic.sqr4.value = "     "
    document.tic.sqr5.value = "     "
    document.tic.sqr6.value = "     "
    document.tic.sqr7.value = "     "
    document.tic.sqr8.value = "     "
    document.tic.sqr9.value = "     "
    sqr1T = 0
    sqr2T = 0
    sqr3T = 0
    sqr4T = 0
    sqr5T = 0
    sqr6T = 0
    sqr7T = 0
    sqr8T = 0
    sqr9T = 0
    vari()
    turn = 0
    moveCount = 0
}

function resetter()
{
    reset()
}
</SCRIPT>

<FORM NAME="tic" method="post">
    <INPUT TYPE="button" NAME="sqr1" class="tictac" value="     " onClick="if(document.tic.sqr1.value == '     ' && turn == 0 && mode == 1) {document.tic.sqr1.value = ' X '; sqr1T = 1; turn = 1; vari(); check();} else if(document.tic.sqr1.value == '     ' && turn == 1 && mode == 2) {document.tic.sqr1.value = ' X '; sqr1T = 1; turn = 0; vari(); player1Check()} else if(document.tic.sqr1.value == '     ' && turn == 0 && mode == 2) {document.tic.sqr1.value = ' O '; sqr1T = 1; turn = 1; vari(); player1Check()} drawCheck()">
    <INPUT TYPE="button" NAME="sqr2" class="tictac" value="     " onClick="if(document.tic.sqr2.value == '     ' && turn == 0 && mode == 1) {document.tic.sqr2.value = ' X '; sqr2T = 1; turn = 1; vari(); check();} else if(document.tic.sqr2.value == '     ' && turn == 1 && mode == 2) {document.tic.sqr2.value = ' X '; sqr2T = 1; turn = 0; vari(); player1Check()} else if(document.tic.sqr2.value == '     ' && turn == 0 && mode == 2) {document.tic.sqr2.value = ' O '; sqr2T = 1; turn = 1; vari(); player1Check()} drawCheck()">
    <INPUT TYPE="button" NAME="sqr3" class="tictac" value="     " onClick="if(document.tic.sqr3.value == '     ' && turn == 0 && mode == 1) {document.tic.sqr3.value = ' X '; sqr3T = 1; turn = 1; vari(); check();} else if(document.tic.sqr3.value == '     ' && turn == 1 && mode == 2) {document.tic.sqr3.value = ' X '; sqr3T = 1; turn = 0; vari(); player1Check()} else if(document.tic.sqr3.value == '     ' && turn == 0 && mode == 2) {document.tic.sqr3.value = ' O '; sqr3T = 1; turn = 1; vari(); player1Check()} drawCheck()"><br />
    <INPUT TYPE="button" NAME="sqr4" class="tictac" value="     " onClick="if(document.tic.sqr4.value == '     ' && turn == 0 && mode == 1) {document.tic.sqr4.value = ' X '; sqr4T = 1; turn = 1; vari(); check();} else if(document.tic.sqr4.value == '     ' && turn == 1 && mode == 2) {document.tic.sqr4.value = ' X '; sqr4T = 1; turn = 0; vari(); player1Check()} else if(document.tic.sqr4.value == '     ' && turn == 0 && mode == 2) {document.tic.sqr4.value = ' O '; sqr4T = 1; turn = 1; vari(); player1Check()} drawCheck()">
    <INPUT TYPE="button" NAME="sqr5" class="tictac" value="     " onClick="if(document.tic.sqr5.value == '     ' && turn == 0 && mode == 1) {document.tic.sqr5.value = ' X '; sqr5T = 1; turn = 1; vari(); check();} else if(document.tic.sqr5.value == '     ' && turn == 1 && mode == 2) {document.tic.sqr5.value = ' X '; sqr5T = 1; turn = 0; vari(); player1Check()} else if(document.tic.sqr5.value == '     ' && turn == 0 && mode == 2) {document.tic.sqr5.value = ' O '; sqr5T = 1; turn = 1; vari(); player1Check()} drawCheck()">
    <INPUT TYPE="button" NAME="sqr6" class="tictac" value="     " onClick="if(document.tic.sqr6.value == '     ' && turn == 0 && mode == 1) {document.tic.sqr6.value = ' X '; sqr6T = 1; turn = 1; vari(); check();} else if(document.tic.sqr6.value == '     ' && turn == 1 && mode == 2) {document.tic.sqr6.value = ' X '; sqr6T = 1; turn = 0; vari(); player1Check()} else if(document.tic.sqr6.value == '     ' && turn == 0 && mode == 2) {document.tic.sqr6.value = ' O '; sqr6T = 1; turn = 1; vari(); player1Check()} drawCheck()"><br />
    <INPUT TYPE="button" NAME="sqr7" class="tictac" value="     " onClick="if(document.tic.sqr7.value == '     ' && turn == 0 && mode == 1) {document.tic.sqr7.value = ' X '; sqr7T = 1; turn = 1; vari(); check();} else if(document.tic.sqr7.value == '     ' && turn == 1 && mode == 2) {document.tic.sqr7.value = ' X '; sqr7T = 1; turn = 0; vari(); player1Check()} else if(document.tic.sqr7.value == '     ' && turn == 0 && mode == 2) {document.tic.sqr7.value = ' O '; sqr7T = 1; turn = 1; vari(); player1Check()} drawCheck()">
    <INPUT TYPE="button" NAME="sqr8" class="tictac" value="     " onClick="if(document.tic.sqr8.value == '     ' && turn == 0 && mode == 1) {document.tic.sqr8.value = ' X '; sqr8T = 1; turn = 1; vari(); check();} else if(document.tic.sqr8.value == '     ' && turn == 1 && mode == 2) {document.tic.sqr8.value = ' X '; sqr8T = 1; turn = 0; vari(); player1Check()} else if(document.tic.sqr8.value == '     ' && turn == 0 && mode == 2) {document.tic.sqr8.value = ' O '; sqr8T = 1; turn = 1; vari(); player1Check()} drawCheck()">
    <INPUT TYPE="button" NAME="sqr9" class="tictac" value="     " onClick="if(document.tic.sqr9.value == '     ' && turn == 0 && mode == 1) {document.tic.sqr9.value = ' X '; sqr9T = 1; turn = 1; vari(); check();} else if(document.tic.sqr9.value == '     ' && turn == 1 && mode == 2) {document.tic.sqr9.value = ' X '; sqr9T = 1; turn = 0; vari(); player1Check()} else if(document.tic.sqr9.value == '     ' && turn == 0 && mode == 2) {document.tic.sqr9.value = ' O '; sqr9T = 1; turn = 1; vari(); player1Check()} drawCheck()">
</form>

你不能给每个div赋予相同的id,你必须在id的地方使用Class。

答案 1 :(得分:0)

allowDrop(event)中,您需要访问DOM中的放置目标并删除ondragover事件。这样它就不再是放弃目标了。

要了解此信息,请查看以下资源

...和others

我曾经以Tic-Tac-Toe为例教授VB编程,很高兴看到用JavaScript实现。