DEV Community

Codewithrandom Blogs
Codewithrandom Blogs

Posted on

Create 2048 Game Code Using Html and JavaScript

Hello Coder! Welcome to the Codewithrandom blog. In this blog, we learn how we create the 2048 Game In Html and JavaScript with Code. 2048 is a very famous single-player game that was developed using JavaScript.

I hope you enjoy our blog so let's start with a basic HTML structure for the 2048 Game.

HTML Code For 2048 Game:- 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2048 Game</title>
<link href="https://fonts.googleapis.com/css?family=Londrina+Outline|Sniglet" rel="stylesheet">
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<div id="container">
<div id="splash" class="screen">
<h1>20<span class="char1">4</span><span class="char2">8</span></h1>
<button id="start" onclick="start()">new game</button>
</div>
<div id="pause" class="screen">
<h1>Paused</h1>
<button onclick="reset()">reset</button>
<button onclick="resume()">continue</button>
</div>
<div id="end" class="screen">end</div>
<div id="game" class="screen">
<h1>2048</h1>
<div id="info">Score:
<span id="score"></span>
<button type="button" id="pausebtn" onclick="pause()">pause</button>
</div>
<div id="gamearea">
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</div>
</div>
</div>
<div id="control">
<h2>Control</h2>
<button onclick="left()">left</button>
<button onclick="up()">up</button>
<button onclick="down()">down</button>
<button onclick="right()">right</button>
</div>
<p>You can also use Arrow keys!</p>
<script src="script.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

There is all the html code for the 2048 Game. Now, you can see an output with Css and JavaScript, and then we write Css and Javascript for the 2048 Game.

CSS Code For 2048 Game:- 

*{
margin:0;
padding:0;
box-sizing:border-box;
}
p{
border-radius:10px;
padding:5px;
border:2px solid white;
background:lightgray;
color:black;
font-size:18px;
}
button{
font-family: 'Sniglet', cursive;
}
body {
background: linear-gradient(45deg, rgba(189,245,152,1) 0%, rgba(50,87,81,1) 100%);
height:100%;
}
h1,h2{
text-align:center;
margin-bottom:20px;
margin-top:10px;
font-family: 'Londrina Outline', cursive;
}
#control{width:200px;margin: 20px auto;}
#control h2{font-family: 'Sniglet', cursive;}
#control button{padding:5px;}
#container{
width:400px;
height:500px;
background: linear-gradient(to bottom, rgba(242,246,248,1) 0%, rgba(216,225,231,0.54) 49%, rgba(181,198,208,0.52) 51%, rgba(224,239,249,0.06) 100%);
border-radius: 16px 16px 16px 16px;
border: 1px solid #d6ced6;
box-shadow: 0px 14px 30px -9px rgba(0,0,0,0.74);
margin: 20px auto;
overflow:hidden;
z-index:5;
}
.screen{
width:inherit;
height:inherit;
}
#splash{
display:none;
text-align:center;
}
#splash h1{
margin-top:70px;
font-size:80px;
}
#splash h1 .char1{
color:#93C683;
}
#splash h1 .char2{
color:rgb(75, 160, 108);
}
#splash #start{
background: linear-gradient(to right, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
color:black;
border-radius: 10px;
margin-top:140px;
padding:10px;
font-size:50px;
}
#pause{
display:none;
position:absolute;
background: rgba(50,50,50,0.4);
z-index:1;
border-radius: 16px 16px 16px 16px;
text-align:center;
}
#pause h1{
margin-top:150px;
color:orange;
}
#pause button{
display:block;
background: linear-gradient(to right, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
border-radius: 10px;
padding:10px;
color:black;
margin:20px auto;
font-size:30px;
}
#end{
display:none;
}
#game{
padding:10px 10px;
position:relative;
display:none;
}
#game #info{
padding:5px 10px;
background:gray;
margin:0 auto;
width:200px;
}
#game #info #pausebtn {
float:right;
}
#game #gamearea{
position:absolute;
bottom:50px;
left:50px;
width:300px;
height:300px;
background:gray;
}
#game #gamearea .element {
width:75px;
height:75px;
background: transparent;
border: 1px solid #d6ced6;
display:inline-block;
margin-right:-4px;
margin-bottom:-4px;
overflow:hidden;
font-size:30px;
line-height:2.2;
text-align:center;
font-family: 'Sniglet', cursive;
color:white;
}
Enter fullscreen mode Exit fullscreen mode

Here is All Css Code for styling 2048 Game and Now to Write JavaScript Code.

2048 Game Javascript Code:- 

var q = 4;
var arr = document.getElementsByClassName("element");
init();
window.onload = init();
var arr = document.getElementsByClassName("element");
function right() {
var can = false;
var access = false;
var k;
var score = document.getElementById("score");
for (var i = 14; i > 0; i -= 4) {
//alert("step1");
access = false;
for (var j = i; j >= i - 2; j--) {
//alert("step2");
if (arr[j].innerHTML !== "") {
k = j;
while (
k < i + 1 &&
(parseInt(arr[k + 1].innerHTML) === parseInt(arr[k].innerHTML) ||
arr[k + 1].innerHTML === "")
) {
//alert("i="+i+" j="+j+" k="+k);
if (
parseInt(arr[k + 1].innerHTML) === parseInt(arr[k].innerHTML) &&
access === false
) {
arr[k + 1].innerHTML =
parseInt(arr[k + 1].innerHTML) + parseInt(arr[k].innerHTML);
score.innerHTML =
parseInt(arr[k + 1].innerHTML) + parseInt(score.innerHTML);
arr[k].innerHTML = "";
can = true;
access = true;
} else if (
parseInt(arr[k + 1].innerHTML) === parseInt(arr[k].innerHTML) &&
access === true
) {
access === false;
} else if (arr[k + 1].innerHTML === "") {
arr[k + 1].innerHTML = parseInt(arr[k].innerHTML);
arr[k].innerHTML = "";
can = true;
}
k += 1;
}
}
}
}
if (can) {
av();
}
}
function left() {
var can = false;
var access = false;
var k;
var score = document.getElementById("score");
//fixed
for (var i = 13; i > 0; i -= 4) {
//alert("step1");
access = false;
for (var j = i; j <= i + 2; j++) {
//alert("step2");
if (arr[j].innerHTML !== "") {
k = j;
while (
k > i - (i % 4) &&
(parseInt(arr[k - 1].innerHTML) === parseInt(arr[k].innerHTML) ||
arr[k - 1].innerHTML === "")
) {
//alert("i="+i+" j="+j+" k="+k);
if (
parseInt(arr[k - 1].innerHTML) === parseInt(arr[k].innerHTML) &&
access === false
) {
arr[k - 1].innerHTML =
parseInt(arr[k - 1].innerHTML) + parseInt(arr[k].innerHTML);
arr[k].innerHTML = "";
can = true;
access = true;
score.innerHTML =
parseInt(arr[k - 1].innerHTML) + parseInt(score.innerHTML);
} else if (
parseInt(arr[k - 1].innerHTML) === parseInt(arr[k].innerHTML) &&
access === true
) {
access === false;
} else if (arr[k - 1].innerHTML === "") {
arr[k - 1].innerHTML = parseInt(arr[k].innerHTML);
arr[k].innerHTML = "";
can = true;
}
k -= 1;
}
}
}
}
if (can) {
av();
}
}
function down() {
var can = false;
var access = false;
var k;
var score = document.getElementById("score");
//fixed
for (var i = 11; i > 7; i -= 1) {
//alert(arr[i].innerHTML==="");
access = false;
for (var j = i; j >= 0; j = j - 4) {
if (arr[j].innerHTML !== "") {
k = j;
while (
k < 12 &&
(parseInt(arr[k + 4].innerHTML) === parseInt(arr[k].innerHTML) ||
arr[k + 4].innerHTML === "")
) {
//alert("i="+i+" j="+j+" k="+k);
if (
parseInt(arr[k + 4].innerHTML) === parseInt(arr[k].innerHTML) &&
access === false
) {
arr[k + 4].innerHTML =
parseInt(arr[k + 4].innerHTML) + parseInt(arr[k].innerHTML);
arr[k].innerHTML = "";
can = true;
access = true;
score.innerHTML =
parseInt(arr[k + 4].innerHTML) + parseInt(score.innerHTML);
} else if (
parseInt(arr[k + 4].innerHTML) === parseInt(arr[k].innerHTML) &&
access === true
) {
access === false;
} else if (arr[k + 4].innerHTML === "") {
arr[k + 4].innerHTML = parseInt(arr[k].innerHTML);
arr[k].innerHTML = "";
can = true;
}
k += 4;
}
}
}
}
if (can) {
av();
}
}
function up() {
var can = false;
var access = false;
var k;
var score = document.getElementById("score");
//fixed
for (var i = 7; i > 3; i -= 1) {
//alert(arr[i].innerHTML==="");
access = false;
for (var j = i; j < i + 9; j += 4) {
if (arr[j].innerHTML !== "") {
k = j;
while (
k >= i &&
(parseInt(arr[k - 4].innerHTML) === parseInt(arr[k].innerHTML) ||
arr[k - 4].innerHTML === "")
) {
//alert("i="+i+" j="+j+" k="+k);
if (
parseInt(arr[k - 4].innerHTML) === parseInt(arr[k].innerHTML) &&
access === false
) {
arr[k - 4].innerHTML =
parseInt(arr[k - 4].innerHTML) + parseInt(arr[k].innerHTML);
arr[k].innerHTML = "";
can = true;
access = true;
score.innerHTML =
parseInt(arr[k - 4].innerHTML) + parseInt(score.innerHTML);
} else if (
parseInt(arr[k - 4].innerHTML) === parseInt(arr[k].innerHTML) &&
access === true
) {
access === false;
} else if (arr[k - 4].innerHTML === "") {
arr[k - 4].innerHTML = parseInt(arr[k].innerHTML);
arr[k].innerHTML = "";
can = true;
}
k -= 4;
}
}
}
}
if (can) {
av();
}
}
function end() {
alert(
"Your Score Is:" + document.getElementById("score").innerHTML + " Game Over"
);
reset();
}
function random() {
var done = false;
while (done === false) {
var num = Math.floor(Math.random() * 16);
if (arr[num].innerHTML === "") {
arr[num].innerHTML = 2;
done = true;
}
}
}
function av() {
var x = false;
var count = 0;
for (var i = 0; i < 16; i++) {
if (arr[i].innerHTML === "") {
x = true;
count++;
}
}
if (x) {
random();
}
if (count === 1) {
check();
}
}
function check() {
var x = false;
for (var i = 0; i < 16; i++) {
switch (i) {
case 0:
if (
arr[1].innerHTML === arr[0].innerHTML ||
arr[4].innerHTML === arr[0].innerHTML
) {
x = true;
}
break;
case 1:
if (
arr[1].innerHTML === arr[0].innerHTML ||
arr[2].innerHTML === arr[1].innerHTML ||
arr[1].innerHTML === arr[5].innerHTML
) {
x = true;
}
break;
case 2:
if (
arr[2].innerHTML === arr[1].innerHTML ||
arr[3].innerHTML === arr[2].innerHTML ||
arr[2].innerHTML === arr[6].innerHTML
) {
x = true;
}
break;
case 3:
if (
arr[3].innerHTML === arr[2].innerHTML ||
arr[3].innerHTML === arr[7].innerHTML
) {
x = true;
}
break;
case 4:
if (
arr[4].innerHTML === arr[0].innerHTML ||
arr[4].innerHTML === arr[8].innerHTML ||
arr[4].innerHTML === arr[5].innerHTML
) {
x = true;
}
break;
case 5:
if (
arr[5].innerHTML === arr[1].innerHTML ||
arr[5].innerHTML === arr[6].innerHTML ||
arr[4].innerHTML === arr[5].innerHTML ||
arr[5].innerHTML === arr[9].innerHTML
) {
x = true;
}
break;
case 6:
if (
arr[6].innerHTML === arr[5].innerHTML ||
arr[6].innerHTML === arr[2].innerHTML ||
arr[6].innerHTML === arr[7].innerHTML ||
arr[6].innerHTML === arr[10].innerHTML
) {
x = true;
}
break;
case 7:
if (
arr[7].innerHTML === arr[3].innerHTML ||
arr[7].innerHTML === arr[11].innerHTML ||
arr[7].innerHTML === arr[6].innerHTML
) {
x = true;
}
break;
case 8:
if (
arr[8].innerHTML === arr[4].innerHTML ||
arr[8].innerHTML === arr[12].innerHTML ||
arr[8].innerHTML === arr[9].innerHTML
) {
x = true;
}
break;
case 9:
if (
arr[9].innerHTML === arr[8].innerHTML ||
arr[9].innerHTML === arr[5].innerHTML ||
arr[9].innerHTML === arr[10].innerHTML ||
arr[9].innerHTML === arr[13].innerHTML
) {
x = true;
}
break;
case 10:
if (
arr[10].innerHTML === arr[9].innerHTML ||
arr[10].innerHTML === arr[11].innerHTML ||
arr[10].innerHTML === arr[6].innerHTML ||
arr[10].innerHTML === arr[14].innerHTML
) {
x = true;
}
break;
case 11:
if (
arr[11].innerHTML === arr[7].innerHTML ||
arr[11].innerHTML === arr[15].innerHTML ||
arr[11].innerHTML === arr[10].innerHTML
) {
x = true;
}
break;
case 12:
if (
arr[12].innerHTML === arr[8].innerHTML ||
arr[12].innerHTML === arr[13].innerHTML
) {
x = true;
}
break;
case 13:
if (
arr[13].innerHTML === arr[12].innerHTML ||
arr[13].innerHTML === arr[9].innerHTML ||
arr[13].innerHTML === arr[14].innerHTML
) {
x = true;
}
break;
case 14:
if (
arr[14].innerHTML === arr[13].innerHTML ||
arr[14].innerHTML === arr[10].innerHTML ||
arr[14].innerHTML === arr[15].innerHTML
) {
x = true;
}
break;
case 15:
if (
arr[15].innerHTML === arr[11].innerHTML ||
arr[15].innerHTML === arr[14].innerHTML
) {
x = true;
}
break;
}
}
if (!x) {
end();
}
}
function init() {
var s = document.getElementById("splash");
s.style.display = "block";
var arr = document.getElementsByClassName("element");
for (var i = 0; i < 16; i += 1) {
arr[i].innerHTML = "";
}
var control = document.getElementById("control");
control.style.display = "block";
var score = document.getElementById("score");
score.innerHTML = 0;
}
function pause() {
var pause = document.getElementById("pause");
pause.style.display = "block";
var control = document.getElementById("control");
control.style.display = "none";
}
function reset() {
var pause = document.getElementById("pause");
pause.style.display = "none";
init();
}
function start() {
var splash = document.getElementById("splash");
var game = document.getElementById("game");
splash.style.display = "none";
game.style.display = "block";
random();
random();
//alert();
}
function resume() {
var pause = document.getElementById("pause");
pause.style.display = "none";
var control = document.getElementById("control");
control.style.display = "block";
}
window.addEventListener("keydown", function (e) {
if (e.code == "ArrowLeft") {
left();
} else if (e.code == "ArrowRight") {
right();
} else if (e.code == "ArrowUp") {
up();
} else if (e.code == "ArrowDown") {
down();
}
});
Enter fullscreen mode Exit fullscreen mode

Now we finally write JavaScript Code for the 2048 Game and Its Done.

you can see the output project screenshots. See our other blogs and gain knowledge in front-end development.

Thank you!

If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by - Codewithrandom/Anki 

Top comments (1)

Collapse
 
sjanhsu profile image
Anima Jana •

Thank you for breaking down this complex topic! I've been struggling to understand this, and your post made it much clearer. Do you have any other resources or tutorials for taking this knowledge further? IB Schools in Bangalore

Read next

fcimendere profile image

You’ve Decided to Change Your Career, What’s Next?

Fulya Cimendere -

mohamed_fazil_a2625f9d64d profile image

Testing

Mohamed Fazil -

accessibly_speaking profile image

Building Accessible Forms: Best Practices for Usability

Accessibly Speaking -

rafael_reis profile image

Solid java

Rafael Reis -