#BlackLivesMatter
Do you build things with AMP? Fill out the new AMP Developer Survey!
AMP
JA
English Deutsch Français العربية Español Italiano Indonesia 한국어 Português Русский Türkçe 中文 Polski Tiếng việt
  • email

Tic Tac Toe

デモを表示する 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!

⚡ wins!!!

O wins!!!

<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>
    <tbody>
      <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>
    </tbody>
  </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!

さらに説明が必要ですか？

このページの説明でご質問のすべてを解消できない場合は、あなたの実際の使用事例について他の AMP ユーザーに問い合わせて話し合ってください。

Stack Overflow にアクセスする
説明されていない機能ですか？

AMP プロジェクトでは皆さんの参加と貢献を強くお勧めしています！当社はオープンソースコミュニティに継続的にご参加いただくことを希望しますが、特に熱心に取り組んでいる問題があれば1回限りの貢献でも歓迎します。

GitHub でサンプルを編集する