React JS | Snake Game with just 100 lines of code!
Weibenfalk
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.
TO GET STARTED: DOWNLOAD STARTER FILES FROM LINK BELOW!
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
01.01.2022
Which theme are you using for your VS code?
Thank you it is a good project to learn.
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
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?
I love u!!! i came from the tic tac toe course and you are amazing! you explain very well, thanks <3
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 🙂
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 {
setDir(DIRECTIONS[keyCode]);
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?
Would have loved a Typescript version of this. Still a great vid. Thank you
Why would it be better to do it with vanilla js? New developer here
Love this tutorial. I don't really get how apple.map((_, 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.