cristidrg / 2048

A spin-off of the popular game of 2048, but now multiple players can play at the same time!

2048 Live

A multiplayer version of 2048, inspired by Twitch Plays Pokemon.
View demo »

Table of Contents

• About the Project
  • Built With
• How to play
• Getting Started
  • Prerequisites
  • Installation
• Development Notes
  • Database Design
  • Back-end Design
  • Front-end Design
• Contact

About The Project

This project is an variant of the 2048 game which introduces a multiplayer feature, in which players move blocks on the board via chat messages.

It served as a self-development tool to learn how to implement web sockets on back-end.

Built With

• Laravel
• Pusher
• TailWind CSS
• Vue.js
• Anime.js

How To Play

The rules are almost identical to the original 2048 game, create a 2048 block in order to win the game. The game starts by default with one obstacle, a randomly placed block which acts as a wall. Players can modify how many obstacles are on the board in the settings.

To move the blocks, send movement commands: 'left', 'right', 'bottom' or 'top' -- In lower case format

To facilitate testing and debugging, arrow keys and touch gestures inside the grid are available.

Click to play!

Getting Started

To get a local copy up and running follow these simple steps.

Prerequisites

• Composer
• Laravel 6+
• Node.js
• A MySQL database
• Pusher - free version is ok
• Optional - Sentry

Installation

1. Clone the repository

git clone https://github.com/cristidrg/2048.git

2. Create a .env file from the .env.example template and fill in the blanks

3. Install Laravel Dependencies

composer install

4. Install NPM dependencies

npm install

4. Create Database Schema

php artisan migrate

5. Populate Database with sample data

php artisan db:seed

6. Serve the project locally

php artisan serve

Development Notes And Challenges

Database Design

• The first step I took was to create the shape of the database, which looks like so:

• Game has:
  • obstacleCount (int)
  • Blocks (one-to-many)
    • row (int)
    • column (int)
    • value (int)
• Messages

This database schema fulfills all the needs for a single game session. Figuring out if a game is done can be checked via the blocks values.

If we would want to have multiple game rooms at the same time which also support turn-based turns, we could use the following structure:

• GameRoom has:
  • democracyActive (bool)
  • ActiveUserId (string)
  • Game (one-to-one)
    • obstacleCount (int)
    • Blocks (one-to-many)
      • row (int)
      • column (int)
      • value (int)
  • Messages (one-to-many)
  • ListOfUsers (one-to-many)

Back-end Design

Laravel is a MVC framework. In the game I used a single controller for both messages and the game actions to get it done faster. All of the game logic is done on the back-end, while the front-end only displays the data its being given and sends commands to the back-end to generate a new state.

The merging algorithm can be found in the GridHelper class. I went and implemented a brute-force to cut down development time. Besides sliding and merging, there were 2 important constraints to keep in mind:

• Obstacles should be ignored
• A block can only merge once during a move

The biggest challenge I had to face was to implement the multiplayer aspect. It had to listen to events made by other players, thus using web sockets was mandatory. I haven't implemented web sockets before, but I watched some tutorials and then I got the job done using Laravel Events and Pusher.io. There are two public channels used:

• BroadcastMessageCreation - for messages
• GameUpdated - for game state

The API routes are:

+--------+---------------+----------------------------+------+----------------------------------------------------------+--------------+
| Domain | Method        | URI                        | Name | Action                                                   | Middleware   |
+--------+---------------+----------------------------+------+----------------------------------------------------------+--------------+
|        | GET|HEAD      | /                          |      | Closure                                                  | web          |
|        | GET|HEAD      | api/game/{id}              |      | Closure                                                  | web          |
|        | POST          | api/game/{id}/commands     |      | App\Http\Controllers\GameController@handleCommand        | web          |
|        | POST          | api/game/{id}/message      |      | App\Http\Controllers\GameController@receiveMessage       | web          |
|        | POST          | api/game/{id}/setObstacles |      | App\Http\Controllers\GameController@setObstacles         | web          |
+--------+---------------+----------------------------+------+----------------------------------------------------------+--------------+

The /commands route accepts the playing commands "left","right","top","bottom" as well as "restart".

Front-end Design

The front-end was built using Vue.js to ease data manipulation. The game grid is built using div elements positioned absolutely inside the grid container. Anime.js was leveraged to create smooth animations.

Theming is done via TailWind CSS.

Contact

Cristian Dragomir - @linkedin - [e-mail]