(编辑：jimmy 日期: 2024/11/1 浏览：2)
本文实例为大家分享了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="/UploadFiles/2021-04-02/buttle.js">
子弹
/**
* 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)"#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经典小游戏汇总
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。