Snake Game web app Tutorial part1

Snake Game web app Tutorial part1


Hello everyone and welcome in Source Code Planet , this is the first episode of making Snake Game web app , I’m using Sublime code editor and Google Chrome web browser so let’s begin The language is US-English characters encoding is UTF-8 and the title is Snake Game get rid of user select and add the border to box sizing for all elements , save it as Snake-Game.html add a canvas element width 300 and height 300 no 200 is better a square doesn’t look good I think add a border to it ok now we declare a class called Block it represents a square in the canvas with a width and height and a position x and y from the left edge and the top one of the canvas and each block can draw its self of course let’s create some instances of that class and then draw them on the canvas oops here they are , let’s replace them with circles , so the player can see each segment instead of one straight thick line make it in the middle ok now we make a snake object to hold the segments and other properties and methods the snake object has an array of segments a drawing method add those block instances to the segements array of the snake and just draw it that’s it for this episode see you in the next one

Leave a Reply

Your email address will not be published. Required fields are marked *