A JS mini-game----Summary

Spent about a day or so to achieve a JS mini-game basic functions, similar to the "thunder" like the small game, the realization of the monster generator, collision detection, movement and so on have been realized, the next feature is the bullet trajectory, there are some other expansion features, no library, and no use of WebGL, Simple logic + The operation of the DOM is a hackers bar, the reason is not to continue to improve, is because want to integrate, each module to be clearer, the general design is according to MVC, but the controller that piece is not satisfied, the design process is more proud of the collision detection Bar, Because I used an array to maintain the life and death of the Monster, the monster produced the array push, the monster disappears with splice to remove from the array, to pay attention to use splice instead of Delete, some people may save the diagram with delete, it is wrong, will cause sparse array, wasting a lot of performance, And the length of the array is also limited, the array is too long to eat performance. Each monster is an object with an ID (total), indicating that it is the first of several monsters from the beginning of the game, which is the ID of the monster element in the DOM, It is convenient for us to use document.getElementById to select it and then control, the operation Dom should only be in the update view when the operation, but collision detection also requires the location of the monster, so this object also maintains a monster's horizontal ordinate, this can make logic clearer. Then there's the movement, and the motion in the DOM is changing the pixels, and here I'm using setinterval, a total of two sets that correspond to the mob's movement and the Spawn of monsters.

That's probably how it works. Here are some pits, of course, the first thing to say is that you use document.getElementById ("") when you manipulate the DOM. Style.csstext get a string similar to "192px", and you want to modify the 192, And then change it to a string to re-assign the value back, to achieve the purpose of the change, of course, you can also send a number back, the browser will automatically help you to change the string, but this is not very certain, for example, you use document.getElementById (""). Style.top, this will cause an error.

And this is just a small game, so my style sheet is written directly between the style tag, if you use link to change the style is to note that the JS function to modify the external style sheet is not consistent in each browser, I will be in the subsequent library package.

On the above just said to the "192px" this string into a number, in addition to using the array method in fact, the best use of parseint, previously only parseint into the conversion, this usage is still recently noticed

When JS changes or generates DOM elements, if it is a block-level element to pay special attention to its position, set the wrong, the view may look very unusual

Here is the place to improve, the first one is to be more modular

Second, control movement in such as forward suddenly upward, this switch is not very smooth, this temporarily has no good idea to improve

Third, try to consider the reuse of code

IV, add function

A JS mini-game----Summary