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: https://thecodingtrain.com/challenges/94-2048 🕹️ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/aeIk9JZ-U Other Parts of this Challenge: 📺 2048 - Part 2: https://youtu.be/8f8P1i0W26E 📺 2048 - Part 3: https://youtu.be/3iYvT8TBIro 📺 2048 - Part 4: https://youtu.be/vtMKeEGpMI4 🎥 Previous video: https://youtu.be/uWzPe_S-RVE?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 Next video: https://youtu.be/5cNnf_7e92Q?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH References: 💾 2048: https://gabrielecirulli.github.io/2048/ 🌐 2048 on Wikipedia: https://en.wikipedia.org/wiki/2048_(video_game) Videos: 🔴 Coding Train Live 122 https://youtu.be/ze_o4YvZ6-s?t=5648s Related Coding Challenges: 🚂 #142 Rubik's Cube: https://youtu.be/9PGfL4t-uqE 🚂 #149 Tic Tac Toe: https://youtu.be/GTWrWM1UsnA 🚂 #165 Slide Puzzle: https://youtu.be/uQZLzhrzEs4 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: http://thecodingtrain.com/ 👾 Share Your Creation! https://thecodingtrain.com/guides/passenger-showcase-guide 🚩 Suggest Topics: https://github.com/CodingTrain/Suggestion-Box 💡 GitHub: https://github.com/CodingTrain 💬 Discord: https://thecodingtrain.com/discord 💖 Membership: http://youtube.com/thecodingtrain/join 🛒 Store: https://standard.tv/codingtrain 🖋️ Twitter: https://twitter.com/thecodingtrain 📸 Instagram: https://www.instagram.com/the.coding.train/ 🎥 Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA 🔗 p5.js: https://p5js.org 🔗 p5.js Web Editor: https://editor.p5js.org/ 🔗 Processing: https://processing.org 📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new #2048 #slidingpuzzlegame #javascript #p5js