Coding Challenge 3: The Snake Game
Why Stack Overflow recommends it
Stack Overflow users link it when answering or asking about HTML canvas games, collision detection and snake-style game logic in JavaScript.
Recommended by 2 people across 2 different months, 2019 to 2020.
What it is
Daniel Shiffman of The Coding Train builds a Snake game live in p5.js, covering a Snake object, keyboard control, grid constraints, food, growing the tail and a game over state. It is a single 27-minute coding challenge episode with the finished sketch linked.
What people said
Recommends Bryan Enid · 2019-08 · Stack Overflow · on “HTML Canvas and animations”
Just like @Blindman67 said, it works by frames and you need to clear the canvas every frame and update the drawing. You can also use libraries to develop drawings with animation just a little bit easier, and make games as well. I recommend you looking into p5.js [LINK] and watching videos from Coding Train Channel [this video] . It will help you a lot. Good Luck
Recommends Nate · 2020-01 · Stack Overflow · on “How do I add collision in 2d JS/HTML game?”
You may gain a little insight from this video, it has collision detection as part of it. [this video] - Build stake with html canvas and javascript
Cites Dan Cod · 2020-06 · Stack Overflow · on “How to make points in Javascript”
I need help to make points every time the snake eats a piece of food. I am coding in Brackets. I've watched The Coding Train and I was thinking the problem was that he was using p5.js when I was using Brackets. Could somebody please answer my question. Thank you! The link for the video that I have watched is: [this video] . function Snake() { <- Javascript this.x = 0; this.y = 0; this.xspeed = 1; this.yspeed = 0; this.total = 0; this.tail = []; this.eat = function(pos) { var d = dist(this.x, this.y, pos.x, pos.y); if (d < 1) { this.total++; return true; } else { return false; } } this.dir = function(x, y) { this.xspeed = x; this.yspeed = y; } this.death = function() { for (var i = 0; i < this.tai