好资源导航 » 文章资讯 » jQuery实现简单飞机大战

jQuery实现简单飞机大战

2023-07-22 01:47:04 80

本文实例为大家分享了jQuery实现飞机大战的具体代码，供大家参考，具体内容如下






飞机大战





得分：
0

//入口函数 $(function(){ //变量定义 varbulletCreateInterval=300;//子弹发射时间间隔 varbulletMoveInterval=100;//子弹飞行时间间隔 varbulletSpeed=10;//子弹飞行速度 varenemyCreateInterval=2000;//敌机出生时间间隔 varenemyMoveInterval=100;//敌机下降时间间隔 varenemySpeed=5;//敌机下降速度 varbGamePlaying=false;//游戏状态 varscore=0; varendTime=newDate(); //计算飞机位置 varcalcPosition=(left,top,maxLeft,maxTop,minLeft=0,minTop=0)=>{ left=leftmaxLeft?maxLeft:left; top=topmaxTop?maxTop:top; return{left,top}; } //获取DOM对象的四个边界位置 vargetDomTRBL=(dom)=>{ varbounds={}; bounds.left=dom.offsetLeft; bounds.right=dom.offsetLeft+dom.offsetWidth; bounds.top=dom.offsetTop; bounds.bottom=dom.offsetTop+dom.offsetHeight; returnbounds; } //计算两个div是否相撞 varcalcHit=(div1,div2)=>{ varbounds1=getDomTRBL(div1); varbounds2=getDomTRBL(div2); if(bounds1.left>=bounds2.left&&bounds1.left<=bounds2.right){ if(bounds1.top>=bounds2.top&&bounds1.top<=bounds2.bottom){ returntrue; } elseif(bounds1.bottom>=bounds2.top&&bounds1.bottom<=bounds2.bottom){ returntrue; } } elseif(bounds1.right>=bounds2.left&&bounds1.right<=bounds2.right){ if(bounds1.top>=bounds2.top&&bounds1.top<=bounds2.bottom){ returntrue; } elseif(bounds1.bottom>=bounds2.top&&bounds1.bottom<=bounds2.bottom){ returntrue; } } returnfalse; } //发射子弹 varshoot=()=>{ //控制发射时间间隔 if(newDate()-endTime

").addClass("bullet"); $(".container").append(bullet); varbulletLF=planeLF+$(".plane").innerWidth()/2-bullet.innerWidth()/2; varbulletTP=planeTP-$(".plane").innerHeight()/2+20; bullet.css("left",bulletLF).css("top",bulletTP); endTime=newDate(); returntrue; } //键盘按下事件 $(window).keydown(function(e){ if(e.keyCode==13){//enter开始游戏 bGamePlaying=true; console.log("gamestart!") } if(!bGamePlaying)return; vartp=$(".plane").position().top; varlf=$(".plane").position().left; switch(e.keyCode){ case87://w tp-=10; break; case83://s tp+=10; break; case65://a lf-=10; break; case68://d lf+=10; break; case74://j shoot();//发射子弹 break; } varmaxLeft=$(".container").innerWidth()-$(".plane").innerWidth(); varmaxTop=$(".container").innerHeight()-$(".plane").innerHeight(); varposition=calcPosition(lf,tp,maxLeft,maxTop); $(".plane").css("left",position.left).css("top",position.top); }); //鼠标移动事件 varcontainerBounds=getDomTRBL($(".container")[0]); $(document).mousemove(function(e){ if(!bGamePlaying)return; vartp=e.pageY; varlf=e.pageX; if(tp>=containerBounds.top&&tp<=containerBounds.bottom&&lf>=containerBounds.left&&lf<=containerBounds.right){ tp-=containerBounds.top; lf-=containerBounds.left; } elsereturn; tp-=$(".plane").innerHeight()/2; lf-=$(".plane").innerWidth()/2; varmaxLeft=$(".container").innerWidth()-$(".plane").innerWidth(); varmaxTop=$(".container").innerHeight()-$(".plane").innerHeight(); varposition=calcPosition(lf,tp,maxLeft,maxTop); $(".plane").css("left",position.left).css("top",position.top); }); //鼠标点击事件 $(window).click(()=>{ if(!bGamePlaying){ bGamePlaying=true; } shoot(); }); //为了便于对计时器进行操作，选择用一个计时器对选取到的所有元素进行操作 //这样可以大幅减少计时器的数目 //生成敌方战机计时器 varenemyCreateTimer=setInterval(()=>{ varenemy=$("

").addClass("enemy").css("top",0); $(".container").append(enemy); //round()方法可把一个数字舍入为最接近的整数（四舍五入） varleft=Math.round(Math.random()*($(".container").innerWidth()-$(".enemy").innerWidth())); enemy.css("left",left); },enemyCreateInterval); //让子弹飞计时器 varbulletTimer=setInterval(()=>{ $(".bullet").each((index,element)=>{ varbullet=$(element); bullet.css("top",bullet.position().top-bulletSpeed); if(bullet.position().top<0){ bullet.remove(); } }); },bulletMoveInterval); //敌机下落计时器 varenemyTimer=setInterval(()=>{ $(".enemy").each((index,element)=>{ varenemy=$(element); enemy.css("top",enemy.position().top+enemySpeed); if(enemy.position().top>$(".container").innerHeight()){ enemy.remove(); } }); },enemyMoveInterval); //游戏主计时器 varmainTimer=setInterval(()=>{ varplane=$(".plane").get(0); $(".enemy").each(function(index,enemy){ //判断玩家是否撞上了敌机 if(calcHit(plane,enemy)||calcHit(enemy,plane)){ stopGame(); return; } //判断子弹是否撞上敌机 $(".bullet").each((index,bullet)=>{ if(calcHit(enemy,bullet)||calcHit(bullet,enemy)){ enemy.remove(); bullet.remove(); score+=10; $("#score").text(score); } }); }); },50); //停止游戏 varstopGame=()=>{ bGamePlaying=false; clearInterval(enemyCreateTimer); clearInterval(enemyTimer); clearInterval(bulletTimer); clearInterval(mainTimer); alert("游戏结束！你的积分为"+score); } });

更多有趣的经典小游戏实现专题，分享给大家：

C++经典小游戏汇总

python经典小游戏汇总

python俄罗斯方块游戏集合

JavaScript经典游戏玩不停

java经典小游戏汇总

javascript经典小游戏汇总

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

jQuery实现简单飞机大战

得分： 0

热门推荐

随机推荐