Coding Challenge #94: 2048 - Part 4

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


Game:
2048 (2014)
Duration: 29:51
36,304 views
674

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:
๐Ÿ“บ Part 1: https://youtu.be/JSn-DJU8qf0
๐Ÿ“บ Part 2: https://youtu.be/8f8P1i0W26E
๐Ÿ“บ Part 3: https://youtu.be/3iYvT8TBIro

๐ŸŽฅ 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:
๐ŸŽฅ CircleCI - Unit Testing and Continuous Integration: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6bLqwFa52YGEHy-L1-D_Ve-

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 List of improvements & fixes
1:20 Fix a bug in the code
4:00 Add a function that indicates that the player has won
7:26 Add colors to the tiles
16:55 Add styling to indicate which tile has just been added
19:38 Change the odds of getting a "4"
20:54 Refactor code by adding a transposeGrid function
23:30 Add a switch statement

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-11Live Stream #124.2 - Linting and Neuroevolution - Part 2
2018-03-10Live Stream #124.1 - Linting and Neuroevolution - Part 1
2018-03-085.6: Doodle Classifier: Classifying User Data - Intelligence and Learning
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


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.