html坦克⼤战js代码包,js实现坦克⼤战游戏本⽂实例为⼤家分享了js实现坦克⼤战游戏的具体代码,供⼤家参考,具体内容如下
tank
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;
实现特效的代码jsbackground-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;
}
按键说明:
T:开始游戏(游戏开始后⽆效)
P:暂停游戏
W、S、A、D:上、下、左、右
ENTER:发射⼦弹
//常量及全局变量的定义--------------------------------------------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;
//当前⽂件同⽬录
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;
//坦克移动不响应时间
const NORESPONSEFIRETIME = 200;
const NORESPONSETANKMOVETIME = TANK_FREQ + 100; //我⽅坦克开⽕、移动状态
noresponseFire = false;
noresponseTankMove = false;
//游戏状态
state = "READY";
//frequency频率
var tank_id = 0;
var bullent_id = 0;
var wall_id = 0;
//敌⽅坦克总数
var emTankNum = 20;
var meTankNum = 3;
//我⽅坦克对象
var mytank = null;
var tankArray = new Array();
var bullentArray = new Array();
//因为功能性砖块会与普通静态砖块重叠所以必须另外存储
var functionWallArray = new Array();
/
/地图width=390,地图中最⼩的静物wall宽度⾼度=15,所以数组的⼀维⼆维均为390/15=26 //先声明⼀维
var noMoveArray = new Array(4);
for (var i = 0; i < MAP_W / WALL_W; i++) {
//⼀维长度
noMoveArray[i] = new Array();
//再声明⼆维
for (var j = 0; j < MAP_H / WALL_H; j++) {
//⼆维长度
noMoveArray[i][j] = null;
}
}
//常量及全局变量完--------------------------------------------------------------------------------
//对象的定义-------------------------------------------------------------------------------------
//坦克对象
tank = function(selfType, x, y, belongs, dir) {
//共有属性
this.id = "tank_" + tank_id++;
//selfType可取1、2、3表⽰⼀类坦克,⼆类坦克,三类坦克
this.selfType = selfType;
this.y = y;
this.belongs = belongs;
this.dir = dir;
this.width = TANK_W;
this.height = TANK_H;
this.life = this.selfType;
//因为坦克的img与⽅向有关,每⼀次改变dir都会影响img,所以设置⼀个对象函数⽤于获取Img = function() {
return img = this.belongs + "Tank" + this.selfType + this.dir;
}
//敌⽅坦克的⾃移动函数的setInterval的值t
this.t;
createDOM(this.id, this.width, this.height, this.x, this.y, Img(), 2);
//把⽣成的坦克对象存⼊移动对象数组
tankArray.push(this);
if (belongs == "me") {
mytank = this;
meTankNum--;
}
//敌⽅坦克调⽤⾃移动函数
if (this.belongs == "em") {
emTankNum--;
//检测是否需要⽣成功能砖块
createFunctionWall();
autoMove(this);
}
}
//⼦弹对象
bullent = function(selfType, x, y, belongs, dir) {
//播放发射⼦弹⾳乐
playMusic("fire");
//共有属性
this.id = "bullent_" + bullent_id++;
this.selfType = selfType;
this.x = x;
this.y = y;
this.belongs = belongs;
this.dir = dir;
this.width = BULLENT_W;
this.height = BULLENT_H;
//为了与坦克的img保持⼀致,同样设置⼀个对象函数⽤于获取
return img = pe;
}
//⼦弹与敌⽅坦克特有属性,⾃移动的定时器
this.t;
createDOM(this.id, this.width, this.height, this.x, this.y, Img(), 1);
//把⽣成的⼦弹对象存⼊移动对象数组
bullentArray.push(this);
autoMove(this);
}
//墙对象
wall = function(selfType, x, y, belongs) {
//共有属性
this.id = "wall_" + wall_id++;
//wall、steel、star、timer分别表⽰普通砖块、⼦弹不可打破砖块、我⽅⽼巢、定时器this.selfType = selfType;
this.x = x;
this.y = y;
//belongs取值home、ordinary、function分别表⽰⽼巢的砖块、⼀般砖块、功能性砖块this.belongs = belongs;
this.width;
this.height;
if (this.selfType == "star") {
//设置全局变量star

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。