Question

我正在使用HTML / JS（前端），PHP / MySQL后端开发基于多人回合的Snake＆Ladder游戏。

这是AJAX驱动的游戏。我已成功完成以下任务：

创建了一个登录/注册页面，将值存储在数据库中。
登录时->单击名为“多人游戏”的按钮：用户将被定向到聊天室，在其中可以选择需要与之一起玩的玩家。
已经实现了AJAX驱动的聊天系统，因此可以实现实时聊天。

一旦用户选择了一个播放器，页面上的两个页面都会与他们正在与之相对的页面进行更新，但不会更新该页面（因为截至目前为止，尚未为实现Ajax而编写页面）一直在利用网络资源开发这款游戏。 但是现在我遇到的问题是： 我用Java语言设计了棋盘游戏逻辑，掷骰子后，两名玩家沿着棋盘移动。 此板现在不支持AJAX驱动，即，如果Player1进行了移动，那么该移动也必须在Player 2板上进行更新 。 上方屏幕：例如，当我注册并登录“克里斯”和“保罗”的两个玩家分别在各自的董事会中时，您可以看到那里的聊天也很有效。但是，当我单击“ Roll Dice”按钮时，用白色和黄色表示的玩家只在一个板上移动，这是合乎逻辑的，因为我刚刚用Javascript创建了两个玩家并编写了逻辑（它们尚未与Crane和克里斯）。 BOARD.JS 文件如下：

var player1 = $（“＃UserName”）。val（）;

var player2 = $("#Opponent").val();

var gameId = $("#GameId").val();

console.log("name of first player: ",player1);

console.log("name of second player: ",player2);

console.log("Game ID is: ",gameId);//getting above values through session variables

window.rollDice = ()=>{  
      const max = 6;
      const roll = Math.ceil(Math.random() * max);
      $('.rolledValue').html("Rolled Dice Value is: " + roll);
      console.log("You rolled", roll);
      let currentPlayer = players[currentPlayerTurn];
      currentPlayer.position += roll;
      ladders.forEach(ladder=>{
        if (ladder.start === currentPlayer.position) {
          console.log("You stepped on a ladder!");
          currentPlayer.position = ladder.end;
        }
      });
      if (currentPlayer.position === position) {
        console.log("Player has won!");
        hasWon = true;
      }
      if (currentPlayer.position === position) {
        const diff = currentPlayer.position - position;
        currentPlayerPosition = position - diff;
      }

      currentPlayerTurn ++;
      if (currentPlayerTurn >= players.length) {
        currentPlayerTurn = 0;
      }
      renderBoard();
    }

    const players = [{
      name: player1,
      position: 0,
      color: "gold"
    },{
      name:player2,
      position: 0,
      color: "white"
    }];

    let currentPlayerTurn = 0;

    const width = 9;
    const height = 9;
    const board = [];
    let position = 0;
    let blackSquare = false;
    const ladders = [{
      start: 2,
      end: 22
    },{
      start: 50,
      end: 34
    },{
      start: 10,
      end: 44
    },{
      start: 61,
      end: 19
    },{
      start: 70,
      end: 83
    },{
      start:78,
      end: 4
    }];

    for (var y = height; y >= 0; y--) {
      let row = [];

      board.push(row);
      for (var x = 0; x < width; x++) {

        row.push({x,y,occupied:null,position,color: blackSquare ? "steelblue" : "silver"});
        blackSquare = !blackSquare;
        position ++;
      }
    }

    const boardSizeConst = 50;
    const renderBoard = ()=>{
      let boardHTML = ``;
      board.forEach(row=>{
        row.forEach(square=>{
          boardHTML += `<div class=square style="top:${square.y * boardSizeConst}px; left:${square.x * boardSizeConst}px; background-color:${square.color}"></div>`
        });
      });

      players.forEach(player=>{
        let square = null;
        board.forEach(row=>{
        row.forEach(square=>{
              if (square.position === player.position) {
                boardHTML += `<div class=player style="top:${square.y * boardSizeConst + 5}px; left:${square.x * boardSizeConst + 5}px;background-color:${player.color}"></div>`;
              }
          });
        });
      });

      ladders.forEach(ladder=>{

        //let start = 0;
        let startPos = {x:0,y:0};
        let endPos = {x:0,y:0};

        board.forEach(row=>{
          row.forEach(square=>{
            if (square.position === ladder.start) {
              startPos.x = square.x * boardSizeConst;
              startPos.y = square.y * boardSizeConst;
            }

            if (square.position === ladder.end) {
              endPos.x = square.x * boardSizeConst;
              endPos.y = square.y * boardSizeConst;
            }
          });
        });

        const isLadder = ladder.end > ladder.start;

        drawLine({color : isLadder ? "green" : "red",startPos,endPos});
      });
      document.getElementById("board").innerHTML = boardHTML;
    }

但是，目前圈子与他们无关。但是我想创建一种机制，“当克里斯在骰子板上掷骰子时，必须在Crane板上进行更新，反之亦然。

需要帮助。我是php的新手，但到现在为止有点。

如何在基于蛇形和梯形转弯的游戏中制作AJAX驱动的棋盘，该棋盘会随着在不同浏览器中播放的玩家而更新？

0 个答案: