A small demo project for browser-based multiplayer board games. Written as tutorial material for a hackathon during the online-only SoAk 2020.

Install poetry if not already available:

pip install --user poetry

If you already use some kind of virtual env or your own python installation, omit the --user part, if using the system python, it is needed.

Install dependencies

poetry install

Run the webserver (Production version)

poetry run gunicorn -k eventlet -b 0.0.0.0:5000 connect4:app

or debug version:

FLASK_DEBUG=true poetry run python -m connect4

And visit localhost:5000.

For this hackathon, we want to implement online multiplayer games, e.g. classical board games or new inventions so that multiple players can play together.

This example project, to simplify the game logic but still show all the needed technologies, implements connect4.

Web development is split into two main parts: Server and Client.

Client-side covers everything happening on the machine of a visitor. This includes the initial request, parsing of the received HTML code, rendering the document using the style defined in CSS and executing the JavaScript code if any.

The server-side is what answers requests by the client, sending files or dynamically created content. The server tracks state, e.g. by storing it in files or using a database or just some in-memory object.

Traditionally, exchange of information is always initiated by the Client. The client sends a request, the server answers. This has some limitations, especially for multiplayer games, since the server needs to communicate between multiple clients. E.g. it needs to send Bob new information when Alice has made a move.

Here, we are going to use websockets, a communication standard that allows bi-directional communication initiated by either client or server.

Developing something for the web always needs multiple technologies, so the beginning will have a rather steep learning curve.

For this tutorial, we shall get to know:

• Some basic HTML for the web pages
• CSS for styling
• JavaScript to implement the client side logic
• Python using the Flask framework for the server logic
• socketio websockets to communicate state changes between players and the server
• HTML canvas and its JavaScript API to draw the playing field

While using NodeJS on the server side would reduce the number of languages by 1, this tutorial is aimed at physicists who are already familiar with python, so implementing the server side game logic should be easier using flask/python than an unknown framework in an unfamiliar language.

1. Intro to HTML
2. Short intro to JavaScript and the DOM API
3. Drawing on the HTML canvas
4. Intro to CSS
5. The browser debugging tools
6. Adding server side logic using flask
7. Bidirectional communication using websockets/socketio

The tutorial will only give an overview over the needed technologies and a bare minimum of their usage.

More Material will be needed to program another functional game.

• socketio JS docs
• flask
• flask-socketio
• python-dotenv
• secrets (python std lib)
• poetry (Python dependency management)

https://developer.mozilla.org/en-US/

A vast amount of documentation and tutorials about all topics concerning the basic web technologies: HTML, CSS and JavaScript.

Especially:

• The Canvas Tutorial and the Canvas Reference
• The Document Object Model (DOM) API for manipulating the HTML code of a webpage with JavaScript

Created by the flask-socketio author Miguel Grinberg, this gives an overview over nearly everything flask can do:

https://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-i-hello-world

Tutorials on exactly what we are trying to do here (only using NodeJS on the server instead of Flask):

• https://youtu.be/xVcVbCLmKew
• https://youtu.be/PfSwUOBL1YQ