创建多人TicTacToe

时间：2018-02-28 00:39:40

标签： javascript php html

我正在尝试创建一个两个玩家可以玩的tictactoe游戏（而不是与AI或在同一个屏幕上）。为此，我首先创建了在一个浏览器窗口中运行的游戏，然后想要将其扩展为保存到数据库中，然后让玩家2在不同的（隐身）浏览器中打开它，并在玩家1播放时更新，依此类推。

首先，我创建了一个网页，玩家1选择他的图标（X或O）并输入他的名字。然后，这将使用游戏ID的随机密钥将此信息保存到数据库表中，并将玩家1重定向到游戏板。在这里，玩家1可以通过可点击的链接向玩家2发送电子邮件（使用PHPmailer）以输入他们的名字然后加入游戏会话播放器1。

在实际的tictactoe页面上，我只有9个空白按钮供玩家点击。将有一个if条件让玩家转弯并且只允许当前转弯（即x或o）实际点击并更改按钮，然后将按钮单击保存到数据库并将其更新到玩家2的屏幕上。

问题在于，我可以在1个屏幕上完成所有工作，但我不知道如何将所选按钮保存到数据库中，然后告诉玩家2将更改加载到他的屏幕上。意思是我现在只在1个浏览器窗口上为2个玩家工作。

以下是我目前的tictactoe代码示例：

https://jsfiddle.net/yf8x116v/5/

HTML 

<html>
<head>
  <script type="text/javascript" src="ttt2.js"></script>
  <link rel="stylesheet" href="../stylesheets/tttcode.css">
</head>
<body>
  <div class="container">
    <div class="player1" align="center">
      <img src="../images/user.png" alt="User1" width="50" height="50">
      <figcaption>Player 1</figcaption>
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      <form action="mail.php" method="POST">
        Enter Email to send InviteLink:<input type="text" name="email" />
        <input type="hidden" name="invite" value="<?php echo $_SESSION['id']; ?>" />
        <input type="submit" name="submit" value="submit"/>
      </form>
    </div>
    <div class="board" align="center">
      <table>
        <tr>
          <td><button class="cell" id="cell_00" type="button" onclick="clickFunction(this)"></button></td>
          <td><button class="cell" id="cell_01" type="button" onclick="clickFunction(this)"></button></td>
          <td><button class="cell" id="cell_02" type="button" onclick="clickFunction(this)"></button></td>
        </tr>
        <tr>
          <td><button class="cell" id="cell_10" type="button" onclick="clickFunction(this)"></button></td>
          <td><button class="cell" id="cell_11" type="button" onclick="clickFunction(this)"></button></td>
          <td><button class="cell" id="cell_12" type="button" onclick="clickFunction(this)"></button></td>
        </tr>
        <tr>
          <td><button class="cell" id="cell_20" type="button" onclick="clickFunction(this)"></button></td>
          <td><button class="cell" id="cell_21" type="button" onclick="clickFunction(this)"></button></td>
          <td><button class="cell" id="cell_22" type="button" onclick="clickFunction(this)"></button></td>
        </tr>
      </table>
    </div>
    <div class="player2" align="center">
      <img src="../images/user.png" alt="User2" width="50" height="50">
      <figcaption>Player 2</figcaption>
    </div>
  </div>
  <div class="right-sidebar hidden">
    <h3>Players</h3>
    <div id="users"></div>
    <hr/>
    <h3>Spectators</h3>
    <div id="Viewers"></div>
  </div>
</body>

CSS 

body, html {
  width: 100%;
  height: 100%;
  margin: 0;
  background-color: lightblue;
}

.container {
  width: 100%;
  height: 50%;
}

.player1 {
  width: 25%;
  height: 100%; /*height is done like this so adding padding doesnt make you scroll down */
  float: left;
  border-collapse: collapse;
  padding-top: 90px;
}

.board {
    width: 50%;
  height: 100%; /*height is done like this so adding padding doesnt make you scroll down */
  float: left;
  border-collapse: collapse;
  padding-top: 150px;
}

.player2{
  width: 25%;
  height: 100%; /*height is done like this so adding padding doesnt make you scroll down */
  position: relative;
  float: right;
  border-collapse: collapse;
  padding-top: 90px;
}

table {
    max-width: 320px;
    max-height: 320px;
    width: 85vw;
    height: 85vw;
    border-spacing: 4px 4px;
  }

td {
    padding: 0;
    width: 33%;
    height: 33%;
}

.cell {
    font-size: 3.4em;
    font-size: 12vmin;  /* Responsive font size! Awesome! */
    height: 100%;  /* Fill the container (td) */
    width: 100%;
  background-color:lightgreen;
}

.right-sidebar {
    width: 220px;
    background-color: #d2e6e2;
    position: fixed;
    right: 0;
    height: calc(100% - 50px - 50px);
}

img{
    border: 1px solid grey;
    border-radius: 4px;
  float:center;
}

JS 

var turn = "X";
var moveCount = 0;
var winFlag = 0;

function clickFunction(currentCell) {
  if (currentCell.textContent == ""){
    currentCell.textContent = turn;
    moveCount += 1;
    if(( moveCount < 9) && (winFlag == 0)){
      switchPlayers();
      checkWin();
    }
    else {
      //display draw message
      alert("Draw Game!");
    }
  }
  else{
    //do nothing
  }
}

function switchPlayers(){
  if(winFlag==0){
    if(turn == "X")
      turn = "O";
    else {
      turn = "X";
    }
  }
}

function checkWin(){
  if (
    //check horizontals
    (document.getElementById("cell_00").textContent==document.getElementById("cell_01").textContent && document.getElementById("cell_00").textContent==document.getElementById("cell_02").textContent && (document.getElementById("cell_00").textContent!=""))  ||
    (document.getElementById("cell_10").textContent==document.getElementById("cell_11").textContent && document.getElementById("cell_10").textContent==document.getElementById("cell_12").textContent && (document.getElementById("cell_10").textContent!=""))  ||
    (document.getElementById("cell_20").textContent==document.getElementById("cell_21").textContent && document.getElementById("cell_20").textContent==document.getElementById("cell_22").textContent && (document.getElementById("cell_20").textContent!=""))  ||
    //verticles
    (document.getElementById("cell_00").textContent==document.getElementById("cell_10").textContent && document.getElementById("cell_00").textContent==document.getElementById("cell_20").textContent && (document.getElementById("cell_00").textContent!=""))  ||
    (document.getElementById("cell_01").textContent==document.getElementById("cell_11").textContent && document.getElementById("cell_01").textContent==document.getElementById("cell_21").textContent && (document.getElementById("cell_01").textContent!=""))  ||
    (document.getElementById("cell_02").textContent==document.getElementById("cell_12").textContent && document.getElementById("cell_02").textContent==document.getElementById("cell_22").textContent && (document.getElementById("cell_02").textContent!=""))  ||
    //diagonals
    (document.getElementById("cell_00").textContent==document.getElementById("cell_11").textContent && document.getElementById("cell_00").textContent==document.getElementById("cell_22").textContent && (document.getElementById("cell_11").textContent!=""))  ||
    (document.getElementById("cell_02").textContent==document.getElementById("cell_11").textContent && document.getElementById("cell_02").textContent==document.getElementById("cell_20").textContent && (document.getElementById("cell_11").textContent!=""))){
      //output that someone won and stop the game
      winflag = 1;
      alert("Winner!");
      turn = "";
    }
  else {
    //do nothing and keep playing the game
  }
}

（由于某种原因它在jsfiddle中不起作用，但它绝对适用于我的电脑，对不起）

有一个更清晰的问题：我从哪里可以将玩家1的屏幕上的更改更新到玩家2的屏幕，以便他们可以看到彼此在玩？

---------编辑1 -----------------

好的，从评论中获取建议，我想尝试使用AJAX方法来检查和更新数据库以更改按钮文本。对于伪代码示例：

onClick(cellID){
   turn = ajax (check whos turn it is in database)
   if ( turn == playerWhoClicked )
      if (cellID.text == "")
         cellID.text = turn
         ajax (update database on which cell was changed to what)
         switchPlayers()
      else
         do nothing
   else  
      do nothing
}

switchPlayers(){
   if (turn == "X")
      turn = "O"
      Ajax (update database turn)
   else
      turn = "X"
      Ajax (update database turn)
}

--------------编辑2 --------------

根据PHPGlue建议我也可以按onClick更新数据库并使用setInterval每x秒检查一次数据库以更新两个玩家的游戏板

0 个答案:

没有答案
相关问题
最新问题