I. I wonder if everyone is just like me. I had a dream at the beginning. Learning programming is to develop games. After entering the University study, I learned how to develop database applications! Here, I will share with you a few small games in my spare time! I plan to use winform or wpf, but I chose js for considering the. net environment for running, so I learned canvas plotting in html5! Preview It first: (the browser must support html5 and the input method in English) Snake tank typing Game 2. Simple Description of the principle-Understanding JavaScript based on object-oriented programming (context: Drawing context, timer refresh and re-paint) 1. Greedy snake: drawing a map (GameController controller class) :( now I understand that when I learned hello world, the teacher asked us to output a triangle on the console, rectangular and so on. I didn't expect it to be used here.) drawMap: function () {for (var I = 0; I <41; I ++) {for (var j = 0; j <41; j ++) {this. context. lineWidth = 1; this. context. strokeStyle = "#222"; this. context. strokeRect (I * 20, j * 20, 20, 20) ;}}, Parent class: The base class of Snake and Food, including their common attributes; inheritance mainly uses the call ()/apply () methods. In fact, it is to change the scope of this in the Parent function and dynamically add attributes. Snake class: This class regards each section of a Snake as a Snake instance and stores it in the snakes array of the GameController instance for ease of management. Implementation of snake Movement (in the refresh method of the GameController class): traverse the array snakes from the last one. The coordinates of section m are equal to the coordinates of section m-1, and the first section moves; for (var m = this. snkes. length-1; m> = 0; m --) {if (m = 0) {this. checksnkehitfood (this. snail Kes [m]. run ();} else {this. snail Kes [m]. x = this. snail Kes [m-1]. x; this. snail Kes [m]. y = this. snail Kes [m-1]. y; this. snail Kes [m]. direction = this. snail Kes [m-1]. direction; this. checksnkehitfood (this. snail Kes [m]. draw () ;}} greedy snakes eat food: collision Check, traverse and judge the x and y coordinates of each section and the food. 2. Tanks: (similar to a greedy snake, both drawing and refresh) GameController: game control class, main class, game collision, timed re-painting, etc. Bullet: Bullet class. Bomb: Bomb type. Tank: Hero, the base class of Enemy, including their common attributes; inheritance mainly uses the call ()/apply () methods. Hero: Hero class, (drawing and moving change x and y coordinates respectively in four directions) Enemy: Enemy class 3. Typing games: (the principle is similar, but the logic is a little more complex, only one simple introduction can be made here.) The generation of letters (Math. random () * (upper limit-lower limit + 1) + lower limit, generate a random number between {upper limit, lower limit ): the ascii code corresponding to English a-z is between {64, 91}, and Math is used. random () * (64-91 + 1) + 91 to get a random ascii code value, and then use String. fromCharCode (ascii Code) (is this method unknown to js enthusiasts ?) Obtain the corresponding letters. Bullet tracking (for example): calculates the angle based on the distance between A and B in the horizontal and vertical directions, and then calculates the distance between A and x based on the speed and angle, Y axis. (Trigonometric function calculation)