This article mainly introduces the key points, problems, and implementation code of the javascript simulated tank war game. If you need it, you can refer to the next section to summarize the key points and problems.
1. Inheritance in javascript. It is recommended that the parent class only provide method sharing, and the attributes should be written to the Child classes of the parent class and the constructor of the Child classes.
2. prototype simulate inherited code, which should be written before the definition of all methods. Otherwise, if the prototype object is changed, the method becomes undefined, for example:
The Code is as follows:
Hero. prototype = new Tank (0, 0, 0 );
Hero. prototype. constructor = Hero;
Hero. prototype. addLife = function (){
This. lifetimes ++;
Document. querySelector ("# life"). innerHTML = hero. lifetimes;
}
3. When painting a chart on the canvas, ctx. beginPath (); and ctx. closePath (); must be added to all other elements except the rectangle. Otherwise, unexpected errors may occur.
4. The concat function can merge arrays, or the element returns a new array.
5. After the src attribute of the Image is assigned a value, the Image will be loaded. However, if the Image is not loaded, it will become invalid. Therefore, onload event processing is used.
6. Extend the Array Function to delete specified elements.
The Code is as follows:
// Extended deletion of specified elements
Array. prototype. deleteElement = function (obj ){
If (obj ){
For (var I = 0; I <this. length; I ++ ){
If (this [I] === obj ){
This. splice (I, 1 );
}
}
}
}
7. timer settings, the first parameter of the setInterval ("fun", 1000) method, can be a string, such as "hero. say () ", similar to eval, this code string will be executed, so it can add parameters to the function and specify the running context of the function. However, if the input is a function handle, the parameter cannot be included and the context cannot be specified. Apart from the first solution, I used a closure to solve this problem.
The Code is as follows:
// Timer, self-Motion
This. timer = setInterval (function (context ){
Return function (){
Bullet. prototype. move. call (context)
}
}) (This), 30 );
I saved the current execution environment and called the call Method for manual execution.
8. Function Design of the method should include the condition detection for executing this function, except for the function. For example, if you move the method, it should include the circumstances in which it can be moved and the place where it can be moved will not be moved. This check should not be performed externally.
9. When writing code, you should not design or optimize the problem. First, implement the function, then optimize it, or design and then implement it. The train of thought should be clear, don't be confused, and focus on one point.
10. There is no sleep function in javascript. You can create a variable as a buffer to achieve the purpose of executing the variable at intervals.
Ii. Code Implementation
1.this program is divided into bomb.js, bullet.js, draw.js, tank.js, index.html, img, music,
2. Final Results
3. Code
1.index.html
The Code is as follows:
