RSIF8
ROLL NO:13
CLASS: FOUNDATION LEVEL
CODING TASK NO:12
This is a two-player Tic-Tac-Toe game in one HTML file. Two people share the same screen and take turns clicking squares on a 3×3 grid. Player X always goes first in the first round. The game announces whose turn it is, ends as soon as someone wins or the board fills up, and keeps a running score across rounds.
HTML structure
The page has five parts:
A title (<h1>).
A status line that shows whose turn it is or who won. It is marked aria-live="polite", so screen readers announce each change.
An empty <div id="board">, which JavaScript fills with nine buttons.
A score area with three counters: X wins, draws and O wins.
A “New game” button.
The cells are real <button> elements rather than plain divs, so they work with the keyboard (Tab to move, Enter or Space to play) and with screen readers.
CSS styling
Board layout: CSS Grid with three equal columns builds the board. The board is min(90vw, 360px) wide and square, so it fits small phone screens and doesn’t grow too large on desktop.
Colors: All colors are CSS variables on :root. X is teal and O is a warm orange-red, so the two players are easy to tell apart. The page also has a dark theme that follows the device’s light or dark setting.
Cell states: Cells change background on hover. The winning three cells turn pale yellow. Cells are disabled once filled, and a visible focus outline helps keyboard users.
Sizing: The X and O symbols scale with the screen using clamp(), so they stay readable on any device.
JavaScript logic
1. Winning lines. The LINES array lists the eight ways to win. The cells are numbered 0 to 8 from the top-left, row by row:
Rows: 0-1-2, 3-4-5, 6-7-8
Columns: 0-3-6, 1-4-7, 2-5-8
Diagonals: 0-4-8 and 2-4-6
2. Setup. A loop creates the nine buttons, gives each an accessible label (“Cell 1” to “Cell 9”) and attaches a click handler that calls play(i).
3. newGame(). It resets the board array to nine empty slots, clears the cells, re-enables them and shows whose turn it is. It also alternates who starts, so X starts the first round, O the second, and so on. This keeps the game fair over many rounds.
RSIF8
ROLL NO:13
CLASS: FOUNDATION LEVEL
CODING TASK NO:12
This is a two-player Tic-Tac-Toe game in one HTML file. Two people share the same screen and take turns clicking squares on a 3×3 grid. Player X always goes first in the first round. The game announces whose turn it is, ends as soon as someone wins or the board fills up, and keeps a running score across rounds.
HTML structure
The page has five parts:
A title (<h1>).
A status line that shows whose turn it is or who won. It is marked aria-live="polite", so screen readers announce each change.
An empty <div id="board">, which JavaScript fills with nine buttons.
A score area with three counters: X wins, draws and O wins.
A “New game” button.
The cells are real <button> elements rather than plain divs, so they work with the keyboard (Tab to move, Enter or Space to play) and with screen readers.
CSS styling
Board layout: CSS Grid with three equal columns builds the board. The board is min(90vw, 360px) wide and square, so it fits small phone screens and doesn’t grow too large on desktop.
Colors: All colors are CSS variables on :root. X is teal and O is a warm orange-red, so the two players are easy to tell apart. The page also has a dark theme that follows the device’s light or dark setting.
Cell states: Cells change background on hover. The winning three cells turn pale yellow. Cells are disabled once filled, and a visible focus outline helps keyboard users.
Sizing: The X and O symbols scale with the screen using clamp(), so they stay readable on any device.
JavaScript logic
1. Winning lines. The LINES array lists the eight ways to win. The cells are numbered 0 to 8 from the top-left, row by row:
Rows: 0-1-2, 3-4-5, 6-7-8
Columns: 0-3-6, 1-4-7, 2-5-8
Diagonals: 0-4-8 and 2-4-6
2. Setup. A loop creates the nine buttons, gives each an accessible label (“Cell 1” to “Cell 9”) and attaches a click handler that calls play(i).
3. newGame(). It resets the board array to nine empty slots, clears the cells, re-enables them and shows whose turn it is. It also alternates who starts, so X starts the first round, O the second, and so on. This keeps the game fair over many rounds.
