React JS | Snake Game with just 100 lines of code! -

React JS | Snake Game with just 100 lines of code!

Views: 10834
Like: 241
#react #snake #game

Ever wondered how the classic snake game can be built? Wonder no more! In this tutorial I will show you how to do it with just 100 lines of code. I’m using the popular library React.js for this one.


Starter files:

Then navigate into ”react-snake-START-HERE” folder and run ”npm install” to install dependencies. After that just type ”npm start” to start up the dev environment.

If you like this … subscribe to my channel so I can create much much more free content =)

You can find my premium course site here:
Or search for Weibenfalk on Udemy.

And feel free to contact me on Twitter @weibenfalk


  1. 100 lines of code with a little bit of cheating! But very concise and clear explanation and implementation of the snake game!

  2. Which theme are you using for your VS code?

  3. Thank you it is a good project to learn.

  4. I got here through one of your courses on Udemy. (Movie App). You are doing a great job, I enjoy your style of teaching. Thank You

  5. Thanks nice tutorial ! I followed it but tried to write the for /if loops as I am accustom too. My code seems broken there but I just cannot figure out what you did in order to fix mine using long hand code . I would much prefer to use readable code in the checkCollision and checkAppleCollision. How would you write them if you were not taking the short cuts to save lines?

  6. I love u!!! i came from the tic tac toe course and you are amazing! you explain very well, thanks <3

  7. Hi! I had update react-scripts to 3.4.0 for this to work. Could you please update your package.json? So that other people who follow your tutorial can get it working 🙂

  8. Thank you so much for the tutorial!

    I was trying to check the condition where the snake moved to its opposite direction (ie moving to the left initially, but pressing key to the right).
    const moveSnake = ({ keyCode }) => {
    if (
    (keyCode < 37 && keyCode > 40) ||
    dir[1] === DIRECTIONS[keyCode][1] + 2 ||
    dir[1] === DIRECTIONS[keyCode][1] – 2 ||
    dir[0] === DIRECTIONS[keyCode][0] + 2 ||
    dir[0] === DIRECTIONS[keyCode][0] – 2
    return false;
    else {
    return true;

    However, I found that sometimes the snake is still able to move to the opposite direction when I pressed 2 or more keys very rapidly (maybe simultaneous). Why does it happen and how should I prevent it?

  9. Would have loved a Typescript version of this. Still a great vid. Thank you

  10. Why would it be better to do it with vanilla js? New developer here

  11. Love this tutorial. I don't really get how, i) => Math.floor(Math.random() * (CANVAS_SIZE[i]) / SCALE)) gives us a random apple location. I'm not sure what the map and CAVAS_SIZE[i] are doing.

Leave a Reply

Your email address will not be published.