Coding a Snake Game in 5 mins with Javascript - Speed Coding

today I'm going to attempt to speed code snake in five minutes so I'm gonna start out with just an HTML that links to our JavaScript I have a live server running you can see there is nothing there because we have no code right now and we'll take a look in our j/s so we've got nothing except for three colors that I'm going to use for the game so five minutes on the timer let's go so we will start by getting hold of the elements by ID and then we'll get the context we'll say the canvas width is the same as the canvas pice which is 400 pixels say if framerate is 10 a screen size is 20 the tile sizes canvas width divided by that screen size we'll need a position a velocity a food and a snake variable and we'll create an initialization function we'll initialize our snake to be at position 10 10 we'll give it an initial velocity of zero zero then we'll create some body for our snake and we'll put a chunk at 8 10 and we'll duplicate that a couple times so that we have more body then we'll place a random bit of food we'll call that initialization function and then define our random food function and that will play some food at math.floor math.random times by T for X and the same for Y and then we'll make sure that that food hasn't spawned in a position where our snake is by checking that it is not part of the snake and if it is we will recursively call random food then we will add an event listener on key down and we'll call a key down function key down and that takes an event we will switch on the event.keycode 37 case we will return velocity equals minus 1 0 and 4 38 we will give it zero minus 1 39 b10 and 4 40 it would be 0 1 and then we will set an interval and in that we will request animation frame for our game loop and we will call that as Bowser / framerate game loop fill style will start off as that bgcolor we defined above at 0 0 canvas that whit canvas dot height then fill style will become the snake color and will live through all the cells of the snake and fill in its elder x times s cell y times s s s then fill style will be the food color and we will fill in a food dot x times s food y times s s s position dot X plus equals velocity dot X duplicate that for y if position dot X is less than zero or position dot X is greater than T or position dot y is less than zero or position dot Y is greater than T then we've went off the edge so we want to read and initialize and then we'll check if we've eaten the food by saying a position to ax equals position dot Y and food dot y equals position dot y then we will push on to the snake the current position and we will push the snake forward and then place a random food and then if velocity dot X or velocity dot y then we want to look through the cells of snake and if cell dot x equals position directs and cell that y equals positioned at y then we want to initialize as we bumped into ourselves snake doc push current position snake got shift to remove the end and we're done so let's check the browser so we can play the game and there we go we have a snake if we bump into the wall we should die if we bump into another wall we die and if we build ourselves up hopefully if we bump into ourselves we die so there we go a snake game from scratch in javascript in the browser in five minutes so if you enjoyed this video give me a thumbs up hit the subscribe button to see more content like this as well as other contents or actually explain what I'm doing and you can learn from it as opposed to me rushing through it as a speed challenge if you really like what I do I do have a patreon so you can check that out to support the contents but until next time stay hungry and keep coding

Channel: Hungry Turtle Code

Views: 23,847

Keywords: hungryturtlecode, hungry turtle code, hungry turtle code tutorial, adrian henry, snake game, speed coding, snake game javascript, game programming, speed coding javascript, javascript snake game, javascript snake tutorial, snake game tutorial, building a snake game, software development, Coding a Snake Game in 5 mins, speed programming, fast coding, speedcoding, javascript coding, snake javascript, javascript speed coding, javascript snake, javascript, coding snake

Id: cZ0IPkF85mY

Length: 6min 21sec (381 seconds)

Published: Thu Feb 14 2019

Reddit Comments

[u/dohpaz42]

Bullshit. He had all this written out already.

[u/[deleted]]

ok, I'll just leave the programming up to this guy. I'm going to go and wallow in my own pity