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, froma
toi
, 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
andbd
(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 fromboard
. -
[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!
このページの説明でご質問のすべてを解消できない場合は、あなたの実際の使用事例について他の AMP ユーザーに問い合わせて話し合ってください。
Stack Overflow にアクセスする 説明されていない機能ですか?AMP プロジェクトでは皆さんの参加と貢献を強くお勧めしています!当社はオープンソースコミュニティに継続的にご参加いただくことを希望しますが、特に熱心に取り組んでいる問題があれば1回限りの貢献でも歓迎します。
GitHub でサンプルを編集する-
Written by @garanj