本文实例为大家分享了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(); }) } }
更多有趣的经典小游戏实现专题,分享给大家:
C++经典小游戏汇总
python经典小游戏汇总
python俄罗斯方块游戏集合
JavaScript经典游戏 玩不停
java经典小游戏汇总
javascript经典小游戏汇总
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持菜鸟教程(cainiaojc.com)。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:notice#cainiaojc.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。