2048 Game HTML5 with Source Code

2048 is a famous and popular game of Android and IOS platform. Have you ever known that, this game can be created with some good knowledge of HTML5, CSS3, Javascript ? In this article we will see the process of creating this game or you can simply find 2048 game html5 with source code on below mentioned play now button.

Are you in hurry ?, you can try it directly with below given option. But We would like to recommend that please go through the steps. You will have some better understanding that how it works !

Play Now Download 2048 Game

A brief description

It’s a video game, which can be played on different platform (Browser, Android, IOS). 2048 was originally designed around MARCH 2014 by an Italian developer (Gabriele Cirulli). And the original developer has described that it’s a clone of Veewo Studios’ app 1024.

At initial stage, this game was written in pure JavaScript and CSS. But later it was converted in HTML5, Javascript and CSS3. Developers also cloned it in another programming language like Java, C++.

More historical information can be studied on the Wikipedia link about 2048 Game.

How to play the Game – 2048

2048 can be played on a gray 4×4 grid, with numbered tiles that slide smoothly when a player moves them using the arrow keys of keyboard or with screen touch.

With every move, a new tile will randomly appear in an empty cell. Remember this new randomly number will be either 2 or 4.

If two tiles of the same number collide while moving, they will merge into one tile with the total value of the two tiles that collided.

The resulting tile cannot merge with another tile again in the same move. The color of higher scoring tiles will be changed according to the value.

Coding part of 2048 Game

As discussed earlier you will need hands on experience with HTML5, CSS3 and Javascript to have better understanding of its coding part.

Let’s start with the HTML5

Ok, we will need to create the container first, so have a look the below code that will create a container for you

<html>
<body>
  <div class="game-container">
    <div class="heading">
      <h1 class="title">2048</h1>
    </div>
  </div>
  
</body>
</html>

Now since we have created the container, we will need to create the grid cell that will contain the game tiles. You can use the below code to create the grid cell. We will also need a blank tile container, which will be filled up dynamically with JavaScript.

<html>
<body>
  <div class="container">
    <div class="heading">
      <h1 class="title">2048</h1>
    </div>
  </div>
        <div class="grid-container">
        <div class="grid-row">
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
        </div>
        <div class="grid-row">
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
        </div>
        <div class="grid-row">
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
        </div>
        <div class="grid-row">
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
        </div>
      </div>

      <div class="tile-container">

      </div>
    </div>
</body>
</html>

Now as we have gone through the basic things to create the HTML file, we will need to add few things more to enhance the user experience as an example creating Score container, Message display and Credentials. These things can be learnt through the source code of this game.

You just need to press CTRL + U to check the source code. You can also download the browser version from the play now link.

Although We have created the HTML File for 2048 Game but we have not yet included the CSS and Javascript source in HTML file. I assume that you guys should be known of this adding process. If you do not manage to call the external resources in your HTML file, you can find the all thing together in downloadable version of this game.

CSS3 Part of 2048 Game

I assume now that you must have a bit familiarity with its HTML file. Now we will write some CSS code, which will give this game a better look and feel. So better to start with the grid cell design and tile design.

The main design of this game is grid cell design and tile design. Let’s have a look on the below code to get it complete.

.grid-cell
{
  width: 106.25px;
  height: 106.25px;
  margin-right: 15px;
  float: left;
  border-radius: 3px;
  background: url(../img/pattern.png);
  background-size:cover;
}
.grid-cell:last-child
{
  margin-right: 0;
}

.tile-container
{
  position: absolute;
  z-index: 2;
}

.tile, .tile .tile-inner
{
  width: 107px;
  height: 107px;
  line-height: 107px;
}

As now we have completed the grid cell and tile design, we should implement the position of tile on moving. Once you move your tile with arrow key or touch, the tiles get new position.

So we need to write the CSS code for position changing. I am going to demonstrate that how you can change the tile position with translate feature of CSS3.

Please go through the below code to have a good understanding about this.

.tile.tile-position-1-1
{
  -webkit-transform: translate(0px, 0px);
  -moz-transform: translate(0px, 0px);
  transform: translate(0px, 0px);
}

.tile.tile-position-2-1
{
  -webkit-transform: translate(121px, 0px);
  -moz-transform: translate(121px, 0px);
  transform: translate(121px, 0px);
}

.tile.tile-position-3-1
{
  -webkit-transform: translate(242px, 0px);
  -moz-transform: translate(242px, 0px);
  transform: translate(242px, 0px);
}

.tile.tile-position-4-1
{
  -webkit-transform: translate(363px, 0px);
  -moz-transform: translate(363px, 0px);
  transform: translate(363px, 0px);
}

Final conclusion of above described CSS file is creating the grid cell design, tile design and to create the positioning of tile with translate feature of CSS3.

We will also need some additional line of CSS to make it better. You can find all working code in download section.

JavaScript Part of 2048 Game

It’s the main part of this game. We can say its a backbone of 2048 game. Without having some good knowledge about Javascript you can not even assume to create something like this.

On this stage we should build some grid stuffs

Grid.prototype.build = function () {
  for (var x = 0; x < this.size; x++) {
    var row = this.cells[x] = [];

    for (var y = 0; y < this.size; y++) {
      row.push(null);
    }
  }
};

Since we have built the grid, we will need to find first random position and then we will fill the grid position. So now function for finding the random position

Grid.prototype.randomAvailableCell = function () {
  var cells = this.availableCells();

  if (cells.length) {
    return cells[Math.floor(Math.random() * cells.length)];
  }
};

Grid.prototype.availableCells = function () {
  var cells = [];

  this.eachCell(function (x, y, tile) {
    if (!tile) {
      cells.push({ x: x, y: y });
    }
  });

  return cells;
};

We have tried to described the main source for creating this game with HTML5, but if you need the full working code you can download it from play now otpion.

If you need any changes or any customization you ask me on info@html5andcss3.org

I have also made some effort to create an android version of this game. If you want to play it on android, you can download the game from this source.

Be sure to install it manually as this will not be auto installed. You will need to give permission from setting option.

Social Link

Swapnil Raja

Swapnil Raja is a technophile. He writes on scripting language, designing software, web technology, CMS and other technology related stuff. He is a regular contributor on html5andcss3.org. Want to know more about him ? feel free to get in touch with him on different social platform.
Social Link

Latest posts by Swapnil Raja (see all)

Author: Swapnil Raja

Swapnil Raja is a technophile. He writes on scripting language, designing software, web technology, CMS and other technology related stuff. He is a regular contributor on html5andcss3.org. Want to know more about him ? feel free to get in touch with him on different social platform.

Leave a Reply

Your email address will not be published. Required fields are marked *