首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JavaScript制作简易的微信打飞机

Posted in Javascript onMarch 31, 2015

简单的用JavaScript模拟微信打飞机，部分功能还不完善，刚开始写，还有很多不足，还望大家多多指出。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title></title>
  <meta http-equiv="content" content="text/html" charset="utf-8"/>
  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
    }
    #contentdiv{
      position: absolute;
      left: 500px;
    }
    #startdiv{
      width: 320px;
      height: 568px;
      background-image: url(../image/开始背景.png);
    }
    button{
      outline: none;
    }
    #startdiv button{
      position: absolute;
      top: 500px;
      left: 82px;
      width: 150px;
      height: 30px;
      border: 1px solid black;
      border-radius: 30px;
      background-color: #c4c9ca;
    }
    #maindiv{
      width: 320px;
      height: 568px;
      background-image:url(../image/background_1.png) ;
      display: none;
    }
    #maindiv img{
      position: absolute;
      z-index: 1;
    }
    #scorediv{
      font-size: 16px;
      font-weight: bold;
      position: absolute;
      top: 10px;
      left: 10px;
      display: none;
    }
    #scorediv{
      font-size: 18px;
      font-weight: bold;
    }
    #suspenddiv{
      position: absolute;
      top: 210px;
      left: 82px;
      display: none;
      z-index: 2;
    }
    #suspenddiv button{
      width: 150px;
      height: 30px;
      margin-bottom: 20px;
      border: 1px solid black;
      border-radius: 30px;
      background-color: #c4c9ca;
    }
    #enddiv{
      position: absolute;
      top: 210px;
      left: 75px;
      border: 1px solid gray;
      border-radius: 5px;
      text-align: center;
      background-color:#d7ddde;
      display: none;
      z-index: 2;
    }
    .plantext{
      width: 160px;
      height: 30px;
      line-height: 30px;
      font-size: 16px;
      font-weight: bold;
    }
    #planscore{
      width: 160px;
      height: 80px;
      line-height: 80px;
      border-top: 1px solid gray;
      border-bottom: 1px solid gray;
      font-size: 16px;
      font-weight: bold;
    }
    #enddiv div{
      width: 160px;
      height: 50px;
    }
    #enddiv div button{
      margin-top:10px ;
      width: 90px;
      height: 30px;
      border: 1px solid gray;
      border-radius: 30px;
    }
  </style>
</head>
 
<body>
<div id="contentdiv">
  <div id="startdiv">
    <button onclick="begin()">开始游戏</button>
  </div>
  <div id="maindiv">
    <div id="scorediv">
      <label>分数：</label>
      <label id="label">0</label>
    </div>
    <div id="suspenddiv">
      <button>继续</button><br/>
      <button>重新开始</button><br/>
      <button>回到主页</button>
    </div>
    <div id="enddiv">
      <p class="plantext">飞机大战分数</p>
      <p id="planscore">0</p>
      <div><button onclick="jixu()">继续</button></div>
    </div>
  </div>
</div>
<script type="text/javascript">
//获得主界面
var mainDiv=document.getElementById("maindiv");
//获得开始界面
var startdiv=document.getElementById("startdiv");
//获得游戏中分数显示界面
var scorediv=document.getElementById("scorediv");
//获得分数界面
var scorelabel=document.getElementById("label");
//获得暂停界面
var suspenddiv=document.getElementById("suspenddiv");
//获得游戏结束界面
var enddiv=document.getElementById("enddiv");
//获得游戏结束后分数统计界面
var planscore=document.getElementById("planscore");
//初始化分数
var scores=0;
 
/*
 创建飞机类
 */
function plan(hp,X,Y,sizeX,sizeY,score,dietime,sudu,boomimage,imagesrc){
  this.planX=X;
  this.planY=Y;
  this.imagenode=null;
  this.planhp=hp;
  this.planscore=score;
  this.plansizeX=sizeX;
  this.plansizeY=sizeY;
  this.planboomimage=boomimage;
  this.planisdie=false;
  this.plandietimes=0;
  this.plandietime=dietime;
  this.plansudu=sudu;
//行为
  /*
   移动行为
   */
  this.planmove=function(){
    if(scores<=50000){
      this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+"px";
    }
    else if(scores>50000&&scores<=100000){
      this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+1+"px";
    }
    else if(scores>100000&&scores<=150000){
      this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+2+"px";
    }
    else if(scores>150000&&scores<=200000){
      this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+3+"px";
    }
    else if(scores>200000&&scores<=300000){
      this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+4+"px";
    }
    else{
      this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+5+"px";
    }
  }
  this.init=function(){
    this.imagenode=document.createElement("img");
    this.imagenode.style.left=this.planX+"px";
    this.imagenode.style.top=this.planY+"px";
    this.imagenode.src=imagesrc;
    mainDiv.appendChild(this.imagenode);
  }
  this.init();
}
 
/*
 创建子弹类
 */
function bullet(X,Y,sizeX,sizeY,imagesrc){
  this.bulletX=X;
  this.bulletY=Y;
  this.bulletimage=null;
  this.bulletattach=1;
  this.bulletsizeX=sizeX;
  this.bulletsizeY=sizeY;
//行为
  /*
   移动行为
   */
  this.bulletmove=function(){
    this.bulletimage.style.top=this.bulletimage.offsetTop-20+"px";
  }
  this.init=function(){
    this.bulletimage=document.createElement("img");
    this.bulletimage.style.left= this.bulletX+"px";
    this.bulletimage.style.top= this.bulletY+"px";
    this.bulletimage.src=imagesrc;
    mainDiv.appendChild(this.bulletimage);
  }
  this.init();
}
 
/*
 创建单行子弹类
 */
function oddbullet(X,Y){
  bullet.call(this,X,Y,6,14,"../image/bullet1.png");
}
 
/*
 创建敌机类
 */
function enemy(hp,a,b,sizeX,sizeY,score,dietime,sudu,boomimage,imagesrc){
  plan.call(this,hp,random(a,b),-100,sizeX,sizeY,score,dietime,sudu,boomimage,imagesrc);
}
//产生min到max之间的随机数
function random(min,max){
  return Math.floor(min+Math.random()*(max-min));
}
 
/*
 创建本方飞机类
 */
function ourplan(X,Y){
  var imagesrc="../image/我的飞机.gif";
  plan.call(this,1,X,Y,66,80,0,660,0,"../image/本方飞机爆炸.gif",imagesrc);
  this.imagenode.setAttribute('id','ourplan');
}
 
/*
 创建本方飞机
 */
var selfplan=new ourplan(120,485);
//移动事件
var ourPlan=document.getElementById('ourplan');
var yidong=function(){
  var oevent=window.event||arguments[0];
  var chufa=oevent.srcElement||oevent.target;
  var selfplanX=oevent.clientX-500;
  var selfplanY=oevent.clientY;
  ourPlan.style.left=selfplanX-selfplan.plansizeX/2+"px";
  ourPlan.style.top=selfplanY-selfplan.plansizeY/2+"px";
//  document.getElementsByTagName('img')[0].style.left=selfplanX-selfplan.plansizeX/2+"px";
//  document.getElementsByTagName('img')[0]..style.top=selfplanY-selfplan.plansizeY/2+"px";
}
/*
 暂停事件
 */
var number=0;
var zanting=function(){
  if(number==0){
    suspenddiv.style.display="block";
    if(document.removeEventListener){
      mainDiv.removeEventListener("mousemove",yidong,true);
      bodyobj.removeEventListener("mousemove",bianjie,true);
    }
    else if(document.detachEvent){
      mainDiv.detachEvent("onmousemove",yidong);
      bodyobj.detachEvent("onmousemove",bianjie);
    }
    clearInterval(set);
    number=1;
  }
  else{
    suspenddiv.style.display="none";
    if(document.addEventListener){
      mainDiv.addEventListener("mousemove",yidong,true);
      bodyobj.addEventListener("mousemove",bianjie,true);
    }
    else if(document.attachEvent){
      mainDiv.attachEvent("onmousemove",yidong);
      bodyobj.attachEvent("onmousemove",bianjie);
    }
    set=setInterval(start,20);
    number=0;
  }
}
//判断本方飞机是否移出边界,如果移出边界,则取消mousemove事件,反之加上mousemove事件
var bianjie=function(){
  var oevent=window.event||arguments[0];
  var bodyobjX=oevent.clientX;
  var bodyobjY=oevent.clientY;
  if(bodyobjX<505||bodyobjX>815||bodyobjY<0||bodyobjY>568){
    if(document.removeEventListener){
      mainDiv.removeEventListener("mousemove",yidong,true);
    }
    else if(document.detachEvent){
      mainDiv.detachEvent("onmousemove",yidong);
    }
  }
  else{
    if(document.addEventListener){
      mainDiv.addEventListener("mousemove",yidong,true);
    }
    else if(document.attachEvent){
      mainDiv.attachEvent("nomousemove",yidong);
    }
  }
}
//暂停界面重新开始事件
//function chongxinkaishi(){
//  location.reload(true);
//  startdiv.style.display="none";
//  maindiv.style.display="block";
//}
var bodyobj=document.getElementsByTagName("body")[0];
if(document.addEventListener){
  //为本方飞机添加移动和暂停
  mainDiv.addEventListener("mousemove",yidong,true);
  //为本方飞机添加暂停事件
  selfplan.imagenode.addEventListener("click",zanting,true);
  //为body添加判断本方飞机移出边界事件
  bodyobj.addEventListener("mousemove",bianjie,true);
  //为暂停界面的继续按钮添加暂停事件
  suspenddiv.getElementsByTagName("button")[0].addEventListener("click",zanting,true);
//  suspenddiv.getElementsByTagName("button")[1].addEventListener("click",chongxinkaishi,true);
  //为暂停界面的返回主页按钮添加事件
  suspenddiv.getElementsByTagName("button")[2].addEventListener("click",jixu,true);
}
else if(document.attachEvent){
  //为本方飞机添加移动
  mainDiv.attachEvent("onmousemove",yidong);
  //为本方飞机添加暂停事件
  selfplan.imagenode.attachEvent("onclick",zanting);
  //为body添加判断本方飞机移出边界事件
  bodyobj.attachEvent("onmousemove",bianjie);
  //为暂停界面的继续按钮添加暂停事件
  suspenddiv.getElementsByTagName("button")[0].attachEvent("onclick",zanting);
//  suspenddiv.getElementsByTagName("button")[1].attachEvent("click",chongxinkaishi,true);
  //为暂停界面的返回主页按钮添加事件
  suspenddiv.getElementsByTagName("button")[2].attachEvent("click",jixu,true);
}
//初始化隐藏本方飞机
selfplan.imagenode.style.display="none";
 
/*
 敌机对象数组
 */
var enemys=[];
 
/*
 子弹对象数组
 */
var bullets=[];
var mark=0;
var mark1=0;
var backgroundPositionY=0;
/*
 开始函数
 */
function start(){
  mainDiv.style.backgroundPositionY=backgroundPositionY+"px";
  backgroundPositionY+=0.5;
  if(backgroundPositionY==568){
    backgroundPositionY=0;
  }
  mark++;
  /*
   创建敌方飞机
   */
 
  if(mark==20){
    mark1++;
    //中飞机
    if(mark1%5==0){
      enemys.push(new enemy(6,25,274,46,60,5000,360,random(1,3),"../image/中飞机爆炸.gif","../image/enemy3_fly_1.png"));
    }
    //大飞机
    if(mark1==20){
      enemys.push(new enemy(12,57,210,110,164,30000,540,1,"../image/大飞机爆炸.gif","../image/enemy2_fly_1.png"));
      mark1=0;
    }
    //小飞机
    else{
      enemys.push(new enemy(1,19,286,34,24,1000,360,random(1,4),"../image/小飞机爆炸.gif","../image/enemy1_fly_1.png"));
    }
    mark=0;
  }
 
  /*
   移动敌方飞机
   */
  var enemyslen=enemys.length;
  for(var i=0;i<enemyslen;i++){
    if(enemys[i].planisdie!=true){
      enemys[i].planmove();
    }
    /*
     如果敌机超出边界,删除敌机
     */
    if(enemys[i].imagenode.offsetTop>568){
      mainDiv.removeChild(enemys[i].imagenode);
      enemys.splice(i,1);
      enemyslen--;
    }
    //当敌机死亡标记为true时，经过一段时间后清除敌机
    if(enemys[i].planisdie==true){
      enemys[i].plandietimes+=20;
      if(enemys[i].plandietimes==enemys[i].plandietime){
        mainDiv.removeChild(enemys[i].imagenode);
        enemys.splice(i,1);
        enemyslen--;
      }
    }
  }
 
  /*
   创建子弹
   */
  if(mark%5==0){
    bullets.push(new oddbullet(parseInt(selfplan.imagenode.style.left)+31,parseInt(selfplan.imagenode.style.top)-10));
  }
 
  /*
   移动子弹
   */
  var bulletslen=bullets.length;
  for(var i=0;i<bulletslen;i++){
    bullets[i].bulletmove();
    /*
     如果子弹超出边界,删除子弹
     */
    if(bullets[i].bulletimage.offsetTop<0){
      mainDiv.removeChild(bullets[i].bulletimage);
      bullets.splice(i,1);
      bulletslen--;
    }
  }
 
  /*
   碰撞判断
   */
  for(var k=0;k<bulletslen;k++){
    for(var j=0;j<enemyslen;j++){
      //判断碰撞本方飞机
      if(enemys[j].planisdie==false){
        if(enemys[j].imagenode.offsetLeft+enemys[j].plansizeX>=selfplan.imagenode.offsetLeft&&enemys[j].imagenode.offsetLeft<=selfplan.imagenode.offsetLeft+selfplan.plansizeX){
          if(enemys[j].imagenode.offsetTop+enemys[j].plansizeY>=selfplan.imagenode.offsetTop+40&&enemys[j].imagenode.offsetTop<=selfplan.imagenode.offsetTop-20+selfplan.plansizeY){
            //碰撞本方飞机，游戏结束，统计分数
            selfplan.imagenode.src="../image/本方飞机爆炸.gif";
            enddiv.style.display="block";
            planscore.innerHTML=scores;
            if(document.removeEventListener){
              mainDiv.removeEventListener("mousemove",yidong,true);
              bodyobj.removeEventListener("mousemove",bianjie,true);
            }
            else if(document.detachEvent){
              mainDiv.detachEvent("onmousemove",yidong);
              bodyobj.removeEventListener("mousemove",bianjie,true);
            }
            clearInterval(set);
          }
        }
        //判断子弹与敌机碰撞
        if((bullets[k].bulletimage.offsetLeft+bullets[k].bulletsizeX>enemys[j].imagenode.offsetLeft)&&(bullets[k].bulletimage.offsetLeft<enemys[j].imagenode.offsetLeft+enemys[j].plansizeX)){
          if(bullets[k].bulletimage.offsetTop<=enemys[j].imagenode.offsetTop+enemys[j].plansizeY&&bullets[k].bulletimage.offsetTop+bullets[k].bulletsizeY>=enemys[j].imagenode.offsetTop){
            //敌机血量减子弹攻击力
            enemys[j].planhp=enemys[j].planhp-bullets[k].bulletattach;
            //敌机血量为0，敌机图片换为爆炸图片，死亡标记为true，计分
            if(enemys[j].planhp==0){
              scores=scores+enemys[j].planscore;
              scorelabel.innerHTML=scores;
              enemys[j].imagenode.src=enemys[j].planboomimage;
              enemys[j].planisdie=true;
            }
            //删除子弹
            mainDiv.removeChild(bullets[k].bulletimage);
            bullets.splice(k,1);
            bulletslen--;
            break;
          }
        }
      }
    }
  }
}
/*
 开始游戏按钮点击事件
 */
var set;
function begin(){
 
  startdiv.style.display="none";
  mainDiv.style.display="block";
  selfplan.imagenode.style.display="block";
  scorediv.style.display="block";
  /*
   调用开始函数
   */
  set=setInterval(start,20);
}
//游戏结束后点击继续按钮事件
function jixu(){
  location.reload(true);
}
</script>
</body>
</html>

以上所述就是本文的全部内容了，希望大家能够喜欢。

JavaScript制作简易的微信打飞机

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js类后台管理菜单类-MenuSwitch
Sep 12 Javascript
jQuery解决iframe高度自适应代码
Dec 20 Javascript
基于Jquery实现的一个图片滚动切换
Jun 21 Javascript
javascript获取下拉列表框当中的文本值示例代码
Jul 31 Javascript
display和visibility的区别示例介绍
Feb 26 Javascript
JavaScript中神奇的call()方法
Mar 12 Javascript
js拖拽的原型声明和用法总结
Apr 04 Javascript
详解Vue文档中几个易忽视部分的剖析
Mar 24 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
Jul 23 Javascript
解决vue-router 切换tab标签关闭时缓存问题
Jul 22 Javascript
在vue中使用console.log无效的解决
Aug 09 Javascript
JavaScript canvas实现跟随鼠标移动小球
Feb 09 Javascript
JS获取表格内指定单元格html内容的方法
Mar 31 #Javascript
JS实现为表格动态添加标题的方法
Mar 31 #Javascript
JS实现从表格中动态删除指定行的方法
Mar 31 #Javascript
jQuery选择器源码解读（三）：tokenize方法
Mar 31 #Javascript
javascript制作游戏开发碰撞检测的封装代码
Mar 31 #Javascript
jQuery选择器源码解读（二）：select方法
Mar 31 #Javascript
jQuery选择器源码解读（一）：Sizzle方法
Mar 31 #Javascript
新加坡购物网站(41) 日本购物网站(72) 瑞士购物网站(28) 德国购物网站(227) 韩国购物网站(27) 印度购物网站(45) 中国购物网站(172) 西班牙购物网站(115) 巴西购物网站(71) 加拿大购物网站(185)
You might like
php中stream(流)的用法
2014/03/25 PHP
PHP中mysql_field_type()函数用法
2014/11/24 PHP
PHP 使用redis简单示例分享
2015/03/05 PHP
PHP中使用BigMap实例
2015/03/30 PHP
Laravel下生成验证码的类
2017/11/15 PHP
jQuery实战之品牌展示列表效果
2011/04/10 Javascript
javascript权威指南 学习笔记之null和undefined
2011/09/25 Javascript
一个支持任意尺寸的图片上下左右滑动效果
2014/08/24 Javascript
使用javascript实现简单的选项卡切换
2015/01/09 Javascript
JS动态加载当前时间的方法
2015/02/09 Javascript
深入剖析JavaScript中的函数currying柯里化
2016/04/29 Javascript
JS 全屏和退出全屏详解及实例代码
2016/11/07 Javascript
JavaScript中的call和apply的用途以及区别
2017/01/11 Javascript
Vue过滤器的用法和自定义过滤器使用
2017/02/08 Javascript
微信小程序  http请求封装详解及实例代码
2017/02/15 Javascript
SeaJS中use函数用法实例分析
2017/10/10 Javascript
jQuery实现的导航条点击后高亮显示功能示例
2019/03/04 jQuery
微信小程序常用赋值方法小结
2019/04/30 Javascript
详解vue-cli3开发Chrome插件实践
2019/05/29 Javascript
Angular利用HTTP POST下载流文件的步骤记录
2020/07/26 Javascript
Python功能键的读取方法
2015/05/28 Python
使用 Python 实现微信公众号粉丝迁移流程
2018/01/03 Python
PyQT实现菜单中的复制,全选和清空的功能的方法
2019/06/17 Python
TensorFlow学习之分布式的TensorFlow运行环境
2020/02/05 Python
配置python的编程环境之Anaconda + VSCode的教程
2020/03/29 Python
CSS3结构性伪类选择器九种写法
2012/04/18 HTML / CSS
CSS3中Animation属性的使用详解
2015/08/06 HTML / CSS
文秘自荐信
2013/10/20 职场文书
土木工程毕业生自荐信
2013/11/12 职场文书
大学生求职推荐信
2013/11/27 职场文书
仓库保管员岗位职责
2013/12/20 职场文书
家长对小学生的评语
2014/01/28 职场文书
俄语专业职业生涯规划
2014/02/26 职场文书
优秀团员自我评价范文
2014/04/23 职场文书
入党积极分子评语
2014/05/04 职场文书
Python游戏开发实例之graphics实现AI五子棋
2021/11/01 Python