Creating a full record of tank battles with javascript (1)_javascript skills

PS: This tank battle was rewritten by myself after downloading a piece of source code online. There is nothing too difficult in itself. This case uses js object-oriented better and can be used as an introductory tutorial for js object-oriented.

1. Create basic objects to realize simple movement of tanks

1.1 How to draw canvas in the map?

Taking into account the issue of browser compatibility, we use the method of operating dom to realize the drawing and refreshing of game objects. How do we store our map? We should save the map in a two-dimensional array. There is no two-dimensional array in js, but it can be achieved by storing the array in a one-dimensional array.

1.2 Code Implementation

We design the canvas as a two-dimensional array of 13 * 13. The corresponding length and width of each element in the map are both 40px. The entire map can be regarded as a cell composed of 40px*40p x size. table, then the size of our entire canvas is 520px * 520px;

Before loading the code, let me give you an object relationship diagram:

1.2.1 Create top-level objects

html code:

Copy code The code is as follows:

<script><br />             window.onload = function () {<br />                                                                                     // Call the game loading object <br />             var loader = new GameLoader();<br /> Loader.Begin();<br />          }<br /> </script>

TankObject.js file:

Copy code The code is as follows:

// Top-level object
TankObject = function () {
This.XPosition = 0; // The X position of the object in the map (13*13)
This.YPosition = 0;
This.UI = null; // dom element
}
//Change UI static method
TankObject.prototype.UpdateUI = function (battlFiled) { }
//Set the position, the parameters are as follows: 1*40,6*40
TankObject.prototype.SetPosition = function (leftPosition, topPosition) {
// Math.round at the map location
This.XPosition = Math.round(leftPosition / 40);
This.YPosition = Math.round(topPosition / 40);
//Set the position on the form
If (this.UI != null && this.UI.style != null) {
This.UI.style.left = leftPosition "px";
This.UI.style.top = topPosition "px";
}
}

Here we use X, Y coordinates to represent the location of the object on the map. Later we will put each object in the map into a two-dimensional array. At this time, we can obtain the corresponding object through the X and Y coordinates.
Then use left and top in css to control the position of our object in the form. (movable objects: tanks, bullets)

1.2.2 Create public objects

We also need to create a public object to write some of our commonly used methods.

Common.js：

Copy code The code is as follows:

//Four directions of tank movement
var EnumDirection = {
Up: "0",
Right: "1",
Down: "2",
Left: "3"
};
//General method object
var UtilityClass = {
//Create dom element into parentNode, you can specify id, className
CreateE: function (type, id, className, parentNode) {
          var J = document.createElement(type);
If (id) { J.id = id };
If (className) { J.className = className };
          return parentNode.appendChild(J);
}, // Remove element
​ RemoveE: function (obj, parentNode) {
         parentNode.removeChild(obj);
},
GetFunctionName: function (context, argumentCallee) {
for (var i in context) {
If (context[i] == argumentCallee) { return i };
}
         return "";
}, // Bind the event and return the func method, this is the incoming obj
BindFunction: function (obj,func) {
         return function () {
                func.apply(obj, arguments);
        };
}
};

1.2.3 Creating moving objects

Mover.js

Copy code The code is as follows:

//Move object, inherited from top-level object
Mover = function () {
This.Direction = EnumDirection.Up;
This.Speed ​​= 1;
}
Mover.prototype = new TankObject();
Mover.prototype.Move = function () {
If (this.lock) {
             return;/* Deactivated or still in progress, the operation is invalid */
}
//Set the background image of the tank according to the direction
This.UI.style.backgroundPosition = "0 -" this.Direction * 40 "px";
// If the direction is up and down, vp is top; if the direction is up and left, val is -1
var vp = ["top", "left"][((this.Direction == EnumDirection.Up) || (this.Direction == EnumDirection.Down)) ? 0 : 1];
var val = ((this.Direction == EnumDirection.Up) || (this.Direction == EnumDirection.Left)) ? -1 : 1;
This.lock = true;/* Lock */
//Save the current object to This
var This = this;
//Record the starting position of object movement
var startmoveP = parseInt(This.UI.style[vp]);
var xp = This.XPosition, yp = This.YPosition;
var subMove = setInterval(function () {
                          // Start moving, 5px each time
This.UI.style[vp] = parseInt(This.UI.style[vp]) 5 * val "px";
                      // Move one cell at a time 40px
If (Math.abs((parseInt(This.UI.style[vp]) - startmoveP)) >= 40) {
                 clearInterval(subMove);
This.lock = false;/* Unlock, allow stepping again */
// Record the position of the object in the table after moving
This.XPosition = Math.round(This.UI.offsetLeft / 40);
This.YPosition = Math.round(This.UI.offsetTop / 40);
         }
}, 80 - this.Speed ​​* 10);
}

The move object here inherits from our top-level object, and this here represents the object that calls the Move method.
The function of Move object moves according to the direction and speed of the object. Each time it moves 5px, it moves a total of 40px one cell. This object will be expanded later, and functions such as collision detection will be added.

1.2.4 Create tank object

Tank.js file:

Copy code The code is as follows:

//tank object inherited from Mover
Tank=function(){}
Tank.prototype = new Mover();

//Create a player tank, inherited from the tank object
SelfTank = function () {
This.UI = UtilityClass.CreateE("div", "", "itank", document.getElementById("divMap"));
This.MovingState = false;
This.Speed ​​= 4;
}
SelfTank.prototype = new Tank();
//Set the tank's position
SelfTank.prototype.UpdateUI = function () {
This.UI.className = "itank";
// Top-level object method, set the position of the tank
This.SetPosition(this.XPosition * 40, this.YPosition * 40);
}

Now only player tanks have been created, and we will add enemy tanks to them later.

1.2.5 Create game loading object (core)

Copy code The code is as follows:

// Game loading object The core object of the entire game
GameLoader = function () {
This.mapContainer = document.getElementById("divMap"); // The div
that stores the game map This._selfTank = null; // Player tank
This._gameListener = null; // Game main loop timer id
}
GameLoader.prototype = {
Begin: function () {
// Initialize player tank
        var selfT = new SelfTank();
            selfT.XPosition = 4;
            selfT.YPosition = 12;
            selfT.UpdateUI();
This._selfTank = selfT;
                           // Add key event
          var wrapper = UtilityClass.BindFunction(this, this.OnKeyDown);
             window.onkeydown = document.body.onkeydown = warpper;
           warpper = UtilityClass.BindFunction(this, this.OnKeyUp);
            window.onkeyup = document.body.onkeyup = warpper;
                    // Game main loop
           warpper = UtilityClass.BindFunction(this, this.Run);
/*Long timer monitoring control key*/
This._gameListener = setInterval(warpper, 20);
}
// Press the keyboard and the player tank starts moving
, OnKeyDown: function (e) {
switch ((window.event || e).keyCode) {
case 37:
This._selfTank.Direction = EnumDirection.Left;
This._selfTank.MovingState = true;
                            break;                                                                   case 38:
This._selfTank.Direction = EnumDirection.Up;
This._selfTank.MovingState = true;
                       break;                                                         case 39:
This._selfTank.Direction = EnumDirection.Right;
This._selfTank.MovingState = true;
                              break;                                                        case 40:
This._selfTank.Direction = EnumDirection.Down;
This._selfTank.MovingState = true;
                          break;          }
}
// The button pops up to stop moving
, OnKeyUp: function (e) {
switch ((window.event || e).keyCode) {
case 37:
case 38:
case 39:
case 40:
This._selfTank.MovingState = false;
                  break;
         }
}
/*Game main loop running function, the heart and hub of the game*/
, Run: function () {
If (this._selfTank.MovingState) {
This._selfTank.Move();
         }
}
};

The game loading object code seems to be a lot, but it actually does two things:
​ ​ 1. Create a player tank object.
​ ​ 2. Add a key listening event. When the player presses the movement key, the tank Move method is called to move the tank.

Summary: At this point our tank can move freely by pressing buttons. Next we need to improve the map and collision detection.