A summary of the thoughts and problems of aircraft war game

At the beginning of this game, I do not know how to start, the idea is very messy, can not looking at the overall situation. such as ineffective, can't grasp the main points, not penetrate the true meaning. A few days down, under the guidance of the teacher, basically completed a simple function, and now review the process of experience and the problems encountered, hope to be helpful.

I. Ideas

1. Page layout
-There are two interface, start interface and game interface, two big div: Start interface div has start background image, there is a Start button, the suggestion button wrapped in a div, convenient positioning; The game interface has its background image with a score div, There is also a pause div containing the Continue button and the Restart button as well as the result score.
-CSS div Best is absolute positioning, convenient to get coordinates later, two large div can be a div package, this div does not need to set the width of the height, just the absolute positioning can, of course, do not have outer package.
-The start interface and the game interface div width are consistent, the game interface settings display is none, where the pause Div also needs to be set to hide.

The basic layout is complete, and the other styles are set to your liking.

2.javascript implementations

-The game interface has our aircraft, bullets and enemy aircraft, which should be ready before the Start button click. This requires a constructor, encapsulation method. Create airplane class, attributes have picture path, exploded picture path, picture width height, coordinates, score and blood volume,

-The enemy object inherits the properties of the aircraft function, adding a moving property
-Bullet properties like enemy aircraft, are randomly generated
-Construction Complete
-generation of our aircraft objects
-Create a central point function that keeps the mouse position in our aircraft:

MyPlane.imageNode.style.left = cx-myplane_width/2 + "px"; myPlane.imageNode.style.top = cy-myplane_heigtht/2 + "px";

To avoid aircraft crossing the border, you need to determine the location of the Cx,cy
-  the method in the write timer
 -  background image Move Down: change its y-coordinate value until it completely runs out of Div, set Y to 0, and cycle. ' MainDiv.style.backgroundPosition = "0px" + bgpositiony + "px"; '
 -  bullet generation: When our aircraft status is true, the produced bullets are placed in the array, Easy traversal and destruction, bullet generation speed can be set by itself
 -  bullets move destroy: Iterate through the array, call the Move method, when the bullet top value exceeds a certain value, remove the bullet picture node, and remove the corresponding object from the array, because after removal, the array bidding clubs changes, Need to let subscript-1
 -  enemy aircraft generation and movement: class bullets, the difference is that there are 3 kinds of enemy aircraft, the need to set the speed of the enemy aircraft generation, in addition to the location of the enemy aircraft is random, need to use the maths.random ();
 -  destruction of enemy aircraft: two cases: 1.top value out of bounds, 2. After the enemy plane collides with the bullet, it also delays the explosion time
 -  collision: Enemy aircraft and our local collision, game over, pop up the restart box, Traverse the array of enemy aircraft to determine whether the top and left values are equal, is to replace the picture of the plane as an exploded picture, change the state of the aircraft, clear the timer, pop pause Div, but continue to disable
 -  collision: Bullets and enemy aircraft destroyed after the collision, and calculate the score, Traversing the array of bullets and enemy planes, the enemy's blood volume decreased to 0, scoring, replacing enemy aircraft pictures as exploded pictures, change the enemy plane status, remove bullets, interrupt traversal.

-  Start button to display the game interface, turn on the timer: Hide the Start screen, display the game interface, turn on the timer
-  to resolve the IE compatibility method
    

 function Add (OBJ,TYPE,FN) {if (document.attachevent) {OBJ.A        Ttachevent ("On" + Type, fn);        }else if (document.addeventlistener) {Obj.addeventlistener (type,fn,false);        }} function Remove (OBJ,TYPE,FN) {if (document.detachevent) {obj.detachevent ("on" + Type, fn);        }else if (document.removeeventlistener) {Obj.removeeventlistener (type,fn,false); }      }

 -  Create click-to-Play interface pause and pop-up continue box function
 -  Create click Continue button to continue the current game function: To block event flow ev.stoppropagation ();
 -  Add event  
    add (Maindiv, "MouseMove", MouseMove);//Add mouse move event
     add (Maindiv, "click", Mainclick);//Add mouse click on div to pause the event
    add (CONTINUEBTN, " Click ", Conclick);//Add the Continue button clicking on the event
-  Click the Refresh screen to go back to the start interface ' Window.location.reload (); '  

Two. Some questions

1. The enemy aircraft, especially the big planes, will flash when they are produced, and the flash will disappear.
Cause: The number of frames. The
-  frame count is the amount of pictures transmitted in 1 seconds, or it can be understood that the graphics processor can refresh several times per second, usually expressed as FPS (Frames per Second). Each frame is a stationary image, and a fast and continuous display of frames creates the illusion of motion. The high frame rate allows for smoother, more realistic animations. The higher the number of frames (fps), the smoother the displayed action will be. However, the file size will become larger.
-  Game Frames: The number of frames that the game runs per second (fps,frames per Second) and the video, the larger the FPS, the more smooth the video on the screen, until a critical point (about 100FPS), exceeds this critical point, The higher FPS is just an amazing value, and the 400FPS and 100FPS are almost no different in human vision. The general game is about 40 fps can be called fluent. In the case of the
- 30 frame, 33ms is displayed per frame, and the response limit is approximately 100ms. 60 frames, 16ms per frame, the response limit is about 50ms.
-  I set the timer time is 100ms, large aircraft generation speed I set more slowly than other aircraft, it is obvious to see flashing
-  Most of the movie frames only 24 frames per second, you can smooth

2. Event Flow Impact

         function Conclick (e) {        var ev = e | | window.event;        PauseDiv.style.display = "None";        MyPlane.imageNode.style.display = "block";        Ev.stoppropagation ();        Add (Maindiv, "MouseMove", MouseMove);        EndTimer =  Window.setinterval (main_loop, +);       }

When creating the Continue button click event, I did not block the stream of events, ' PauseDiv.style.display = ' none '; ' The effect of this sentence has not been realized, but the timer has been successfully started, I do not know why, and later thought it was, I used the bubble method, The continuation button is in the Pausediv, Pausediv is in the Maindiv, and the maindiv happens to have a click event, does not block the event stream, it will spread outward, triggering maindiv click events, resulting in the pausediv can not be hidden.   

         function Conclick (e) {        var ev = e | | window.event;        PauseDiv.style.display = "None";        MyPlane.imageNode.style.display = "block";        Ev.stoppropagation ();        Add (Maindiv, "MouseMove", MouseMove);        EndTimer =  Window.setinterval (main_loop, +);       }

When creating the Continue button click event, I did not block the stream of events, ' PauseDiv.style.display = ' none '; ' The effect of this sentence has not been realized, but the timer has been successfully started, I do not know why, and later thought it was, I used the bubble method, The continuation button is in the Pausediv, Pausediv is in the Maindiv, and the maindiv happens to have a click event, does not block the event stream, it will spread outward, triggering maindiv click events, resulting in the pausediv can not be hidden.

  function Mainclick () {        clearinterval (endtimer);         = "None";         = "Block";        Remove (Maindiv,"MouseMove", MouseMove);    }

3. After this project, it was found that the construction object, the encapsulation method is very important, but also very convenient.

4. Define constants and use fewer digits, i.e. magic number
-In the source code, there is a situation: the coder when writing the source code, using a number, such as 0x2123,0.021f, he was to understand the meaning of the figure, but other programmers look at his code, it may be difficult to understand, even, after a period of time, The author of the Code also forgets what the figure means when he looks at the code himself.
-The use of magic numbers in programming is a bad habit and should be avoided in development.
-Poor code readability, inconvenient to modify
-The way to solve the magic numbers is to define these numbers as constants, or enum types, or use the compiler's macro definitions (e.g., C + + # define)

A summary of the thoughts and problems of aircraft war game