How to make 2048 Game with Javascript HTML CSS
ฝัง
- เผยแพร่เมื่อ 10 ก.พ. 2022
- Complete tutorial on how to build 2048 javascript html css. Build 2048 with javascript html and css!
Code: github.com/ImKennyYip/2048
Demo: imkennyyip.github.io/2048/
Website: www.kennyyipcoding.com/
Java Game Programming Projects Playlist:
• Java Game Programming ...
JavaScript Game Programming Projects Playlist:
• JavaScript Game Progra...
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;
}
Check out the playlist of web project tutorials here!
th-cam.com/play/PLnKe36F30Y4bLhA-st9sC4ZthyV7nsL2Q.html
Got a tutorial suggestion? Let me know down below!
Heavily underrated. This helps alot. I am making a 2048 game for school in flask and this is a life saver
You are the best dude keep working on stuff like this, you helped me so much!
Your tutorials are brilliant
Thank you, it's the best video tutorial!
This youtuber is so UNDERATED!
aaaaah finally someone who making it with that right styles :D thanks
and very nice explained! will subscribe
@@vibemane333 glad you found this tutorial helpful!
Thanks a lot, very useful!
great tutorial! thx for this master
doing like and also subscribing your channel because i liked your tricks what you did to save time . thank you this is very helpful.
thank you, was useful
I subscribed. Love from Bharat ♥️
crazy you were recording this at 3:40 AM lol. amazing video tho!
When else would you code? During the day when non-coders can find you?😀
how does this guy not have 30K+ subscribers anyone?!?! ❤
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
i tried to implement game over check but failed..please guide me
Amazing
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!!
Awesome video 🔥🔥
Bro how can one write such clean code
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
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.
Hi, perhaps you forgot to link the JS file in your html? Or you have a typo somewhere in your JS file? When you open the HTML in the browser, you can right click -> inspect and check the console to see if there are any JS errors.
@@KennyYipCoding Actually I just fixed it, my div tag was "game" not board, so I was updating something that didn't exist. Tysm though!
@@KennyYipCoding I got js error Math.random is not function
how do i add animations?
Thanks for the tutorial. I'm stuck at the slide left function. the page does not respond or slide. When I inspect the page - it says Uncaught TypeError: Cannot set properties of null (setting 'innerText'). I also used the code from your GitHub
I also had that error and resolved it by checking the spelling of all the "toString" instances. Turns out I missed a double () in one of the "c.toString())" or "r.toString())" lines. (I also moved the script tag, , to the end of the html, just after the just in case the site needs the html elements to be loaded first before it can apply the javascript).
Somebody knows how to make display game over when you lose and best score saver after each game?
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?
not sure what would cause that error but it could be a typo somewhere or you forgot to add the tile div to your board in the for loop. I have the completed code github link in the video description so it might help to take a peek at it so you can compare what's different
Did you figure it out? I have the same problem.
@@coded_tom4599 add "defer" to your --->
i have the same problem. I know i fixed it by just using your code from GitHub, but couldn't find any difference btwn my code and the downloaded code when I put them side by side.
@@KennyYipCoding No , You have to use the arrow signs if you are using a pc
If it's invalid move, which means none of the tile is moved, it still generate new tile.
What is perpes
I tried it out on CodeSandBox and I got Type error: Cannot read properties of undefined (reading '0'). I copied over js and css. Am I missing something?
You can find source code and Demo link in the video description, I’ve never used codesandbox
can anyone help me with game over function
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
Noted. My later videos are more zoomed in if that helps
masha Allah , thank you sir
board = [...Array(4)].map(() => Array(4).fill(2)); good practice for create an arr))
bro, can I rewrite those code to the React js? will it be easy? or how do you think? Because I need to write this game on React
I will wait for your response
I don’t see why not? Although it’s not necessary to use react for this type of project, you could still do it
@@KennyYipCoding Thanks for the response, and I made it on React, but it was hard with the UI part, because I was need to use useEffect
@@soitvkm8689 Hi Solt, would you feel up to sharing your code using React?
If I want to upload to the website which is not my computer but another computer to access the website, what should I do?
How can I contact you?😢
I have a video tutorial on this on my channel! How to Host a Website On Github Pages
th-cam.com/video/OltY8JIaP-4/w-d-xo.html
@@KennyYipCoding Now i can do it on the web. But now I have do the restart button when I can't continue the game.
EL mejor
Love your tutorial but it would be more effective if you focus in the IDE more
Yes, my newer videos are more zoomed in now 👍🏻
How to make the game over function in this?
I am also looking for this part, if you have done please help me out.
adding a game over is easy, just put alert("Game Over"); right before the return;
which return?
@@metinbicaksiz put it above the return; in the function setTwo() {
so my code ended up being something like
function setTwo() {
if (!hasEmptyTile()) {
alert("Game Over")
return;
}
how would you do Game Lost funcion when you cant move it will say Game Lost ?
you can try this by making a copy of the board and then apply slideUp. Check if the board is still the same as the original. if so, apply slideDown. same still? apply slideLeft. same still? apply slideRight. if the copy of the board is still the same as the original, that means no moves left.
To make a copy, you want something like:
let copyBoard = [ ];
for (let r = 0; r < rows; r++) {
let copyRow = [ ];
for (let c = 0; c < columns; c++) {
copyRow.push(board[r][c]);
}
copyBoard.push(copyRow);
}
@@KennyYipCoding thanks, and could you please send me the code for the game over ? i rly dont know how to do it. I tried it but it doesnt work
@@KennyYipCoding Hey, I used this copy board that you put and I think I have all the code for a game over function, but it says that copyboard is undefined. How do I go about defining it?
@@jt4225 no xd
Any tip to write such clean and well thought code
You just have to keep writing code and practicing. Before you write code, you should already have the logic and steps planned in your head (or written down) Then you just simply translate those ideas to code.
@@KennyYipCoding Thank you buddy
why use var instead of let?
I wondered the same thing at first. He uses 'let' later. I'm new to coding, but if I remember correctly, 'var' makes the variable available globally, and 'let' is used inside functions and are not shared globally
bro my fucking website doesn't move how can i fix it?
Why u type in the beggining html stuff on your own, if u can just type `!`
Because I want to make it as beginner friendly as possible and not assume everyone is using vscode or other editors with this built in feature.
Dear Creator can you please tell me how i make a lose code cause im a fucking Blockhead and have no idea
Hey, did you get the game over code?
Is it only me who gets 1px gap between tiles? Not only on my project but also on demo
Ok I found out it's because of 1.25 scaling in my windows system. Any tips how to set the grid to make it more responsive?
@@DzwiekiOtchlani I'm having this problem too - did you find a solution?