A multiplayer online minesweeper game built with Django Channel and Vue.

• Vue is used for rendering the game graphics. But the priority for frontend is not high since it's much more important to guarantee bug-free backend, so webpack with live reloading is not set.

• sqlite3 is used for prototyping. Postgres or Mysql may be used for production.

• Websocket is used to provide a stable, low-latency, bi-directional connection. Users can play the game in their browser without noticing the game core is on the backend.

• Django Channel is responsible for handling the requests from frontend, for example, when user clicks a tile and send the action to the server, Django Channel returns the new game data to the user. It also notifies the frontend actively when it detects data changing of game data in the database.

1. Create a Python 3.6 virtualenv
2. Install dependencies

pip install -r requirements/dev.txt
bower install

3. Create tables:

python manage.py migrate

4. Run the dev server

python manage.py runserver

Just run test

tox

You can view the coverage report with

coverage report

Make sure you have migrated data and collected static files, the path ./static is used for storing static files.

docker-compose up

Game data is composed of mainly two arrays, game_data and game_mask. Game_data is the underlying matrix that contains the 'true' data of the game, which should be hidden from users. So game_mask's responsibility is to keep track of the game's progress and reveal only the visible information to users. When we combine game_data and game_mask with some matrix operations, we can get a user_map which is passed to the frontend to be rendered by Vue.

Rendered game 1:

Corresponding data 2 (-1 means mine):

Rendered game 2:

Corresponding data 2 (viewed by user, -2 means hidden):

• Tile 0:

• Tile -1:

• Tile -2:

• Tile -3:

• Tile -4:

• Tile -5: