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.

50+ HTML, CSS and JavaScript Projects With Source Code

Table of Contents

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>

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.

10+ HTML CSS Portfolio Websites (Demo + Source Code)

Html Code Output:-

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;
}

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

Html + Css Code Output:-

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();
}
});

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

Final Output Of 2048 Game Using Html and JavaScript Code:-

100+ JavaScript Projects With Source Code (2023)

you can see the output video and 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

CodeWithRandom

Create 2048 Game Code Using Html and JavaScript

Create 2048 Game Code Using Html and JavaScript

HTML Code For 2048 Game:-

CSS Code For 2048 Game:-

2048 Game Javascript Code:-

Final Output Of 2048 Game Using Html and JavaScript Code:-

Leave a Reply Cancel reply

Navigate

Subscribe Now

Create 2048 Game Code Using Html and JavaScript

HTML Code For 2048 Game:-

CSS Code For 2048 Game:-

2048 Game Javascript Code:-

Final Output Of 2048 Game Using Html and JavaScript Code:-

You Might Also Like

Make 15+ Tabs With HTML & CSS

39+ CSS Wave Animation Examples

Detect Key Pressed – Javascript onkeypress keycode

Leave a Reply Cancel reply

Navigate

Subscribe Now