JavaScript Snake Game Tutorial Using Functional Programming



Build a Snake Game in JavaScript using Functional Programming concepts. No libraries are used in this JavaScript tutorial.

💻 Source code: https://github.com/chrokh/snake

Created by Christopher Okhravi.
🔗Check out his YouTube channel: https://www.youtube.com/channel/UCbF-4yQQAWw-UnuCd2Azfzg

Learn to code for free and get a developer job: https://www.freecodecamp.com

Read hundreds of articles on programming: https://medium.freecodecamp.com

And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp

source

This Post Has 39 Comments

  1. Deyl Energy

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

  2. Craig Warren

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

  3. Allan Cheah

    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 !!

  4. Glorp Blorp

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

  5. 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 ?

  6. mohamed tarek

    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 !!!

  7. Luka M

    Thumbs up for the Slavoj Zizek of programming! 💪

  8. Jamie Heiney

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

  9. Nikhil Yekhe

    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!

  10. M

    you talk too much nonsense..

  11. MindGem

    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.

  12. n.

    Why you dont speak faster?

  13. Juani Garay

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

  14. Vado

    This is some beautiful code

  15. Tao Spencer

    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…

  16. Hidden Hand

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

  17. Avisek Das

    JavaScript isn't a functional programming language.

  18. John Rambo

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

  19. cepi24

    I ve seen Chris coding walks and this is great too

  20. Florian Witteler

    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.

  21. spinthma

    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,

  22. Stefan Dili

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

  23. athebot

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

  24. 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

  25. Mal

    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