Create tank wars with javascript object-oriented (4)

Create tank wars with javascript object-oriented (4)
We still have an important feature. That's right, the creation of the enemy tank and the collision detection function when the bullet hits the enemy tank. 5. Create an enemy tank to complete shell collision detection 5.1 create an enemy tank object. The enemy tanks are the same as the player tanks and are also inherited from our tank objects. So we are in Tank. write the following code in js: Copy code 1 // enemy tank object 2 EnimyTank = function () {3 this. direction = EnumDirection. down; 4 this. bombNum = 1; 5 this. UI = UtilityClass. createE ("div", "", "etank", document. getElementById ("divMap"); 6 this. UI. style. backgroundPosition = "0-" + this. direction * 40 + "px"; 7 8} 9 10 EnimyTank. prototype = new Tank; copy the code and create an enemy Tank when the game loads objects to initialize the game. 1 var enimyT1 = new EnimyTank (); 2 enimyT1.XPosition = 0; 3 enimyT1.YPosition = 0; 4 enimyT1.UpdateUI (this. _ battleField); 5 this. _ enimyTanks. push (enimyT1); 5.2 the enemy tank was moved and the shell tank was created. How can we make it move? It's easy. You just need to add an enemy tank moving and launching method to our game loading object and call it in the Run main loop. Code: Copy code 1 for (var I = 0; I <this. _ enimyTanks. length; I ++) {2 3 if (this. _ enimyTanks [I] instanceof Mover) {4 this. _ enimyTanks [I]. move (this. _ battleField); 5 if (Math. random () * 100 <5) {this. _ enimyTanks [I]. shot (this. _ battleField)};/* 5% probability of launching shells */6} 7} copy the code OK. Now our tanks can move and launch shells normally. However, we found that the direction of tank movement would not change, so we still need a small process. Add the following code to the Move method of our Mover object, so that the enemy tank can change the direction randomly. 1 // The enemy tank has a 30% probability of changing the direction. 2 if (this instanceof EnimyTank) & Math. random () * 100> 30) {3 this. direction = parseInt (Math. random () * 4); 4} before the 5.3 shell collision detection, our shell collision detection only included the obstacle detection, so we also need to add shells to the tank collision situation. The implementation idea is very simple. When our bullets pass through the open space or grass (two kinds of terrain where tanks can stay), we can check whether the occupied object of the map is a tank. Code: Bomb. js: Copy code 1 // if the next one is grass or open space 2 else if (nextObj. obj instanceof EmptyB | nextObj. obj instanceof TodB) {3 // The gamer shells hit the enemy tank 4 if (nextObj. occupier instanceof EnimyTank & this. owner instanceof SelfTank) {5 UtilityClass. removeE (nextObj. occupier. UI, document. getElementById ("divMap"); 6 nextObj. occupier. UI = null; 7 GameLoader. prototype. _ enimyTanks. pop (); 8 nextObj. occupier = null; 9} // hit the enemy shell Home tank 10 else if (nextObj. occupier instanceof SelfTank & this. owner instanceof EnimyTank) {11 // UtilityClass. removeE (nextObj. occupier. UI, document. getElementById ("divMap"); 12 // nextObj. occupier = null; 13} 14} copy the Code. At this time, we will find that when the player's shells hit the enemy, the enemy tank will randomly occupy one of the four directions of the cell. What is the cause? We can think about it. When our shells hit the enemy, he may be moving. At this time, we removed him, but his step-by-step method will continue to be executed. Don't forget, we use setInterval, so he will step to the next cell. At this time, the tank object is removed, but the occupied space is still in use, and there will be problems. The solution is very simple. When we set the UI of the tank to null when removing the tank, we determine that the UI value of the tank is null before the step, we can stop the step. The code is simple: Copy code 1 if (This instanceof EnimyTank) {2 // if the enemy tank is destroyed, stop stepping 3 if (This. UI = null) {4 clearInterval (subMove); 5} 6} copy code over 5.4 enemy tank solutions at this time we also found a serious problem: our enemy tanks are an array stored in game loading objects. When we destroy enemy tanks, we do not know which tanks should be removed from them. In fact, the solution to this problem is quite simple: when initializing the enemy tank, give him an attribute to store his index in the array. When the tank object needs to be eliminated, we can simply remove it based on the index. 1. initialize the storage index enimyT1.index = this. _ enimyTanks. length; 2. Extend the Prototype Method to the Array and remove the Array at the specified position. Copy code 1 Array. prototype. removeAt = function (index) {2 var arr = [], j = 0; 3 // traverses the array and filters elements at the specified position 4 for (var I = 0; I <this. length; I ++) {5 if (I! = Index) {6 arr [j ++] = this [I]; 7} 8} 9 return arr; 10} copy code 3. modify the code that shells hit the enemy. Copy code 1 // The Player shells hit the enemy tank 2 if (nextObj. occupier instanceof EnimyTank & this. owner instanceof SelfTank) {3 UtilityClass. removeE (nextObj. occupier. UI, document. getElementById ("divMap"); 4 nextObj. occupier. UI = null; 5 var arr = GameLoader. prototype. _ enimyTanks. removeAt (nextObj. occupier. index); 6 // reset the tank index 7 for (var I = 0; I <arr. length; I ++) {8 arr [I]. index = I; 9} 10 GameLoader. prototype. _ enimyTan Ks = arr; 11 nextObj. occupier = null; 12} copy the code. Here is a code to reset the index. You may not understand why. When we remove a tank, the number of elements in the array changes, so the original array index may fail. So we just need to reset it and it will be OK.