JS面向对象实现飞机大战

站长资源 2024/11/5 佚名

77 1538 77

相思资源网 Design By www.200059.com

本文实例为大家分享了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经典小游戏汇总
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

js,飞机大战

标签：

js,飞机大战

相思资源网 Design By www.200059.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

相思资源网 Design By www.200059.com

评论“JS面向对象实现飞机大战”

暂无JS面向对象实现飞机大战的评论...

www.200059.com 相思资源网

139,976影音资源

144,792福利资源

21,817软件资源

631,128技术资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

JS面向对象实现飞机大战

js,飞机大战

js实现飞机大战小游戏

JavaScript Image对象实现原理实例解析

评论“JS面向对象实现飞机大战”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

友情链接