JS native 2048 mini game source code sharing

index.html

<h1>2 0 4 8</h1>
<!-- Display score and new game button -->
<div id="box">
  Score: <span id="span">0</span>
  <input id="but" type="button" value="New game" />
</div>
<!-- Show random number -->
<div id="random"></div>
<!-- The main layout of the game -->
<table border="3px">
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

js-native-2048-mini-game-source-code-sharing.markdown

JS native 2048 mini game source code sharing

A Pen by Edward Lance Lorilla on CodePen.

License.

script.js

var span = document.getElementById("span");
var but = document.getElementById("but");
var td = document.getElementsByTagName("td");
//Define the score
var score = 0;
//Define random number
var random = document.getElementById("random");
var showNums = [2,4,8,16,32,64,128,256,512,1024];
var showNum = 0;
//Define the background color array
var colors = ["rgb(255, 169, 182)","rgb(108, 251, 104)","rgb(255, 150, 46)","rgb(255, 121, 46)","rgb (255, 217, 46)",
             "rgb(46, 200, 255)","rgb(46, 113, 255)","rgb(240, 46, 255)","rgb(46, 255, 175)","rgb(153, 134 , 255)"];
//Initialize the program, generate random numbers
/* start */
function init(){
  var max = maxNum();
  var num = 0;
  for(var i=4;i > 0;i++){
    if(max < Math.pow(2,i+1)){
      num = parseInt(Math.random()*i);
      break;
    }else if(max < 2048){
      continue;
    }else{
      num = parseInt(Math.random()*showNums.length);
      break;
    }
  }
  random.innerHTML = showNums[num];
  color(random);
  showNum = showNums[num];
}

init();
/* end */
//Get the maximum value in the chessboard
/* start */
function maxNum(){
  var max = 0;
  for(var i=0;i<td.length;i++){
    if(td[i].innerHTML == ""){
      max = max;
    }else{
      if(parseInt(td[i].innerHTML)> max){
        max = parseInt(td[i].innerHTML);
      }else{
        max = max;
      }
    
    }
  }
  return max;
}
/* end */
//Display the background color according to the number
/* start */
function color(obj){
  for(var i=0;i <colors.length;i++){
    if(obj.innerHTML == Math.pow(2,i+1)){
      obj.style = "background-color: "+colors[i]+";";
      break;
    }
  }
}
/* end */
//Merge algorithm
/* start */
function offsetTop(obj,index){//Merge up
if(index> 3){
  if(td[(index-4)].innerHTML == obj.innerHTML){
    td[(index-4)].innerHTML = "";
    td[(index-4)].style = "background-color: rgba(0, 0, 0, 0);";
    return true;
  }
}
  return false;
}
function offsetBottom(obj,index){//Combine
if(index <12){
  if(td[(index+4)].innerHTML == obj.innerHTML){
    td[(index+4)].innerHTML = "";
    td[(index+4)].style = "background-color: rgba(0, 0, 0, 0);";
    return true;
  }
}
  return false;
}
function offsetLeft(obj,index){//Merge left
if(index!=0 && index!=4 && index!=8 && index!=12){
  if(td[(index-1)].innerHTML == obj.innerHTML){
    td[(index-1)].innerHTML = "";
    td[(index-1)].style = "background-color: rgba(0, 0, 0, 0);";
    return true;
  }
}
  return false;
}
function offsetRight(obj,index){//Merge right
if(index!=3 && index!=7 && index!=11 && index!=15){
  if(td[(index+1)].innerHTML == obj.innerHTML){
    td[(index+1)].innerHTML = "";
    td[(index+1)].style = "background-color: rgba(0, 0, 0, 0);";
    return true;
  }
}
  return false;
}
/* end */

//Determine whether the cells are merged
/* start */
function merge(obj,index){
  if(offsetTop(obj,index)){
    if(offsetBottom(obj,index)){
      if(offsetLeft(obj,index)){
        if(offsetRight(obj,index)){
          obj.innerHTML = parseInt(obj.innerHTML)*2;//Merge up, down, left and right
          score += 16;
          merge(obj,index);
        }else{
          obj.innerHTML = parseInt(obj.innerHTML)*2;//Only merge top, bottom and left
          score += 8;
          merge(obj,index);
        }
      }else if(offsetRight(obj,index)){
        obj.innerHTML = parseInt(obj.innerHTML)*2;//Only merge top, bottom and right
        score += 8;
        merge(obj,index);
      }else{
        obj.innerHTML = parseInt(obj.innerHTML)*2;//Only merge top and bottom
        score += 4;
        merge(obj,index);
      }
    }else if(offsetLeft(obj,index)){
      if(offsetRight(obj,index)){
        obj.innerHTML = parseInt(obj.innerHTML)*2;//Only merge top, left and right
        score += 8;
        merge(obj,index);
      }else{
        obj.innerHTML = parseInt(obj.innerHTML)*2;//Only merge the bottom and left
        score += 4;
        merge(obj,index);
      }
    }else if(offsetRight(obj,index)){
      obj.innerHTML = parseInt(obj.innerHTML)*2;//Only merge the bottom and right
      score += 4;
      merge(obj,index);
    }else{
      obj.innerHTML = parseInt(obj.innerHTML)*2;//Only merge
      score += 2;
      merge(obj,index);
    }
  }else if(offsetLeft(obj,index)){
    if(offsetRight(obj,index)){
      obj.innerHTML = parseInt(obj.innerHTML)*2;//Only merge left and right
      score += 4;
      merge(obj,index);
    }else{
      obj.innerHTML = parseInt(obj.innerHTML)*2;//Only merge left
      score += 2;
      merge(obj,index);
    }
  }else if(offsetRight(obj,index)){
    obj.innerHTML = parseInt(obj.innerHTML)*2;//Only merge right
    score += 2;
    merge(obj,index);
  }
}
/* end */
//main
/* start */
function gameOver(){
  for(var i=0;i<td.length;i++){
    if(td[i].innerHTML == ""){
      break;
    }
    if(i == 15){
      alert("Sorry! The game is over...");
    }
  }
}
/* end */
//main
/* start */
(function(){
  for(var i=0;i<td.length;i++){
    var choose = td[i];
    choose.index = i;
    choose.onclick = function(){
      if(this.innerHTML == ""){
        this.innerHTML = showNum;
        merge(this,this.index);
        if(this.innerHTML >= 2048){
          this.innerHTML = "";
          this.style = "background-color: rgba(0, 0, 0, 0);";
        }
        color(this);
        init();
      }
      updateScore();
      gameOver();
    }
  }
})();
/* end */
//Update score
/* start */
function updateScore(){
  if(score> 500){
    span.style = "color: rgb(255,0,0)";
  }else if(score> 100){
    span.style = "color: rgb(255,0,255)";
  }else if(score> 50){
    span.style = "color: rgb(255,255,0)";
  }else if(score> 20){
    span.style = "color: rgb(0,0,255)";
  }else if(score> 10){
    span.style = "color: rgb(0,255,0)";
  }
  span.innerHTML = score;
}
/* end */
//new game
/* start */
but.onclick = function(){
  location.reload();
}
/* end */

style.css

body,h1,div,table,tr,td{
  margin: 0px;
  padding: 0px;
}
body{
  background-color: rgb(0,0,0);
}
h1{
  margin: 36px auto;
  text-align: center;
  color: rgba(255,255,255,0.7);
  font-family: "Family";
  font-size: 48px;
  text-shadow: 1px 2px 3px rgb(134,134,134);
}
div{
  margin: 12px auto;
  line-height: 60px;
}
#box{
  margin-top: -24px;
  width: 240px;
  height: 60px;
  text-align: center;
  font-weight: bold;
  color: rgb(255,255,255);
}
#box input{
  border: 3px solid rgb(255,255,255);
  border-radius: 4px;
  box-shadow: 1px 2px 3px rgb(234,234,234);
}
#box input:focus{
  outline-style: none;
}
table{
  margin: 24px auto;
  border: 3px solid rgb(255,255,255);
  border-radius: 6px;
}
#random,td{
  width: 60px;
  height: 60px;
  border: 2px solid rgb(255,255,255);
  border-radius: 18px;
  text-align: center;
  font-weight: bold;
  color: rgb(255,255,255);
}
td:hover{
  cursor: pointer;
}