PS: This tank war is under the Internet a section of the source code, their own rewriting. itself is not too difficult things, this case will be JS object-oriented better, can be used as a JS object-oriented tutorial.
1. Create the basic object, realize the simple movement of the tank
1.1 How do I draw a canvas on a map ?
In view of the browser compatibility problem, we use the method of manipulating Dom to achieve the drawing and refreshing of the game objects. How do we store our maps? We should save the map in a two-dimensional array, and there is no two-dimensional array in JS, but it can be achieved by storing arrays in one-dimensional arrays.
1.2 Code implementation
We design the canvas as a two-dimensional array of 13 * 13, each element in the map corresponding to the length and width of 40px, you can take the entire map as a 40px*40p x size of the cell form a table, then our entire canvas size is 520px * 520px;
Before the code, we'll give you an object diagram:
1.2.1 Create top-level objects
HTML code:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" >
<title> Tank Wars </title>
<link rel=stylesheet href= "Css/main.css"/>
<script src= "Js/common.js" ></script>
<script src= "Js/tankobject.js" ></script>
<script src= "Js/mover.js" ></script>
<script src= "Js/tank.js" ></script>
<script src= "Js/frame.js" ></script>
<script>
Window.onload = function () {
Call Game Mount Object
var loader = new Gameloader ();
Loader. Begin ();
}
</script>
<body>
<!--map Container-->
<div id= "Divmap" >
</div>
<div id= "Debuginfo" >
</div>
</body>
Tankobject.js file:
Copy Code code as follows:
Top-level objects
Tankobject = function () {
This. xposition = 0; The position of x in the map (13*13) of the object
This. yposition = 0;
This. UI = null; DOM element
}
To change the UI static method
TankObject.prototype.UpdateUI = function (battlfiled) {}
Set position, the argument is this: 1*40,6*40
TankObject.prototype.SetPosition = function (Leftposition, topposition) {
Math.Round rounding at the location of the map
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 the x,y coordinates to represent the position of the object on the map. We will put each object in the map in a two-dimensional array, then we can get the corresponding object by x,y coordinates.
Then use the left and top of the CSS to control the position of our objects in the form. (objects that can be moved: tanks, bullets)
1.2.2 Create a Common object
We also need to create a common object to write some of our common methods.
Common.js:
Copy Code code as follows:
Four directions of the tank movement
var enumdirection = {
Up: "0",
Right: "1",
Down: "2",
Left: "3"
};
Common Method objects
var Utilityclass = {
To create a DOM element into parentnode, you can specify the 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 "";
},//binding event, returns the Func method, this is the passed-in obj
Bindfunction:function (Obj,func) {
return function () {
Func.apply (obj, arguments);
};
}
};
1.2.3 Create a Move object
Mover.js
Copy Code code as follows:
Moving objects, inheriting from top level objects
Mover = function () {
This. Direction = Enumdirection.up;
This. Speed = 1;
}
Mover.prototype = new Tankobject ();
Mover.prototype.Move = function () {
if (This.lock) {
return;/* inactive or still in step, invalid operation *
}
Set the tank background picture according to the direction
This. UI.style.backgroundPosition = "0-" + this. Direction * + "px";
If the direction is up and down, the 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 object Move start position
var Startmovep = parseint (THIS.UI.STYLE[VP]);
var xp = this.xposition, YP = this.yposition;
var submove = setinterval (function () {
Start moving, 5px per move
THIS.UI.STYLE[VP] = parseint (THIS.UI.STYLE[VP]) + 5 * val + "px";
Move one cell 40px at a time
if (Math.Abs (parseint (THIS.UI.STYLE[VP)-STARTMOVEP)) >= 40) {
Clearinterval (Submove);
This.lock = false;/* unlock, allow to step in again * *
Record the position of the object in the table after it has been moved
This.xposition = Math.Round (THIS.UI.OFFSETLEFT/40);
This.yposition = Math.Round (THIS.UI.OFFSETTOP/40);
}
}, 80-this. Speed * 10);
}
The moving object here inherits from our top-level object, here this represents the object calling the Move method.
The Move object's function moves according to the direction and speed of the object, moving 5px in total to move 40px a cell at a time. This object will also be extended to include collision detection and other functions.
1.2.4 Create Tank objects
Tank.js file:
Copy Code code as follows:
Tank object inherits from mover
Tank=function () {}
Tank.prototype = new Mover ();
Create player tank, inherit from 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 position of the tank
SelfTank.prototype.UpdateUI = function () {
This. Ui.classname = "Itank";
Top object method, setting tank position
This. SetPosition (this. XPosition *, this. YPosition * 40);
}
Now only the player tank is created and we will add enemy tanks to the rear.
1.2.5 Create game Mount Object (CORE)
Copy Code code as follows:
Game Load Object The whole game's core object
Gameloader = function () {
This.mapcontainer = document.getElementById ("Divmap"); The div that holds 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 warpper = 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 Monitor Control key
This._gamelistener = SetInterval (Warpper, 20);
}
The keyboard presses the player tank and starts moving.
, Onkeydown:function (e) {
Switch ((window.event | | e). keycode) {
Case 37:
This._selftank.direction = Enumdirection.left;
This._selftank.movingstate = true;
Break Left
Case 38:
This._selftank.direction = Enumdirection.up;
This._selftank.movingstate = true;
Break On
Case 39:
This._selftank.direction = Enumdirection.right;
This._selftank.movingstate = true;
Break Right
Case 40:
This._selftank.direction = Enumdirection.down;
This._selftank.movingstate = true;
Break Under
}
}
Press the key 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 cycle run function, the heart of the game, hub * *
, Run:function () {
if (this._selftank.movingstate) {
This._selftank.move ();
}
}
};
The game load object code looks a lot, actually does two things:
1, create the player tank object.
2, add key to monitor the event, when the player press the move key to invoke tank move method mobile tank.
Summary: Here our tanks can be moved freely by pressing the buttons. Next we need to improve the map and collision detection.
