Tic Tac Toe

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!

Perlu penjelasan lebih lanjut?

Jika penjelasan pada halaman ini tidak menjawab semua pertanyaan Anda, silakan hubungi pengguna AMP lainnya untuk mendiskusikan contoh penggunaan Anda yang spesifik.

Kunjungi Stack Overflow

Fitur yang tidak dijelaskan?

Proyek AMP sangat menganjurkan partisipasi dan kontribusi Anda! Kami berharap Anda akan terus ambil bagian dalam komunitas sumber terbuka kami, tetapi kami juga menerima kontribusi satu kali untuk topik tertentu yang Anda minati.

Edit sampel di GitHub

Written by @garanj