Tic-Tac-Toe

Voir la démo Ouvrir dans le playground

Introduction

This is a sample showing how to implement Tic-Tac-Toe. This includes:

How to use amp-state to maintain the state of play.
How to use expressions to detect winning moves.
How to use actions and events to create interative gameplay.

Setup

amp-bind is required for interactive gameplay.

<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

Initial game state

We use an amp-state called gameState to keep the state of play. Additionally, some state values are not initialized but are explained below:

currentPlayer: Can be 1 or -1, for ⚡ and O respectively.
board: Stores the state of the board. This object has 9 properties, from a to i, for the tiles from top-left to bottom-right.
tr,mr,br,lc,mc,rc,fd,bd: Read as Top Row, Middle Row, and so on, these 8 values hold the tallies towards each of the possible winning states.

<amp-state id="gameState">
  <script type="application/json">
    {
      "currentPlayer": 1,
      "displayValues": {
        "-1": "O",
        "1": "⚡"
      }
    }
  </script>
</amp-state>

Showing a win

To detect a win, we check whether any of the tallies has reached positive or negative 3.

Let's play!

<div class="results-component">
  <h1 [class]="max(abs(tr),abs(br),abs(lc),abs(rc),abs(fd),abs(bd),abs(mc),abs(mr)) == 3 ? 'hide' : 'show'">Let's play!</h1>
  <h1 [class]="max(tr,br,lc,rc,fd,bd,mc,mr) == 3 ? 'show' : 'hide'" class="hide">⚡ wins!!!</h1>
  <h1 [class]="min(tr,br,lc,rc,fd,bd,mc,mr) == -3 ? 'show' : 'hide'" class="hide">O wins!!!</h1>
</div>

Handling a player's turn

Each tile of the playing board is a button. When a move is played, state is updated:

The appropriate tallies are incremented or decremented. For example, playing top-left alters the tally for 3 possible winning states: tr,lc and bd (top row, left column and backward diagonal).
The state of the board is updated, to record that this tile has been filled.
The game play is switched to the other play by multiplying the current player by -1.

Display attributes for each tile are updated based on this change in state:

[text]: Each tile either contains nothing, or the appropriate value from board.
[class]: If any of the winning states for this tile has been reached, the background is changed accordingly.
[disabled]: This button must be disabled if either a win has occurred, or the tile already played.

<div class="board-component">
  <table>
    <tr>
      <td class="cell">
        <button on="tap:AMP.setState({
                      tr: tr + gameState.currentPlayer,
                      lc: lc + gameState.currentPlayer,
                      bd: bd + gameState.currentPlayer,
                      board: {
                        a: gameState.displayValues[gameState.currentPlayer]
                      },
                      gameState: {
                        currentPlayer: gameState.currentPlayer * -1
                      }
                    })" [text]="board.a ? board.a : ''" [class]="max(abs(tr),abs(lc),abs(bd)) == 3 ? 'grid-button win' : 'grid-button in-play'" [disabled]="board.a || max(abs(tr),abs(br),abs(lc),abs(rc),abs(fd),abs(bd),abs(mc),abs(mr)) == 3" class="grid-button in-play">
        </button>
      </td>
      <td class="cell cell-vert">
        <button on="tap:AMP.setState({
                      tr: tr + gameState.currentPlayer,
                      mc: mc + gameState.currentPlayer,
                      board: {
                        b: gameState.displayValues[gameState.currentPlayer]
                      },
                      gameState: {
                        currentPlayer: gameState.currentPlayer * -1
                      }
                    })" [text]="board.b ? board.b : ''" [class]="max(abs(tr),abs(mc)) == 3 ? 'grid-button win' : 'grid-button in-play'" [disabled]="board.b || max(abs(tr),abs(br),abs(lc),abs(rc),abs(fd),abs(bd),abs(mc),abs(mr)) == 3" class="grid-button in-play">
        </button>
      </td>
      <td class="cell">
        <button on="tap:AMP.setState({
                      tr: tr + gameState.currentPlayer,
                      rc: rc + gameState.currentPlayer,
                      fd: fd + gameState.currentPlayer,
                      board: {
                        c: gameState.displayValues[gameState.currentPlayer]
                      },
                      gameState: {
                        currentPlayer: gameState.currentPlayer * -1
                      }
                    })" [text]="board.c ? board.c : ''" [class]="max(abs(tr),abs(rc),abs(fd)) == 3 ? 'grid-button win' : 'grid-button in-play'" [disabled]="board.c || max(abs(tr),abs(br),abs(lc),abs(rc),abs(fd),abs(bd),abs(mc),abs(mr)) == 3" class="grid-button in-play">
        </button>
      </td>
    </tr>
    <tr>
      <td class="cell cell-horiz">
        <button on="tap:AMP.setState({
                      mr: mr + gameState.currentPlayer,
                      lc: lc + gameState.currentPlayer,
                      board: {
                        d: gameState.displayValues[gameState.currentPlayer]
                      },
                      gameState: {
                        currentPlayer: gameState.currentPlayer * -1
                      }
                    })" [text]="board.d ? board.d : ''" [class]="max(abs(mr),abs(lc)) == 3 ? 'grid-button win' : 'grid-button in-play'" [disabled]="board.d || max(abs(tr),abs(br),abs(lc),abs(rc),abs(fd),abs(bd),abs(mc),abs(mr)) == 3" class="grid-button in-play">
        </button>
      </td>
      <td class="cell cell-horiz cell-vert">
        <button on="tap:AMP.setState({
                      mr: mr + gameState.currentPlayer,
                      mc: mc + gameState.currentPlayer,
                      fd: fd + gameState.currentPlayer,bd: bd + gameState.currentPlayer,
                      board: {
                        e: gameState.displayValues[gameState.currentPlayer]
                      },
                      gameState: {
                        currentPlayer: gameState.currentPlayer * -1
                      }
                    })" [text]="board.e ? board.e : ''" [class]="max(abs(mr),abs(mc),abs(fd),abs(bd)) == 3 ? 'grid-button win' : 'grid-button in-play'" [disabled]="board.e || max(abs(tr),abs(br),abs(lc),abs(rc),abs(fd),abs(bd),abs(mc),abs(mr)) == 3" class="grid-button in-play">
        </button>
      </td>
      <td class="cell cell-horiz">
        <button on="tap:AMP.setState({
                      mr: mr + gameState.currentPlayer,
                      rc: rc + gameState.currentPlayer,
                      board: {
                        f: gameState.displayValues[gameState.currentPlayer]
                      },
                      gameState: {
                        currentPlayer: gameState.currentPlayer * -1
                      }
                    })" [text]="board.f ? board.f : ''" [class]="max(abs(mr),abs(rc)) == 3 ? 'grid-button win' : 'grid-button in-play'" [disabled]="board.f || max(abs(tr),abs(br),abs(lc),abs(rc),abs(fd),abs(bd),abs(mc),abs(mr)) == 3" class="grid-button in-play">
        </button>
      </td>
    </tr>
    <tr>
      <td class="cell">
        <button on="tap:AMP.setState({
                      br: br + gameState.currentPlayer,
                      lc: lc + gameState.currentPlayer,
                      fd: fd + gameState.currentPlayer,
                      board: {
                        g: gameState.displayValues[gameState.currentPlayer]
                      },
                      gameState: {
                        currentPlayer: gameState.currentPlayer * -1
                      }
                    })" [text]="board.g ? board.g : ''" [class]="max(abs(br),abs(lc),abs(fd)) == 3 ? 'grid-button win' : 'grid-button in-play'" [disabled]="board.g || max(abs(tr),abs(br),abs(lc),abs(rc),abs(fd),abs(bd),abs(mc),abs(mr)) == 3" class="grid-button in-play">
        </button>
      </td>
      <td class="cell cell-vert">
        <button on="tap:AMP.setState({
                      br: br + gameState.currentPlayer,
                      mc: mc + gameState.currentPlayer,
                      board: {
                        h: gameState.displayValues[gameState.currentPlayer]
                      },
                      gameState: {
                        currentPlayer: gameState.currentPlayer * -1
                      }
                    })" [text]="board.h ? board.h : ''" [class]="max(abs(br),abs(mc)) == 3 ? 'grid-button win' : 'grid-button in-play'" [disabled]="board.h || max(abs(tr),abs(br),abs(lc),abs(rc),abs(fd),abs(bd),abs(mc),abs(mr)) == 3" class="grid-button in-play">
        </button>
      </td>
      <td class="cell">
        <button on="tap:AMP.setState({
                      br: br + gameState.currentPlayer,
                      rc: rc + gameState.currentPlayer,
                      bd: bd + gameState.currentPlayer,
                      board: {
                        i: gameState.displayValues[gameState.currentPlayer]
                      },
                      gameState: {
                        currentPlayer: gameState.currentPlayer * -1
                      }
                    })" [text]="board.i ? board.i : ''" [class]="max(abs(br),abs(rc), abs(bd)) == 3 ? 'grid-button win' : 'grid-button in-play'" [disabled]="board.i || max(abs(tr),abs(br),abs(lc),abs(rc),abs(fd),abs(bd),abs(mc),abs(mr)) == 3" class="grid-button in-play">
        </button>
      </td>
    </tr>
  </table>
</div>

Resetting the game state

To start a new game, the board and 8 tallies are reset to null and the currentPlayer reset to ⚡.

<div class="reset-component">
  <button class="reset-button" on="tap:AMP.setState({
              gameState: {
                currentPlayer: 1,
                displayValues: {
                  '-1': 'O',
                  '1': '⚡'
                }
              },
              tr: null,
              mr: null,
              br: null,
              lc: null,
              mc: null,
              rc: null,
              fd: null,
              bd: null,
              board: null
            })">
    Restart game
  </button>
</div>

Top tips

Put ⚡ in the center square!

Besoin de plus amples explications ?

Si les explications de cette page ne répondent pas à vos questions, n'hésitez pas à contacter d'autres utilisateurs d'AMP pour discuter de votre cas d'utilisation spécifique.

Se rendre sur Stack Overflow

Une fonctionnalité n'a pas encore été expliquée ?

Le projet AMP encourage fortement votre participation et vos contributions ! Nous espérons que vous deviendrez un membre régulier de notre communauté open source, mais nous serons également ravis de recevoir des contributions ponctuelles concernant les questions qui vous intéressent particulièrement.

Modifier l'exemple sur GitHub

Written by @garanj