本文实例为大家分享了jquery+css+html实现飞机大战游戏的具体代码,供大家参考,具体内容如下
本文运用html+css+jquery写了个飞机大战的游戏 分享下自己的思路:
界面构建
首先,先用HTML+CSS构建基本的页面结构,这里的设计如下图:
/*先给网页上所有元素添加一个红色的边框 方便布局 布局完毕后移除*/ *{ box-sizing: border-box; border:1px solid red; }
HTML代码:
0000
css代码:
body{ position: relative; padding:0; margin: 0; } .header{ position: fixed; line-height: 50px; top:0; left: 0; text-align: center; height: 50px; width:100%; z-index: 999; background:#555; color:goldenrod; font-size:30px; } .content{ position: relative; margin: 50px auto 0 auto; width:100%; /*height: calc(100vh - 170px);*/ height: 500px; } .footer{ position: fixed; width: 100%; bottom:0; left:0; height: 120px; } .lifePoints{ position: relative; width: 100%; height: 20px; } .lifeBar{ position: absolute; left: 0; height: 20px; width: 0%; background:deeppink; transition: all ease .5s; border-radius: 10px; } .skills{ float: left; width: 75%; height: 100px; } .skill{ float: left; width: 25%; height: 100px; line-height: 100px; text-align: center; } .magicPoints{ position: relative; float:left; width: 25%; height: 100px; } .magicBar{ position: absolute; width: 100%; height: 0px; background:deepskyblue; transition: all ease .5s; border-radius: 30%; bottom: 0; } .player{ width: 50px; height: 50px; background:red; position: absolute; bottom: 0; } .enemy{ width: 50px; height: 50px; background:black; position: absolute; top: 0; } .shoot{ position: absolute; top:calc(100% - 50px); width:8px; height:8px; border-radius: 50%; background:red; z-index: 1; } [class$=Skill]{ width:20px; height:20px; } .enemy[type="A"],.enemy[type="S"],.enemy[type="D"],.enemy[type="F"]{ width:50px; height: 50px; }
js部分:
var data = { playerX: 0, //玩家x轴坐标 playerY: 0, //玩家y轴坐标 enemyX: [], //敌人X坐标集 enemyY: [], //敌人Y坐标集 shootX: [], //子弹X坐标集 shootY: [], //子弹Y坐标集 score: 0, //分数 lifePoint: 100, //玩家生命值 magicPoint: 0, //玩家魔力值,满100能放必杀,通过击杀敌人获得 isBoss:false,//是否Boss //随机数方法 random: function(min, max) { return Math.floor(Math.random() * max + min); }, //创建生命条 createLifeBar:function(){ $(".lifeBar").css("width",data.lifePoint+"%") }, //创建法力条 createMagicBar:function(){ $(".magicBar").css("height",data.magicPoint+"%") }, //更新玩家分数 refreshScore:function(){ $("#score").html(data.score); }, //创建敌人 createEnemy:function(){ var temp=data.random(0,100);//生成0-100的随机数,用作概率判断 var windowWidth = $(window).width();//浏览器宽度 var left = data.random(0,windowWidth - 50)//敌人left值 if(temp>0&&temp<=10){//A类精英,能且只能通过A技能击杀 var html = 'A' }else if(temp>10&&temp<=20){//S类精英,能且只能通过S技能击杀 var html = 'S' }else if(temp>20&&temp<=30){//D类精英,能且只能通过D技能击杀 var html = 'D' }else if(temp>30&&temp<=40){//F类精英,能且只能通过F技能击杀 var html = 'F' }else if(temp>40&&temp<=50){//击杀回复一定血量 var html = '' }else if(temp>50&&temp<=60){//击杀回复法力值 var html = '' }else{ var html = '' } $("#content").append(html) $(".enemy").animate({ "top":"+=150%" },{ duration:5000, step:function(){ data.enemyX = []; data.enemyY = []; $(".enemy").each(function() { data.enemyX.push(parseInt($(this).css("left"))) data.enemyY.push(parseInt($(this).css("top"))) }); if(parseInt($(this).css("top"))>$("#content").height()-50){ $(this).remove(); data.lifePoint-=10; data.createLifeBar() if(data.lifePoint===0){ alert("game Over") } } } }) }, //碰撞方法 gameRule:function(){ for(var i=0;i$(window).width()- ($(window).width() - $("#content").width())/2 -$("#player").width()/2) ){ return false; } data.playerX = e.pageX; $("#player").css({ "left": data.playerX - ($(window).width() - $("#content").width()) / 2 - $("#player").width() / 2 }) }) }, //技能 playerSkills:function(){ var ASkillRefresh=1000;//A技能冷却时间 var SSkillRefresh=1000;//S技能冷却时间 var DSkillRefresh=1000;//D技能冷却时间 var FSkillRefresh=1000;//F技能冷却时间 var starTimeA=new Date().getTime(); var starTimeS=new Date().getTime(); var starTimeD=new Date().getTime(); var starTimeF=new Date().getTime(); $(document).keyup(function(e) { var keys=e.keyCode var left =parseInt($("#player").css("left")) switch(keys){ case 32: //普通攻击(空格) var html='' $("body").append(html) $(".shoot").animate({ "top":"-=150%" },{ duration:1000, step:function(){ data.shootX=[]; data.shootY=[]; $(".shoot").each(function() { data.shootX.push(parseInt($(this).css("left"))) data.shootY.push(parseInt($(this).css("top"))) }); data.gameRule(); if(parseInt($(this).css("top"))<0){ $(this).remove() } } }) break; case 65: //A var larstTime=new Date().getTime(); if(larstTime-starTimeA