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. Which theme are you using for your VS code?

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

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

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

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

  6. 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 🙂

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

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

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

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