Coding Challenge #94: 2048 - Part 1

In this multi-part coding challenge, I code the sliding puzzle game 2048 in JavaScript using canvas and p5.js. Code: thecodingtrain.com/challenges...
🕹️ p5.js Web Editor Sketch: editor.p5js.org/codingtrain/s...
Other Parts of this Challenge:
📺 2048 - Part 2: • Coding Challenge #94: ...
📺 2048 - Part 3: • Coding Challenge #94: ...
📺 2048 - Part 4: • Coding Challenge #94: ...
🎥 Previous video: • Coding Challenge 93: D...
🎥 Next video: • Coding Challenge 95: A...
🎥 All videos: • Coding Challenges
References:
💾 2048: gabrielecirulli.github.io/2048/
🌐 2048 on Wikipedia: en.wikipedia.org/wiki/2048_(v...)
Videos:
🔴 Coding Train Live 122 • Coding Train Live 122:...
Related Coding Challenges:
🚂 #142 Rubik's Cube: • Coding Challenge #142:...
🚂 #149 Tic Tac Toe: • Tic Tac Toe in p5.js (...
🚂 #165 Slide Puzzle: • Coding Challenge 165: ...
Timestamps:
0:00 Introducing today's topic: 2048 sliding puzzle game
2:50 How does the game work?
5:16 Let's Code!
6:10 Write an addNumber function
8:12 Use the ternary operator to pick either a 2 or 4
9:54 Draw the board
14:38 Write a slide function
18:10 Add a keyPressed function to slide the numbers
19:13 Write a combine function
25:23 Write an operate function
31:29 Check to see if a number has moved
33:09 Write a function to compare two different matrices
34:50 Conclusion and next steps
Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound
🚂 Website: thecodingtrain.com/
👾 Share Your Creation! thecodingtrain.com/guides/pas...
🚩 Suggest Topics: github.com/CodingTrain/Sugges...
💡 GitHub: github.com/CodingTrain
💬 Discord: thecodingtrain.com/discord
💖 Membership: kzbin.infojoin
🛒 Store: standard.tv/codingtrain
🖋️ Twitter: / thecodingtrain
📸 Instagram: / the.coding.train
🎥 Coding Challenges: • Coding Challenges
🎥 Intro to Programming: • Start learning here!
🔗 p5.js: p5js.org
🔗 p5.js Web Editor: editor.p5js.org/
🔗 Processing: processing.org
📄 Code of Conduct: github.com/CodingTrain/Code-o...
This description was auto-generated. If you see a problem, please open an issue: github.com/CodingTrain/thecod...
#2048 #slidingpuzzlegame #javascript #p5js

[@up4life108]

I just wanted to thank you real quick! Your videos got me into programming which ended up changing my life over the last 13 months and I still watch your videos frequently and learn new concepts. Thanks!

[@TheCodingTrain]

So nice to hear, thank you!

[@gggogopowerrangers]

Your coding challenge is great, Dan! Honestly, it feels good to see how you code without planning it in advance. I can see your thought process and it's very helpful to improve my problem-solving ability. Thank you so much! Xoxo

[@Insaniaq]

How do you manage to be so happy in every video haha

[@sayantanghosh9576]

Struggles in JavaScript

[@agampreetsingh1951]

This is by far the best KZbin channel! I wish all people who call themselves as programmers could be as passionate as you!

[@sebastiantv108]

Thank you! I kept suggesting a 2048 game for almost a year, and now I finally have it! 😀 This is my last year in highschool and with the help of your awesome videos and tutorials I learned programing and I want to continue with computer science. Thank you for everything! 😀👍

[@trol9880]

SebastianTV no to niezły sebastian

[@funkahontas]

That is such a wholesome comment it made me smile, that’s why I love this.community , we’re the best community online :D I’m in a similar situation and also think Dan is the man! Keep on coding!

[@kagyuak2587]

How did it go? 🕴🏻🕴🏻

[@sebastiantv108]

@@kagyuak2587 I forgot about this😅 It's been great, thank you! As random as it may seem, tomorrow I will have my graduation after 4 years of studying computer engineering. Daniel and a couple other KZbinrs are the reason I choose this path and I have to thank them because I love it!

[@kagyuak2587]

@@sebastiantv108 omg that’s so sick dude!!! I’m graduating on Friday from high school and going to college for computer science!!!

[@SirCatzilla]

Love your videos keep them coming! Watching from South Africa.

[@cameron6464]

Your every action puts a mile long smile on my face.

[@cheekoli]

I like how you knew it was a bug to have the array manipulation functions behave differently, brushed it off that you'll remember, then IMMEDIATELY wrote a bug because of it

[@sonik382]

Dan, awesome as always! We definitely need more coding challenges!

[@algc19]

All aboard! Thus is going to be a long journey..

[@joshuaharvey4956]

Just finished this challenge myself, now to see how you implement the tile shifting! (I was stuck on it for longer than I'm proud to admit, considering how simple it sounds).

[@silentgrove7670]

I have decided to take on the challenge of creating a self learning neural net that can win at 2048. My grade 10 teacher told me if you want to solve a problem do it yourself OR find someone that has already solved the problem. I am using the latter strategy to deal with the first level of 2048 and then move on I love your enthusiasm btw. I love that you are open about the journey being adventures and ideas we learn via by trial and error.

[@TheCodingTrain]

Please keep me posted about your project!

[@Y0GAAAA]

Really interesting ! Waiting for part 2 :)

[@th4tgi371]

"We don't speak of part 4" - Dan Shiffman

[@AleksanderFimreite]

Got inspired to do this challenge myself in the Unity game engine. Finished in a little less than 3 hours. I went for a solution with a nested loop for each direction and used some helper variables (that is reset each row/collumn). firstFreeSlotId = first slot with zero, that a number can be moved to. I add/remove 1 based on direction when assigned to. lastNumber = the last non-zero number value I encountered. To check if I add it to that slot or to the first free slot. lastNumberId = the id of the last non-zero number I found. Used if matching number and I have to merge them. There was also some forward and backward looping through the x and y values nessesary in the nested loops based on the directions chosen. And of course I have to reset some of those variables when I merge and what not, so that multiple numbers dont merge to the same one! Looking forward to the remaining parts. Hope any of you found this method helpful. =)

[@EnriqueMartinezAgraAgra]

Man you should have a tv program. Great content as usual ! I would love to see you doing some Node.js. Greetings from Spain

[@EnriqueMartinezAgraAgra]

freegifmaker.me/images/2bGsm/ Who is the boss ?!

[@matteoZattera]

I have coded this game in Java, great game to earn experience

[@Mirko_ddd]

Awesome. Greetings from Italy!

[@francescozappala8822]

Mirko Dimartino è davvero bravo, lo fa in un modo del tutto originale

[@Mirko_ddd]

Confermo, e quando parla lo capisco molto bene, scandisce bene le parole. Sviluppatore anche tu?

[@francescozappala8822]

Ancora no, sto studiando. Per adesso sono un semplice appassionato di informatica, ma il mio obiettivo è diventare programmatore

[@Mirko_ddd]

Francesco Zappala' nulla ti vieta però di cominciare a sperimentare e fare qualche app. Io ho studiato chimica, non sono mai stato all'università e programmo per hobby (Android).

[@francescozappala8822]

certamente, ho già fatto qualche app per android, ora mi sto buttando sul web ;).

[@PaulPaulPaulson]

If you run out of ideas, do a simple grafical editor, e.g. for rectangles that can be nested and moved around. With it, you could also demonstrate saving and loading and how to make an undo/redo system.

[@camelcase9225]

I tried to make this game a few years ago and failed miserably. At that time I was still just a JS scrub though. Should definitely come back to it and see what I can come up with.

[@seongmoon6483]

More please!!

[@Ash-bx6kq]

doing this for a class project, I've got the board set up written, (like place 2s and 4s down in a random spot) and let me just say, my code is WAY messier than the like 50 lines it took you to write it

[@randomdeveloper6456]

Very nice and instructive video.

[@prakhar9473]

This cool. Cool, this. ❄️❄️❄️❄️

[@michrisoft]

this.cool

[@prakhar9473]

😁😂👾👾

[@Sagarkumar-pe1wj]

Liked your video within one minute because I know it gonna be great video.

[@xetop]

Cool

[@sadhlife]

Yet another coding challenge goes by without a foreach loop ;-;

[@Hitman6438]

One day

[@ritikkhatri]

lol

[@ronraisch510]

I'm all for for of loops

[@amanmahendroo1784]

omg i JUST finished my own 2048! next step: neural network to play it!

[@TheCodingTrain]

Me too!

[@Y0GAAAA]

Haha

[@ronraisch510]

when?? pls!!!

[@mansoorsaleem6862]

My highscore is 27000

[@silentgrove7670]

I am doing this as well !!

[@atprra]

Dan can read my mind maybe🤔🤔 I have been working on this for my Computer Graphics project. I'm using C++ with OpenGL .

[@xRoGeSx]

It seemed kinda wrong for me from the start. I woud've programmed a single number block movement/interactions first. Like: you only have your grid, you create number function -> hard code it into the grid for the start. Code x/y axis movement. Then try two of them and then code merging.

[@ashutoshmishra1506]

This was more than the comedy........but learning too

[@ch3ragCS]

completed my own version today😊😊 please upload a video on how to animate the tiles.. thank you

[@shubhamk9019]

watching this at 2x speed is fun

[@knezivan1]

Use bollean on combine ifsomething combined grid changed.after each round reset boolian

[@AKHalex]

Before actually watching the entire video: I almost feel like it would be smarter to just make four dedicated functions for each of the directions. Basically four copy-pasted functions that are hardcoded to work for that specific direction, with as many calls to general functions as possible. That would indeed by incredibly bad coding because it scales terribly, but if we're not going to add more directions (why we aren't) then surely it can't be that bad. Making a general function that works for all directions with crazy array operations seems to be quite complex and confusing.

[@erik8467]

enjoy the coding challenges videos! can you code tick tac toe? but make it so the computer is really smart and barely ever loses

[@jplanigan]

Look at the minimax algorithm or the more complex variant alpha-beta pruning on wikipedia. That will get you started.

[@TheCodingTrain]

Please suggest here! github.com/CodingTrain/Rainbow-Topics/issues

[@cubemage3336]

29:01 this is just an idea, and I'm a beginner when it comes to programming, but would performing a bubble sort-ish algorithm based on the original state of the row work?

[@DebanjanKarmakar]

Can you please make a tutorial on kepler's law of planetary motion using p5

[@charbelsarkis3567]

figured it out let options = new Array(4).fill().map( x => Array(4).fill(0) )

[@leducia]

To make an immutable copy of the array, you can just do let extra = [...grid]; :) Btw I love your videos, keep it up!

[@TheCodingTrain]

great tip!

[@leducia]

turns out that only the array will have a new reference, not the objects inside the new array :(

[@Adam-ny5gp]

Did you say you were a teenager in the 1940's or am I hard of hearing? You look like you're in your late twenties/early thirties! Been watching your videos for a long time now and you're joy and fun is contagious. (:

[@TheCodingTrain]

Hah! I was joking! was a teenager in the 1950s (margin of error 30ish years).

[@dappermink]

It may sound weird said that way but seing you as enthousiastic regardless of what you're doing because you have the ability to see the passionating part of everything you do makes me want to meet you and spend a good time if I had the chance to ＊︿＊ Please keep being such a lovely person!!

[@TheCodingTrain]

Thank you!

[@FieelFlying]

I'd love to pick up p5.js but I can't really think about what I'd use it for :/, looks so cool. I do mostly web dev as of now, any suggestion?

[@tiileaf]

Fieel Flying well, one if my first p5 projects used a canvas that would stretch over my entire website, then it would draw an animation based on the date. (Falling snowflakes in the winter, falling leaves in the fall, spinning sun rays in the summer) clearing mouse events and using the clear(); function allows your websites visitors to still interact with and see your page even though there is a canvas infront of it

[@tiileaf]

Fieel Flying that could be tailored will for you since you are a web developer

[@dogden95]

"I'm just going to hard code it!!..."

[@ShubhamSharma-sj6cu]

Please do a video on forEach loop in javascript

[@franmaric]

I made mine in python!

[@gigicaly]

hi, can you do a javascript program that involves audio files? maybe dual channel volume manipulation or distortion? Consider it a challenge :)

[@ronraisch510]

he has a whole series about audio look at his playlists under tutorials he made it for both p5 and processing. he made clappy bird, maybe more

[@vcothur7]

Till now everything looks fine. Where did things go wrong?

[@awsomeguy563]

When you made the grid of 0's, how did it transform into a table without you doing anything, some kind of beautify?

[@TheCodingTrain]

Yes, this is the "atom-beautify" package.

[@keshavapiyushprasad5439]

8:46 it's so much easier and readable in python

[@kranefivem]

hey dude, i wrote my first basic game with oop java script , thanks to you i learn to code now the proper way not the autistic way i used to, i am following you and keep cloning all the things you do untill i can maybe program myself a stable game in browser, thank you

[@tyulik]

Hello there Coding Train! I have a Coding Challenge for you! I just watched a video about chemical explosions vs kinetic explosions. So let me start with the history of the moon. Back in the day geologist thought that the craters of the moon were caused by volcanoes; only recently with computer simulations we discovered that if an asteroid has more kinetic energy that the energy of the material holding together then the whole thing will explode. For example if you throw a snowball at a wall (no matter the angle) it will make a circular form (not a splash, for example if you throw a pizza), because the kinetic energy is greater that the snowball flake's energy that holds them together so it explodes. Basically when you throw a snowball at a wall it explodes in kinetic fashion. Could you make a simulation where you throw a ball (made of many points that interact with each other) and give it a certain kinetic energy and see how it explodes. P.S.: we don't have the technology to make a kinetic explosion greater than the chemical explosions, like nukes; that would require tons and tons of kinetic energy. here if the video with Neil explaining that: kzbin.info/www/bejne/oHqVeIZ_rpqSibcm18s (15:18)

[@ronraisch510]

he won't remember it here go to his github and suggest that there

[@benhannes8880]

34:03 "undisfined" lol

[@unhott1893]

"I'm gonna take a short break, and have a part two of the 2048 challenge where I deal with the rotation of the matrix, and I hope you enjoy watching that part and then the game will be finished!" lul

[@keshavapiyushprasad5439]

Lawl

[@Epicboss16]

Hey, what web server are you using? My index.html won't show my sketch.js for some reason.

[@daanbreur]

how you do automarkup like what you do on 7:25 i cant find the shortcut

[@angshu7589]

This is 2020. I don't know JSON.stringify existed in 2018 but if it did your compare function could have been as simple as: var compare = (a, b) => JSON.stringify(a) !== JSON.stringify(b); Quite amusing how you can change a 5-line piece of code with two nested for loops (not even a forEach!) in only one single line.

[@TecuGo]

I think first you should have called combine(); then slide(); Please correct me if I am wrong.

[@bdnugget]

Huh didn't I see this last week? Or is this an edited shorter version?

[@doomdarock1]

You probably caught the original live stream of this, this is the edited final version

[@bdnugget]

Yeah I just found the live stream, I've commented on it before. Thanks hombre

[@porigonopop]

It's awesome that you made a series about filter etc.. and don't use it there ^^

[@ronraisch510]

what series? i wanna watch it

[@prakashsahu7067]

Which plateform do you use

[@hectorsmith8269]

with textAlign(CENTER); text(val, i * w - w/2 + w, j * w - w/2 + w+20); is correct

[@lergburg1226]

420k subs ;)

[@keshavapiyushprasad5439]

If Dan was a teenager in the 1940s, then One Direction was 98 degrees. Lawl

[@NoxFly]

In all your vids you're doing stuff with ES6 functions like arr = arr.concat(arr2); why not use arr.push(...arr2); ?

[@MasterLemon98]

gabriele's surname pronunciation is Ci like chill, ru like room, lli like lli. Chi-Roo-lli

[@hectorsmith8269]

this: function combine(row){ for(let i = 3; i >= 1; i--){ let a = row[i-1]; let b = row[i]; if(a == b){ row[i] = a + b; row[i-1] = 0; } } return row; } should be: function combine(row){ for(let i = 3; i >= 1; i--){ let a = row[i-1]; let b = row[i]; if(a == b){ row[i-1] = a + b; row[i] = 0; } } return row; } and then you can just slide and combine without a problem

[@WatcherOfTheGame]

At 29:43 you sating that [2,2,2,2] supposed to transform into [0,4,0,4], but it transforms to [0,0,4,4]. So which one is correct?

[@TheCodingTrain]

I think [0,4,0,4] is just the first step with combine(). Then slide() should be applied again to turn it into [0,0,4,4]

[@WatcherOfTheGame]

That sounds logical, thanks.

[@razqalathifpradana18]

Hallo The Coding Train Do you have tutorial create game candy crush with canvas and JS ??

[@angelcaru]

shut up

[@meghanstrudwick4100]

when did this happen!?!?!?

[@brunomello6305]

finally

[@davidthomas9699]

Hey, I dont know if you already coding this but maybe you can code CookieClicker! I would like to see it.

[@almostfamousrsps6980]

Hey, im not sure if im gonna get your attention here but i'm gonna write this anyways I've been a sub to your channel for a long time now, coding is art for me, i would love to learn software engineering in the future, but i also want to start it from now, is there any chance you could tell what to start with, bare in mind i know some of c basics, :) thanks :)

[@TheCodingTrain]

Try either of these playlists to learn from the beginning! kzbin.infoplaylists?view=50&shelf_id=14&sort=dd kzbin.infoplaylists?view=50&shelf_id=2&sort=dd

[@anispinner]

Dan, ANN-based crypto trading bot, when? c:

[@kamilbolka]

Yes!

[@dandreani]

hello :)

[@ionmorosan796]

how i cand do it in Angular 4 ?

[@matheusepstein2973]

i love you

[@mrmagicrapattack]

Here is my version complete with animations: joelhilme.com/2048/ The code is a bit messy but i don't really care because tomorrow I'm starting an internship at experience design / game studio, much thanks to this channel, which is what got me to start coding about a year ago! So thank you Dan!!

[@TheCodingTrain]

Nice work! You can submit a link to the coding train website if you like! github.com/CodingTrain/website/wiki/Community-Contributions-Guide

[@longvuong9395]

For me, in the console, there's an error that says, "Uncaught ReferenceError: past is not defined". Var works, but let doesn't, how do you fix that?

[@ronraisch510]

if var works for you and let doesn't you are probably running your sketch on an older version of JS called ES5, let and const only works on ES6 or anything newer, my advise is to use var lol

[@angelcaru]

@@ronraisch510 My advice is to update the browser!

[@nottaBird]

@@ronraisch510 the qauh huh

[@sssstupidkid1234]

in js you don't have to put the semicolon! it adds it automatically! otherwise, good video

[@YourSuizo]

You should still get used to putting it at end, because in many other programming languages it doesn't do it automatically. Besides there isn't much of a time loss if you do put it manually.

[@sssstupidkid1234]

yeah I know I program in C lol.

[@sssstupidkid1234]

I just come here cuz im curious

[@nickwalters5829]

He said he was a teenager in the 40s. Clearly he has unclocked imortality ( he probably coded it) 4:52

[@keshavapiyushprasad5439]

In Processing

[@adriansitorus9862]

Halo If i wanna try something like this What kinds of software that i need?

[@TheCodingTrain]

This workflow video might help: kzbin.info/www/bejne/fouXdWatebeUm8U

[@ronraisch510]

if you still didn't get it because whatever reason you can just google "p5.js web editor" it's in alpha stage but it's already on the web so you can send links to people easily and open it from other computers, NO DOWNLOAD REQUIRED

[@jerryf196]

does random method even exist?

[@vaim5982]

what is that random function? where does it come from?

[@angelcaru]

p5.js (p5js.org)

[@brahmendranchary5852]

i try this same code but i couldn't not achieve the output

[@user-gt5st3wh2p]

hey,help me plz. in my function , my code miss this condition(key == " ") Where we declared this variuble ,i don't understand . (problem function) function keyPressed() { if (key == ' ') { console.log("hi") for(let i = 0; i < 4; i++) { console.log("hi") grid[i] = operate(grid[i]); } } addNumber() }

[@shell11_]

How do you auto-format your code?

[@itsMapleLeaf]

F0cuS you could use prettier, which has editor plugins prettier.io/ doesn't look the same as whatever he's using though

[@shell11_]

Thanks! That's what I was looking for

[@TheCodingTrain]

I'm using atom and atom-beautify.

[@ronraisch510]

ctrl + t usually works

[@leo848]

11:41 personal timestamp please ignore

[@quepasa498]

NUMBER 1 VICTORY ROYALE FORTNITE YEAH WE BOUT TO GET DOWN

[@victoralvesbugueno6178]

Hello guys, that's my version of 2048: instagram.com/p/BdnD7K_lRep/ Hope you enjoy !!!

[@TheCodingTrain]

Great work!

[@victoralvesbugueno6178]

The Coding Train Thanks, Daniel. I think it's a good idea to create an Instagram account with prints of your projects...to promote your KZbin channel.

[@edidumitru989]

poti face acest joc in visual studio in c#??

[@Xnoob545]

Loop Poo Over = Lover

[@igorstaniszewski835]

Where is this random function come frome ?

[@krccmsitp2884]

It's part of p5.js he's using.

[@codycodes7527]

23:35 so 422 errors give you 404 errors? good to know

[@Enterefox]

Can someone explain me how it works this: "let arr = row.filter(val => val);" Thnx

[@porigonopop]

Toni Muñoz Ferrer it will filter the row by removing all the 0 values (val=>Val is a lambda function, filter apply it to all the value of the array and if the function evaluate false it will pop the element) so : if (Val) then { keep the value} else {pop}

[@AdrianTache]

Hi there Daniel, I wanted to say I love your show and for this challenge, you really inspired me to try my hand at it. I'm currently learning android development but I enjoy the challenges and seeing you approach OOP has finally allowed me to understand it. Anyway, here's my 2048 in java: github.com/adriantache/2048 I'm still working on it, but I find it interesting that we approached certain tasks differently, especially the removal of the zeroes.

[@christianremboldt1557]

i made 2048 in rust

[@konakzizu]

next time i propose Tetris

[@govardhan123]

it has === .. how it is compiling sir ?

[@ronraisch510]

I don't know what is the difference between === and == but i know == is always valid if === is