The examples in this article share with you the specific code of the JS implementation of the Tank War game for your reference. The specific content is as follows
<!DOCTYPE html>
<html>
<head>
<title>tank</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
border: 0px;
}
.map {
position: absolute;
top: 30px;
width: 390px;
height: 390px;
left: 50%;
margin-left: -200px;
border: 9px solid orange;
background-color: #8B8989;
}
.mapchild {
position: absolute;
background-size: cover;
}
#ifo {
position: absolute;
top: 30px;
width: 418px;
height: 418px;
left: 50%;
margin-left: -200px;
color: green;
text-align: center;
background-color: #FAEBD7;
z-index: 10;
}
</style>
</head>
<body>
<div >
<h1 ></h1>
<h3>Key instructions：</h3>
T：Start the game(Invalid after the game starts)<br/>
P:Pause the game<br/>
W、S、A、D：superior、Down、Left、right<br/>
ENTER：Fire bullets<br/>
</div>
</body>
<script type="text/javascript">
//Definition of constants and global variables------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- const TANK_W = 30;
const TANK_H = 30;
const MAP_W = TANK_W * 13;
const MAP_H = TANK_H * 13;
const BULLENT_W = 7.5;
const BULLENT_H = 7.5;
const WALL_W = 15;
const WALL_H = 15;
const BULLENT_FREQ = 30;
const TANK_FREQ = 200;
const TANK_STEP = 7.5;
//The current file is the same directory const IMG_PATH = "tankImage/";
const MUSIC_PATH = "tankMusic/";
// 87=W;83=S;65=A;68=D
const KEYCODE_U = 87;
const KEYCODE_D = 83;
const KEYCODE_L = 65;
const KEYCODE_R = 68;
//Tank movement does not respond const NORESPONSEFIRETIME = 200;
const NORESPONSETANKMOVETIME = TANK_FREQ + 100;
//Our tanks open fire and move noresponseFire = false;
noresponseTankMove = false;
//Game Status state = "READY";
//frequency frequency
//Object id var tank_id = 0;
var bullent_id = 0;
var wall_id = 0;
//Total number of enemy tanks var emTankNum = 20;
var meTankNum = 3;
//Our tank object var mytank = null;
var tankArray = new Array();
var bullentArray = new Array();
//Because functional bricks overlap with ordinary static bricks, they must be stored separately var functionWallArray = new Array();
// Map width=390, the smallest still life wall width height in the map = 15, so the one-dimensional and two-dimensional array are 390/15=26 //Declare one dimension first var noMoveArray = new Array(4);
for (var i = 0; i < MAP_W / WALL_W; i++) {
//One-dimensional length noMoveArray[i] = new Array();
//Declare the second dimension again for (var j = 0; j < MAP_H / WALL_H; j++) {
//Two-dimensional length noMoveArray[i][j] = null;
}
}
//Constant and global variables complete---------------------------------------------------------------------------------------------------------------------
//Object definition ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
//Tank object tank = function(selfType, x, y, belongs, dir) {
//Common attributes = "tank_" + tank_id++;
= "tank";
// selfType can be used to represent 1, 2, and 3 as a class of tank, 2, and 3 as a class of tank, 3 as a class of tank. = selfType;
= x;
= y;
= belongs;
= dir;
= TANK_W;
= TANK_H;
= ;
//Because the img of the tank is related to the direction, every time the dir is changed, it will affect the img, so set an object function to obtain = function() {
return img = + "Tank" + + ;
}
//The value of setInterval of the self-moving function of the enemy tank is t ;
createDOM(, , , , , (), 2);
//Save the generated tank object into the mobile object array (this);
if (belongs == "me") {
mytank = this;
meTankNum--;
}
//The enemy tank calls the self-movement function if ( == "em") {
emTankNum--;
//Detect whether functional bricks are needed to be generated createFunctionWall();
autoMove(this);
}
}
//Bullet object bullent = function(selfType, x, y, belongs, dir) {
//Play the bullet-firing music playMusic("fire");
//Common attributes = "bullent_" + bullent_id++;
= "bullent";
= selfType;
= x;
= y;
= belongs;
= dir;
= BULLENT_W;
= BULLENT_H;
//To be consistent with the tank's img, an object function is also set to obtain = function() {
return img = ;
}
//Only owned attributes of bullets and enemy tanks, self-moving timer ;
createDOM(, , , , , (), 1);
//Save the generated bullet object into the moving object array (this);
autoMove(this);
}
//Wall object wall = function(selfType, x, y, belongs) {
//Common attributes = "wall_" + wall_id++;
= "wall";
//wall, steel, star, timer respectively means that ordinary bricks and bullets cannot break bricks, our nests, and timers respectively = selfType;
= x;
= y;
//belongs values home, ordinary, and function represent bricks, general and functional bricks of the nest respectively. = belongs;
;
;
if ( == "star") {
//Set global variable star star = this;
= TANK_W;
= TANK_H;
} else if ( != "star") {
= WALL_W;
= WALL_H;
}
//To be consistent with the tank's img, an object function is also set to obtain = function() {
return img = ;
}
var zIndex = belongs == "function" ? 3 : 2;
createDOM(, , , , , (), zIndex);
// if(n==13)(this)
//All still lifes in the map are wall type, divided into wall with a length of 15, steel and star with a length of 30; we only need to store 15 specifications, and there is only one star without storage if ( != "function") {
noMoveArray[x / 15][y / 15] = this;
} else {
(this);
}
}
//The object is defined-------------------------------------------------------------------------------------------------------------------------
//DOM object creation and display ------------------------------------------------------------------------------------------------------------------------ //Overall description: 1. In order to facilitate calculation of the width, height, x, and y of all objects, no px units are included in the calculation of the width, height, x, and y of all objects. // Create DOM object function function createDOM(id, width, height, x, y, img, zIndex) {
var map = ("map");
var it = ("div");
= id;
= zIndex;
(it);
showDOM(id, width, height, x, y, img);
}
//Delete the DOM object function function delDOM(id) {
var it = (id);
(it);
}
//Display function, refresh the corresponding DOM according to the attributes of obj function showDOM(id, width, height, x, y, img) {
var it = (id);
= "mapchild";
= "width:" + width + "px;height:" + height + "px;left:" + x + "px;top:" + y + "px;background-image:url('" + IMG_PATH + img + ".gif');";
}
//DoM object creation and display------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
//Object creation and destruction function group-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
//Create a tank function //Because there is an animation in the tank, it cannot be generated directly from new tank //new tank(3,15 * 8,15 * 24,"me","U")
function createTank(selfType, belongs, x, y) {
//Let create animation display first var emTank_x1 = 0
, emTank_x2 = 180;
emTank_x3 = 360;
var emTank_y = 0;
var meTank_x = 15 * 8;
var meTank_y = 15 * 24;
//Because the animation is created to display 3s + destroy 1s, it is necessary to create a tank after 4s //The birth location needs to be detected here to prevent the tank from overlapping if (belongs == "me" && meTankNum != 0) {
animation("born", 15 * 8, 15 * 24);
//Our tank display position is fixed setTimeout(function() {
var mytank = new tank(3,15 * 8,15 * 24,"me","U");
flickerObj();
}, 4500);
}
if (belongs == "em" && emTankNum != 0) {
animation("born", x, y);
//Our tank display position is fixed setTimeout(function() {
var emtank = new tank(1,x,y,"em","U");
flickerObj();
}, 4500);
}
//Judge whether there are tanks at the specified location function isThereHaveTank(x, y) {
if ( == 0) {
return false;
}
for (var i = 0; i < ; i++) {
return tankArray[i].x == x && tankArray[i].y == y;
}
}
}
//Bullet function // Generate a bullet according to the position and direction of the launching tank function createBullent(obj) {
var x, y;
switch () {
case "U":
x = + 0.5 * - 0.5 * BULLENT_W;
y = ;
break;
case "D":
x = + 0.5 * - 0.5 * BULLENT_W;
y = + - BULLENT_H;
break;
case "L":
x = ;
y = + 0.5 * - 0.5 * BULLENT_H;
break;
case "R":
x = + - BULLENT_W;
y = + 0.5 * - 0.5 * BULLENT_H;
break;
}
new bullent("speed",x,y,,);
}
//Delete the object function //Delete the element in html and assign the value in the array to null function delObj(obj) {
if ( != undefined) {
clearInterval();
}
switch () {
case "bullent":
delDOM();
((obj), 1);
break;
case "tank":
if (-- == 0) {
switch () {
case "me":
meTankNum == 0 ? gameOver() : createTank(3, null, null, "me", null);
;break;
case "em":
("Enemy tanks=" + emTankNum)
if (emTankNum == 0) {
("victory");
}
;break;
}
//Call the tank destroy animation animation("blast", , );
delDOM();
delete tankArray[(obj)];
if ( == "me") {
mytank = null;
gameOver();
}
//!=0
} else {
= ;
showDOM(, , , , , ());
}
;break;
case "wall":
if ( == "star") {
img = "destory";
showDOM(, , , , , img);
gameOver();
} else if ( == "function") {
delDOM();
((obj), 1);
} else {
delDOM();
noMoveArray[ / 15][ / 15] = null;
}
;break;
}
}
//Object creation and destruction function group completion -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
//Collision detection and processing------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
//Get static object functions that may collide //When storing still lifes, using a two-dimensional array is equivalent to drawing the map into small grids with spacing 15. All still lifes are in small grids, so given an object, you can get a small grid surrounding it; //This is much faster than traversing the entire noMoveArray function getPossibleCollisionObj(obj) {
var PossibleCollisionObjArray = new Array();
var largeWidth = WALL_W;
var largeHeight = WALL_H;
var x_l = - largeWidth;
var x_r = + largeWidth + ;
var y_u = - largeHeight;
var y_d = + largeHeight + ;
//The map cannot be output on the left, right, and upper and lower sides calculated. if (x_l < 0)
x_l = 0;
if (x_r > MAP_W)
x_r = MAP_W;
if (y_u < 0)
y_u = 0;
if (y_d > MAP_H)
y_d = MAP_H;
for (var i = (x_l / largeWidth); i < (x_r / largeWidth); i++) {
for (var j = (y_u / largeHeight); j < (y_d / largeHeight); j++) {
if (noMoveArray[i][j] != null) {
(noMoveArray[i][j]);
}
}
}
//(PossibleCollisionObjArray);
return PossibleCollisionObjArray;
}
//Collision detection and processing functions function collision(obj) {
//collresult has three values: MOVE, DELETE, NOMOVE; move means that the processing result after detection is to continue to move (even if it encounters, some do not need to be processed), DELETE means that it deletes itself //Because collision detection only exists with moving objects, and the movement function requires collision detection to give the result of whether to move, so the detected object cannot be directly deleted in the collision processing var collresult = "MOVE";
//Single detection of whether the nest is colliding //collresult = isCollision(obj, star) ? gameOver():"MOVE";
//Detection of functional bricks for (var i = 0; i < ; i++) {
if (functionWallArray[i] != null && isCollision(obj, functionWallArray[i])) {
collresult = delColl(obj, functionWallArray[i]);
}
}
//Detection of all still life; it is used to traverse all still life // for (var i = 0; i < ; i++) {
// for (var j = 0; j < noMoveArray[i].length; j++) {
// if (noMoveArray[i][j] != null && isCollision(obj, noMoveArray[i][j])) {
// collresult = delColl(obj, noMoveArray[i][j]);
// }
// }
// }
//Detection of all still life; it uses traversal of possible collisions of still life var PossibleCollisionObjArray = getPossibleCollisionObj(obj);
for (var i = 0; i < ; i++) {
if (isCollision(obj, PossibleCollisionObjArray[i])) {
collresult = delColl(obj, PossibleCollisionObjArray[i]);
}
}
//Detection tank for (var i = 0; i < ; i++) {
//tankArray[i].id != Because the object during detection is obtained through copying, it is the same as the id of a real tank if (tankArray[i] != null && tankArray[i].id != && isCollision(obj, tankArray[i])) {
collresult = delColl(obj, tankArray[i]);
}
}
//Detection of bullets for (var i = 0; i < ; i++) {
if (bullentArray[i].id != && isCollision(obj, bullentArray[i])) {
collresult = delColl(obj, bullentArray[i]);
}
}
return collresult;
}
//Collision detection function isCollision(obj, obji) {
var iscoll;
// Use x_l, x_r, y_u, and y_d to represent the values of left and right up and down respectively var x_l = ;
var x_r = x_l + ;
var y_u = ;
var y_d = y_u + ;
var x_li = ;
var x_ri = x_li + ;
var y_ui = ;
var y_di = y_ui + ;
//The collision occurs on the left and right sides of the object to be detected, and the processing begins (the first collision detection algorithm considers the reverse situation) if (!(x_r <= x_li | x_l >= x_ri | y_d <= y_ui | y_u >= y_di)) {
//(+"collided with "++") iscoll = true;
} else {
iscoll = false;
}
return iscoll;
}
//Collision Handling Function function delColl(obj, obji) {
var collresult;
switch () {
case "bullent":
switch () {
case "tank":
switch () {
case "me":
switch () {
case "me":
collresult = "MOVE";
break;
case "em":
collresult = "DELETE";
playMusic("hit");
animation("blast", , );
delObj(obji);
break;
}
;break;
case "em":
switch () {
case "me":
collresult = "DELETE";
playMusic("hit");
delObj(obji);
break;
case "em":
collresult = "MOVE";
break;
}
;break;
}
break;
case "wall":
switch () {
case "steel":
collresult = "DELETE";
playMusic("hit");
break;
case "wall":
collresult = "DELETE";
playMusic("hit");
delObj(obji);
break;
case "star":
collresult = "DELETE";
playMusic("hit");
delObj(obji);
break;
}
;break;
case "bullent":
switch () {
default:
collresult = "MOVE";
break;
}
;break;
}
;break;
case "tank":
switch () {
case "tank":
collresult = "NOMOVE";
break;
case "wall":
switch () {
case "wall":
case "steel":
collresult = "NOMOVE";
break;
case "timer":
collresult = "MOVE";
timer();
delObj(obji);
break;
case "bomb":
collresult = "MOVE";
bomb();
delObj(obji);
break;
case "stronghome":
collresult = "MOVE";
delObj(obji);
StrongHome();
break;
}
;break;
case "bullent":
switch () {
case "me":
switch () {
case "me":
collresult = "MOVE";
break;
case "em":
collresult = "DELETE";
break;
}
;break;
case "em":
switch () {
case "me":
collresult = "DELETE";
delObj(obji);
break;
case "em":
collresult = "MOVE";
break;
}
;break;
}
;break;
}
;break;
}
//(+" collides with "++" "+" result="+collresult); return collresult;
}
//Collision detection and processing----------------------------------------------------------------------------------------------------------------------
//Tank and Bullet Movement Function -------------------------------------------------------------------------------------------------------------------
//Move function function move(obj, newDir) {
var oldDir = ;
= newDir;
if (state != "RUN") {
// if(!="bullent"){
// return;
// }
return;
}
// If the new direction is the same as the original direction of the tank, then move forward, otherwise change the direction of the tank if ( != oldDir && == "tank") {
showDOM(, , , , , ());
return;
}
var x = 0
, y = 0;
var step = TANK_STEP;
switch () {
case "L":
x = -step;
break;
case "R":
x = step;
break;
case "U":
y = -step;
break;
case "D":
y = step;
break;
}
//Rough deep copy var objString = (obj);
var checkObj = (objString);
+= x;
+= y;
var collresult = collision(checkObj);
//Outbound detection; if ( < 0 || ( + ) > MAP_W || < 0 || ( + ) > MAP_H) {
if ( == "tank") {
showDOM(, , , , , ());
return;
}
if ( == "bullent") {
delObj(obj);
return;
}
//Call collision detection and processing functions to give the movement results } else if (collresult == "MOVE") {
// if(=="tank"){
// movingFrame(obj,,)
movingFrame(obj, , );
// }
// ("Target y="+) = ;
= ;
// if(=="bullent"){
// showDOM(, , , , , ());
// }
// showDOM(, , , , , ());
} else if (collresult == "DELETE") {
delObj(obj);
} else if (collresult == "NOMOVE") {
showDOM(, , , , , ());
//If it is an enemy tank, give it a opposite direction to prevent it from hitting the wall and not turning back if ( == "em" && == "tank") {}
return;
}
}
//Reverse direction function //Return a direction opposite to the input direction function negativeDir(dir) {
switch (dir) {
case "L":
return "R";
break;
case "R":
return "L";
break;
case "U":
return "D";
break;
case "D":
return "U";
break;
}
}
//Automatic moving function //Specially owned by bullet tanks function autoMove(obj) {
// ("Game Status="+state) var itFreq = BULLENT_FREQ;
var itType = ;
var itId = ;
var itDir = ;
if ( == "tank") {
itFreq = TANK_FREQ;
}
= setInterval(function() {
if (itType == "tank") {
var itObj = obj;
var turn = randState();
if (turn == "Fire") {
//(+" "+)
createBullent(itObj);
return;
} else if (turn == "none") {
itDir = ;
} else {
itDir = turn;
}
}
move(obj, itDir);
}, itFreq);
}
//Simplified version of mobile framework //In order to make the movement of the tank smoother; the premise of using a moving frame: any direction change of the tank must be blocked within t time. //Because the processing of js floating point numbers is very complicated, it only satisfies x, y is multiples of 7.5, and step is 7.5 function movingFrame(obj, x, y) {
var objDom = ();
var t = TANK_FREQ;
var x1 = ;
var y1 = ;
var step_x = div(sub(x, x1), t / 10);
var step_y = div(sub(y, y1), t / 10);
var aaa = 1;
var times = 1;
var tank_t = setInterval(function() {
if (times == t / 10) {
clearInterval(tank_t);
}
times++;
x1 = add(x1, step_x);
y1 = add(y1, step_y);
= x1 + "px";
= y1 + "px";
}, 10);
//Addition, subtraction, multiplication and division of floating point numbers
function add(a, b) {
var c, d, e;
try {
c = ().split(".")[1].length;
} catch (f) {
c = 0;
}
try {
d = ().split(".")[1].length;
} catch (f) {
d = 0;
}
return e = (10, (c, d)),
(mul(a, e) + mul(b, e)) / e;
}
function sub(a, b) {
var c, d, e;
try {
c = ().split(".")[1].length;
} catch (f) {
c = 0;
}
try {
d = ().split(".")[1].length;
} catch (f) {
d = 0;
}
return e = (10, (c, d)),
(mul(a, e) - mul(b, e)) / e;
}
function mul(a, b) {
var c = 0
, d = ()
, e = ();
try {
c += (".")[1].length;
} catch (f) {}
try {
c += (".")[1].length;
} catch (f) {}
return Number((".", "")) * Number((".", "")) / (10, c);
}
function div(a, b) {
var c, d, e = 0, f = 0;
try {
e = ().split(".")[1].length;
} catch (g) {}
try {
f = ().split(".")[1].length;
} catch (g) {}
return c = Number(().replace(".", "")),
d = Number(().replace(".", "")),
mul(c / d, (10, f - e));
}
}
//Clean and rebuild functions of tank automatic movement timer //itState means clearing and establishing timer function objTimer(itState) {
for (var i = 0; i < ; i++) {
if (tankArray[i] != null && tankArray[i].type == "tank") {
if (itState == "stop" && tankArray[i].t != undefined) {
clearInterval(tankArray[i].t);
}
if (itState == "run" && tankArray[i].belongs == "em") {
autoMove(tankArray[i]);
}
}
}
}
//Tank Random State Function //For an enemy tank that moves automatically, return to one direction LRUD or Fire or none, which means steering, fire and doing nothing respectively (continue to move forward) function randState() {
var z;
//The probability of enemy tanks randomly firing bullets is 1/7 z = randomNum(10);
switch (z) {
case 1:
return "L";
break;
case 2:
return "R";
break;
case 3:
return "D";
break;
case 4:
return "L";
break;
//5 means to fire bullets case 5:
return "Fire";
break;
default:
//none means moving in the original direction return "none";
break;
}
function randomNum(scope) {
return parseInt(() * scope);
}
}
//Tank and bullet movement function complete-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
//Game status and prompt function group -----------------------------------------------------------------------------------------------------------------------
//Start the game function runGame(mapName) {
//Generate a map var map = ("div");
= "map";
= "map";
(map);
state = "RUN";
ifo(state);
mapName();
playMusic("start");
createTank(3, "me");
createTank(1, "em", 0, 0);
createTank(1, "em", 180, 0);
createTank(1, "em", 330, 0);
}
//Game Pause Function function stopGame() {
if (state == "RUN") {
state = "STOP";
ifo("STOP");
objTimer("stop");
} else if (state == "STOP") {
state = "RUN";
ifo(state);
objTimer("run");
}
}
//Game end function function gameOver() {
state = "OVER";
//Suspend all timers for bullets objTimer("stop");
//alert("GAME OVER");
createDOM("over", 120, 67.5, (MAP_W - 120) / 2, (MAP_H - 67.5) / 2, "over");
flickerObj("over");
}
//Change the map //The second and third levels retained function changeMap() {
//Clear all timers and maps objTimer("stop");
var mapChildrenNodes = ;
(map);
//Execute runGame //runGame(map2);
}
// Prompt information function //According to game status prompt information function ifo(state) {
var ifo = ("ifo");
var ifo_title = ("ifo_title");
switch (state) {
case "READY":
ifo_title.innerHTML = "Tank War";
break;
case "RUN":
= "none";
break;
case "STOP":
= "block";
ifo_title.innerHTML = "pause";
= "transparent";
break;
}
}
//Game status and prompt function group completion ----------------------------------------------------------------------------------------------------------------------
//Function brick function --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- //Generate functional bricks function createFunctionWall() {
if (emTankNum != 9 || emTankNum != 13 || emTankNum != 17) {
return;
}
var selfType, x, y;
switch (emTankNum) {
case 9:
selfType == "timer";
x = 15 * 18;
y = 15 * 6;
break;
case 13:
selfType == "stronghome";
x = 15 * 2;
y = 15 * 18;
break;
case 17:
selfType == "bomb";
x = 15 * 22;
y = 15 * 17;
break;
}
var it = new wall(selfType,x,y,"function");
flickerObj();
//Delete it after 11 seconds setTimeout(function() {
//Delete the flashing function brick in 10 seconds. If it has been eaten, cancel the flashing if ((it) != -1) {
flickerObj();
}
}, 10000);
setTimeout(function() {
//If you find that the function brick has been eaten when deleting in 11 seconds, cancel the deletion if ((it) != -1) {
delObj(it);
}
}, 11000);
}
//The old nest steel brick function function StrongHome() {
function changeHome(selfType) {
for (var i = 0; i < ; i++) {
for (var j = 0; j < noMoveArray[i].length; j++) {
if (noMoveArray[i][j] != null && noMoveArray[i][j].belongs == "home" && noMoveArray[i][j].selfType != "star") {
noMoveArray[i][j].selfType = selfType;
noMoveArray[i][j].img = noMoveArray[i][j].selfType;
var obj = noMoveArray[i][j];
showDOM(, , , , , ());
}
}
}
}
changeHome("steel");
setTimeout(function() {
changeHome("wall");
}, 5000);
}
//Explosion brick function function bomb() {
for (var i = 0; i < ; i++) {
objTimer("stop");
if (tankArray[i] != null && tankArray[i].belongs == "em") {
//(moveArray[i])
delObj(tankArray[i]);
}
}
}
//Timer brick function function timer() {
//Suspend all timers of the tank objTimer("stop");
setTimeout(function() {
objTimer("run");
}, 2000);
}
//Function brick function--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
//Special effect function group ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
//Music Function function playMusic(src) {
var audio = ("audio");
//var audio=("<video controls muted autoplay >");
= MUSIC_PATH + src + ".wav";
//path ();
}
//Blinking function function flickerObj(id, interval) {
var it = (id);
for (let i = 1; i <= 3; i++) {
setTimeout(function() {
var display = i % 2 == 0 ? "none" : "block";
= display;
//="none";
}, (interval / 3) * i);
}
}
//Create tank/tank explosion animation function //animationType can be taken to bear and blast respectively represent the birth of a tank and the explosion of a bullet respectively function animation(animationType, x, y) {
// Here we set a random number id for the atom used in the animation to prevent the two animations from using ids to cause only one animation. //This may still use an animation, but it may be 4/1000 animationTypeid = () * 1000;
var id = animationType + animationTypeid;
//Number of display var times = animationType == "born" ? 3 : 1;
//Display frequency var fre = animationType == "born" ? 1000 : 300;
// var width = animationType == "born" ? TANK_W : BULLENT_W;
// var height = animationType == "born" ? TANK_H : BULLENT_H;
var width = TANK_W;
var height = TANK_H;
//Create animated atoms and flash for (let i = 1; i <= times; i++) {
setTimeout(function() {
createDOM(id + i, width, height, x, y, animationType + i);
flickerObj(id + i, fre / times);
}, fre * i);
}
//Delete the flashing atom after the flashing is finished setTimeout(function() {
for (let i = 1; i <= times; i++) {
delDOM(id + i);
}
}, fre * (times + 1));
}
//The group of special effects functions-----------------------------------------------------------------------------------------------------------------------
//The main logic of tank war --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
ifo("READY");
//The main logic of the tank war is complete----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
//Keyboard monitoring and trigger processing start---------------------------------------------------------------------------------------------------------------------
noresponseFire = false;
noresponseTankMove = false;
= function(event) {
// If the game state is ended, block all keys if (state == "OVER") {
return;
}
var myTank = tankArray[0];
var newDir;
// 87=W;83=S;65=A;68=D
code = ;
//The key value code of the keyboard can be detected by outputting code here // (code)
if (code == 65 && state == "RUN" && mytank != null && noresponseTankMove == false) {
setNOresponse("TankMove", NORESPONSEFIRETIME);
newDir = "L";
} else if (code == 87 && state == "RUN" && mytank != null && noresponseTankMove == false) {
(noresponseTankMove)
setNOresponse("TankMove", NORESPONSEFIRETIME);
newDir = "U";
} else if (code == 68 && state == "RUN" && mytank != null && noresponseTankMove == false) {
setNOresponse("TankMove", NORESPONSEFIRETIME);
newDir = "R";
} else if (code == 83 && state == "RUN" && mytank != null && noresponseTankMove == false) {
setNOresponse("TankMove", NORESPONSEFIRETIME);
newDir = "D";
//T 84 Start the game } else if (code == 84 && state == "READY") {
runGame(map1);
return;
//Start bullets Enter 13 } else if (code == 13 && state == "RUN" && mytank != null && noresponseFire == false) {
//Block the button, the bullet fired within a certain period of time is invalid
createBullent(myTank);
noresponseFire = true;
//Shield P key for 300ms setTimeout(function() {
noresponseFire = false;
}, NORESPONSEFIRETIME);
return;
//Shield other unrelated keys //P 80 means pause } else if (code == 80 && (state == "RUN" || state == "STOP")) {
stopGame();
return;
//Shield other unrelated keys } else {
return;
}
move(myTank, newDir);
}
function setNOresponse(noresponseState, t) {
if (noresponseState == "TankMove") {
noresponseTankMove = true;
//Shield P key for 300ms setTimeout(function() {
noresponseTankMove = false;
}, t);
}
}
//Keyboard monitoring and triggering are processed---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
//Map 1-------------------------------------------------------------------------------------------------------------------------
var map1 = function() {
//The old nest new wall("star",15 * 12,15 * 24,"home");
new wall("wall",15 * 11,15 * 25,"home");
new wall("wall",15 * 11,15 * 24,"home");
new wall("wall",15 * 11,15 * 23,"home");
new wall("wall",15 * 12,15 * 23,"home");
new wall("wall",15 * 13,15 * 23,"home");
new wall("wall",15 * 14,15 * 25,"home");
new wall("wall",15 * 14,15 * 24,"home");
new wall("wall",15 * 14,15 * 23,"home");
// The old nest is finished
//All ordinary walls for (var i = 1; i <= 11; i += 2) {
for (var j = 2; j < 24; j++) {
if (j >= 10 && j < 14) {
continue;
}
if (i == 5 || i == 7) {
if (j > 8 && j <= 11)
continue;
if (j > 20)
continue;
} else {
if (j >= 14 && j < 16) {
continue;
}
}
new wall("wall",15 * 2 * i,15 * j,"ordinary");
new wall("wall",15 * 2 * i + 15,15 * j,"ordinary");
}
}
for (var i = 0; i < 6; i++) {
for (var j = 0; j < 2; j++) {
new wall("wall",15 * i + 15 * 10,15 * 11 + 15 * j,"ordinary");
if (i > 3)
continue;
new wall("wall",15 * i + 15 * 4,15 * 12 + 15 * j,"ordinary");
new wall("wall",15 * i + 15 * 18,15 * 12 + 15 * j,"ordinary");
}
}
new wall("wall",15 * 12,15 * 15,"ordinary");
new wall("wall",15 * 12,15 * 16,"ordinary");
new wall("wall",15 * 13,15 * 15,"ordinary");
new wall("wall",15 * 13,15 * 16,"ordinary");
//steel
new wall("steel",15 * 0,15 * 13,"ordinary");
new wall("steel",15 * 1,15 * 13,"ordinary");
new wall("steel",15 * 24,15 * 13,"ordinary");
new wall("steel",15 * 25,15 * 13,"ordinary");
new wall("steel",15 * 12,15 * 6,"ordinary");
new wall("steel",15 * 12,15 * 7,"ordinary");
new wall("steel",15 * 13,15 * 6,"ordinary");
new wall("steel",15 * 13,15 * 7,"ordinary");
}
//Map 1 end ------------------------------------------------------------------------------------------------------------------------- </script>
</html>
For more exciting articles about JS games, please check out the topic:"JavaScript Classic Games"
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.