这是我写的第二个jq小游戏了写了一个多星期，挺不容易的，写篇博客记录一下
游戏界面：
英雄机有能量条：能量条的积攒通过打爆敌机和打boss获得，能量条到达20%英雄机的弹孔可以升级为双管炮火弹孔，能量条到达100%可以升级为4管炮火弹孔
进度条过了30%boss1会出现，进度条过了70%boss2会出现。一共有两个boss。
按空格关闭背景音乐
按回车游戏暂停，也可以点击暂停按钮
击败boss有20点能量和1000得分
物资会随机出现
捡到蓝色物资是蓝色小水弹
捡到红色物资是紫色小火弹
捡到黄色物资是增加两架副手小飞机，持续时间5秒，时间可以累加
捡到红色心型物资是加10点血量
点击 获取雷霆战机素材
提取码是：euuc
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>雷霆战机</title>
</head>
<style>
*{margin: 0px;padding: 0px;list-style-type: none}
#container{width: 512px;height:768px;margin-left:32%;
}
#bj li:nth-of-type(1){position:absolute;width:512px;height:768px;background:url('fj/bj.jpg') no-repeat;left:32.1%;top:-765px;}
#bj li:nth-of-type(2){position:absolute;width: 512px;height:768px;background:url('fj/bj.jpg') no-repeat;left: 32.1%;}
/*敌机*/
#enemyPlaneArray span,#Hero,#Hero span{
border-radius: 50%;
}
/*英雄血条*/
#health{border:solid #62ff10 5px;
width: 60px;height:60px;
position: absolute;
left:3%; top: 22%;;
border-radius:50%;text-align: center;
}
#health span{position: absolute;top: 32%;left: 20%;font-weight: bolder;font-size: 10px;}
#health p{width: 250px;height: 20px;border:solid #29ff0a 5px;position: absolute;left: 100%;top: 27%;
}
#healthColor2{width: 260px;height: 25px;position: absolute;left: 100%;top: 27%;background-color: red; }
/*能量条*/
#score {border: solid 5px #18ff0e;
width: 60px;height:60px;
position:absolute;
position: absolute;
left:3%; top: 39%;
border-radius:50%;
text-align: center;
}
#score p{position: absolute;top: 32%;left:20%;font-weight: bolder;font-size: 10px;}
#scoreDiv{width: 250px;height:20px;border:solid #29ff0a 5px;position: absolute;left: 100%;top: 27% ;}
#scoreCount{height:100%;position: absolute; background-color: #05fff7}
/*进度条*/
#plan{border:solid #62ff10 5px;
width: 60px;height:60px;
position: absolute;
left:3%; top: 56%;;
border-radius:50%;text-align: center;
}
#plan span{position: absolute;top: 32%;left: 20%;font-weight: bolder;font-size: 13px;}
#plan p{width: 250px;height: 20px;border:solid #29ff0a 5px;position: absolute;left: 100%;top: 27%;}
#planColor2{height: 25px;position: absolute;left: 100%;top: 27%;background-color: #05fff7}
/*得分*/
#integral{
width: 60px;height:20px;
position: absolute;
left:3%; top: 76%;;
}
#integral span{position: absolute;left: 15%;font-weight: bolder;font-size: 20px;}
#integral p{width: 100px;height: 30px;font-weight: bolder;position: absolute;left:100%;top: 20%}
/*boss血条*/
#bossHealth{border:solid #62ff10 5px;
width: 70px;height:70px;
position: absolute;
left:3%; top: 5%;;
border-radius:50%;text-align: center;
}
#bossHealth span{position: absolute;top: 38%;left: 5%;font-weight: bolder;font-size: 10px;}
#bossHealth p{width:250px;height: 20px;border:solid #29ff0a 5px;position: absolute;left: 100%;top: 27%;
}
#bossHealthColor2{width: 260px;height: 25px;position: absolute;left: 100%;top: 27%;background-color: #fff909; }
/*警告*/
#warn{position:absolute;top: 30%;left:42%;background-image: url("fj/warn.png");width: 225px;height: 148px;display: none;z-index: 1}
/*暂停*/
#pause{position:absolute;top:30%;left:82%;background: url("fj/pause.png") no-repeat;width: 76px;height: 62px;}
#pause div{position:absolute;top:30%;left:-130%;font-weight: bolder;font-size: 20px;}
/*游戏说明*/
#explain{position:absolute;top:45%;left:75%;font-weight: bolder;font-size: 17px;width: 300px;height: 200px;}
/*继续游戏*/
#go{position: absolute;top: 30%;left: 82%;background: url("fj/go.png") no-repeat; background-size: 70%;width: 150px;height: 70px;display: none}
/*遮罩层*/
#shade{position:absolute;width: 100%;height:100%;left: 0;top: 0;background: #000;opacity: 0.5;display: none;z-index: 1;}
#box{position: absolute;width: 250px;height: 120px;left:40%;top:38%;background-color: #dbdbe1;
border-radius: 4px;
border: 2px #dbdbe1 solid;display: none;z-index: 1;
}
#box h3{text-align:center;color: #000000}
#gameScore{text-align: center;font-size: 20px;font-weight: bolder;margin-top: 15px;}
#over{font-size: 15px;font-weight: bolder;margin-top: 10px;margin-left: 40px;}
#over a{background-color: #dbdbe1;border:1px solid #000000;color: #000000;
text-decoration:none; border-radius: 4px;margin-left: 25px;;
}
</style>
<body style="overflow: hidden ;">
<div id="health"><span>生命值</span><p id="healthColor"><div id="healthColor2"></div></p></div>
<div id="score">
<p>能量条</p>
<div id="scoreDiv">
<div id="scoreCount">
</div>
</div>
</div>
<div id="plan"><span>进度条</span><p id="planColor"><div id="planColor2"></div></p></div>
<div id="integral"><span>得分:</span><p id="integralCount"></p></div>
<div id="bossHealth"><span>boss生命值</span><p id="bossHealthColor"><div id="bossHealthColor2"></div></p></div>
<!--警告-->
<div id="warn"> </div>
<!--游戏暂停-->
<button id="pause" ><div>点击暂停</div></button>
<!--游戏继续-->
<div id="go"></div>
<div id="explain" >
按空格关闭背景音乐<br/><hr/>
按回车游戏暂停<br/><hr/>
击败boss有20点能量和1000得分<br/><hr/>
英雄能量条达到20%升级成双管炮火<br/><hr/>
英雄能量条达到100%升级成4管炮火<br/><hr/>
捡到蓝色物资是蓝色小水弹<br/><hr/>
捡到红色物资是紫色小火弹<br/><hr/>
捡到黄色物资是加两辆副手小飞机<br/><hr/>
捡到红色心型物资是加10点血量<br/><hr/>
</div>
<!--遮罩层--->
<div id="shade"></div>
<!--游戏结束提示框-->
<div id="box">
<h3>游戏结束</h3>
<hr/>
<div id="gameScore">游戏得分：</div>
<div id="over">
<a href="#" id="yes">再来一把</a>
<a href="#">算了</a>
</div>
</div>
<div id="container">
<!--背景图片-->
<div id="bj">
<ul>
<li></li>
<li></li>
</ul>
</div>
<!--英雄机-->
<div id="Hero">
</div>
<!--英雄副手-->
<div id="HeroChild">
</div>
<!--英雄机子弹夹-->
<div id="cartridge">
</div>
<!--敌机容器-->
<div id="enemyPlaneArray">
</div>
<!--敌机子弹夹-->
<div id="PlaneBullet">
</div>
<!--物资库-->
<div id="supplies"></div>
<!--boss容器-->
<div id="bossBox"></div>
<!--boss子弹容器-->
<div id="bossBullet"></div>
</div>
<div style="display: none">
<audio id="bjMp3" autoplay loop >
<source src="fj/music/bj.mp3" type="audio/mpeg" />
</audio>
<audio id="scoreMp3">
<source src="fj/music/score.mp3" type="audio/mpeg" />
</audio>
<audio id="positiveMp3">
<source src="fj/music/Positive.mp3" type="audio/mpeg" />
</audio>
<audio id="warningMp3">
<source src="fj/music/Warning.wav" type="audio/mpeg" />
</audio>
</div>
</body>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
window. function x(){//初始化工作
var Hero = document.getElementById("Hero");//英雄机
var container= document.getElementById("container");//主体
var enemyPlaneArray=document.getElementById("enemyPlaneArray");//敌机
var cartridge=document.getElementById("cartridge");//子弹容器
var healthColor2=document.getElementById("healthColor2").offsetWidth;//英雄机血量宽度
var healthColor=document.getElementById("healthColor").offsetWidth;//英雄机血量z固定总宽度
var HeroChild=document.getElementById("HeroChild");//英雄副手库
var bossBox=document.getElementById("bossBox");//boss容器
var bossHealthColor2=document.getElementById("bossHealthColor2").offsetWidth;//boss血量宽度
var bossBullet=document.getElementById("bossBullet");//boss子弹容器
var PlaneBullet=document.getElementById("PlaneBullet");//敌机子弹容器
var supplies=document.getElementById("supplies");//物资库
var bulletSize=1; //英雄机子弹类型,初始化默认为类型1
var HeroSize=1; //英雄飞机类型
var HeroChildWhether=false;//是否启动副手飞机；默认不启用
var bossHealthWhere=true;//是否boss死亡；默认为true
var HeroHealthWhere=false;//是否英雄死亡或暂停使用；默认为false，true为暂停
var count=0;//能量条
var iCount=0;//得分
var bjMp3=document.getElementById("bjMp3");//背景音乐
var scoreMp3=document.getElementById("scoreMp3");//捡到物资音效
var positiveMp3=document.getElementById("positiveMp3");//警告音效
var warningMp3=document.getElementById("warningMp3");//游戏结束音效
var left= false;//左
var right= false;//右
var top = false;//上
var bottom = false;//下
setInterval(function(){
if(HeroHealthWhere==false) {
if(left){
if( container.offsetLeft<Hero.offsetLeft) {
Hero.style.left= Hero.offsetLeft-20+"px";
}
}else if(top){
if(container.offsetTop<Hero.offsetTop){
Hero.style.top = Hero.offsetTop-20+"px";
}
}else if(right){
if(container.offsetWidth+container.offsetLeft>Hero.offsetLeft+Hero.offsetWidth){
Hero.style.left= Hero.offsetLeft+20+"px";
}
}else if(bottom){
//主机的top值+主机的高度小于外层父级div的高度才能移动
if(Hero.offsetTop+Hero.offsetHeight<container.offsetHeight){
Hero.style.top = Hero.offsetTop+20+"px";
}
}
}
},50);
document.onkeydown= function(ev){//用户按下一个键盘按键时发生
var ev = ev || event;
var keyCode = ev.keyCode;
switch(keyCode){
case 37:
left=true;
break;
case 38:
top = true;
break;
case 39:
right = true;
break;
case 40:
bottom = true;
break;
case 13:
HeroHealthWhere=true;//游戏暂停
break;
case 32:
bjMp3.pause();//停止播放背景音乐
break;
}
}
document.onkeyup= function(ev){//当用户释放键盘按钮时
var ev = ev || event;
var keyCode = ev.keyCode;
switch(keyCode){
case 37:
left = false;
break;
case 38:
top = false;
break;
case 39:
right = false;
break;
case 40:
bottom = false;
break;
}
}
createHreo();
//初始化创建英雄机
function createHreo(){
createFlyerStyle(Hero,"hore/hero1.png","80","95","48%","88%");
}
//英雄机的副手小飞机创建
function createAssistant(){
removeAssistant();//先清除副手小飞机
if(HeroSize==1){
//左边副手小飞机
createFlyer("span","hore/hero1.png",30,25,Hero.offsetWidth-100,Hero.offsetHeight-50,Hero);//调用创建飞行物方法
//右边副手小飞机
createFlyer("span","hore/hero1.png",30,25,Hero.offsetWidth-10,Hero.offsetHeight-50,Hero);//调用创建飞行物方法
}else {
//左边副手小飞机
createFlyer("span", "hore/hero1.png", 30, 25, Hero.offsetWidth - 105, Hero.offsetHeight - 20, Hero);//调用创建飞行物方法
//右边副手小飞机
createFlyer("span", "hore/hero1.png", 30, 25, Hero.offsetWidth - 5, Hero.offsetHeight - 20, Hero);//调用创建飞行物方法
}
}
//英雄机的副手小飞机删除
function removeAssistant(){
var HeroPlane= $("#Hero span");
HeroPlane.remove();
}
setInterval(assistantTime,1000);
var assistantTimeCount=0;//英雄机的副手小飞机时间
//检测小飞机的时间方法
function assistantTime(){
if(HeroChildWhether&&assistantTimeCount>0){
assistantTimeCount--;
if(assistantTimeCount==0){ //判断小飞机的时间是否到了
HeroChildWhether=false;//不启用副手飞机子弹
removeAssistant();//删除副手小飞机
}
}
}
//生成英雄机子弹
function createZiDan(){
var left=(Hero.offsetLeft+Hero.offsetWidth/2-10);
var top=(Hero.offsetTop-Hero.offsetHeight/2);
if(HeroHealthWhere==false){//判断英雄是否死亡或暂停；false未死亡
//创建英雄主飞机子弹
if(HeroSize==1){//1号英雄飞机
createFlyer("span","hore/bullet"+bulletSize+".png",20,50,left,top+10,cartridge);//调用创建飞行物方法
}else if(HeroSize==2){//2号英雄飞机
createFlyer("span","hore/bullet"+bulletSize+".png",20,50,left-10,top,cartridge);//调用创建飞行物方法
createFlyer("span","hore/bullet"+bulletSize+".png",20,50,left+15,top,cartridge);//调用创建飞行物方法
}else if(HeroSize==3){//3号英雄飞机
createFlyer("span","hore/bullet"+bulletSize+".png",20,50,left-10,top,cartridge);//调用创建飞行物方法
createFlyer("span","hore/bullet"+bulletSize+".png",20,50,left+15,top,cartridge);//调用创建飞行物方法
createFlyer("span","hore/bullet"+bulletSize+".png",20,50,left-30,top+20,cartridge);//调用创建飞行物方法
createFlyer("span","hore/bullet"+bulletSize+".png",20,50,left+30,top+20,cartridge);//调用创建飞行物方法
}
/*---------------------------------------副手小飞机子弹创建----------------------------------------*/
if(HeroChildWhether){//判断是否启用副手小飞机的1号子弹
if(HeroSize==1){//1号英雄飞机
createFlyer("span","hore/bullet"+bulletSize+".png",20,50,left-45,top+50,cartridge);//创建左边小飞机1号子弹
createFlyer("span","hore/bullet"+bulletSize+".png",20,50,left+50,top+50,cartridge);//创建右边小飞机1号子弹
}else{//2号，3号英雄飞机
createFlyer("span","hore/bullet"+bulletSize+".png",20,50,left-48,top+50,cartridge);//创建左边小飞机1号子弹
createFlyer("span","hore/bullet"+bulletSize+".png",20,50,left+55,top+50,cartridge);//创建右边小飞机1号子弹
}
}
}
}
createZiDan();//初始化创建一颗英雄子弹
setInterval(upMove,6);//定时子弹向上飞
//英雄子弹向上飞
function upMove(){
if(HeroHealthWhere==false){//判断英雄机是否死亡或暂停
var bullet=$("#cartridge span");//子弹
bullet.css("top","-=30px");
if (container.offsetTop>parseInt(bullet.offset().top+bullet.height())){
bullet.remove();//删除一颗子弹
createZiDan();//创建一颗子弹
}
}
}
createEnemyplane(5);//初始化敌机
setInterval(downMove,10);//定时调用敌机向下飞
setInterval(downBullet,10);//定时调用敌机子弹
//生成敌机
function createEnemyplane(num){
if(HeroHealthWhere==false) {
for (var i = 0; i < num; i++) {
/*-------------------------创建敌机-------------------------------------*/
var planeColorSize = Math.floor(Math.random() * 3) + 1;
var planeTop = parseInt(Math.random() * 150);//随机敌机的高度
var enemyPlane = document.createElement("span");
enemyPlane.style.background = 'url(fj/foe/enemyPlane' + planeColorSize + '.png) no-repeat';
enemyPlane.style.backgroundSize = "100%";
// enemyPlane.style.border="solid 1px red";
enemyPlane.style.width = "70px";
enemyPlane.style.height = "55px";
enemyPlane.style.position = "absolute";
var ranDom = Math.floor(Math.random() * parseInt(container.offsetWidth - 80));
var planeLeft = parseInt(container.offsetLeft + ranDom)
enemyPlane.style.left = planeLeft + "px";
enemyPlane.style.top = -planeTop + "px";
enemyPlaneArray.appendChild(enemyPlane);//添加敌机添加到敌机容器
/*----------------------创建敌机子弹--------------------------------*/
if (planeColorSize == 1) {//敌机随机创建子弹
var foeBullet = document.createElement("span");
foeBullet.style.background = 'url(fj/foe/bullet2.png) no-repeat';
foeBullet.style.backgroundSize = "100%";
// foeBullet.style.border="solid 1px red";
foeBullet.style.width = "9px";
foeBullet.style.height = "12px";
foeBullet.style.position = "absolute";
foeBullet.style.transform = 'rotate(180deg)';//旋转180度让弹头向下
foeBullet.style.left = (enemyPlane.offsetLeft + enemyPlane.offsetWidth / 2 - 5) + "px";
foeBullet.style.top = (enemyPlane.offsetTop + enemyPlane.offsetHeight) + "px";
PlaneBullet.appendChild(foeBullet);
}
}
}
}
//敌机向下飞
function downMove(){
if(HeroHealthWhere==false) {
var enemyPlane = $("#enemyPlaneArray span");//敌机
enemyPlane.css("top", "+=2px");
if (beyondBorder(enemyPlane, container)) {
createEnemyplane(1);//超出边界就创建一架敌机
}//调用超出边界方法
}
}
//敌机子弹向下飞
function downBullet(){
if(HeroHealthWhere==false) {
var bulletSpan = $("#PlaneBullet span");//敌机子弹
bulletSpan.css("top", "+=3px");
beyondBorder(bulletSpan, container);//调用超出边界方法
}
}
setInterval( detection,10);//定时每10毫秒检测一遍
//检查英雄子弹与敌机是否碰撞
function detection(){
if(HeroHealthWhere==false){
var bullet=$("#cartridge span");//英雄子弹
var enemyPlane=$("#enemyPlaneArray span");//敌机数组
if(HeroArrayCrash(enemyPlane,bullet)){//调用敌人与英雄相碰方法
// SheJiMp3.play(); //播放碰撞音效
// bullet.remove();//英雄子弹删除
scoreCount();//调用能量计分
integralCount();//调用计算得分
createZiDan();//创建一颗英雄子弹
createEnemyplane(1);//创建一辆敌机
}
}
}
setInterval(BulletDetection,10);
//检查敌机子弹与英雄机是否碰撞
function BulletDetection(){
if(HeroHealthWhere==false) {
var bulletSpan = $("#PlaneBullet span");//敌机子弹
var Hero = $("#Hero");//英雄机
if (HeroCrash(bulletSpan, Hero)) {
healthCount();//调用英雄扣血方法
}
}
}
setInterval( detectionPlane,10);//定时每10毫秒检测一遍
//检查英雄机是否与敌机相碰
function detectionPlane(){
if(HeroHealthWhere==false) {
var enemyPlane = $("#enemyPlaneArray span");//敌机
var Hero = $("#Hero");//英雄机
if (HeroCrash(enemyPlane, Hero)) {
healthCount();//调用英雄扣血方法
createEnemyplane(1);//调用创建敌机方法
}
}
}
var oneCargoWidth=33;//2号炮弹物资宽度
var twoCargoWidth=35;//3号炮弹物资宽度
var threeCargoWidth=45;//召唤副手物资宽度
var fourCargoWidth=50;//加血物资宽度
var sixCargoWidth=33;
//创建物资补给
function suppliesWay(){
if (HeroHealthWhere == false) {
var left = parseInt(container.offsetLeft + Math.floor(Math.random() * parseInt(container.offsetWidth - 50)));
var top = Math.floor(Math.random() * -200); //随机一个200之内的高度
var cargoSize = Math.floor(Math.random() * 4) + 1;//随机4种物资创建
if (cargoSize == 1) {
createFlyer("span", "cargo/cargo" + cargoSize + ".png", oneCargoWidth, 31, left, top, supplies);//2号激光
} else if (cargoSize == 2) {
createFlyer("span", "cargo/cargo" + cargoSize + ".png", twoCargoWidth, 32, left, top, supplies);//3号激光
} else if (cargoSize == 3) {
createFlyer("span", "cargo/cargo" + cargoSize + ".png", threeCargoWidth, 27, left, top, supplies);//召唤副手2个
} else if (cargoSize == 4) {
createFlyer("span", "cargo/cargo" + cargoSize + ".png", fourCargoWidth, 50, left, top, supplies);//加血10点
}
}
}
setInterval(suppliesDow,10);//定时调用物资向下飞检测
//物资向下飞
function suppliesDow() {
if (HeroHealthWhere == false) {
var suppliesSpan = $("#supplies span");
suppliesSpan.css("top", "+=2px");
beyondBorder(suppliesSpan, container);//调用超出边界方法
//判断物资的宽度来分辨是那个物资
//33是激光，35是激光导弹，45是召唤副手，50是加血
var Hero = $("#Hero");//英雄机
for (var i = 0; i < suppliesSpan.length; i++) {
if (suppliesSpan.eq(i).offset().left + suppliesSpan.eq(i).width() > Hero.offset().left
&& suppliesSpan.eq(i).offset().top + suppliesSpan.eq(i).height() > Hero.offset().top
&& suppliesSpan.eq(i).offset().top < Hero.offset().top + Hero.height()
&& suppliesSpan.eq(i).offset().left < Hero.offset().left + Hero.width()) {
suppliesSpan.eq(i).remove();//删除物资
scoreMp3.play();
if (suppliesSpan.eq(i).width() == oneCargoWidth) {
bulletSize = 1;//切换2号炮弹
} else if (suppliesSpan.eq(i).width() == twoCargoWidth) {
bulletSize = 2;//切换3号炮弹
} else if (suppliesSpan.eq(i).width() == threeCargoWidth) {
createAssistant();//调用创建副手飞机
HeroChildWhether = true;//启用副手飞机子弹
assistantTimeCount += 5;//加5秒副手飞机时间
} else if (suppliesSpan.eq(i).width() == fourCargoWidth) {
healthAdd();//调用补血包
}
}
}
}
}
var bossSize=1;//boss的类型；初始化默认为第一个
//创建boss
function createBoss(){
if(HeroHealthWhere==false) {
var bossLeft = container.offsetLeft + container.offsetWidth / 2 - 40;//boss的left值位置相对于最外层的盒子
if (bossSize == 1) {
createFlyerStyle(bossBox, "foe/boss" + bossSize + ".png", "149", "86", bossLeft + "px", "0px");
} else if(bossSize==2){
createFlyerStyle(bossBox, "foe/boss" + bossSize + ".png", "135", "131", bossLeft + "px", "0px")
}
}
}
setInterval(bossDow,20);//定时调用boss移动方法
var direction=0;//boss方向
//boss移动方法
function bossDow(){
if(HeroHealthWhere==false){
var boss=$("#bossBox");//boss
/*---------------------------------boss画三角形移动-----------------------------------*/
if(boss.offset().left+boss.width()>container.offsetLeft+container.offsetWidth){//超出右边
direction="+top";//往下移
}else if(boss.offset().left<=container.offsetLeft){//超出左边
direction="-top";//往上右移动
}else if(boss.offset().top>container.offsetHeight/2-100){//超出底部
direction="-left";//往左移动
}else if(boss.offset().top<container.offsetTop){//超出顶部
direction="+left";//往右下移动
}
var speed=3+Math.floor(Math.random()*3)+1;
if(direction==0){//初始化往右下移动
boss.css("left","+=3px")
}
if(direction=="-top"){//上右移动
boss.css("top","-="+speed+"px");
boss.css("left","+=2px");//1
}
if(direction=="+left"){//右下移
boss.css("left","+="+speed+"px");
boss.css("top","+=2px");//1
}
if(direction=="-left"){//左移
boss.css("left","-="+speed+"px");//2
}
if(direction=="+top"){//下移
boss.css("top","+="+speed+"px");
boss.css("left","-=3px")//2
}
}
}
//创建boss子弹
function createBossBullet() {
if (HeroHealthWhere == false) {
var boss = $("#bossBox");//boss
var bulletSize = Math.floor(Math.random() * 3) + 1;//随机炮弹类型
if (bossHealthWhere == false) {
if (bossSize == 1) {//boss1子弹类型
var bulletLeft1 = boss.offset().left + 5;//第一颗子弹的left值
var bulletLeft2 = boss.offset().left + 27;//第二颗子弹的left值
var bulletLeft3 = boss.offset().left + 37;//第三颗子弹的left值
var bulletLeft4 = boss.offset().left + 58;//第四颗子弹的left值
var bulletLeft5 = boss.offset().left + 102;//第五颗子弹的left值
var bulletLeft6 = boss.offset().left + 110;//第六颗子弹的left值
var bulletLeft7 = boss.offset().left + 130;//第七颗子弹的left值
var bulletTop1 = boss.offset().top + boss.height() - 30;
var bulletTop2 = boss.offset().top + boss.height() - 20;
createFlyer("span", "foe/bossbullet" + bulletSize + ".png", 12, 12, bulletLeft1, bulletTop1, bossBullet);
createFlyer("span", "foe/bossbullet" + bulletSize + ".png", 12, 12, bulletLeft2, bulletTop2, bossBullet);
createFlyer("span", "foe/bossbullet" + bulletSize + ".png", 12, 12, bulletLeft3, bulletTop1, bossBullet);
createFlyer("span", "foe/bossbulletx" + bulletSize + ".png", 36, 30, bulletLeft4, bulletTop1, bossBullet);//boss1中间的炮弹
createFlyer("span", "foe/bossbullet" + bulletSize + ".png", 12, 12, bulletLeft5, bulletTop1, bossBullet);
createFlyer("span", "foe/bossbullet" + bulletSize + ".png", 12, 12, bulletLeft6, bulletTop2, bossBullet);
createFlyer("span", "foe/bossbullet" + bulletSize + ".png", 12, 12, bulletLeft7, bulletTop1, bossBullet);
} else if (bossSize == 2) {//boss2的子弹类型
var bulletLeft1 = boss.offset().left - 10;
var bulletLeft2 = boss.offset().left + 15;
var bulletLeft3 = boss.offset().left + 47
var bulletLeft4 = boss.offset().left + 115
var bulletLeft5 = boss.offset().left + 130;
var bulletTop1 = boss.offset().top + boss.height() - 10;
var bulletTop2 = boss.offset().top + boss.height() - 30;
createFlyer("span", "foe/bossbulletx" + bulletSize + ".png", 20, 20, bulletLeft1, bulletTop2, bossBullet);
createFlyer("span", "foe/bossbulletx" + bulletSize + ".png", 20, 20, bulletLeft2, bulletTop1, bossBullet);
createFlyer("span", "foe/bossbulletx" + bulletSize + ".png", 50, 50, bulletLeft3, bulletTop1, bossBullet);
createFlyer("span", "foe/bossbulletx" + bulletSize + ".png", 20, 20, bulletLeft4, bulletTop1, bossBullet);
createFlyer("span", "foe/bossbulletx" + bulletSize + ".png", 20, 20, bulletLeft5, bulletTop2, bossBullet);
}
}
}
}
var bossBulletCount=0;
setInterval(bossBulletDow,5);
//boss子弹往下移动
function bossBulletDow() {
if(HeroHealthWhere==false) {
var Bullets = $("#bossBullet span");//boss
Bullets.css("top", "+=3px");
if (beyondBorder(Bullets, container)) {
bossBullteRebirth();
}
}
}
//boss子弹重生
function bossBullteRebirth() {
if (HeroHealthWhere == false) {
bossBulletCount++;
if (bossSize == 1) {//1号boss
if (bossBulletCount == 7) {
createBossBullet();
bossBulletCount = 0;
}
} else if (bossSize == 2) {//2号boss
if (bossBulletCount == 5) {
createBossBullet();
bossBulletCount = 0;
}
}
}
}
setInterval(bossBulletDetection,10);
//boss子弹碰撞英雄机
function bossBulletDetection(){
if(HeroHealthWhere==false) {
var bossBulletSpan = $("#bossBullet span");
var Hero = $("#Hero");//英雄机
if (bossHealthWhere == false) {//boss未死亡
if (HeroCrash(bossBulletSpan, Hero)) {
healthCount();
bossBullteRebirth();
}
}
}
}
setInterval(HeroBulletDetectionBoss,10);//定时调用检测英雄子弹相撞boss
//检测英雄子弹相撞boss
function HeroBulletDetectionBoss(){
if(HeroHealthWhere==false) {
var HeroBullte = $("#cartridge span")
var boss = $("#bossBox")
if (bossHealthWhere == false) {//boss未死亡
if (HeroCrash(HeroBullte, boss)) {
createZiDan();
bossHealth();
}
}
}
}
setInterval(HeroDetectionBoss,10);
//英雄机与boss相撞
function HeroDetectionBoss(){
if(HeroHealthWhere==false) {
var boss = $("#bossBox")
var hero = $("#Hero");//英雄机
if (bossHealthWhere == false) {//boss未死亡
if (HeroCrashBoss(hero, boss)) {
healthCount();//调用扣取英雄血量方法
}
}
}
}
//设置飞行物样式方法
function createFlyerStyle(create,backgroundImage,width,height,left,top){
create.style.background='url(fj/'+backgroundImage+') no-repeat';
create.style.backgroundSize="100%";
create.style.width=width+"px";
create.style.height=height+"px";
create.style.position="absolute";
create.style.left=left;
create.style.top=top;
}
//创建飞行物方法
function createFlyer(span,backgroundImage,width,height,left,top,box){
var create=document.createElement(span);//创建一个标签
create.style.background='url(fj/'+backgroundImage+') no-repeat';
create.style.backgroundSize="100%";
create.style.width=width+"px";
create.style.height=height+"px";
create.style.position="absolute";
create.style.left=left+"px";
create.style.top=top+"px";
// create.style.border="solid 1px red";
box.appendChild(create);//将创建好的span添加到传进来的指定位置
}
//boss与英雄机相撞检测方法
function HeroCrashBoss(hero,boss){
if(hero.offset().left+hero.offset().width()>boss.offset().left
&& hero.offset().left<boss.offset().left+boss.offset().width()
&& boss.offset().top+boss.offset().height()>hero.offset().top
&& boss.offset().top<hero.offset().top+hero.offset().height()){
return true;
}
}
//敌人与英雄机碰撞检测方法：相碰返回true
function HeroCrash(foeArr,hoerName){
for(var i=0;i<foeArr.length;i++){
if (foeArr.eq(i).offset().left + foeArr.eq(i).width() > hoerName.offset().left
&& foeArr.eq(i).offset().top + foeArr.eq(i).height() > hoerName.offset().top
&& foeArr.eq(i).offset().top < hoerName.offset().top + hoerName.height()
&& foeArr.eq(i).offset().left < hoerName.offset().left + hoerName.width()) {
foeArr.eq(i).remove();//删除敌机
return true;
}
}
}
//敌人数组与英雄数组碰撞检测方法：相碰返回true
function HeroArrayCrash(foeArr,heroName){
for(var i=0;i<heroName.length;i++){
for(var j=0;j<foeArr.length;j++){
if (foeArr.eq(j).offset().left + foeArr.eq(j).width() > heroName.eq(i).offset().left
&& foeArr.eq(j).offset().top + foeArr.eq(j).height() > heroName.eq(i).offset().top
&& foeArr.eq(j).offset().top < heroName.eq(i).offset().top + heroName.eq(i).height()
&& foeArr.eq(j).offset().left < heroName.eq(i).offset().left + heroName.eq(i).width()) {
foeArr.eq(j).remove();//删除敌机
heroName.eq(i).remove();//删除子弹
return true;
}
}
}
}
//飞行物超出边界删除方法:相碰返回true
function beyondBorder(flyer,box){
for(var i=0;i<flyer.length;i++){
if(flyer.eq(i).offset().top+flyer.eq(i).height()>box.offsetHeight){
flyer.eq(i).remove();
return true;
}
}
}
//计算分数
function integralCount(){
iCount+=10;
var intCount= $("#integralCount");
intCount.text(iCount+"分");
}
//计算能量条
function scoreCount(){
count+=0.2;
var scoreDivs=document.getElementById("scoreDiv").offsetWidth-10;
var score= document.getElementById("scoreCount");
if(count>parseInt(scoreDivs/5)){//判断能量达到
HeroSize=2;//子弹类型切换，因为1号飞机的尺寸跟2号，3号不一样，子弹的轨道会不一样
HeroEvolution(2);//英雄飞机1号进化到2号
}
if(scoreDivs>count){
score.style.backgroundColor = "#13FAFF";
score.style.width=parseInt(count)+'px';
}else{
score.style.width=parseInt(scoreDivs)+'px';
//能量条满后切换到3号飞机
HeroSize=3;
HeroEvolution(3);//切换到3号飞机
}
}
//英雄机进化方法:根据传进来的num切换英雄飞机型号
function HeroEvolution(num){
Hero.style.background='url(fj/hore/hero'+num+'.png) no-repeat';
Hero.style.backgroundSize="100%";
Hero.style.width="80px";
Hero.style.height="70px";
// Hero.style.border="solid 1px red";
}
//计算扣取英雄机血量
function healthCount(){
var health=document.getElementById("healthColor2");
if(healthColor2>=2){
healthColor2-=2;
health.style.width=parseInt(healthColor2)+'px';
$("#Hero").fadeOut(500).fadeIn(500);
}else{
health.style.width=parseInt(0)+'px';
$("#Hero").hide();
showShade();//调用显示遮罩
HeroHealthWhere=true;
}
}
//英雄机的补血包
function healthAdd(){
var health=document.getElementById("healthColor2");
if(healthColor2<healthColor-10){
healthColor2+=10;
health.style.width=parseInt(healthColor2)+'px';
}else{
health.style.width=parseInt(healthColor)+'px';
}
}
//扣取boss血量
function bossHealth(){
var bossHealth=document.getElementById("bossHealthColor2");
if(bossHealthColor2>=0.2){
bossHealthColor2-=0.2;
bossHealth.style.width=parseInt(bossHealthColor2)+'px';
}else{
bossHealth.style.width=parseInt(0)+'px';
bossHealthWhere=true;//设置boss为死亡
$("#bossBox").hide();
iCount+=1000;//得分加1000分
count+=20;//加100点能量值
if(bossSize==2){
showShade();//调用显示遮罩
HeroHealthWhere=true;//游戏暂停
}
}
}
var playtime=0;//游戏时间
setInterval(planCount,1000);
//游戏进度
function planCount(){
if( HeroHealthWhere==false) {
playtime += 1;
var suji = Math.floor(Math.random() * 10) + 1
var planColor = document.getElementById("planColor").offsetWidth;//游戏进度父级div
var planColor2 = document.getElementById("planColor2");//游戏进度
if (playtime < planColor) {//判断游戏进度条是否超出
if (suji == 5) {
suppliesWay();//降落物资
}
planColor2.style.width = parseInt(playtime) + 'px';//加载进度条
bossOut(playtime, planColor);
}
}else{
bjMp3.pause();//暂停播放背景音乐
$("#pause").hide();//隐藏暂停按钮
$("#go").show();//显示继续游戏按钮
}
}
function bossOut(playtime,planColor){
if(HeroHealthWhere==false) {
/*--------------------boss1出现-----------------------*/
if (playtime == planColor * 0.3-4) {
warningMp3.play();//播放警告音效
//显示危险警告警告;比boss出现前4秒显示
$("#warn").fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500);
}
if (playtime == planColor * 0.3) {
bossHealthWhere=false;
createBoss();
createBossBullet();//创建一颗boss子弹
}
/*--------------------boss2出现-----------------------*/
if (playtime == planColor * 0.7 - 4) {
warningMp3.play();//播放警告音效
//显示危险警告警告;比boss出现前4秒显示
$("#warn").fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500);
}
if (playtime == planColor * 0.7) {
$("#bossBox").show();//显示boss
var bossHealth=document.getElementById("bossHealthColor").offsetWidth;//重新获取外层div宽度
bossHealthColor2=bossHealth;//重新赋值血量长度
bossSize = 2;//设置为创建boss2
bossHealthWhere=false;
createBoss();
createBossBullet();//创建一颗boss子弹
}
}
}
//显示遮罩层
function showShade(){
positiveMp3.play();//播放游戏结束音效
$("#shade").show();
$("#box").show();
var intCount= $("#integralCount");//得分
$("#gameScore").text("游戏得分："+intCount.text())
}
//隐藏遮罩层
function hideShade(){
$("#shade").hide();
$("#box").hide();
}
$("#yes").click( function (){
hideShade();
window.location.reload();//重新加载浏览器
})
//游戏暂停
$("#pause").click(function(){
$("#pause").hide();//隐藏暂停按钮
$("#go").show();//显示继续游戏按钮
HeroHealthWhere=true;
})
//游戏继续
$("#go").click( function(){
bjMp3.play();
$("#pause").show();//显示暂停按钮
$("#go").hide();//隐藏继续游戏按钮
HeroHealthWhere=false;
})
setInterval(LiDow,1);//定时调用背景图片
//背景图片
function LiDow() {
if (HeroHealthWhere == false) {
//第一张背景图片向下移动
$("#bj li").eq(1).animate({top: '+=1px'}, 5,
function () {
var li= $(this);
if (li.offset().top >= 768) {
li.css("top", "-=1530px");
}
});
//第二张背景图片向下移动
$("#bj li").eq(0).animate({top: '+=1px'}, 5,
function () {
var li2 = $(this);
if (li2.offset().top >= 768) {
li2.css("top", "-=1530px");
}
});
}
}
}
</script>
</html>