JS面向對象實現(xiàn)飛機大戰(zhàn)

更新時間：2020年08月26日 10:58:09 作者：action-XD

這篇文章主要為大家詳細介紹了JS面向對象實現(xiàn)飛機大戰(zhàn)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JS面向對象實現(xiàn)飛機大戰(zhàn)的具體代碼，供大家參考，具體內(nèi)容如下

主頁面

<!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();
 })
 }
}

更多有趣的經(jīng)典小游戲實現(xiàn)專題，分享給大家：

C++經(jīng)典小游戲匯總

python經(jīng)典小游戲匯總

python俄羅斯方塊游戲集合

JavaScript經(jīng)典游戲玩不停

java經(jīng)典小游戲匯總

javascript經(jīng)典小游戲匯總

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: