基于原生JavaScript的经典坦克大战游戏开发设计

主要含有以下功能：

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){//当键盘操作过频繁，装备还没来得及生成时，返回falseconsole.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分钟//获取本机IPdocument.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>

游戏截图：

基于原生JavaScript的经典坦克大战游戏开发设计相关推荐

基于C++实现的经典坦克大战游戏
1 题目描述这战车大战就是指红白机的战车大战,操纵战车,将敌人通通轰掉,完成这个关卡. 小时后完红白机时,不能输人金手指,没办法自由控制游戏,现在刚好有这个OOP专题机会,我们就仿制一个战车大战,自 ...
基于Java的坦克大战游戏的设计与实现（论文+PPT+源码）
幻灯片1 基于Java的坦克大战游戏的设计与实现幻灯片2 CONTENTS 1 4 设计工具与相关技术详细设计 2 5 系统分析结论 3 总体设计幻灯片3 PPT模板下载:http://www ...
【java毕业设计】基于java+Socket+Eclipse的坦克大战游戏设计与实现（毕业论文+程序源码）——坦克大战游戏
基于java+Socket+Eclipse的坦克大战游戏设计与实现(毕业论文+程序源码) 大家好,今天给大家介绍基于java+Socket+Eclipse的坦克大战游戏设计与实现,文章末尾附有本毕业设 ...
基于JavaSwing坦克大战游戏的设计和实现
还记得传说中的经典90坦克大战吗?那些怀旧的记忆,伴随着我们一起走过来的经典坦克大战,刚开始那战战兢兢,屡屡被敌人坦克击毁的情景历历在目.现在好了,再也不用担心敌人坦克了,可以横冲直撞,横扫敌人坦克 ...
坦克大战游戏开发中的设计模式总结
坦克大战游戏开发中的设计模式总结 github地址: https://github.com/2017403603/TankGame_Simple1.0.git https://github.com/2 ...
用pygame做经典坦克大战游戏（附源码）
首先,我们得分析这个项目的结构,设计出它的框架坦克大战游戏项目开发需求分析 1.分析项目需要多少个类 2.分析每个类有哪些方法 1.坦克类(敌方坦克,我方坦克) 移动.射击.展示 2.子弹类移动 ...
javaSwing:坦克大战游戏的设计和实现
前言: 还记得传说中的经典90坦克大战吗?那些怀旧的记忆,伴随着我们一起走过来的经典坦克大战,刚开始那战战兢兢,屡屡被敌人坦克击毁的情景历历在目.现在好了,再也不用担心敌人坦克了,可以横冲直撞,横扫 ...
linux社区的java坦克大战,Java编程：坦克大战游戏的设计
三.总结分析其实坦克大战游戏设计的目的并不是想要单纯的做一个小游戏,二是为了加强对多线程的掌握,这一点我想应该可以通过游戏时一共运行二十二个线程来证实吧.尽管初衷比较单纯,但是设计过程之中却感觉自己 ...
基于QT的C++的坦克大战游戏
近期培训期间做的基于C++的坦克小游戏,欢迎评论. 首先是主驱动部分:tankclient.h,和tankclient.cpp tankclient.h部分 #ifndef TANKCLIENT_H ...

基于原生JavaScript的经典坦克大战游戏开发设计

基于原生JavaScript的经典坦克大战游戏开发设计相关推荐

最新文章

热门文章