(Snake-Dot-Game - 2018) - How to use HTML5 Canvas by building your own Snake-Dot Game
Like 1 Dislike 0 Published on 2 Feb 2017
Learn how to use HTML5 Canvas with AngularJS by creating your own Snake-Dot game from Scratch
https://goo.gl/SFlwJa
Play the Game here :
The HTML canvas element is used to draw graphics, on the fly, via JavaScript. Canvas has several methods for drawing paths, boxes, circles, text, and adding images. In this section, we are going to create our own Snake-Dot Game using HTML5 Canvas from Scratch.
Also Learn Our AngularJS
www.ui5cn.com/courses/angularjs?coupon=launch80
Content:
0:20 : Why we chose HTML5 Canvas for our Webinar.
2:47 : How we are going to use the Canvas to make the game
6:12 : Let's Start Coding
7:07 : Canvas Tags
10:00 : Test if Canvas is Supported
11:38 : Canvas variable and context defined
16:46 : Creating the init function
20:15 : Create snake function
22:16 : Create food function
28:05 : Paint Canvas function
33:30 : Paint Cell function
34:56 : Snake and food painted on Canvas
35:07 : Code explanation of snake and food painting
38:01 : How to make the snake move
40:45 : Keeping the snake inside the boundary
42:50 : Keyboard controls
48:35 : Modular code advantage
48:58 : Testing out the game controls
50:01 : Snake direction switching to control
51:51 : Eating the food
53:50 : Testing the eating the food
54:07 : Removing snake's super power :)
55:33 : Body collision of Snake to take care
58:57 : Score of the game
1:02:03 : Pokemon game with Angular JS
1:02:31 : Experience is more important
1:02:30 : Webinar80 coupon
http://www.ui5cn.com/courses/angularjs?coupon=webinar80
1:02:38 : Future improvement to Game
1:07:35 : Thank you !