Coding Challenge #94: 2048 - Part 1

Channel:
United States The Coding Train
Subscribers:
1,740,000
Published on ● Video Link: https://www.youtube.com/watch?v=JSn-DJU8qf0


Game:
2048 (2014)
Duration: 35:17
141,451 views
2,501

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



Other Videos By The Coding Train


2018-03-075.5: Doodle Classifier: Testing - Intelligence and Learning
2018-03-075.4: Doodle Classifier: Training - Intelligence and Learning
2018-03-065.3: Doodle Classifier: Prepping Data in p5.js - Intelligence and Learning
2018-03-065.2: Doodle Classifier: Prepping Data in Processing - Intelligence and Learning
2018-03-055.1: Doodle Classifier: Introduction - Intelligence and Learning
2018-03-04Live Stream #123.2: Doodle Classifier - Part 2
2018-03-03Live Stream #123.1: Doodle Classifier - Part 1
2018-03-01Coding Challenge #94: 2048 - Part 4
2018-02-28Coding Challenge #94: 2048 - Part 3
2018-02-27Coding Challenge #94: 2048 - Part 2
2018-02-26Coding Challenge #94: 2048 - Part 1
2018-02-2416.10: Particle System with JS Array Functions - Topics of JavaScript/ES6
2018-02-2316.9: Array Functions: sort() - Topics of JavaScript/ES6
2018-02-2216.8: Array Functions: filter() - Topics of JavaScript/ES6
2018-02-2116.7: Array Functions: reduce() - Topics of JavaScript/ES6
2018-02-2016.6: Array Functions: map() and fill() - Topics of JavaScript/ES6
2018-02-1916.5: Higher Order Functions in JavaScript - Topics of JavaScript/ES6
2018-02-18Coding Train Live 122: filter(), sort() and 2048
2018-02-17Coding Train Live 121: map() and reduce() in JavaScript
2018-02-151.9: Resolving Merge Conflicts - Git and GitHub for Poets
2018-02-14CircleCI Part 4: Matrix Library Testing and Continuous Integration


Tags:
live
programming
daniel shiffman
creative coding
coding challenge
tutorial
coding
challenges
coding train
the coding train
live stream
itp nyu
class
challenge
codingtrain
code challenge
code
game
p5.js
p5.js game
2048
2048 game
2048 js
2048 javascript
2048 code
2048 coding challenge
2048 copy
game puzzle
game grid
game number
game p5.js
game browser


Other Statistics

2048 Statistics For The Coding Train

At present, The Coding Train has 244,813 views spread across 4 videos for 2048, and about an hours worth of 2048 videos were uploaded to his channel. This is less than 0.15% of the total video content that The Coding Train has uploaded to YouTube.