Tengen Tetris web app using Python Flask at the backend and p5.js at the frontend
This project runs as a Flask server that users can interact with through their browser, by knowing the IP of the machine that is serving it, and the port, which by default is 8080 (there is currently no easy way to modify this). It is displayed on the client side using the p5.js library.
It tries to mimic the NES Tetris experience in terms of fall speed and score assignments. The display of elements in the canvas is also similar to NES Tetris. The duo game mode mechanics have been completely inspired by Tengen Tetris. Finally, the aesthetic has been moved to a more retro-cyberpunk vibe, as if you were playing on some old green phosphorous screen while the world is falling apart due to the cyborg awakening.
There is a scoreboard to which players can upload their high scores and compete.
There are two game modes:
- Solo: select a level and start playing. You will be on your own. You can pause and quit. You will be able to submit your high score to the server once you die.
- Duo: click on Look for another player and once another user does the same on their client, you will both start a duo game. Select level at the beginning (ech of you can select its own level) and play. You will be able to see your oponent's screen on the right of yours to track their movements. The same pieces will fall for both of you, even if you die and decide to try again.
Instructions can only be provided for a Linux box, sorry. Also, specific instructions are given for an Ubuntu Server, although you will be able to figure out how to install it on any other Linux box.
cd
to a new directory- Clone this repo with
git clone
- This runs on Python 3, so be sure to have that installed
- Be sure to have
pip3
package for Python 3 dependencies installation, on Ubuntu this can be installed by runningapt install python3-pip
. With it, install the following dependencies:
pip3 install flask
pip3 install flask_socketio
pip3 install gevent-websockets
- Run the server with
python3 application.py
or run it on the background withnohup python3 application.py > out.log &
- Open a web browser and connect to
localhost:8080
. If you can see a page, everything has worked fine. - Find out the IP address of your box by running
ip a
, and, from another computer within the same network, connect to<ip>:8080
.
If you want to run this on a virtual environment, you can do so by following these steps:
- Install
virtualenv
using the following command:
python -m pip install --upgrade pip && python -m pip install virtualenv
- Create a virtual environment using the following command:
python -m virtualenv .venv
- Activate the virtual environment using the following command:
. ./.venv/bin/activate
- Install the required dependencies using the following command:
pip install -r requirements.txt
- Run the server using the following command:
python app/application.py
- Deactivate the virtual environment using the following command:
deactivate
If you want to run this on a Docker container, you can do so by following step:
docker build . --tag "tetris:latest" \
&& docker run -d -p 8080:8080 tetris:latest
If you want to run this on a Docker container using Docker Compose, you can do so by following step:
- Create a
.env
file with the following content:
cp .env.example .env
and add the values required to .env file.
- Run the following command:
docker-compose up -d --build .
If you want to run this on a Kubernetes cluster, you can do so by following these steps:
- build and push the Docker images to a container registry 1.1. Add the values required in .env file 1.2. Add execute permission to the script
chmod +x scripts/buildAndPush.sh
1.3. login to the container registry
docker login
1.4. Run the script to build and push the Docker images
./scripts/buildAndPush.sh
- Create the Kubernetes resources using the following command:
kubectl apply -f k8s/. --namespace <namespace>
2.1. Access the application using port-forwarding
kubectl port-forward <servicename> <localport>:<targetport> --namespace <namespace>
- Delete the Kubernetes resources
kubectl delete -f k8s/. --namespace <namespace>
If you want to run this on a Kubernetes cluster using Helm, you can do so by following these steps:
- Add the values required in
helm/values.yaml
file - Run the following command:
helm install <release-name> helm/ --namespace <namespace> -f helm/values.yaml
- Access the application
kubectl port-forward <servicename> <localport>:<targetport> --namespace <namespace>
- Delete the Helm release
helm uninstall <release-name> --namespace <namespace>