Skip to content DEV Community Search powered by Algolia... Log in Create account 0 Jump to Comments 0 Save Codewithrandom Blogs Codewithrandom Blogs Posted on Jun 5, 2023 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:- 2048 Game 2048 Game

2048

Paused

end

2048

Score:

Control

You can also use Arrow keys!

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; } 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(); } }); 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 👋 While you are here Reinvent your career. Join DEV. It takes one minute and is worth it for your career. Get started Top comments (0) Subscribe pic Add to the discussion Code of Conduct • Report abuse profile Sentry PROMOTED Sentry image See why 4M developers consider Sentry, “not bad.” Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help. Learn more Read next strapijs profile image A Low-Code/No-Code approach to Strapi Enablement Strapi - May 13 strapijs profile image A Low-Code/No-Code approach to Strapi Enablement Strapi - May 13 appwo profile image Discussion on BitNest Loop operating mechanism BitNest - May 14 szabgab profile image Perl Weekly #668 - Perl v5.40 Gabor Szabo - May 13 Codewithrandom Blogs Follow we are group of developer,sharing free project code LOCATION India,Rajsthan JOINED May 8, 2023 More from Codewithrandom Blogs Rainbow Text Animation Using HTML and CSS Create Reveal Text On Card Hover Using HTML and CSS Div Follows Mouse Cursor using HTML & JavaScript profile AWS PROMOTED Build On AWS Stream This isn’t your average security show Making security fun one episode at a time Join AWS and AWS Partners live, every other Wednesday at 8AM PT, as they bring some levity to common security topics and challenges without the sales pitches and boring buzzwords. Learn More *{ 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; } DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Home Podcasts Videos Tags DEV Help Forem Shop Advertise on DEV DEV Challenges DEV Showcase About Contact Guides Software comparisons Code of Conduct Privacy Policy Terms of use Built on Forem — the open source software that powers DEV and other inclusive communities. Made with love and Ruby on Rails. DEV Community © 2016 - 2024." type="text/css">

2048

Paused

end

2048

Score:

Control

You can also use Arrow keys!

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; } 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(); } }); 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 👋 While you are here Reinvent your career. Join DEV. It takes one minute and is worth it for your career. Get started Top comments (0) Subscribe pic Add to the discussion Code of Conduct • Report abuse profile Sentry PROMOTED Sentry image See why 4M developers consider Sentry, “not bad.” Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help. Learn more Read next strapijs profile image A Low-Code/No-Code approach to Strapi Enablement Strapi - May 13 strapijs profile image A Low-Code/No-Code approach to Strapi Enablement Strapi - May 13 appwo profile image Discussion on BitNest Loop operating mechanism BitNest - May 14 szabgab profile image Perl Weekly #668 - Perl v5.40 Gabor Szabo - May 13 Codewithrandom Blogs Follow we are group of developer,sharing free project code LOCATION India,Rajsthan JOINED May 8, 2023 More from Codewithrandom Blogs Rainbow Text Animation Using HTML and CSS Create Reveal Text On Card Hover Using HTML and CSS Div Follows Mouse Cursor using HTML & JavaScript profile AWS PROMOTED Build On AWS Stream This isn’t your average security show Making security fun one episode at a time Join AWS and AWS Partners live, every other Wednesday at 8AM PT, as they bring some levity to common security topics and challenges without the sales pitches and boring buzzwords. Learn More 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(); } }); DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Home Podcasts Videos Tags DEV Help Forem Shop Advertise on DEV DEV Challenges DEV Showcase About Contact Guides Software comparisons Code of Conduct Privacy Policy Terms of use Built on Forem — the open source software that powers DEV and other inclusive communities. Made with love and Ruby on Rails. DEV Community © 2016 - 2024."> 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; } 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(); } }); 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 👋 While you are here Reinvent your career. Join DEV. It takes one minute and is worth it for your career. Get started Top comments (0) Subscribe pic Add to the discussion Code of Conduct • Report abuse profile Sentry PROMOTED Sentry image See why 4M developers consider Sentry, “not bad.” Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help. Learn more Read next strapijs profile image A Low-Code/No-Code approach to Strapi Enablement Strapi - May 13 strapijs profile image A Low-Code/No-Code approach to Strapi Enablement Strapi - May 13 appwo profile image Discussion on BitNest Loop operating mechanism BitNest - May 14 szabgab profile image Perl Weekly #668 - Perl v5.40 Gabor Szabo - May 13 Codewithrandom Blogs Follow we are group of developer,sharing free project code LOCATION India,Rajsthan JOINED May 8, 2023 More from Codewithrandom Blogs Rainbow Text Animation Using HTML and CSS Create Reveal Text On Card Hover Using HTML and CSS Div Follows Mouse Cursor using HTML & JavaScript profile AWS PROMOTED Build On AWS Stream This isn’t your average security show Making security fun one episode at a time Join AWS and AWS Partners live, every other Wednesday at 8AM PT, as they bring some levity to common security topics and challenges without the sales pitches and boring buzzwords. Learn More 2048 Game

2048

Paused

end

2048

Score:

Control

You can also use Arrow keys!

DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Home Podcasts Videos Tags DEV Help Forem Shop Advertise on DEV DEV Challenges DEV Showcase About Contact Guides Software comparisons Code of Conduct Privacy Policy Terms of use Built on Forem — the open source software that powers DEV and other inclusive communities. Made with love and Ruby on Rails. DEV Community © 2016 - 2024.