AMP
JA
English Deutsch Français العربية Español Italiano Indonesia 한국어 Português Русский Türkçe 中文 Polski Tiếng việt
  • websites

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 でサンプルを編集する