❓Why the page is not loading❓
Due to usage of Flask for multiplayer I had to use hosting with support for this technology. I have no money so I used a free hosting which unfortunately puts websites to sleep. Juts wait a few minutes and it should work.❓Why my commits often have no names and I'm not using branches❓
- I often create with bursts many things at once
- I don't plan things ahead, I just create things that seems good at that moment
- Sometimes I have bad internet connection and it is troublesome to send commits
- I'm coding alone so creating branches and describing commits is not useful for me
Three tic-tac-toe versions in two modes. Player can play vs AI, vs player locally or over the internet in real-time.
See live demo.
Languages:
- HTML5
- CSS3
- JS ES2018
- Python 3.11
Libraries and frameworks:
- SCSS
- FontAwesome 6.2.1
- GoogleFonts
- Socekt.IO 4.6.0
- Flask
- Flask SocketIO
Programs:
- Customizable game settings:
- Starting player
- Board size
- Player marks
- Auto switching sides
- Two types of game:
- Standard - players try to make a line, first player making a line will win
- Reversed - players try to avoid making a line, first player making a line will lose
- Three game modes
- Normal - typical tic tac toe
- Movable - players put N marks on NxN grid, then in each turn, they have to move one of their marks until one of them win or moves limit is reached
- One mark - tic tac toe with one mark
- Three ways of playing:
- With computer
- With player on the same device
- With player over the internet
- Real-time multiplayer:
- Public lobby
- Password protected rooms
- Handling disconnections
- Multiple languages:
- Polish
- English
Note
Room for improvements:
- In-game instruction about game modes
- Inviting by QR code
- More game modes
- Users accounts for stats, custom mark and achievements
- Pagination, filtering and searching for rooms in multiplayer lobby
- Add more languages
Ways to run this program:
- Use the live demo
- Follow the same steps as for editing the program
To edit this program:
- Download this repo
- Download and install Python
- Install libraries from requirements.txt
- Run app.py file
- Install Prepros
- Add this project in Prepros
- Create config.py file in project folder
- Run this code in some online Python IDE
- import secrets
- print(secrets.token_hex(16))
- Put generated string in config.py eg. SECRET_KEY = "generated_string"
- Start coding
This section is a general description of the project required to understand how it works, the exact details are in the code or simply are the code.
On every page there is:
- Header:
- Title which is a link to the main menu page
- Language selection box that allows the user to change the language of the page without reloading
- Footer
- Link to my github
Main menu is basically a form for creating a game.
Click on the multiplayer option will take the player to the multiplayer lobby.
Click on the back option will take the player to the previous step.
Creating a game is a 3-step form:
- Enemy (AI or player on the same device) and game mode
- Starting player and type of game (standard, reversed)
- Board size, players marks, changing sides every game
The lobby shows all existing games in the form of a list of rooms that the player can join or create a new one. When there is no players in the room, the room is deleted. If the room is full player can't join until some place becomes available. In that case the join button is disabled. Rooms protected by password has a join button with a lock icon. After clicking it player has to put the correct password in order to join to the game.
Each of the rooms in the lobby has:
- Unique ID
- Name consisting of:
- Mode
- Players marks
- Board size
- Type of a game
- Number of players in the room
- Join button
Creating a game is similar to creating a game in the main menu. The difference is that it is packed in one form and has option for setting password.
Player has to choose:
- Game mode
- Board size
- Type (uncheck = standard, check = reversed)
- Password (empty = no password)
- Players marks
- Starting player
- Switching sides every game
In game view has:
- Message info (player's turn, waiting for player in mulitplayer)
- Players info (marks of the players, which player is the user)
- Game board (with line in column, row or diagonal if one of the players win)
- Game info (name, marks, board size, type)
- Quit and Replay buttons (replay button is disabled until the game is over)
Normal game
Normal version of the tic tac toe, users puts their marks and try to make or avoid making a line depending on game type.
Movable game
In beginning players puts their mark like in normal game but after some moves they can't put more marks and they have to move already placed marks.
The game has moves limit which is reached results in a draw.
One mark game
Similar to normal version but both of the players have the same mark.
Games in multiplayer are the same as normal games, the only differences are:
- Position of a player will be hilighted in red color if there is no given player or the player left the game
- If there is no enemy player the game will be stopped on unactive player turn.
- On the bottom there is a room id and button to copy invitation link.
Password in invitation link is passed in the URL. When both players leave the game, the room and its game is deleted.
The project directory tree looks like this:
- 📁 TicTacToe (project folder)
- 📄 github and prepros config
- 📄 readme file
- 📄 requirements file
- 📄 app.py and config.py - server in flask
- 📄 Game.py - server side game object
- 📁 _for_readme - 📄 files for readme
- 📁 templates - 📄 single and multiplayer html files
- 📁 static
- 📁 images - 📄 images used in the project
- 📁 scripts
- 📄 top level script files (eg. global, menu, language)
- 📁 multiplayer - 📄 scripts for mutiplayer
- 📁 game - 📄 scripts for game itself (eg. modes, board, AI)
- 📁 style
- 📄 scss files
- 📁 css - 📄 css files compiled by prepros
Warning
Classes must be loaded from bottom to the top to avoid situation when class does not exist in the time of its objects creation