Skip to content

Adding Ultimate TicTacToe App #680

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 8, 2023
Merged

Adding Ultimate TicTacToe App #680

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f02e179
Adding Ultimate TicTacToe App
PBJI Oct 7, 2023
b622724
Merge branch 'master' of https://github.com/thinkswell/javascript-min…
PBJI Oct 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 39 additions & 0 deletions UltimateTicTacToeGame/PBJI/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
### Game Play
Ultimate Tic-Tac-Toe is a variant of the classic Tic-Tac-Toe game. It is played on a larger 9x9 grid which consists of nine 3x3 grids. The objective of the game is to win each 3x3 grid, and ultimately, the entire game by winning the most 3x3 grids.

In this game, players take turns placing their symbol (either X or O) in a vacant square of the 3x3 grid. However, the twist is that the square where a player places their symbol determines the 3x3 grid where their opponent must play on their next turn. If a player wins a 3x3 grid, they gain control of that grid, and their symbol is displayed in the corresponding square of the larger 9x9 grid. The game continues until one player wins three 3x3 grids in a row, or until all the squares have been filled, resulting in a draw.

Ultimate Tic-Tac-Toe is a more complex version of Tic-Tac-Toe that requires strategic thinking and planning ahead. It also introduces an element of control over the opponent's moves, as the placement of a player's symbol determines the next playable grid for their opponent. Overall, Ultimate Tic-Tac-Toe is an engaging and challenging game that provides a new twist on a classic game.

### Preview

[![thumbnail](./preview)](https://user-images.githubusercontent.com/67221507/235636375-ae5099f8-9d22-4b33-9b81-8cf77bacbf4b.mp4)


### Usage

Make sure that

- You are in the project directory
- You have node and npm installed on your machine


1) Install dependencies
```
npm install
```

2) Run the server
```
npm test
```

3) Open the localserver at the given address
![local server](./test.png)


Enjoy playing.

### Features

Singleplayer with bot.
118 changes: 118 additions & 0 deletions UltimateTicTacToeGame/PBJI/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
<!DOCTYPE html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>UTTT</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="Heading"><p>Ultimate </p></div>
<!--Plot for the game -->
<div id="Plot">
<!--A big square with id M1-->
<div id="M0" class="MS">
<!--Small Tiles with ids-->
<div class="S0 Tile"><p></p></div>
<div class="S1 Tile"><p></p></div>
<div class="S2 Tile"><p></p></div>
<div class="S3 Tile"><p></p></div>
<div class="S4 Tile"><p></p></div>
<div class="S5 Tile"><p></p></div>
<div class="S6 Tile"><p></p></div>
<div class="S7 Tile"><p></p></div>
<div class="S8 Tile"><p></p></div>
</div>

<div id="M1" class="MS">
<div class="S9 Tile"><p></p></div>
<div class="S10 Tile"><p></p></div>
<div class="S11 Tile"><p></p></div>
<div class="S12 Tile"><p></p></div>
<div class="S13 Tile"><p></p></div>
<div class="S14 Tile"><p></p></div>
<div class="S15 Tile"><p></p></div>
<div class="S16 Tile"><p></p></div>
<div class="S17 Tile"><p></p></div>
</div>
<div id="M2" class="MS">
<div class="S18 Tile"><p></p></div>
<div class="S19 Tile"><p></p></div>
<div class="S20 Tile"><p></p></div>
<div class="S21 Tile"><p></p></div>
<div class="S22 Tile"><p></p></div>
<div class="S23 Tile"><p></p></div>
<div class="S24 Tile"><p></p></div>
<div class="S25 Tile"><p></p></div>
<div class="S26 Tile"><p></p></div>
</div>
<div id="M3" class="MS">
<div class="S27 Tile"><p></p></div>
<div class="S28 Tile"><p></p></div>
<div class="S29 Tile"><p></p></div>
<div class="S30 Tile"><p></p></div>
<div class="S31 Tile"><p></p></div>
<div class="S32 Tile"><p></p></div>
<div class="S33 Tile"><p></p></div>
<div class="S34 Tile"><p></p></div>
<div class="S35 Tile"><p></p></div>
</div>
<div id="M4" class="MS">
<div class="S36 Tile"><p></p></div>
<div class="S37 Tile"><p></p></div>
<div class="S38 Tile"><p></p></div>
<div class="S39 Tile"><p></p></div>
<div class="S40 Tile"><p></p></div>
<div class="S41 Tile"><p></p></div>
<div class="S42 Tile"><p></p></div>
<div class="S43 Tile"><p></p></div>
<div class="S44 Tile"><p></p></div>
</div>
<div id="M5" class="MS">
<div class="S45 Tile"><p></p></div>
<div class="S46 Tile"><p></p></div>
<div class="S47 Tile"><p></p></div>
<div class="S48 Tile"><p></p></div>
<div class="S49 Tile"><p></p></div>
<div class="S50 Tile"><p></p></div>
<div class="S51 Tile"><p></p></div>
<div class="S52 Tile"><p></p></div>
<div class="S53 Tile"><p></p></div>
</div>
<div id="M6" class="MS">
<div class="S54 Tile"><p></p></div>
<div class="S55 Tile"><p></p></div>
<div class="S56 Tile"><p></p></div>
<div class="S57 Tile"><p></p></div>
<div class="S58 Tile"><p></p></div>
<div class="S59 Tile"><p></p></div>
<div class="S60 Tile"><p></p></div>
<div class="S61 Tile"><p></p></div>
<div class="S62 Tile"><p></p></div>
</div>
<div id="M7" class="MS">
<div class="S63 Tile"><p></p></div>
<div class="S64 Tile"><p></p></div>
<div class="S65 Tile"><p></p></div>
<div class="S66 Tile"><p></p></div>
<div class="S67 Tile"><p></p></div>
<div class="S68 Tile"><p></p></div>
<div class="S69 Tile"><p></p></div>
<div class="S70 Tile"><p></p></div>
<div class="S71 Tile"><p></p></div>
</div>
<div id="M8" class="MS">
<div class="S72 Tile"><p></p></div>
<div class="S73 Tile"><p></p></div>
<div class="S74 Tile"><p></p></div>
<div class="S75 Tile"><p></p></div>
<div class="S76 Tile"><p></p></div>
<div class="S77 Tile"><p></p></div>
<div class="S78 Tile"><p></p></div>
<div class="S79 Tile"><p></p></div>
<div class="S80 Tile"><p></p></div>
</div>
</div>
<div class = "Conclusion"><p>Its A Tie</p></div>
<button onclick="startGame()" class="Sbutton">Start Game</button>
<script type="text/javascript" src="script.js"></script>
</body>
Loading