JS飞机大战 JS面向对象实现飞机大战
action-XD 人气:0想了解JS面向对象实现飞机大战的相关内容吗,action-XD在本文为您仔细讲解JS飞机大战的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:js,飞机大战,下面大家一起来学习吧。
主页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .bg{ width: 530px; height: 600px; position: relative; margin: 100px auto; background: url("bg.png") no-repeat 0 -9399px; } .plane{ width: 60px; height: 53px; position: absolute; left: 235px; bottom: 10px; background: url("my_air.gif") no-repeat; } .enemy{ position: absolute; } .buttle{ width: 9px; height: 37px; position: absolute; background: url("my_ari_1.gif") no-repeat; } .bomp{ width: 160px; height: 160px; position: absolute; background: url("0.gif") no-repeat; } </style> </head> <body> <div class="bg" id="bg"> <div class="plane" id="plane"></div> </div> </body> <script type="text/javascript" src="buttle.js"></script> <script type="text/javascript" src="enemies.js"></script> <script src="jquery-3.0.0.min.js"></script> <script> //bg移动begin var bg_height=-9399; function bg_move(){ var bg=document.getElementById("bg"); bg_height+=3; if (bg_height>0){ bg_height=-9399; } bg.setAttribute("style","background: url('bg.png') no-repeat 0 "+bg_height+"px"); } setInterval(bg_move,30); //bg移动over //通过获取键盘的key值来控制飞机的方向begin document.onkeydown = function(){ var key=event.keyCode; var plane =document.getElementById("plane"); switch (key){ case 37: plane_Left(); break; case 38: plane_Top(); break; case 39: plane_Right(); break; case 40: plane_Bottom(); break; case 32: fire(); break; } }; //通过获取键盘的key值来控制飞机的方向over //飞机的方向begin var planeLeft=235; var planeBottom=10; //声明全局变量planeBottom、planeLeft用来让飞机移动 function plane_Left(){ if(planeLeft>0){ planeLeft-=8; document.getElementById("plane").setAttribute("style","left:"+planeLeft+"px"+";"+"bottom:"+planeBottom+"px"); } } function plane_Right(){ if(planeLeft<470){ planeLeft+=8; document.getElementById("plane").setAttribute("style","left:"+planeLeft+"px"+";"+"bottom:"+planeBottom+"px"); } } function plane_Top(){ if(planeBottom<550){ planeBottom+=8; document.getElementById("plane").setAttribute("style","left:"+planeLeft+"px"+";"+"bottom:"+planeBottom+"px"); } } function plane_Bottom(){ if(planeBottom>10){ planeBottom-=8; document.getElementById("plane").setAttribute("style","left:"+planeLeft+"px"+";"+"bottom:"+planeBottom+"px"); } } //飞机的方向over function enemyShow(){ var number = parseInt(Math.random()*10); for(var i=0;i<number;i++){ var enemies=new enemiesShow(); } } setInterval(enemyShow,3000); function fire(){ var bottom=planeBottom+5+53; var left=planeLeft+30-5; var buttle = new buttleDemo(left,bottom); } </script> </html>
子弹
/** * Created by echo22 on 2016/7/29. */ function buttleDemo(left,bottom){ var buttleLeft =left; var buttleBottom = bottom; var id; var Move; inti(); function inti(){ id=getRandom(); var str = "<div class='buttle' id='b"+id+"'></div>"; $("#bg").append(str); $("#b"+id).css({"left":buttleLeft,"bottom":buttleBottom}); Move=setInterval(buttleMove,10); } //获取随机ID function getRandom(){ return parseInt(Math.random()*10000); } //子弹的移动 function buttleMove(){ if(buttleBottom<550){ buttleBottom+=10; $("#b"+id).css("bottom",buttleBottom); if(JudgeShot()){ dispire(); } } else { dispire(); } } //清除子弹 function dispire(){ $("#b"+id).remove(); clearInterval(Move); } //判断子弹与敌机的碰撞位置 function JudgeShot(){ var enemy=$(".enemy"); for (var i=0;i<enemy.length;i++){ var enemy_top=$(".enemy").eq(i).css("top"); var enemy_left=$(".enemy").eq(i).css("left"); enemy_bottom=600-getInt(enemy_top); enemy_left=getInt(enemy_left); console.log(enemy_left); if (buttleLeft>enemy_left&&buttleLeft<enemy_left+50&&buttleBottom>enemy_bottom&&buttleBottom<enemy_bottom+60){ $(".enemy").eq(i).remove(); var bomp="<div class='bomp' id='bo"+id+"'></div>"; $("#bg").append(bomp); $("#bo"+id).css({"left":buttleLeft-70,"bottom":buttleBottom-100}); setTimeout(gundan,50); return true; } } return false; } function getInt(str){ var result = str.substring(0,(str.length-2)); return parseInt(result); } function gundan(){ $("#bo"+id).remove(); } }
敌机
/** * Created by echo22 on 2016/7/29. */ function enemiesShow(){ var id; init(); function init(){ var type=getEnemyType(); var enemyLeft=getEnemyLeft(); getEnemyPlane(type,enemyLeft); getLine(); } function getEnemyPlane(type,left){ console.log(111); id=parseInt(Math.random()*10000); var width; var height; if(type==1){ width=47; height=72; } else { width=64; height=56; } var enemy="<div class='enemy' id='e"+id+"' ></div>"; $("#bg").append(enemy); $("#e"+id).css({"width":width,"height":height,"left":left,"background":"url('d_j_"+type+".gif') no-repeat"}); } function getEnemyType(){ return (parseInt(Math.random()*10/5)>0)?1:3; } function getEnemyLeft(){ return parseInt(Math.random()*(530-64)); } function getLine(){ Math.random()>0.5?zhiLine():quLine(); } function zhiLine(){ $("#e"+id).animate({ "top":"520px" },3000,function(){ $("#e"+id).remove(); }) } function quLine(){ $("#e"+id).animate({ "top":"200px", "left":getEnemyLeft() },1500,function(){}) $("#e"+id).animate({ "top":"520px", "left":getEnemyLeft() },1500,function(){ $("#e"+id).remove(); }) } }
更多有趣的经典小游戏实现专题,分享给大家:
加载全部内容