How to make 2048 Game with Javascript HTML CSS

Complete tutorial on how to build 2048 javascript html css. Build 2048 with javascript html and css!

Java Game Programming Projects Playlist:

JavaScript Game Programming Projects Playlist:

Subscribe for more coding tutorials 😄!

#code2048 #2048javascript #2048js #gameprogramming #javascriptgame

/* colored tiles */

.x2 {
background-color: #eee4da;
color: #727371;
}

.x4 {
background-color: #ece0ca;
color: #727371;
}

.x8 {
background-color: #f4b17a;
color: white;
}

.x16{
background-color: #f59575;
color: white;
}

.x32{
background-color: #f57c5f;
color: white;
}

.x64{
background-color: #f65d3b;
color: white;
}

.x128{
background-color: #edce71;
color: white;
}

.x256{
background-color: #edcc63;
color: white;
}

.x512{
background-color: #edc651;
color: white;
}

.x1024{
background-color: #eec744;
color: white;
}

.x2048{
background-color: #ecc230;
color: white;
}

.x4096 {
background-color: #fe3d3d;
color: white;
}

.x8192 {
background-color: #ff2020;
color: white;
}

[KennyYipCoding]

Check out the playlist of web project tutorials here!

Got a tutorial suggestion? Let me know down below!

[grey]

Heavily underrated. This helps alot. I am making a 2048 game for school in flask and this is a life saver

[ErisMorina-pi]

You are the best dude keep working on stuff like this, you helped me so much!

[burnblack]

crazy you were recording this at 3:40 AM lol. amazing video tho!

[vibemane]

finally someone who making it with that right styles :D thanks <3

[rossbarone]

Absolutely fantastic tutorial! Followed it for a Minecraft-themed 2048 as a project for a class, and probably learned more about JS here than from my professor!!

[QuizZzone]

one thing I never do is typing the html head. I just press ! and enter. So I just saw I don't know how to write properly a head section by myself

[siddharthsingh]

16:59 I am stuck at the Number part when I put the numbers in it does not show them as tiles on the screen. Please give guidance

[aakashsai]

This was simply awesome, I really loved it. Thanks a lot!!

[lokezhumun]

this have a problem, it is when cannot merge, also can generate new number, it cause more easy to play, but I don know how can solve this problem, somebody have idea? or kenny can reply me, tq

[louisbourgault]

how does this guy not have 30K+ subscribers anyone?!?! ❤

[nickscopre]

Hi, I really appreciate the guide thus far but I'm caught at 16:45, I went to your github and tried even copying and pasting the code in, but for some reason after finishing the setGame and updateTile functions, the 16 zero tiles do not show up, nor do any numbered tiles afterwards. Any guidance would be appreciated, great video nonetheless.

[AkhileshShinde]

i tried to implement game over check but failed..please guide me

[huyennguyy]

great tutorial! i had a problem though and i'm pretty sure it's just how i coded it. when making the rows and columns, they did not show up it was just the board. do you have any suggestions?

[swapnilbmkjs]

Its a FeedBAck: please Zoome while writing code... becouse same time we are writing and we face zoomin zoom out issue.. so please Zoom the particular area while write code; thanks

[ChampB-cg]

How can we add animations to make it like the original game?

[maxfromm]

Thank you, it's the best video tutorial!

[simbax]

If it's invalid move, which means none of the tile is moved, it still generate new tile.

[rajatbansal]

Awesome video 🔥🔥
Bro how can one write such clean code

[black_bird_guitar]

board = [...Array(4)].map(() => Array(4).fill(2)); good practice for create an arr))