Amazing content, not only demonstrating how to make a pretty complex game but also teaching some core concepts I've never heard of. Videos like this are worth the suffering of turning off the adblock
Very cool video! It showcases a lot of OOP concepts that are not always the most obvious to new-ish programmers. If I may, I'd suggest adding just a very short bit at the front of this video describing the process and decision making you went through before starting this project. Along with that, a short breakdown of why these OOP fundamentals are important (setters, getters, encapsulation, etc) when they come along would be tremendous. Thanks for your amazing content Kyle!
Mr. Jedi Kyle. I do not think I have ever seen a programmer work as fast as you and with something so complicated as this. Your design is awesome and your technical knowledge is AMAZING!
Just started out with JS and tackled this project from start to end, really insightful and really interesting how you chose the get/set method, the code can be made in REACT as well, but in vanilla it serves it's purpose and it's working just fine. Wanted to let you know this really helped me and I am sure many others, just wanted to sincerely thank you for the top quality content/guidance that you have provided us.
⚠️ Never ever change *::before and *::after font-family. If you are going to use an icon font then most likely they won't work. Because icon font families like Font-Awesome, Google Icons Material Icons, Box icons, Remix icon and so on use or elements' ::before class to show the icon. If you overwrite font-family, then they simply won't show up.
@@NoOne-te9bu As long as you understand it and can reproduce it, it's fine. A good interviewer will ask you questions about the project and you should be able to answer them.
super super cooool. much appreciated. i live in ethiopia. i highly recommend to people learn form u and give u a donation as a gift. U deserve much more bro keepup
I am watchin your 3 years ago video right now and I see how better and better your communication skills became over time. Love your content, your channel is best for me. Good job and thank you very much for your content, easy and fast explanation videos. You are the best, GL!
2 ปีที่แล้ว +4
I'm only at 14 minutes in the video, but I've already learned a lot. Thank you for these awesome videos! :)
awesome tutorial! The way you structured your code is very impressive. A lot of things to note from this video. I finished the project and added score and swipe functionality for mobile.
@@bs7203 adding scoring is simple as for swipe, there's no built in event listener but there are touchstart and touchend events you can calculate how much and which direction the user swiped by comparing the x,y co-ordinates provided by the events for example, if x2 -x1 is positive, you know the user swipped in right direction same way if y2 - y1 is positive, the user swipped down
I've watched your content for over 50 hours now. You explain things so well. I did not have a good teacher throughout my life. You're the one filling that void. Thanks for making these videos ♥
Just want to say that you are an incredible youtuber, and we all appreciate the effort you put into your videos to make it more understandable than any other. You are my idol, and I love watching and learning with your videos. like && subscribe
Hi Kyle, i am a subscriber of your channel. One thing I like about your channel is trying to solve problems that is closer to real world application that makes your channel stand apart from other tech channel.However sometimes I fell like you are very fast on your teaching, it is difficult for people like me to keep up with that speed. I think it's better to slow things down showing us the process step by step,May be the video could be longer by half hour or so ,but that's ok. Probably you had explained the concepts on previous videos, but it's not helpful for people who don't watch all your previous vedios, Please keep this in your mind.Thanks
Thank you for the tutorial. I just managed this last night and get the code to working. It took me almost the entire night as I had to pause and go over sections of the tutorial multiple times to get the code running and rectify the errors that pop up along the way. Nevertheless, this is an excellent tutorial and has really added a lot to my knowledge regarding JS classes. I'm currently revisiting the code trying to further understand how this code. I'm planning to create a merge game (i.e. 'Merge Gardens' etc.) and intend to use this project as the base since 2048 has the same core mechanic, "merging".
how to fix from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https??
Nice tutorial 👍 it’s always interesting seeing other peoples approaches to problem solving. I built this game a while back in JavaScript too, but utilised a canvas element and had no animations. It’s great to see the outcome more polished. I didn’t know about animation event listeners prior to this, thanks!
I know your knowledge in both HTML5, CSS & JavaScript didn't take just a day and how you master it. Hope to do something(apps) better than this here some day. You're damn good. Kudos to you.
Amazing video! Just coded it through and learnt some new things. Good luck with the 2048 website will be sure to share it on socials and play along myself.
This was definitely a good leap above my current skill level, but I made it through. Not that I understood half of it lol. Going to go over what I typed on my own time though and try to understand all the concepts in this I didn't really get. Already spent an hour reading about the map function and feel much more familiar with that, plenty of other things I'll be going over though
Although I can do everything by myself I still love all of your videos. Your code is clean and the way you explain them is clear. Keep up the excellent work.
that business logic after you pick up the tile to move, even the same logic to get the tile to move could be extracted into their own methods, and the if nesting could be potentially avoided.
Hi , thanks for all the support for react /javascript developers, my request is please do a react video how to use* All the FORM components like radio btn, select box,Checkbox,input, ,calendar etc,and group of those elements* and practically what we use in industry to build apps **without any third part library please only use pure react with hooks***,bcz it will give the clear idea before moving in to formik or any other libruary,i would appreciate if u can use Mongodb for this.I know u will help on this.
Pretty cool simple project. Just, my performance obsession screamed when you added a transition to top and left instead of using transform. Is there any particular reason to prefer top and left over translateY and translateX?
Great video. I could recreate the game very easily thanks to your awesome content. However, after trying it on a mobile browser, I realized it doesn't handle swipe events. So, I implemented those and created a PR for your repo. Since the HTML is already responsive, I figured people would want to play this on their phones also. Hope it helps. Love the hair and the channel. Keep it up! :)
Hello, nice tutorial! Thank you for that. But one thing I can't really understand is, In the slideTiles function, why you create the let lastValidCell; and below the if(lastValidCell!= null){}, it should be null, because it's outside the for loop... and the lastValidCell is not initialized
this is an 'intermediate level' project?? To me it's god-level... if I could pull this off, i wouldn't be happier.. People in the comments are all too good
Hi Kyle, your videos very useful for me.you explain the topic very clear.so please you can make the videos on performance observer and navigator in javascript. Thanks Kyle bro
Nice video! Instead of canMoveX, wouldn't it be easier to just check what the last move was, and prevent the same move twice? All other moves should be possible unless the game is over. Or am I missing something?
13:00 Uncaught (in promise) Error: The message port closed before a response was received. Unable to use the module, do I have to install node or anything specific?
No need to install Node. The browser's console will give you that error message (for me it was thrice). I think that's because of the LiveServer extension of the VS Code you're running your project through.
@@suryameda6215 I didn't. If you will simply open your index.html file in your browser (without running it through the LiveServer extension), your error messages should go away.
I'm making this in react but I've used a structure similar to yours when positioning the tiles on the grid, i.e. using css variables. I haven't been able to make the transitions work for the left and top properties, because their value is derived from calc(), but they work flawlessly for you, without any @property declarations. HOW?
Amazing content, not only demonstrating how to make a pretty complex game but also teaching some core concepts I've never heard of. Videos like this are worth the suffering of turning off the adblock
I am blown away how you break this complex problem into smaller ones and plan how to implement them in efficient order.
Very cool video! It showcases a lot of OOP concepts that are not always the most obvious to new-ish programmers. If I may, I'd suggest adding just a very short bit at the front of this video describing the process and decision making you went through before starting this project. Along with that, a short breakdown of why these OOP fundamentals are important (setters, getters, encapsulation, etc) when they come along would be tremendous. Thanks for your amazing content Kyle!
Mr. Jedi Kyle. I do not think I have ever seen a programmer work as fast as you and with something so complicated as this.
Your design is awesome and your technical knowledge is AMAZING!
Just started out with JS and tackled this project from start to end, really insightful and really interesting how you chose the get/set method, the code can be made in REACT as well, but in vanilla it serves it's purpose and it's working just fine. Wanted to let you know this really helped me and I am sure many others, just wanted to sincerely thank you for the top quality content/guidance that you have provided us.
⚠️ Never ever change *::before and *::after font-family. If you are going to use an icon font then most likely they won't work. Because icon font families like Font-Awesome, Google Icons Material Icons, Box icons, Remix icon and so on use or elements' ::before class to show the icon. If you overwrite font-family, then they simply won't show up.
Greate tutorial as always! A tone of stuff to learn here. If you finish this project, you should put it in your portfolio, it's really impressive.
but then you didn't do it yourself
@@NoOne-te9bu does that change any of what I said?
You can follow through the video, get concept and make unique ideas out of it. Then put to your portfolio.
@@kaiixerhub Yeah true, I was just wondering because essentially we're just literally copying someone else's work
@@NoOne-te9bu As long as you understand it and can reproduce it, it's fine. A good interviewer will ask you questions about the project and you should be able to answer them.
Please make more projects like this. These videos are very helpful.
super super cooool. much appreciated. i live in ethiopia. i highly recommend to people learn form u and give u a donation as a gift. U deserve much more bro keepup
This is fantastic. I learned so many new javascript things watching you code this
I am watchin your 3 years ago video right now and I see how better and better your communication skills became over time. Love your content, your channel is best for me. Good job and thank you very much for your content, easy and fast explanation videos. You are the best, GL!
I'm only at 14 minutes in the video, but I've already learned a lot. Thank you for these awesome videos! :)
awesome tutorial!
The way you structured your code is very impressive.
A lot of things to note from this video.
I finished the project and added score and swipe functionality for mobile.
How?
@@bs7203 adding scoring is simple
as for swipe, there's no built in event listener
but there are touchstart and touchend events
you can calculate how much and which direction the user swiped by comparing the x,y co-ordinates provided by the events
for example, if x2 -x1 is positive, you know the user swipped in right direction
same way if y2 - y1 is positive, the user swipped down
@@mdridoy-ef2pw Thanks!
I've watched your content for over 50 hours now. You explain things so well. I did not have a good teacher throughout my life. You're the one filling that void. Thanks for making these videos ♥
I really love that you used vanilla javascript here!
Just want to say that you are an incredible youtuber, and we all appreciate the effort you put into your videos to make it more understandable than any other. You are my idol, and I love watching and learning with your videos. like && subscribe
Hi Kyle, i am a subscriber of your channel. One thing I like about your channel is trying to solve problems that is closer to real world application that makes your channel stand apart from other tech channel.However sometimes I fell like you are very fast on your teaching, it is difficult for people like me to keep up with that speed. I think it's better to slow things down showing us the process step by step,May be the video could be longer by half hour or so ,but that's ok. Probably you had explained the concepts on previous videos, but it's not helpful for people who don't watch all your previous vedios, Please keep this in your mind.Thanks
Thank you for the tutorial. I just managed this last night and get the code to working. It took me almost the entire night as I had to pause and go over sections of the tutorial multiple times to get the code running and rectify the errors that pop up along the way. Nevertheless, this is an excellent tutorial and has really added a lot to my knowledge regarding JS classes.
I'm currently revisiting the code trying to further understand how this code. I'm planning to create a merge game (i.e. 'Merge Gardens' etc.) and intend to use this project as the base since 2048 has the same core mechanic, "merging".
Did you create the project in the end? I'd love to see it!
The fact that u condensed all these in one video is mind boggling... and always always your vids are full of new stuff to learn so thank you sir!
Amazing video. I have worked in JavaScript for YEARS and you still taught me some cool tricks!
18:55 I had no clue that you could create private fields in JavaScript until now :o
Its super new and not really often used and the code looks a littlebit silly:D
how to fix from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https??
Nice tutorial 👍 it’s always interesting seeing other peoples approaches to problem solving. I built this game a while back in JavaScript too, but utilised a canvas element and had no animations. It’s great to see the outcome more polished. I didn’t know about animation event listeners prior to this, thanks!
Great Tut, great explanation, quality code,best practices and no promotions to distract us 🙇🏻♂️🙇🏻♂️
I know your knowledge in both HTML5, CSS & JavaScript didn't take just a day and how you master it. Hope to do something(apps) better than this here some day. You're damn good. Kudos to you.
Amazing video! Just coded it through and learnt some new things. Good luck with the 2048 website will be sure to share it on socials and play along myself.
This was definitely a good leap above my current skill level, but I made it through. Not that I understood half of it lol. Going to go over what I typed on my own time though and try to understand all the concepts in this I didn't really get. Already spent an hour reading about the map function and feel much more familiar with that, plenty of other things I'll be going over though
20:11: "So at this point we've done a lot of work to essentially do absolutely nothing"
story of my life right there
Although I can do everything by myself I still love all of your videos. Your code is clean and the way you explain them is clear. Keep up the excellent work.
That's amazing tutorial. Thanks a lot mate and please continue posting great stuff!
This brother is a genuis.. Explains things so succinctly..
that business logic after you pick up the tile to move, even the same logic to get the tile to move could be extracted into their own methods, and the if nesting could be potentially avoided.
All your videos are amazing. This one couldn't be different. Thanks for sharing so much knowledge.
Wow, you really taught me a lot about CSS animation and JavaScript classes
the way you are teaching is absolutely an amezing, and I am waiting for you about angular tutorial. hope you start it ASAP.
Very nice tutorial, thanks a lot. I followed along typing, and now I have my local version :)
I'm new to this field. Thanks for the contents you post.
This video is humbling me in every aspect as a web dev
I especially liked the OOP side. I learned a few things.
Does this even work on a mobile phones and does it react to touch??
My that error is not going even after if (cell.tile == null) continue. Please help me
Hi ,
thanks for all the support for react /javascript developers,
my request is please do a react video how to use* All the FORM components like radio btn, select box,Checkbox,input, ,calendar etc,and group of those elements* and practically what we use in industry to build apps **without any third part library please only use pure react with hooks***,bcz it will give the clear idea before moving in to formik or any other libruary,i would appreciate if u can use Mongodb for this.I know u will help on this.
Pretty cool simple project. Just, my performance obsession screamed when you added a transition to top and left instead of using transform. Is there any particular reason to prefer top and left over translateY and translateX?
Web dev "SIMPLIFIED" even vs Kevin Powell the king of CSS he made it really simple but tedious
i like how you said this but not the triple for loop, although it's quite trivial in this case.
Great- You are!!!! I also had once wanted to build this game but i couldn't
thank you for making these videos. I have learned a lot from these videos.
Great video. I could recreate the game very easily thanks to your awesome content. However, after trying it on a mobile browser, I realized it doesn't handle swipe events. So, I implemented those and created a PR for your repo. Since the HTML is already responsive, I figured people would want to play this on their phones also. Hope it helps. Love the hair and the channel. Keep it up! :)
How?
The chance of getting a 4 instead of a 2 is actually 10% not 50%. Great video though :)
i was literally trying to make this a week before the vid came out
Este tipo de css para mi esta a otro nivel
Hello, nice tutorial! Thank you for that.
But one thing I can't really understand is, In the slideTiles function, why you create the let lastValidCell; and below the
if(lastValidCell!= null){}, it should be null, because it's outside the for loop... and the lastValidCell is not initialized
this is an 'intermediate level' project?? To me it's god-level... if I could pull this off, i wouldn't be happier.. People in the comments are all too good
Video: 6:48
Can some one explain to me why the css div's cell grid is not showing up properly, and it is going over each other? With the width is 0
How do I add highscore and current score in this project? I can't make it seem work no matter what.
ure freaking awesome
Kyle, could you make a vid about getters and setters?
thanks
Man, I want a job this year as a Frontend developer. I'm stressed out, super uncertain about it
Hi Kyle, your videos very useful for me.you explain the topic very clear.so please you can make the videos on performance observer and navigator in javascript.
Thanks Kyle bro
Hey, Can someone share the link of the video where he explained about a way in typescript to skip 0 when did 'if(value)' check?
thank u gonna do this in a bit
please bring more cool project like this one
I just installed this game like yesterday... What are the odds 😳
Woww thank you so much for this
Damn that was fast but it was good. Thanks!
This is a great work. I'm trying to implement this in a next js application, and i'm experiencing a lot of difficulty. Any help with that?
*As there are x and y variables* in css, why can't we declare like
*_--x: 1vmin; instead of --x: 1;_*
8:20
Not sure i understood your question correctly, but using plain numeric values makes it easier to deal with in JavaScript.
@@bennymeister Thanks 😉
Nice video!
Instead of canMoveX, wouldn't it be easier to just check what the last move was, and prevent the same move twice? All other moves should be possible unless the game is over. Or am I missing something?
Oh yeah, the new tile would make it possible to make the same move twice... 😅 Disregard
13:00 Uncaught (in promise) Error: The message port closed before a response was received. Unable to use the module, do I have to install node or anything specific?
No need to install Node. The browser's console will give you that error message (for me it was thrice). I think that's because of the LiveServer extension of the VS Code you're running your project through.
@@evalaviniabucur1789 how have u resolved it
?
@@suryameda6215 I didn't. If you will simply open your index.html file in your browser (without running it through the LiveServer extension), your error messages should go away.
I dont really understand slideTiles function does, it's hard to think 😅
oooh looks like a really fun challange
Is it just me or does everyone don't know abt the "Private Variable" in javascript?
*cool man, make sudoku also* ?
Yo I just built this project a few days ago without a tutorial and then I came across this video
hit the griddy
Can you please show us how to deploy so I can run it without vscode
It feels like there is always another CSS measurement unit that I have never heard of. vmin? lol
How to make the same site for mobile version as well?
how can we play this on mobile?
Why am I getting a CORS policy error when trying to access my script.js file?
Use localhost
Hey why isn't the game working on your website
Great Tutorial
hi im new to game developer
how to make multiplayer game online
is backend make the game online ?
This is Outstanding!!
You're a legend bruh
i tried this... i gave up after 89 hours
cool you could do it react?
19:40
How do you write so fast?
To make 16 cells you can just go .cell*16
Do it in Blazor I dare you :)
Excellent
When I try to console log gridElement.append(cell) in the createCellEmenets function, inside the for loop, why do I get a undefined?
Hello professor
Good Job
Challenge accepted
I'm making this in react but I've used a structure similar to yours when positioning the tiles on the grid, i.e. using css variables. I haven't been able to make the transitions work for the left and top properties, because their value is derived from calc(), but they work flawlessly for you, without any @property declarations.
HOW?
I'm stuck right there too lol. I hope he answers!
Damn l would want to make this only by myself one time :p
cool class tutorial
css is really diffcult for me
Upvote for giving me a new daily game to play - now to watch the video :-)