Javascript和html Tic Tac Toe获胜者

时间：2012-09-25 19:13:35

标签： javascript html css

我正在使用html，css和JavaScript编写一个tic tac toe游戏。我将JavaScript中的外部.js文件引用到.html文件中。在.js文件中，我有一个名为playerMove的函数，它允许玩家进行他/她的移动并在玩家'x'和'o'之间切换。我想要做的是确定胜利者。

这就是我所拥有的：每个方块，当onclick（this）时，引用playerMove（piece）。在每次移动之后，我想运行if语句来检查获胜者，但我不确定参数是否包含对“piece”或a，b和c的引用。任何建议都将不胜感激。

var turn = 0;   
a = document.getElementById("topLeftSquare").innerHTML;
b = document.getElementById("topMiddleSquare").innerHTML;
c = document.getElementById("topRightSquare").innerHTML;

function playerMove(piece) {
var win;
if(piece.innerHTML != 'X' && piece.innerHTML != 'O'){
    if(turn % 2 == 0){
        document.getElementById('playerDisplay').innerHTML= "X Plays " + printEquation(1);
        piece.innerHTML = 'X';
        window.setInterval("X", 10000)
        piece.style.color = "red";
        if(piece.innerHTML == 'X')
            window.alert("X WINS!");
    }
    else {
        document.getElementById('playerDisplay').innerHTML= "O Plays " + printEquation(1);
        piece.innerHTML = 'O';
        piece.style.color = "brown";
        //document.getElementById('playerDisplay').innerHTML = "O Plays";

        //win = winner();
    }

    turn+=1;
}

html代码：

<div id="board">
            <div class="topLeftSquare" onclick="playerMove(this)">

            </div>
            <div class="topMiddleSquare" onclick="playerMove(this)">

            </div>
            <div class="topRightSquare" onclick="playerMove(this)">

            </div>
</div>

4 个答案:

答案 0 :(得分：4)

<html>
<head>
<script type="text/javascript">
var cur_id;
var tempkeycode = "";
function setKeycode(input)
{
    tempkeycode = input;
    xowin()
}
function setId(id)
{
    cur_id = id;
    xowin()
}
function keyPress(e) 
{
    var input = e.keyCode ? e.keyCode : e.charCode;
    if(tempkeycode == "")
    {
        if ((input == 111) || (input == 120))
        {
            setKeycode(input);
            return true;
        }   
        else 
            return false;
    }
    else
    {
        if(((input == 111) || (input == 120)) && (input != tempkeycode))
        {
            setKeycode(input);
            return true;
        }
        else
        {
            return false;
        }
    }
}
function preventBackspace(e) 
{
    var evt = e || window.event;
        if (evt) 
        {
            var keyCode = evt.charCode || evt.keyCode;
            if (keyCode === 8) 
            {
                if (evt.preventDefault) 
                {
                    evt.preventDefault();
                } 
                else 
                {
                    evt.returnValue = false;
                }
            }
        }
}
function xowin()
{
tb1val = document.getElementById("tb1").value;
tb2val = document.getElementById("tb2").value;
tb3val = document.getElementById("tb3").value;
tb4val = document.getElementById("tb4").value;
tb5val = document.getElementById("tb5").value;
tb6val = document.getElementById("tb6").value;
tb7val = document.getElementById("tb7").value;
tb8val = document.getElementById("tb8").value;
tb9val = document.getElementById("tb9").value;

    if(tb1val == tb2val && tb2val == tb3val && tb1val!= "" && tb2val!= "" && tb3val!= "")
    {
        alert("Player "+tb1val+" Wins!!!");
    }
    else if(tb4val == tb5val && tb5val == tb6val && tb4val!= "" && tb5val!= "" && tb6val!= "")
    {
        alert("Player "+tb5val+" Wins!!!");
    }
    else if(tb7val == tb8val && tb8val == tb9val && tb7val!= "" && tb8val!= "" && tb9val!= "")
    {
        alert("Player "+tb7val+" Wins!!!");
    }
    else if(tb1val == tb4val && tb4val == tb7val && tb1val!= "" && tb4val!= "" && tb7val!= "")
    {
        alert("Player "+tb4val+" Wins!!!");
    }
    else if(tb2val == tb5val && tb5val == tb8val && tb2val!= "" && tb5val!= "" && tb8val!= "")
    {
        alert("Player "+tb2val+" Wins!!!");
    }
    else if(tb3val == tb6val && tb6val == tb9val && tb3val!= "" && tb6val!= "" && tb9val!= "")
    {
        alert("Player "+tb6val+" Wins!!!");
    }
    else if(tb1val == tb5val && tb5val == tb9val && tb1val!= "" && tb5val!= "" && tb9val!= "")
    {
        alert("Player "+tb9val+" Wins!!!");
    }
    else if(tb3val == tb5val && tb5val == tb7val && tb3val!= "" && tb5val!= "" && tb7val!= "")
    {
        alert("Player "+tb3val+" Wins!!!");
    }
    else
    {
        if(tb1val!= "" && tb2val!= "" && tb3val!= "" && tb4val!= "" && tb5val!= "" && tb6val!= "" && tb7val!= "" && tb8val!= "" && tb9val!= "")
        {
            alert("Draw");
        }
    }
}
</script>
</head>
<body bgcolor="blue">
<center>
    <h1>Tic Tac Toe</h1>
    <input type="text" id="tb1" value="" size="1" onkeydown="preventBackspace(event)" onkeypress="return keyPress(event)" onblur="setId(this.id);" maxlength="1">
    <input type="text" id="tb2" value="" size="1" onkeydown="preventBackspace(event)" onkeypress="return keyPress(event)" onblur="setId(this.id);" maxlength="1">
    <input type="text" id="tb3" value="" size="1" onkeydown="preventBackspace(event)" onkeypress="return keyPress(event)" onblur="setId(this.id);" maxlength="1"><br>
    <input type="text" id="tb4" value="" size="1" onkeydown="preventBackspace(event)" onkeypress="return keyPress(event)" onblur="setId(this.id);" maxlength="1">
    <input type="text" id="tb5" value="" size="1" onkeydown="preventBackspace(event)" onkeypress="return keyPress(event)" onblur="setId(this.id);" maxlength="1">
    <input type="text" id="tb6" value="" size="1" onkeydown="preventBackspace(event)" onkeypress="return keyPress(event)" onblur="setId(this.id);" maxlength="1"><br>
    <input type="text" id="tb7" value="" size="1" onkeydown="preventBackspace(event)" onkeypress="return keyPress(event)" onblur="setId(this.id);" maxlength="1">
    <input type="text" id="tb8" value="" size="1" onkeydown="preventBackspace(event)" onkeypress="return keyPress(event)" onblur="setId(this.id);" maxlength="1">
    <input type="text" id="tb9" value="" size="1" onkeydown="preventBackspace(event)" onkeypress="return keyPress(event)" onblur="setId(this.id);" maxlength="1"><br>
</center>
</body>
</html>

答案 1 :(得分：1)

<html>
<head>
<script type="text/javascript">
var currentvalue = "O";
var b1 = "notClicked";
var b2 = "notClicked";
var b3 = "notClicked";
var b4 = "notClicked";
var b5 = "notClicked";
var b6 = "notClicked";
var b7 = "notClicked";
var b8 = "notClicked";
var b9 = "notClicked";
function first()
{
    if(b1== "notClicked")
    {
        if(currentvalue == "O")
            {
            currentvalue = "X";
            }
            document.getElementById("b1").value=currentvalue;
            b1 = "clicked";
        if(b5== "notClicked")
            {
            document.getElementById("b5").value="O";
            b5 = "clicked";
            }
        else if(b9== "notClicked")
            {
            document.getElementById("b9").value="O";
            b9 = "clicked";
            }
        else if(b4== "notClicked")
            {
            document.getElementById("b4").value="O";
            b4 = "clicked";
            }
        else if(b3== "notClicked")
            {
            document.getElementById("b3").value="O";
            b3 = "clicked";
            }
        else if(b2== "notClicked")
            {
            document.getElementById("b2").value="O";
            b2 = "clicked";
            }
        else if(b7== "notClicked")
            {
            document.getElementById("b7").value="O";
            b7 = "clicked";
            }
        else if(b8== "notClicked")
            {
            document.getElementById("b8").value="O";
            b8 = "clicked";
            }
        else if(b6=="notClicked")
            {
            document.getElementById("b6").value="O";
            b6 = "clicked";
            }
    }
    xowin()
}
function second()
{
    if(b2== "notClicked")
    {
        if(currentvalue == "O")
            {
            currentvalue = "X";
            }
            document.getElementById("b2").value=currentvalue;
            b2 = "clicked";
        if(b5== "notClicked")
            {
            document.getElementById("b5").value="O";
            b5 = "clicked";
            }
        else if(b8== "notClicked")
            {
            document.getElementById("b8").value="O";
            b8 = "clicked";
            }
        else if(b4== "notClicked")
            {
            document.getElementById("b4").value="O";
            b4 = "clicked";
            }
        else if(b3== "notClicked")
            {
            document.getElementById("b3").value="O";
            b3 = "clicked";
            }
        else if(b9== "notClicked")
            {
            document.getElementById("b9").value="O";
            b9 = "clicked";
            }
        else if(b7== "notClicked")
            {
            document.getElementById("b7").value="O";
            b7 = "clicked";
            }
        else if(b1== "notClicked")
            {
            document.getElementById("b1").value="O";
            b1 = "clicked";
            }   
        else if(b6=="notClicked")
            {
            document.getElementById("b6").value="O";
            b6 = "clicked";
            }   
    }
    xowin()
}
function third()
{
    if(b3== "notClicked")
    {
        if(currentvalue == "O")
            {
            currentvalue = "X";
            }
            document.getElementById("b3").value=currentvalue;
            b3 = "clicked";
        if(b5== "notClicked")
            {
            document.getElementById("b5").value="O";
            b5 = "clicked";
            }
        else if(b1== "notClicked")
            {
            document.getElementById("b1").value="O";
            b1 = "clicked";
            }
        else if(b4== "notClicked")
            {
            document.getElementById("b4").value="O";
            b4 = "clicked";
            }
        else if(b2== "notClicked")
            {
            document.getElementById("b2").value="O";
            b2 = "clicked";
            }
        else if(b9== "notClicked")
            {
            document.getElementById("b9").value="O";
            b9 = "clicked";
            }
        else if(b7== "notClicked")
            {
            document.getElementById("b7").value="O";
            b7 = "clicked";
            }
        else if(b8== "notClicked")
            {
            document.getElementById("b8").value="O";
            b8 = "clicked";
            }
        else if(b6=="notClicked")
            {
            document.getElementById("b6").value="O";
            b6 = "clicked";
            }   
    }
    xowin()
}
function fourth()
{
    if(b4== "notClicked")
    {
        if(currentvalue == "O")
            {
            currentvalue = "X";
            }
            document.getElementById("b4").value=currentvalue;
            b4 = "clicked";
        if(b5== "notClicked")
            {
            document.getElementById("b5").value="O";
            b5 = "clicked";
            }
        else if(b6== "notClicked")
            {
            document.getElementById("b6").value="O";
            b6 = "clicked";
            }
        else if(b3== "notClicked")
            {
            document.getElementById("b3").value="O";
            b3 = "clicked";
            }
        else if(b2== "notClicked")
            {
            document.getElementById("b2").value="O";
            b2 = "clicked";
            }
        else if(b9== "notClicked")
            {
            document.getElementById("b9").value="O";
            b9 = "clicked";
            }
        else if(b7== "notClicked")
            {
            document.getElementById("b7").value="O";
            b7 = "clicked";
            }
        else if(b8== "notClicked")
            {
            document.getElementById("b8").value="O";
            b8 = "clicked";
            }
        else if(b1=="notClicked")
            {
            document.getElementById("b1").value="O";
            b1 = "clicked";
            }   
    }
    xowin()
}
function fifth()
{
    if(b5== "notClicked")
    {
        if(currentvalue == "O")
            {
            currentvalue = "X";
            }
            document.getElementById("b5").value=currentvalue;
            b5 = "clicked";
        if(b3== "notClicked")
            {
            document.getElementById("b3").value="O";
            b3 = "clicked";
            }
        else if(b1== "notClicked")
            {
            document.getElementById("b1").value="O";
            b1 = "clicked";
            }
        else if(b4== "notClicked")
            {
            document.getElementById("b4").value="O";
            b4 = "clicked";
            }
        else if(b2== "notClicked")
            {
            document.getElementById("b2").value="O";
            b2 = "clicked";
            }
        else if(b9== "notClicked")
            {
            document.getElementById("b9").value="O";
            b9 = "clicked";
            }
        else if(b7== "notClicked")
            {
            document.getElementById("b7").value="O";
            b7 = "clicked";
            }
        else if(b8== "notClicked")
            {
            document.getElementById("b8").value="O";
            b8 = "clicked";
            }   
        else if(b6=="notClicked")
            {
            document.getElementById("b6").value="O";
            b6 = "clicked";
            }   
    }
    xowin()
}
function sixth()
{
    if(b6== "notClicked")
    {
        if(currentvalue == "O")
            {
            currentvalue = "X";
            }
            document.getElementById("b6").value=currentvalue;
            b6 = "clicked";
        if(b3== "notClicked")
            {
            document.getElementById("b3").value="O";
            b3 = "clicked";
            }
        else if(b1== "notClicked")
            {
            document.getElementById("b1").value="O";
            b1 = "clicked";
            }
        else if(b4== "notClicked")
            {
            document.getElementById("b4").value="O";
            b4 = "clicked";
            }
        else if(b2== "notClicked")
            {
            document.getElementById("b2").value="O";
            b2 = "clicked";
            }
        else if(b9== "notClicked")
            {
            document.getElementById("b9").value="O";
            b9 = "clicked";
            }
        else if(b7== "notClicked")
            {
            document.getElementById("b7").value="O";
            b7 = "clicked";
            }
        else if(b8== "notClicked")
            {
            document.getElementById("b8").value="O";
            b8 = "clicked";
            }   
        else if(b5=="notClicked")
            {
            document.getElementById("b5").value="O";
            b5 = "clicked";
            }   
    }
    xowin()
}
function seventh()
{
    if(b7== "notClicked")
    {
        if(currentvalue == "O")
            {
            currentvalue = "X";
            }
            document.getElementById("b7").value=currentvalue;
            b7 = "clicked";
        if(b3== "notClicked")
            {
            document.getElementById("b3").value="O";
            b3 = "clicked";
            }
        else if(b1== "notClicked")
            {
            document.getElementById("b1").value="O";
            b1 = "clicked";
            }
        else if(b6== "notClicked")
            {
            document.getElementById("b6").value="O";
            b6 = "clicked";
            }
        else if(b9== "notClicked")
            {
            document.getElementById("b9").value="O";
            b9 = "clicked";
            }
        else if(b4== "notClicked")
            {
            document.getElementById("b4").value="O";
            b4 = "clicked";
            }
        else if(b5== "notClicked")
            {
            document.getElementById("b5").value="O";
            b5 = "clicked";
            }
        else if(b8== "notClicked")
            {
            document.getElementById("b8").value="O";
            b8 = "clicked";
            }   
        else if(b2=="notClicked")
            {
            document.getElementById("b2").value="O";
            b2 = "clicked";
            }   
    }
    xowin()
}
function eight()
{
    if(b8== "notClicked")
    {
        if(currentvalue == "O")
            {
            currentvalue = "X";
            }
            document.getElementById("b8").value=currentvalue;
            b8 = "clicked";
        if(b2== "notClicked")
            {
            document.getElementById("b2").value="O";
            b2 = "clicked";
            }
        else if(b1== "notClicked")
            {
            document.getElementById("b1").value="O";
            b1 = "clicked";
            }
        else if(b3== "notClicked")
            {
            document.getElementById("b3").value="O";
            b3 = "clicked";
            }
        else if(b9== "notClicked")
            {
            document.getElementById("b9").value="O";
            b9 = "clicked";
            }
        else if(b4== "notClicked")
            {
            document.getElementById("b4").value="O";
            b4 = "clicked";
            }
        else if(b7== "notClicked")
            {
            document.getElementById("b7").value="O";
            b7 = "clicked";
            }
        else if(b5== "notClicked")
            {
            document.getElementById("b5").value="O";
            b5 = "clicked";
            }   
        else if(b6=="notClicked")
            {
            document.getElementById("b6").value="O";
            b6 = "clicked";
            }   
    }
    xowin()
}
function ninth()
{
    if(b9== "notClicked")
    {
        if(currentvalue == "O")
            {
            currentvalue = "X";
            }
            document.getElementById("b9").value=currentvalue;
            b9 = "clicked";
        if(b3== "notClicked")
            {
            document.getElementById("b3").value="O";
            b3 = "clicked";
            }
        else if(b1== "notClicked")
            {
            document.getElementById("b1").value="O";
            b1 = "clicked";
            }
        else if(b4== "notClicked")
            {
            document.getElementById("b4").value="O";
            b4 = "clicked";
            }
        else if(b2== "notClicked")
            {
            document.getElementById("b2").value="O";
            b2 = "clicked";
            }
        else if(b8== "notClicked")
            {
            document.getElementById("b8").value="O";
            b8 = "clicked";
            }
        else if(b7== "notClicked")
            {
            document.getElementById("b7").value="O";
            b7 = "clicked";
            }
        else if(b5== "notClicked")
            {
            document.getElementById("b5").value="O";
            b5 = "clicked";
            }   
        else if(b6=="notClicked")
            {
            document.getElementById("b6").value="O";
            b6 = "clicked";
            }   
    }
    xowin()
}
function xowin()
{
b1val = document.getElementById("b1").value;
b2val = document.getElementById("b2").value;
b3val = document.getElementById("b3").value;
b4val = document.getElementById("b4").value;
b5val = document.getElementById("b5").value;
b6val = document.getElementById("b6").value;
b7val = document.getElementById("b7").value;
b8val = document.getElementById("b8").value;
b9val = document.getElementById("b9").value;

    if(b1val == b2val && b2val == b3val && b1val!= "" && b2val!= "" && b3val!= "")
    {
        alert("Player "+b1val+" Wins!!!");
    }
    else if(b4val == b5val && b5val == b6val && b4val!= "" && b5val!= "" && b6val!= "")
    {
        alert("Player "+b5val+" Wins!!!");
    }
    else if(b7val == b8val && b8val == b9val && b7val!= "" && b8val!= "" && b9val!= "")
    {
        alert("Player "+b7val+" Wins!!!");
    }
    else if(b1val == b4val && b4val == b7val && b1val!= "" && b4val!= "" && b7val!= "")
    {
        alert("Player "+b4val+" Wins!!!");
    }
    else if(b2val == b5val && b5val == b8val && b2val!= "" && b5val!= "" && b8val!= "")
    {
        alert("Player "+b2val+" Wins!!!");
    }
    else if(b3val == b6val && b6val == b9val && b3val!= "" && b6val!= "" && b9val!= "")
    {
        alert("Player "+b6val+" Wins!!!");
    }
    else if(b1val == b5val && b5val == b9val && b1val!= "" && b5val!= "" && b9val!= "")
    {
        alert("Player "+b9val+" Wins!!!");
    }
    else if(b3val == b5val && b5val == b7val && b3val!= "" && b5val!= "" && b7val!= "")
    {
        alert("Player "+b3val+" Wins!!!");
    }
    else
    {
        if(b1val!= "" && b2val!= "" && b3val!= "" && b4val!= "" && b5val!= "" && b6val!= "" && b7val!= "" && b8val!= "" && b9val!= "")
        {
            alert("Draw");
        }
    }
}
</script>
</head>
<body bgcolor="lightblue">
<h1 align="center">TIC TAC TOE</h1>
<center>
    <input type="button" id="b1" onclick="first()">
    <input type="button" id="b2" onclick="second()">
    <input type="button" id="b3" onclick="third()"><br>
    <input type="button" id="b4" onclick="fourth()">
    <input type="button" id="b5" onclick="fifth()">
    <input type="button" id="b6" onclick="sixth()"><br>
    <input type="button" id="b7" onclick="seventh()">
    <input type="button" id="b8" onclick="eight()">
    <input type="button" id="b9" onclick="ninth()"><br>
    <input type="button" id="b10" value="New Game" onclick="history.go(0)">
</center>
</body>
</html>

答案 2 :(得分：0)

Arthur Wulf White说的话：

<html><head>
<style>
td{border:1px solid black;padding:0px;width:20px;height:22px;text-align:center}
</style>
<script>
var s = "O"; 
var r = [0,0,0,0,0,0,0,0,0];
function t(a,b,c) {
 return (Math.abs(r[a] + r[b] + r[c]) == 3 ? true : false);
}
function a() {
 var c = document.getElementsByTagName("INPUT");
 for (var i = 0; i < c.length;i++) {
  if (c[i].checked == true) {
   var g = parseInt(c[i].id);
   r[g] = (s=="O" ? -1 : 1); 
   var m = document.createElement("TEXT");
   m.innerHTML = s;
   c[i].parentNode.replaceChild(m, c[i]);
   if (t(0,1,2) || t(3,4,5) || t(6,7,8) || t(0,3,6) || t(1,4,7) || t(2,5,8) || t(0,4,8) || t(2,4,6)) {
    alert("Player " + s + " wins!");
   }
   s = (s=="O" ? "X" : "O");
  }
 }
}
</script>
</head><body>
<table cellspacing='0' onclick='a()' name='board'>
<tr><td><input type='checkbox' id='0' /></td><td><input type='checkbox' id='1' /></td><td><input type='checkbox' id='2' /></td></tr>
<tr><td><input type='checkbox' id='3' /></td><td><input type='checkbox' id='4' /></td><td><input type='checkbox' id='5' /></td></tr>
<tr><td><input type='checkbox' id='6' /></td><td><input type='checkbox' id='7' /></td><td><input type='checkbox' id='8' /></td></tr>
</table>
</body></html>

快速而肮脏，但这是一个很大的挑战！下次我采访JS程序员时，我正在使用它！

答案 3 :(得分：0)

const tokens = [{
    name: "Beemo",
    img: "beemo-token.png",
  },
  {
    name: "Princess Bubblegum",
    img: "bubble-token.png",
  }
]

let player1 = {
  token: 0
}

let player2 = {
  token: 1
}

let gameboard = [
  [-1, -1, -1],
  [-1, -1, -1],
  [-1, -1, -1]
]; // array representation of gameboard
let currentPlayer = 1; // indicates who's turn it is
let numTurn = 0; // counts the num of turns made

populateSpace();
let againBtn = document.getElementById("again-btn");
againBtn.addEventListener("click", playAgain);

// Populates the spaces for the gameboard
function populateSpace() {
  // <div class="space">&nbsp;</div>
  let rows = document.querySelectorAll(".row");
  // return [<div>, <div>, <div>]
  for (let rowNum = 0; rowNum < rows.length; rowNum++) {
    let row = rows[rowNum];
    for (let col = 0; col < 3; col++) {
      let space = document.createElement("div");
      space.innerHTML = "&nbsp;";
      space.classList.add("space");
      space.id = rowNum + "-" + col;
      space.addEventListener("click", playerTurn);
      row.appendChild(space);
    }
  }
}

// Implements functionality when a player turn is made
function playerTurn(event) {
  let spaceContent = event.target;
  let location = spaceContent.id.split("-");
  let row = location[0];
  let col = location[1];
  // update the gameboard array ("placeToken")
  placeToken(row, col);
  // update the gameboard DOM
  updateGameboard();
  // check whether the current Player has won
  numTurn++;
  let won = checkWon();
  if (won) {
    report("Congratulations! Player " + currentPlayer + " has won!");
    return
  }
  if (numTurn == 9) {
    report("There was a tie");
    return
  }
  updateTurn();
  // if the player has not won => update the Turn
  // if the player has won/tie => show the container-div
}

// Updates the gameboard variable to indicate a token was placed at a specific row, col
function placeToken(row, col) {
  if (gameboard[row][col] == -1) {
    if (currentPlayer == 1) {
      gameboard[row][col] = 1;
    } else { // currentPlayer == 2
      gameboard[row][col] = 2;
    }
  }
}

// Update who's turn it is
function updateTurn() {
  if (currentPlayer == 1) {
    currentPlayer = 2;
  } else { // currentPlayer = 1
    currentPlayer = 1;
  }
  let turn = document.querySelector("span");
  turn.textContent = "Player " + currentPlayer;
}

// Updates the gameboard generating the tokens based on the gameboard values
function updateGameboard() {
  for (let row = 0; row < 3; row++) {
    for (let col = 0; col < 3; col++) {
      let space = document.getElementById(row + "-" + col);
      space.innerHTML = "";
      if (gameboard[row][col] == 1) {
        let token = makeToken(player1);
        space.appendChild(token);
      } else if (gameboard[row][col] == 2) {
        let token = makeToken(player2);
        space.appendChild(token);
      } else { // gameboard[row][col] == -1

      }
    }
  }
}

// Creates and returns the token DOM element of the given player
function makeToken(player) {
  let token = document.createElement("img");
  token.classList.add("token");
  token.src = "./img/tokens/" + tokens[player.token].img;
  token.alt = tokens[player.token].name;
  return token;
}

// Report whether the player has won or lost
function report(message) {
  let winContainer = document.getElementById("win-container");
  let gameContainer = document.getElementById("gameboard");
  winContainer.classList.remove("hidden");
  gameContainer.classList.add("hidden");

  let h2 = document.querySelector("#win-container h2");
  h2.textContent = message;
}

// Restarts and shows the gameboard to play again
function playAgain() {
  clearGameboard();
  let winContainer = document.getElementById("win-container");
  let gameContainer = document.getElementById("gameboard");
  winContainer.classList.add("hidden");
  gameContainer.classList.remove("hidden");
  numTurn = 0;
}

// Clears the gameboard
function clearGameboard() {
  let rows = document.querySelectorAll(".row");
  for (let i = 0; i < rows.length; i++) {
    let row = rows[i];
    row.innerHTML = "";
  }
  gameboard = [
    [-1, -1, -1],
    [-1, -1, -1],
    [-1, -1, -1]
  ];
  populateSpace();
}

// Returns true/false if the current player who just made a move won
function checkWon() {
  // Horizontal
  for (let row = 0; row < 3; row++) {
    let count = 0;
    for (let col = 0; col < 3; col++) {
      if (gameboard[row][col] == currentPlayer) {
        count++;
      }
    }
    if (count == 3) {
      return true;
    }
    count = 0;
  }

  // Vertical
  for (let col = 0; col < 3; col++) {
    let count = 0;
    for (let row = 0; row < 3; row++) {
      if (gameboard[row][col] == currentPlayer) {
        count++;
      }
    }
    if (count == 3) {
      return true;
    }
    count = 0;
  }

  // Diagonal
  if (gameboard[0][0] == currentPlayer &&
    gameboard[1][1] == currentPlayer &&
    gameboard[2][2] == currentPlayer) {
    return true;
  }

  if (gameboard[0][2] == currentPlayer &&
    gameboard[1][1] == currentPlayer &&
    gameboard[2][0] == currentPlayer) {
    return true;
  }

  return false
}
body {
  font-family: 'Ranchers', Arial, Helvetica, sans-serif;
  background-color: cornsilk;
}

button {
  background-color: lightblue;
  padding: 10px;
  border: 1px solid grey;
  border-radius: 5px;
}

.space {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.row {
  display: flex;
  justify-content: center;
}

h1,
h2,
p {
  text-align: center;
}

.hidden {
  display: none;
}

#win-container {
  border: 3px solid black;
  border-radius: 5px;
  padding: 15px;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

#win-container button {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.token {
  max-width: 200px;
}

* {
  cursor: url("./img/uni.cur"), pointer;
}
  <meta name="author" content="Elisa" />
  <link href="https://fonts.googleapis.com/css2?family=Ranchers&display=swap" rel="stylesheet">
  <link href="./style.css" rel="stylesheet" />

<body>
  <h1>Tic Tac Toe Time</h1>
  <p>It's <span>Player 1</span> turn</p>
  <div id="gameboard">
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
  </div>
  <div id="win-container" class="hidden">
    <h2>Hello</h2>
    <button id="again-btn">Play Again?</button>
  </div>
  <script src="index.js"></script>
</body>

我确实使用Adventure-Time令牌而不是Xs和Os进行挖矿。您当然可以使用任何图像。只需记住在JS和HTML中更改图像名称/标识即可。

相关问题
最新问题