主要含有以下功能：
1、玩家采用等级机制，共5级；
2、补充装备有子弹、金星、炸弹、导弹、手枪、战舰，分值各不相同；
3、打掉障碍可加分；
4、用鼠标控制子弹射击，左键为单发射击、右键为双发射击，屏蔽鼠标右键默认的菜单；
5、空格键控制导弹射击，屏蔽其他键的使用；
6、没有战舰的情况下无法过河，普通子弹不能击毁钢铁，坦克可以穿梭于于树林之中，坦克经过雪地会打滑，即速度变快；
7、坦克碰到障碍不能前进；
8、导弹可以摧毁一切，可谓是寸草不生；
9、坦克可以进行上下左右掉头，坦克碰到障碍物掉头、转弯是本案例的难点；
10、子弹打到屏幕边界、钢铁有子弹效果；
11、障碍物有的1枪则可以摧毁，有的需要多枪才可以完全摧毁；
12、吃到装备有分值提示效果；
13、吃了手枪可以击毁钢铁。
14、每一局的布局都是不一样的。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>坦克大战</title>
<link rel="icon" type="image/x-icon" href="tank.jpg">
<style>
*{
padding: 0;
margin: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
body{
background: #222;
opacity: 0.9;
width: 100%;
height: 100%;
overflow: hidden;
}
#target{
position: absolute;
z-index: 2;
}
.bullet{
width: 10px;
height: 10px;
background: #fff;
position: relative;
border-radius: 5px;
}
.missile{
background: #fff;
position: relative;
border-radius: 12px;
}
#tip{
min-height: 10px;
z-index: 1001;
position: absolute;
display: inline;
/*margin-left: -55px;*/
padding: 5px;
visibility:hidden;
opacity: 0;
margin-top: -12px;
background: #ffffff;
font-size:1em;
/* Setting the border-radius property for all Browsers */
-moz-border-radius: 5px; /* Firefox */
-webkit-border-radius: 5px; /* Safari and Chrome */
border-radius: 5px; /* Browsers that Support it like Opera */
/* Setting the box-shadow property for all Browsers */
-moz-box-shadow: 0 0 8px gray; /* Firefox */
-webkit-box-shadow: 0 0 8px gray; /* Safari and Chrome */
filter: progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=3); /* IE */
box-shadow: 0 0 8px gray; /* Browsers that Support it like Opera */
/* Setting the transition property for all Browsers */
-moz-transition: all 0.5s ease-in-out; /* Firefox */
-webkit-transition: all 0.5s ease-in-out; /* Safari and Chrome */
-o-transition: all 0.5s ease-in-out; /* Opera */
transition: all 0.5s ease-in-out; /* Browsers that Support it */
}
#score_list{
background: #fff;
bottom: 0;
right: 0;
position: absolute;
width: 270px;
height: 365px;
z-index: 999;
opacity: 0.5;
color:#222;
padding: 3px;
border-radius: 3px;
}
#list-name{
text-align: center;
font-size: 18px;
}
#score_list div{
margin: 3px;
}
#time{
width: 670px;
height: 513px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 1000;
display: none;
}
#demo1,#demo2{
position: absolute;
}
#demo1{
top:302px;
left:220px;
width: 20px;
height: 40px;
background: #000;
}
#demo2{
top:225px;
left:225px;
width: 80px;
height: 80px;
background: #111;
}
</style>
</head>
<body>
<img id="target" src="tank1.jpg" width="60" height="60" alt="">
<img id="time" src="time.jpg" height="641" width="837" alt="" />
<div id="score_list">
<div id="list-name"><strong >英雄榜</strong></div>
<div>玩家名字:<strong id="player_name">sensus森森</strong></div>
<div>玩家等级:<strong id="player_level">小米加步枪</strong></div>
<div>剩余时间:<strong id="remaining_time">0</strong></div>
<div>当前时间:<strong id="current_time"></strong></div>
<div>开始时间:<strong id="start_time"></strong></div>
<div>子弹:<strong id="bullet_total_nums">100</strong></div>
<div>导弹:<strong id="missile_num">0</strong></div>
<div>手枪:<strong id="gun_number">0</strong></div>
<div>五角星:<strong id="star_number">0</strong></div>
<div>炸弹:<strong id="bomb_number">0</strong></div>
<div>战舰:<strong id="warship_number">0</strong></div>
<div>障碍:<strong id="exterminate_obstacles_nums">0</strong></div>
<div>总分数:<strong id="total_scores">0</strong></div>
<div>本机IP:<strong id="localhost">0</strong></div>
</div>
<!-- 使用的搜狐接口、JS获取客户端IP地址 -->
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
<script>
document.oncontextmenu = new Function("event.returnValue=false;");//禁用网页右键菜单
var direction = 'right',
oImg = document.getElementById('target'),
obstacles= document.getElementsByName('obstacle'),//获得所有的障碍物
img_width = oImg.clientWidth,
img_height = oImg.clientHeight,
screen_width = window.innerWidth,//document.documentElement.clientWidth/Height 和 window.innerWidth/Height 的宽高始终相等
screen_height = window.innerHeight;
makeTankObstacle();//生成坦克障碍
equipmentScore = makeTankEquipment();
tankAndObstaclesCountObj = Object;//使用指针
bulletAndObstaclesCountObj = tankAndObstaclesCountObj;
tankAndObstaclesCountObj.obstaclesCount = obstacles.length;//障碍物数量
localStorage.clear();//清空所有的localStorage保存对象的全部数据
//键盘绑定事件
document.onkeydown = function(e){
var tank_left = left = intReplacePx(oImg.style.left),
tank_top = top = intReplacePx(oImg.style.top),
tank_width = img_width,
tank_height = img_height,
angle = 0,
step = 1,//坦克步速，值越大速度越快
oEquipmentImg = document.getElementById('equipment'),//获取坦克装备
transform_val = oImg.style.transform,
res = transform_val.match(/\((.*)deg\)/),
e = e ? e : window.event;
if(!oEquipmentImg){//当键盘操作过频繁，装备还没来得及生成时，返回false
console.log('操作过于频繁！');
return false;
}
equipment_top = intReplacePx(oEquipmentImg.style.top);
equipment_left = intReplacePx(oEquipmentImg.style.left);
equipment_width = oEquipmentImg.clientWidth;
equipment_height = oEquipmentImg.clientHeight;
switch(e.keyCode){
case 37://左
angle = 180;
direction = 'left';
break;
case 38://上
angle = 270;
direction = 'top';
break;
case 39://右
angle = 0;
direction = 'right';
break;
case 40://下
angle = 90;
direction = 'bottom';
break;
default:
if(e.keyCode != 32) return false;//除了上下左右空格键外，其余的键无效
}
if(e.keyCode == 32){//空格键
makeTankMissile(direction,oImg,img_width,img_height);//发射导弹
missile_step = 1;
setInterval(function(){
missiles = document.getElementsByName('missile');//获得所有的导弹
var missilesCount = missiles.length;
for (var i = 0; i < missilesCount; i++) {
if(missiles[i]){
missile_direction = missiles[i].getAttribute("direction");
missile_offset_left = missiles[i].offsetLeft;//获得每颗导弹离浏览器左边框的距离
missile_offset_top = missiles[i].offsetTop;//获得每颗导弹离浏览器上边框的距离
missile_width = missiles[i].clientWidth;//导弹宽度
missile_height = missiles[i].clientHeight;//导弹高度
for (var k = 0; k < bulletAndObstaclesCountObj.obstaclesCount; k++) {
if(obstacles[k]){
obstacle_offset_left = obstacles[k].offsetLeft;
obstacle_offset_top = obstacles[k].offsetTop;
obstacle_width = obstacles[k].clientWidth;
obstacle_height = obstacles[k].clientHeight;
if(!((missile_offset_top + missile_height < obstacle_offset_top) || (missile_offset_top > obstacle_offset_top + obstacle_height) || (missile_offset_left + missile_width < obstacle_offset_left) || (missile_offset_left > obstacle_offset_left + obstacle_width))){//导弹打到障碍物,凡是被导弹打到的障碍物，一枪毙命
exterminate_obstacles_nums = document.getElementById('exterminate_obstacles_nums').innerHTML;
document.getElementById('exterminate_obstacles_nums').innerHTML = parseInt(exterminate_obstacles_nums) + 1;//消灭障碍总数量加一
obstacles[k].parentNode.removeChild(obstacles[k]);//障碍物消失
bulletAndObstaclesCountObj.obstaclesCount--;//障碍物数量减一
}
}
};
missile_step++;
if(missile_direction == 'left' && missile_offset_left >= missile_step){
missiles[i].style.left = (missile_offset_left - missile_step) + 'px';
}else if(missile_direction == 'right' && missile_offset_left < screen_width - missile_step){
missiles[i].style.left = (missile_offset_left + missile_step) + 'px';
}else if(missile_direction == 'top' && missile_offset_top >= missile_step){
missiles[i].style.top = (missile_offset_top - missile_step) + 'px';
}else if(missile_direction == 'bottom' && missile_offset_top < screen_height - missile_step){
missiles[i].style.top = (missile_offset_top + missile_step) + 'px';
}else{
missiles[i].parentNode.removeChild(missiles[i]);
}
}
};
},1);
}else{
oImg.style.transform = 'rotate('+ angle +'deg)';//坦克掉头
switch(direction){
case 'left':
tankBarrelX = tank_left;
tankBarrelY = tank_top + tank_height / 2;
oneX = tank_left;
oneY = tank_top;
twoX = tank_left;
twoY = tank_top + tank_height;
break;
case 'top':
tankBarrelX = tank_left + tank_width / 2;
tankBarrelY = tank_top;
oneX = tank_left;
oneY = tank_top;
twoX = tank_left + tank_width;
twoY = tank_top;
break;
case 'right':
tankBarrelX = tank_left + tank_width;
tankBarrelY = tank_top + tank_height / 2;
oneX = tank_left + tank_width;
oneY = tank_top;
twoX = tank_left + tank_width;
twoY = tank_top + tank_height;
break;
case 'bottom':
tankBarrelX = tank_left + tank_width / 2;
tankBarrelY = tank_top + tank_height;
oneX = tank_left;
oneY = tank_top + tank_height;
twoX = tank_left + tank_width;
twoY = tank_top + tank_height;
break;
}
if(!((tank_top + tank_height < equipment_top) || (tank_top > equipment_top + equipment_height) || (tank_left + tank_width < equipment_left) || (tank_left > equipment_left + equipment_width))){//坦克吃到装备
var scoreNode = document.getElementById('tip'); //获取分数提示框节点
scoreNode.style.visibility = 'visible';
scoreNode.style.opacity = 1;
scoreNode.style.marginTop = intReplacePx(scoreNode.style.marginTop) - 20 + 'px';
scoreNode.style.transition = 'all 0.6s ease-in-out';
setTimeout(function(){
type = oEquipmentImg.getAttribute('data-type');
switch(type){
case '0'://手枪
document.getElementById('gun_number').innerHTML = parseInt(document.getElementById('gun_number').innerHTML) + 1;
break;
case '1'://炸弹
document.getElementById('bomb_number').innerHTML = parseInt(document.getElementById('bomb_number').innerHTML) + 1;
break;
case '2'://星星
document.getElementById('star_number').innerHTML = parseInt(document.getElementById('star_number').innerHTML) + 1;
break;
case '3'://战舰
document.getElementById('warship_number').innerHTML = parseInt(document.getElementById('warship_number').innerHTML) + 1;
equipmentScore = 5;//吃到战舰加5分
oImg.setAttribute('data-ship', true);
oImg.width = '58';
oImg.height = '58';
oImg.style.border = '1px solid #fff';
break;
case '4'://子弹
document.getElementById('bullet_total_nums').innerHTML = parseInt(document.getElementById('bullet_total_nums').innerHTML) + parseInt(equipmentScore);
equipmentScore = 10;//吃到子弹加10分
break;
case '5'://导弹
document.getElementById('missile_num').innerHTML = parseInt(document.getElementById('missile_num').innerHTML) + 1;
equipmentScore = 50;//吃到导弹加50分
break;
}
total_scores = document.getElementById('total_scores').innerHTML;
total_scores = parseInt(total_scores) + parseInt(equipmentScore);
document.getElementById('total_scores').innerHTML = total_scores;//更新总分数
switch(true){//玩家等级，坦克图片发生相应变化
case total_scores > 0 && total_scores <= 10:
player_level = '轻型坦克';
break;
case total_scores > 10 && total_scores <= 100:
oImg.src = 'tank2.jpg';
player_level = '中型坦克';
break;
case total_scores > 100 && total_scores <= 200:
oImg.src = 'tank3.jpg';
player_level = '重型坦克';
break;
case total_scores > 200 && total_scores <= 500:
oImg.src = 'tank4.jpg';
player_level = '坦克歼击车';
break;
default:
oImg.src = 'tank5.jpg';
player_level = '自行火炮';
}
document.getElementById('player_level').innerHTML = player_level;
scoreNode.parentNode && scoreNode.parentNode.removeChild(scoreNode);//被吃到的装备消失
equipmentScore = makeTankEquipment();//制作新的坦克装备
}, 500);
oEquipmentImg.parentNode && oEquipmentImg.parentNode.removeChild(oEquipmentImg);
}
data_ship = oImg.getAttribute('data-ship') || '';//坦克是否拥有战舰
for (var s = 0; s < tankAndObstaclesCountObj.obstaclesCount; s++) {
obstacle_offset_left = obstacles[s].offsetLeft;
obstacle_offset_top = obstacles[s].offsetTop;
obstacle_width = obstacles[s].clientWidth;
obstacle_height = obstacles[s].clientHeight;
obstacle_direction = localStorage.getItem('obstacle_direction_' + s) || '',
if_condition1 = !(tankBarrelX < obstacle_offset_left || tankBarrelX > obstacle_offset_left + obstacle_width || tankBarrelY < obstacle_offset_top || tankBarrelY > obstacle_offset_top + obstacle_height);//先判断坦克发射筒是否触及障碍物
if_condition2 = !(oneX < obstacle_offset_left || oneX > obstacle_offset_left + obstacle_width || oneY < obstacle_offset_top || oneY > obstacle_offset_top + obstacle_height) || !(twoX < obstacle_offset_left || twoX > obstacle_offset_left + obstacle_width || twoY < obstacle_offset_top || twoY > obstacle_offset_top + obstacle_height);//再判断坦克发射筒的两个边界点是否触及障碍物
if_condition4 = !((tank_top + tank_height < obstacle_offset_top) || (tank_top > obstacle_offset_top + obstacle_height) || (tank_left + tank_width < obstacle_offset_left) || (tank_left > obstacle_offset_left + obstacle_width));//判断坦克是否触及到障碍物
data_forward = obstacles[s].getAttribute('data-forward');//判断坦克是否可以前进
data_alias = obstacles[s].getAttribute('data-alias');//如果是河，则判断是不是可以过河
data_accelerate = obstacles[s].getAttribute('data-accelerate');//过雪地坦克速度增加
if(obstacle_direction){
var result;
switch(obstacle_direction){
case 'left'://原来受阻方向为左
switch(direction){
case 'top'://现掉头往上
case 'bottom'://现掉头往下
result = isCollisionByPoint(twoX,twoY,s,direction);
if(!result){ return result;}
break;
default:
result = isCollisionByDataAttr(if_condition2,data_forward,data_alias,data_ship,s,direction);
if(!result){ return result;}
}
break;
case 'top'://原来受阻方向为上
switch(direction){
case 'left'://现掉头往左
case 'right'://现掉头往右
result = isCollisionByPoint(twoX,twoY,s,direction);
if(!result){ return result;}
break;
default:
result = isCollisionByDataAttr(if_condition2,data_forward,data_alias,data_ship,s,direction);
if(!result){ return result;}
}
break;
case 'right'://原来受阻方向为右
switch(direction){
case 'top'://现掉头往上
case 'bottom'://现掉头往下
result = isCollisionByPoint(oneX,oneY,s,direction);
if(!result){ return result;}
break;
default:
result = isCollisionByDataAttr(if_condition2,data_forward,data_alias,data_ship,s,direction);
if(!result){ return result;}
}
break;
case 'bottom'://原来受阻方向为下
switch(direction){
case 'left'://现掉头往左
case 'right'://现掉头往右
result = isCollisionByPoint(oneX,oneY,s,direction);
if(!result){ return result;}
break;
default:
result = isCollisionByDataAttr(if_condition2,data_forward,data_alias,data_ship,s,direction);
if(!result){ return result;}
}
break;
}
}else if(if_condition2 && (data_forward == 'false' || data_alias == 'river' && data_ship == '')){//坦克碰到障碍物
console.log('坦克碰到障碍物不能前进！');
localStorage.setItem('obstacle_direction_' + s,direction);
return false;
}else if(if_condition4 && data_accelerate == 'true'){
step = 5;
}
};
switch(direction){
case 'left':
if(res && res[1] == angle && left >= step){//如果角度一样代表长按，且距离应大于等于步进值，防止出界
oImg.style.left = (left - step) + 'px';
}
break;
case 'top':
if(res && res[1] == angle && tank_top >= step){//代表长按
oImg.style.top = (tank_top - step) + 'px';
}
break;
case 'right':
if(res && res[1] == angle && screen_width - left - img_width >= step){//代表长按
oImg.style.left = (left + step) + 'px';
}
break;
case 'bottom':
if(res && res[1] == angle && screen_height - tank_top - img_height >= step){//代表长按
oImg.style.top = (tank_top + step) + 'px';
}
break;
}
}
}
//鼠标绑定事件
document.onmousedown = function(e){
var bullet_total_nums = e.button ? 2 : 1;//每发子弹个数，左击单发子弹，右击双发子弹
bullet_speed = e.button ? 1 : 2;//子弹速度,定时器时间值
bullet_step = e.button ? 1 : 1;//子弹进度，像素值
var bullets,bullet_offset_left,bullet_offset_top;
clearInterval(interval);
makeTankBullet(bullet_total_nums,direction,oImg,img_width,img_height);//一枪打bullet_total_nums颗子弹
var interval = setInterval(function(){
bullets = document.getElementsByName('bullet');//获得所有的子弹
missiles = document.getElementsByName('missile');//获得所有的导弹
var bulletsCount = bullets.length;
var missilesCount = missiles.length;
for (var i = 0; i < bulletsCount; i++) {
if(bullets[i]){
bullet_direction = bullets[i].getAttribute("direction");
bullet_offset_left = bullets[i].offsetLeft;//获得每颗子弹离浏览器左边框的距离
bullet_offset_top = bullets[i].offsetTop;//获得每颗子弹离浏览器上边框的距离
bullet_width = bullets[i].clientWidth;//子弹宽度
bullet_height = bullets[i].clientHeight;//子弹高度
for (var gun_number,data_alias,k = 0; k < bulletAndObstaclesCountObj.obstaclesCount; k++) {
if(obstacles[k]){
obstacle_offset_left = obstacles[k].offsetLeft;
obstacle_offset_top = obstacles[k].offsetTop;
obstacle_width = obstacles[k].clientWidth;
obstacle_height = obstacles[k].clientHeight;
if(!((bullet_offset_top + bullet_height < obstacle_offset_top) || (bullet_offset_top > obstacle_offset_top + obstacle_height) || (bullet_offset_left + bullet_width < obstacle_offset_left) || (bullet_offset_left > obstacle_offset_left + obstacle_width))){//子弹打到障碍物
needBulletNums = obstacles[k].getAttribute('data-nums');//获取每个障碍物的所需子弹数
isOver = obstacles[k].getAttribute('data-over');//表示子弹打到障碍物后，是否可以继续前进
gun_number = document.getElementById('gun_number').innerHTML;
console.log(gun_number);
data_alias = obstacles[k].getAttribute('data-alias');
if(needBulletNums == '+∞'){//表示障碍物的所需子弹数不限制
if(gun_number > 0 && data_alias == 'steel'){//拥有手枪，可以打铁
obstacles[k].parentNode.removeChild(obstacles[k]);//障碍物消失
bulletAndObstaclesCountObj.obstaclesCount--;//障碍物数量减一
}else if(isOver == 'true'){//表示子弹不可以继续前进
bullets[i].parentNode.removeChild(bullets[i]);//子弹消失
var bImg = document.createElement('img');
bImg.src = 'bombing.jpg';
bImg.style.position = 'absolute';
bImg.style.left = parseInt(bullet_offset_left - bullet_width/2) + 'px';
bImg.style.top = parseInt(bullet_offset_top - bullet_height/2) + 'px';
document.body.appendChild(bImg);//增加子弹击中效果
setTimeout(function(){
bImg.parentNode.removeChild(bImg);//子弹击中效果消失
}, 200);
return;
}
}else if(needBulletNums <= 1){//如果只需一枪，则障碍物消失
exterminate_obstacles_nums = document.getElementById('exterminate_obstacles_nums').innerHTML;
document.getElementById('exterminate_obstacles_nums').innerHTML = parseInt(exterminate_obstacles_nums) + 1;//消灭障碍总数量加一
obstacles[k].parentNode.removeChild(obstacles[k]);//障碍物消失
bullets[i].parentNode.removeChild(bullets[i]);//子弹消失
bulletAndObstaclesCountObj.obstaclesCount--;//障碍物数量减一
}else{//否则所需子弹数减一
needBulletNums--;
obstacles[k].setAttribute('data-nums',needBulletNums);//重新设置每个障碍物的所需子弹数
}
}
}
};
bullet_step++;
if(bullet_direction == 'left' && bullet_offset_left >= bullet_step){
bullets[i].style.left = (bullet_offset_left - bullet_step) + 'px';
}else if(bullet_direction == 'right' && bullet_offset_left < screen_width - bullet_step){
bullets[i].style.left = (bullet_offset_left + bullet_step) + 'px';
}else if(bullet_direction == 'top' && bullet_offset_top >= bullet_step){
bullets[i].style.top = (bullet_offset_top - bullet_step) + 'px';
}else if(bullet_direction == 'bottom' && bullet_offset_top < screen_height - bullet_step){
bullets[i].style.top = (bullet_offset_top + bullet_step) + 'px';
}else{
var bImg = document.createElement('img');
bImg.src = 'bombing.jpg';
bImg.style.position = 'absolute';
bImg.style.left = parseInt(bullet_offset_left - bullet_width/2) + 'px';
bImg.style.top = parseInt(bullet_offset_top - bullet_height/2) + 'px';
document.body.appendChild(bImg);//增加子弹击中效果
setTimeout(function(){
bImg.parentNode.removeChild(bImg);//子弹击中效果消失
}, 200);
bullets[i].parentNode.removeChild(bullets[i]);//子弹消失
}
}
};
}, bullet_speed);
}
//制造导弹
function makeTankMissile(direction,oImg,img_width,img_height){
var missile_nums = document.getElementById('missile_num').innerHTML;
if(missile_nums <= 0){
document.getElementById('missile_num').innerHTML = 0;
return false;
}else{
missile_nums--;//每次发射导弹，其对应的数量也减少
document.getElementById('missile_num').innerHTML = missile_nums;
}
var bullet_direction = direction;
var oDiv = document.createElement('div');
var oDiv_style_top = intReplacePx(oImg.style.top);
var oDiv_style_left = intReplacePx(oImg.style.left);
switch(bullet_direction){
case 'left':
oDiv.style.width = '80px';
oDiv.style.height = '10px';
oDiv.style.top = oDiv_style_top + 18 + 'px';
oDiv.style.left = oDiv_style_left - img_width / 2 - 50 + 'px';
oDiv.style.display = 'inline-table';
oDiv.setAttribute("direction", "left");
break;
case 'top':
oDiv.style.width = '10px';
oDiv.style.height = '80px';
oDiv.style.top = oDiv_style_top - 80 + 'px';
oDiv.style.left = oDiv_style_left + 25 + 'px';
oDiv.setAttribute("direction", "top");
break;
case 'right':
oDiv.style.width = '80px';
oDiv.style.height = '10px';
oDiv.style.top = oDiv_style_top + 18 + 'px';
oDiv.style.left = oDiv_style_left + img_width + 'px';
oDiv.style.display = 'inline-table';
oDiv.setAttribute("direction", "right");
break;
case 'bottom':
oDiv.style.height = '80px';
oDiv.style.width = '10px';
oDiv.style.top = oDiv_style_top + img_height + 'px';
oDiv.style.left = oDiv_style_left + 24 + 'px';
oDiv.setAttribute("direction", "bottom");
break;
}
oDiv.setAttribute("class", "missile");
oDiv.setAttribute("name", "missile");
document.body.appendChild(oDiv);//造导弹
}
//制造坦克子弹
function makeTankBullet(bullet_total_nums,direction,oImg,img_width,img_height){
var bullet_nums = document.getElementById('bullet_total_nums').innerHTML;
bullet_nums -= bullet_total_nums;//每次发射子弹，其对应的数量也减少
if(bullet_nums <= 0){
document.getElementById('bullet_total_nums').innerHTML = 0;
return false;
}else{
document.getElementById('bullet_total_nums').innerHTML = bullet_nums;
}
for (var j = 0; j < bullet_total_nums; j++) {
var bullet_direction = direction;
var oDiv = document.createElement('div');
var oDiv_style_top = intReplacePx(oImg.style.top);
var oDiv_style_left = intReplacePx(oImg.style.left);
switch(bullet_direction){
case 'left':
oDiv.style.top = oDiv_style_top + 18 + 'px';
oDiv.style.left = oDiv_style_left - img_width / 2 + 'px';
oDiv.style.display = 'inline-table';
oDiv.setAttribute("direction", "left");
break;
case 'top':
oDiv.style.top = oDiv_style_top - 30 + 'px';
oDiv.style.left = oDiv_style_left + 25 + 'px';
oDiv.setAttribute("direction", "top");
break;
case 'right':
oDiv.style.top = oDiv_style_top + 18 + 'px';
oDiv.style.left = oDiv_style_left + img_width + 'px';
oDiv.style.display = 'inline-table';
oDiv.setAttribute("direction", "right");
break;
case 'bottom':
oDiv.style.top = oDiv_style_top + img_height + 'px';
oDiv.style.left = oDiv_style_left + 25 + 'px';
oDiv.setAttribute("direction", "bottom");
break;
}
oDiv.setAttribute("class", "bullet");
oDiv.setAttribute("name", "bullet");
document.body.appendChild(oDiv);//造子弹
};
}
//制造坦克装备
function makeTankEquipment(){
var oEquipmentImg = document.createElement('img'),
scoreNode = document.createElement("div"), //创建分数提示框节点
oEquipmentImgLeng = 30,//边长
oEquipmentImgArr = ['gun.jpg','bomb.jpg','star.jpg','warship.jpg','bullet.jpg','missile.jpg'],
oEquipmentImgScoreArr = ['+3','-1','+1','+10','+50','+100'],
rand_index = Math.floor(Math.random()*oEquipmentImgArr.length);
oEquipmentImg.setAttribute('id', 'equipment');
oEquipmentImg.setAttribute('src', oEquipmentImgArr[rand_index]);//返回是一个随机数组中的一个数。主要用的就是random的方法。random方法，是返回(0,1] 的数，但取不到1，所以用Math.floor向下取整。
oEquipmentImg.setAttribute('height', oEquipmentImgLeng);
oEquipmentImg.setAttribute('width', oEquipmentImgLeng);
oEquipmentImg.setAttribute('data-type', rand_index);
oEquipmentImg.style.position = 'absolute';
oEquipmentImg.style.top = Math.round(Math.random() * screen_height) - oEquipmentImgLeng + 'px';
oEquipmentImg.style.left = Math.round(Math.random() * screen_width) - oEquipmentImgLeng + 'px';
document.body.appendChild(oEquipmentImg);//造设备
scoreNode.innerHTML = oEquipmentImgScoreArr[rand_index];//分数值
scoreNode.setAttribute('id', 'tip');
scoreNode.style.marginTop = oEquipmentImg.style.top;
scoreNode.style.marginLeft = oEquipmentImg.style.left;
scoreNode.style.transition = 'all 0.6s ease-in-out'; /* Browsers that Support it */
document.body.appendChild(scoreNode);
return oEquipmentImgScoreArr[rand_index];
}
//制造障碍物
function makeTankObstacle(num = 66){
var obstacle_arr = ['river.jpg','grass.jpg','brick.jpg','snow.jpg','steel.jpg'];
for (var o = 0; o < num; o++) {
rand_index = Math.floor(Math.random()*obstacle_arr.length);
var obstacle = document.createElement("div"),
obstacleWidthValue = 30 + Math.round(Math.random() * 150),
obstacleHeightValue = 30 + Math.round(Math.random() * 150);
obstacle.setAttribute('data-index', o);//障碍物编号
switch(obstacle_arr[rand_index]){
case obstacle_arr[0]:
obstacle.setAttribute('data-alias', 'river');//设置别名
obstacle.setAttribute('data-nums', '+∞');//需要被打几枪才能毙命
obstacle.setAttribute('data-over', false);//子弹是否可以前进
obstacle.setAttribute('data-forward', true);//当有船时，坦克能否继续前进
obstacle.setAttribute('data-accelerate', false);//坦克是否加速
break;
case obstacle_arr[1]:
obstacle.setAttribute('data-nums', '+∞');//需要被打几枪才能毙命
obstacle.setAttribute('data-over', false);//子弹是否可以前进
obstacle.setAttribute('data-forward', true);//坦克能否继续前进
obstacle.setAttribute('data-accelerate', false);//坦克是否加速
obstacle.style.zIndex = 100;
obstacle.style.opacity = '0.8';
break;
case obstacle_arr[2]:
obstacle.setAttribute('data-nums', Math.ceil(Math.random()*3));//需要被打几枪才能毙命
obstacle.setAttribute('data-over', true);//子弹是否可以前进
obstacle.setAttribute('data-forward', false);//坦克能否继续前进
obstacle.setAttribute('data-accelerate', false);//坦克是否加速
break;
case obstacle_arr[3]:
obstacle.setAttribute('data-nums', '+∞');//需要被打几枪才能毙命
obstacle.setAttribute('data-over', false);//子弹是否可以前进
obstacle.setAttribute('data-forward', true);//坦克能否继续前进
obstacle.setAttribute('data-accelerate', true);//坦克是否加速
break;
case obstacle_arr[4]:
obstacle.setAttribute('data-alias', 'steel');//设置别名
obstacle.setAttribute('data-nums', '+∞');//需要被打几枪才能毙命
obstacle.setAttribute('data-over', true);//子弹是否可以前进
obstacle.setAttribute('data-forward', false);//坦克能否继续前进
obstacle.setAttribute('data-accelerate', false);//坦克是否加速
break;
}
obstacle.setAttribute('name', 'obstacle');
obstacle.setAttribute('class', 'obstacle');
obstacle.style.position = 'absolute';
obstacle.style.background = 'url('+ obstacle_arr[rand_index] +')';//生成背景随机图片
obstacle.style.width = obstacleWidthValue + 'px';
obstacle.style.height = obstacleHeightValue + 'px';
obstacle.style.top = Math.round(Math.random() * screen_height) - obstacleHeightValue + 'px';
obstacle.style.left = Math.round(Math.random() * screen_width) - obstacleWidthValue + 'px';
obstacle.style.color = '#fff';
document.body.appendChild(obstacle);
};
}
//现在时间
function currentTime(callback) {
var flag = true;
setInterval(function () {
var now = new Date();
var year = now.getFullYear();
var month = ((now.getMonth()+1).toString().length == 1 ? '0' : '') + (now.getMonth() + 1);
var date = now.getDate();
var hour = (now.getHours().toString().length == 1 ? '0' : '') + now.getHours();
var minutes = (now.getMinutes().toString().length == 1 ? '0' : '') + now.getMinutes();
var second = (now.getSeconds().toString().length == 1 ? '0' : '') + now.getSeconds();
var time = year + "-" + month + "-" + date + " " + hour + ":" + minutes + ":" + second;
document.getElementById("current_time").innerHTML = time;
flag && callback(time);//使用匿名函数，返回setInterval里的值,我们这里只需要第一次返回
flag = false;
}, 1000);
};
//分钟和秒形式倒计时
function resetTime(time){
var timer = null;
var t = time;
var m = 0;
var s = 0;
m = Math.floor(t/60%60);
m<10&&(m='0'+m);
s = Math.floor(t%60);
function countDown(){
s--;
s<10&&(s='0'+s);
if(s.length>=3){
s = 59;
m = m<10 ? "0"+(Number(m)-1) : (Number(m)-1);
}
if(m.length>=3){
m = '00';
s = '00';
document.getElementById("time").style.display = 'block';
document.onmousedown = null;//时间到，禁用鼠标
document.onkeydown = null;//时间到，禁用键盘
clearInterval(timer);
}
document.getElementById("remaining_time").innerHTML = m + ":" + s;
}
timer = setInterval(countDown,1000);
}
resetTime(500);//获取倒计时间,默认5分钟
//获取本机IP
document.getElementById("localhost").innerHTML = returnCitySN["cip"] + ' ' + returnCitySN["cname"];
currentTime(function (time) {//再嵌套一个匿名函数，直接在其中调用函数并将返回值赋给其他变量。
document.getElementById("start_time").innerHTML = time;
});
//对象属性的获取
function intReplacePx(objAttr){
return parseInt(objAttr.replace('px', '')) || 0;
}
function isCollisionByPoint(pointX,pointY,index,direction){
if_condition = !(pointX < obstacle_offset_left || pointX > obstacle_offset_left + obstacle_width || pointY < obstacle_offset_top || pointY > obstacle_offset_top + obstacle_height);
if(if_condition){
localStorage.setItem('obstacle_direction_' + index,direction);
console.log('坦克碰到障碍物不能前进！');
return false;
}else{
return true;
}
}
function isCollisionByDataAttr(if_condition2,data_forward,data_alias,data_ship,index,direction){
console.log(arguments);
if(if_condition2 && (data_forward == 'false' || data_alias == 'river' && data_ship == '')){//坦克碰到障碍物
console.log('坦克碰到障碍物不能前进！');
localStorage.setItem('obstacle_direction_' + index,direction);
return false;
}else{
return true;
}
}
</script>
</body>
</html>
游戏截图：
406
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
