Continuing on score, a high score table.A score display to show the user how many apples they picked up.Golden apples that give three times the length extension, but disappear if you don’t pick it up fast enough.Replace the snake and Apple with cooler graphics, try using background-image.We should check in enterKey that we don’t reverse the direction of the snake.Īfter fixing the bugs, try to extend the game. You can walk backwards and collide with yourself.Apples can be placed ontop of the snake, making them invisible! In placeApple we should prevent this by always finding a free position on the board.Try it out below: View this in a new tab The final game now works!Īfter revelling in your success, we can note there are still bugs to be fixed: function placeApple () Mission successĪnd there you have it, a complete snake game made entirely in simple HTML, JavaScript and CSS. We then update theīoard at this position with the property apple set to the value 1. This is something we will do many times, so we introduce a new function placeAppleĪpples should be assigned to a random position, so we pick a random cell on theīoard, using the Math.random and Math.floor functions in combination to pickĪn integer (non-decimal) number for the X and Y positions. Placing applesįirst step is placing the apples on the board. Now all that remains is picking up the apples and collision detection with the tail. Last time we made the snake move on the board and added keyboard controls. It’s time to complete our small snake game (long timeout between posts due to work). You should first read part 1 and part 2 of the tutorial.

Javascript snake