Skip to content

Simple mobile web application with ranking system

License

Notifications You must be signed in to change notification settings

kamil-matula/2048

Repository files navigation

2048

Table of contents

Project description

2048 is just another version of very popular puzzle game, originally created by Gabriele Cirulli in 2014, in which player needs to move and merge the tiles that show up on the board. Tiles can be merged only when they are identical and it results in creating a tile with value two times bigger than previous tiles' values. After every move new tile is spawned on the board until there is no place for it - that's when player loses. Originally the aim was to reach 2048 tile, but in this case there is no maximum value. There are 3 play modes. You can play on 4x4, 5x5 or 6x6 board and - if the game is located on the server - compete with others as there is ranking system. Also, our version is available only only in Polish.

Used technologies

The application was created without any additional libraries or frameworks - it's just pure HTML, CSS, JavaScript and PHP. To make it responsive, we used CSS Flex Box Layout and @media queries (for different arrangament in both orientations).

How to install it?

2048 is a web application, which means that it's some kind of website and you don't have to install it. You can just open main HTML file (start.html), but it is worth to launch the PHP server and play it via localhost as without it you won't have access to the rankings. To do it, install PHP, go to project directory, launch CMD and use the command:

php -S localhost:[port]       eg. php -S localhost:8000

The better idea is to put the project on a server for people to access it via the url. The application works only on touch screens - you can't use your mouse to play.

How to use it?

Application is quite easy to use. Main Menu contains three buttons: PLAY, INSTRUCTION and RANKING.

Main Menu

Clicking the first button will result in entering the Play Mode. Here you can see the board, current score and two buttons. You can start playing now, but if you want to change the size of the board or enter your nickname (which will be displayed in the ranking later), you should click the first button: SETTINGS. Pressing the second button - SURRENDER - ends the game immediately and the score is saved in ranking list (if is high enough).

Play Mode

If you lose or surrender, you'll see "GAME OVER" caption and - if you're in TOP 10 - information about the place that you've reached. There's also RETRY button.

Game Over

In Settings, you change the size of the board or enter your nickname. Changing the size will restart the game.

Settings

In Instruction, you can read about the game rules and get to know who created this application.

Instruction

The last view is Ranking. There you can find three lists of players with the best scores - one list per board size.

Ranking

Project status

The main goal of this project was to learn how to create mobile web application (without any frameworks) and it has been reached. Probably, it would be better if the game was hosted on GitHub Pages, but due to the use of vanilla JavaScript and PHP, this is not possible. In this case, the project can be considered as finished.