JavaScript Snake Game Tutorial Using Functional Programming - playproduction.de

JavaScript Snake Game Tutorial Using Functional Programming

freeCodeCamp.org
Views: 145983
Like: 3168
Build a Snake Game in JavaScript using Functional Programming concepts. No libraries are used in this JavaScript tutorial.

💻 Source code:

Created by Christopher Okhravi.
🔗Check out his YouTube channel:

Learn to code for free and get a developer job:

Read hundreds of articles on programming:

And subscribe for new videos on technology every day:

63 Comments

  1. I'm a little confused. JS does have currying, and partial application.

  2. awesome! watched several snake video on youtube, they all pretty shitty in comparison to this one. good job.

  3. This exercise was amazing, i learned functional programming basics while watching!

  4. thanks for this video? could you please tell me how to show grid lines in snake's background, so to predict in which row it is.
    in short, To show rows and columns cells/squares.

  5. "The interwebs."
    He said "The Interwebs."
    9/10 video, needs more snakes

  6. I think I know javascript, sorry, my bad 🙂

  7. Could someone please explain me line 'const step = t1 => t2 => {…'
    are t1 and t2 both arguments of step fucntion and if they were, why wasnt it written line 'const step = (t1, t2) => {…'
    Thanks.

  8. Any reason for not using webpack? That will handle your import export and then use Babel to compile your code for cross browser support

  9. I'm interested in learning more about functional programming.
    Are there any performance implications of using functional programming for games?

  10. This guy run a great YouTube channel. He is able to elucidate difficult stuff.

  11. You could make millions marketing Red Bull or Coffee:-)

  12. Haha that's a good one man! =)

    Oh anyway, can I seek your advice in this open source android app I have posted below? I will be happy to get feedback about this app. Greatly appreciate!…

    You can search ' pub:Path Ahead ' in Android Play Store (P & A are case sensitive).

    thanks a-hundred-times !!

  13. Pretty tough way, actually! Great stuff, awesome energy, dude!

  14. Very nice implementation, but in javascript games, reuse of objects and objects pooling is key for a decent performance, try a space shooter or a bullet hell shooter to see the limits and witness the garbage collector rampage. I'm not very familiar with functional programming, but why returning a new function each frame while you could use two variables to get the deltaT and set the frame rate at the value you want ?

  15. so what's difference if I declare validMove like this  
    const vaildMove = (move, state) =>
    instead of that form
    const validMove = move => state =>
    !! using two parameters instead of using two nested functions !!!

  16. 9 hours of work to implement 90 mins 😅

  17. Thumbs up for the Slavoj Zizek of programming! 💪

  18. Great!!! Thanks for including some conceptual ideas, they make programing so much more understandable, useful and enjoyable!

  19. Very well explained tutorial. Why do you use multiple arrows for multiple input arguments for function? like p1 => p2 => and not (p1, p2) => ?

    Edit: I understand currying now!

  20. This dude is legend! I love his php design patterns series

  21. Who is your target group for this? I came in thinking Snake was a newbie tutorial but it looks super complicated so me as a beginner is not the target group.

  22. Why don't you get a stack overflow from calling requestAnimationFrame recursively? Is it async?

  23. You look like Oscar Isaac mixed with Mr. Bean.

  24. Hey, Interesting tutorial, but requestAnimationFrame should be running apprx every 16ms, limiting or trying to hard code this to instead run at 100ms for each frame seems a bit counter-intuative. Still learnt quite a lot from this video. But this implementation seems very convoluted.. Maybe you could make a remake of this using the new .animate() Javascript api…

  25. Thank you for doing this! Cannot wait to try this tutorial

  26. JavaScript isn't a functional programming language.

  27. Is it a porn video cover on the wall or my eyes deceives me?

  28. I ve seen Chris coding walks and this is great too

  29. That is a great tutorial! I work as scala developer and I'm currently learning elm for fun, so I'm familiar with FP.
    You really have a talent creating readable code imho. I was wondering all the time how you would have implemented the nextSnake function and was expecting some complicated mapping over accumulated moves or whatever. But your "remove the tail and append a new head" approach is super elegant. I haven't thought about the problem enough to come up with this elegant solution.

    I'll try to reimplement your solution with elm if I have time.

  30. Hi thank you for the nice example. I did not get the spec() function how does it work without any parameter – the state, how does it knows about, how orks map / apply, and how to understand the spec function in itself. Thanks you
    for example o => x => , x is never referenced,

  31. Watching this on 1.5x is keeping a smile on my face

  32. Me: trying to learn javascript
    Ad: "Pythons where its at"

  33. Business Opportunity in Ruvol

    I have invented a Board Game [still unpublished and not yet out in the market] that I believe is guaranteed to be as challenging and exciting as CHESS. I called it “RUVOL.”

    It is my hope that one day Ruvol may surpass chess as the “Number One Board Game in the World.”

    The weakness of chess is it always starts in fixed positions that the opening moves become “memorizable.” In fact, not a few have so mastered the moves that they can play against their opponents “blindfolded.” It is for this very reason that the great Bobby Fischer introduced his so-called “Fischer Random Chess,” where the starting position of the pieces is “randomized” to make the memorization of openings impracticable. Fortunately, it is also for this reason that I invented Ruvol where “every game” has been calculated to be a challenging one to play.

    HOW IS RUVOL PLAYED and HOW YOU CAN MONETIZE IT?

    I detailed everything in my YouTube video. Here is the link: https://www.youtube.com/watch?v=jcqth0m3-R0

    BIG MONEY POTENTIAL IN RUVOL!

    It is worthwhile to note that the people who play chess will be the same people who will play Ruvol. In my Google search, I learned there are around 800 million chess players in the world. Even just a small percentage of these 800 million is good enough to earn big money from Ruvol either as an ONLINE GAME BUSINESS or as a PHYSICAL PRODUCT DISTRIBUTOR.

    You may contact me at: rodolfovitangcol@gmail.com.

    Thanks and God bless!

    RODOLFO MARTIN VITANGCOL
    The Ruvol Inventor

  34. state.moves should not be an array. The snake is only able to move one direction at a time. If you spam multiple keys, the snake remains moving around even after releasing all keys. Also state.snake should not be an array of the coordinates where the snakes body would be. It should be the length of the snake.

Leave a Reply

Your email address will not be published.