首页
所有分类
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 相关文章推荐
JQuery 拾色器插件发布-jquery.icolor.js
Oct 20 Javascript
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
Jul 28 Javascript
Node.js的npm包管理器基础使用教程
May 26 Javascript
微信小程序 获取设备信息 API实例详解
Oct 02 Javascript
关于vue-router的那些事儿
May 23 Javascript
vue cli 3.0 使用全过程解析
Jun 14 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
Jun 14 Javascript
Node如何后台数据库使用增删改查功能
Nov 21 Javascript
JS实现字体背景跑马灯
Jan 06 Javascript
原生JS实现留言板功能
Feb 08 Javascript
如何在CocosCreator里画个炫酷的雷达图
Apr 16 Javascript
一篇文章弄清楚Ajax请求的五个步骤
Mar 17 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
turtle(1) Keras(3) blinker(1) Mysql报错(1) 计时器(1) MYSQL函数(1) 三子棋(2) 信号库(1) 定时任务(2) 绘图(1)
You might like
从康盛产品(discuz)提取出来的模板类
2011/06/28 PHP
一个不易被发现的PHP后门代码解析
2014/07/05 PHP
php禁止浏览器使用缓存页面的方法
2014/11/07 PHP
PHP cURL初始化和执行方法入门级代码
2015/05/28 PHP
PHP 实现浏览记录并按日期分组
2017/05/11 PHP
PHP多进程通信-消息队列使用
2019/03/08 PHP
phpfpm的作用和用法
2019/10/10 PHP
浏览器无法运行JAVA脚本的解决方法
2008/01/09 Javascript
jquery 得到当前页面高度和宽度的两个函数
2010/02/21 Javascript
IE8下关于querySelectorAll()的问题
2010/05/13 Javascript
菜鸟javascript基础资料整理2
2010/12/06 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
2014/01/02 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
2014/03/12 Javascript
javascript中return，return true,return false三者的用法及区别
2015/11/17 Javascript
jQuery获取元素父节点的方法
2016/06/21 Javascript
总结十个Angular.js由浅入深的面试问题
2016/08/26 Javascript
JS正则替换掉小括号及内容的方法
2016/11/29 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
2017/01/17 Javascript
JS实现随机抽选获奖者
2019/11/07 Javascript
前端使用crypto.js进行加密的函数代码
2020/08/16 Javascript
[01:25]2014DOTA2国际邀请赛 zhou分析LGD比赛情况
2014/07/14 DOTA
[05:22]DOTA2 2015国际邀请赛中国区预选赛首日TOP10
2015/05/26 DOTA
Python爬取网页中的图片（搜狗图片）详解
2017/03/23 Python
python的pdb调试命令的命令整理及实例
2017/07/12 Python
Sanic框架流式传输操作示例
2018/07/18 Python
解决Python print输出不换行没空格的问题
2018/11/14 Python
对python中return与yield的区别详解
2020/03/12 Python
坚定理想信念心得体会
2014/03/11 职场文书
装饰工程师岗位职责
2014/06/08 职场文书
意外伤害赔偿协议书范本
2014/09/28 职场文书
师德师风建设整改措施思想汇报
2014/10/11 职场文书
教师岗位职责
2015/02/03 职场文书
房产证明范本
2015/06/19 职场文书
2016国培学习心得体会
2016/01/08 职场文书
详解Redis集群搭建的三种方式
2021/05/31 Redis
使用Canvas绘制一个游戏人物属性图
2022/03/25 Javascript