Share several native javascript object-oriented design games

Source: Internet
Author: User

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)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.