你的位置:首页 > Java教程

[Java教程]快来一起打飞机、大牛带你用最2代码、写出外挂版微信打飞机


一、简介

  还记得许多年前的春天,你我一起“打飞机”。

  那就一起写个打飞机游戏吧:

  

 

二、HTML内容

  HTML 基础知识戳这

  HTML内容把需要的图片资源以相应标签格式写出即可,分为以下几部分:

    •   背景图片
    •   自己战机的图片
    •   子弹的图片
    •   敌机的图片
    •   敌机挂了的图片
    •       计算分数的位置预留
<base href="http://images.cnblogs.com/cnblogs_com/suoning/860380/" /><div class="bg">  <div class="me-plan"></div>  <div id="play_num"></div>  <div class="bullet">    <img src="o_cartridge.png">  </div>  <div class="x">    <img class="lift" src="o_plain1.png">    <img class="die" src="o_die1.png">  </div>  <div class="x2">    <img class="lift" src="o_plain2.png">    <img class="die" src="o_die2.png">  </div></div>

HTML代码

 

三、CSS布局

  CSS基础知识戳这

  CSS代码块只需把HTML代码块的图片进程简单布局,分以下几部分:

    •   背景图片的宽与高、居中、边框、超出边界隐藏、relative相对定位
    •   自己战机的宽与高、absolute相对父级定位与z-index优先级最高
    •   自己战机默认隐藏,游戏开始则滑出
    •   子弹、敌机的absolute相对父级定位
    •   子弹、敌机的默认隐藏,游戏开始则通过克隆展示
    •   敌机死亡的图片定位与隐藏
    •   分数的字体大小设置及定位
<base href="http://images.cnblogs.com/cnblogs_com/suoning/860380/" /><style>    .bg {      background-image: url("o_bg.jpg");      height: 500px;      width: 300px;      position: relative;      margin-left: 40%;      margin-top: 5%;      overflow: hidden;      border: 1px;    }    .me-plan {      width: 99px;      height: 112px;      background-image: url("o_me.png");      position: absolute;      top: 80%;      left: 35%;      display: none;      z-index: 666;    }    .bullet {      position: absolute;      display: none;      left: -10px;    }    .x, .x2 {      position: absolute;      display: none;    }    .lift {      position: absolute;      top: -110px;    }    .die {      display: none;    }    #play_num {      font-size: 30px;    }  </style>

CSS代码

 

四、jQuery 代码块

  JavaScript基础知识戳这,DOM相关戳这,jQuery全套戳这

   jQuery代码块是程序的主要实现部分:

    •   自己战机得需要跟着鼠标移动
    •   自己战机移动的同时子弹也需要同时做相对定位的移动
    •   敌机随机从上到下移动
    •   敌机若与子弹相碰,则炸毁,相应分数增加

 

1、程序所需值与预定义

程序在一开始就必须获取相应的值,以便之后调用

背景的宽与高 :判断自己战机是否超出边界,如果超出则固定在边界内某一块;

自己战机的宽与高:也做超出边界固定的作用,加上这个值更精确;

背景图片相对父元素的距离:这个值也可以说背景图片相对body的距离,因为需要不断获取鼠标的坐标,来确定自己战机的位置,鼠标的坐标减去这个值即是元素相对父级元素的距离;

还需要预定义一些值:

play_num:游戏的得分,默认定位0;

FD = {}:定义一个"字典",存放每个敌机的对象与对于标签,用于判断碰撞。

  var dwidth = $('.bg').width();   // 背景的宽与高  var dheight = $('.bg').height();  var fwidth = $('.me-plan').width(); // 自己战机的宽与高  var fheight = $('.me-plan').height();  var zwidth = $('.bullet').width(); // 子弹的宽与高  var zheight = $('.bullet').height();  var t = $('.bg').offset().top;   // 背景相对父元素的距离  var l = $('.bg').offset().left;  var FD = {};    // 存放敌的的对象,封装坐标及标签  var play_num = 0;  // 计算分数

 

2、鼠标移动事件

  自己战机需要不断跟着鼠标走,所有必须定义鼠标移动事件;

  event.clientX与event.clientY分别为鼠标的x和y轴距离;

  判断如果超出边界,则战机固定位置;

  鼠标位置坐相应处理就是战机的位置(实时)。

$(".me-plan").mousemove(function m(event) {    /*     鼠标移动事件     */    var x = event.clientX - fwidth / 2;    var y = event.clientY - fheight / 2;    MovePlanM(x - l, y - t);  })  function MovePlanM(x, y) {    /*     战机随鼠标移动     */    if (x >= dwidth) {      x = dwidth - fwidth;    } else if (y >= dheight) {      y = dheight - fheight;    }    $('.me-plan').css({      "top": y + "px",      "left": x + "px",    });  }

 

3、随机值

   每次敌机出现的x轴位置是不同的,所有需要写一个随机数函数;

  可以以做为出现敌机的类型,小飞机与大飞机。

function Randmon() {    /*     用于随机生成x轴与敌机型号     */    var num_one = Math.random();    var num_two = num_one * 100;    if (num_two < 80) {      num_two += 100;    }    num_stree = Math.round(Math.abs(num_two));    return num_stree  }

 

4、敌机类

  一次可以出现一个以上敌机,而敌机属性都类似,所有需要写一个类;

  三个参数,分别为x轴,y轴,还有敌机的类型;

  通过克隆再插入对应标签实现多个敌机;

  通过定时器使y轴自加,使敌机不断向下移动;

  判断如果超出背景,则停止定时器,删除对应标签;

  把对象都加入FD字典中;

  注意:定时器为单独函数,不属于类,所以需要用到继承。

function FoePlan(x, y, BB) {    /*     克隆及移动敌机     */    this.x = x;    this.y = y;    this.BB = BB;    this.Clone = function () {      var objj = $(this.BB).first().clone(true).appendTo(".bg").css("display", "block");      var s2 = setInterval(MovePlanFirst, 100);      function MovePlanFirst() {        FoePlan.call(this, x, y, BB);   // 类的继承        var dic = [this.x, this.y, objj];        FD[this] = dic;        RemovePlan(this.y, s2, objj);        y += 20;        objj.css({          "top": this.y + "px",          "left": this.x + "px",        })      }    }  }  function RemovePlan(y, s2, objj) {    /*     用于删除出镜的敌机     */    if (y > 600) {      clearInterval(s2);      $(objj).remove();    }  }

 

5、子弹相关

  两个参数,分别为自己战机x轴与y轴坐标,用于跟着战机相对移动;

  定时器让y轴坐标自减,对应的子弹会一直上升;

  子弹超出边界则删除定时器与对应标签;

  循环读取FD字典,得到每个敌机的坐标,判断碰撞则爆炸效果,并淡出;

  如果击落敌机对应分数增加;

  击落敌机删除对应标签与FD中的值。

function MoveBullet(x, y) {    /*     克隆及移动子弹、判断子弹是否射到敌机     */    var obj = $('.bullet').first().clone(true).appendTo(".bg").css("display", "block");    var s1 = setInterval(function () {      for (var item in FD) {   // 判断子弹是否射到敌机        var xx = FD[item][0];        var yy = FD[item][1];        var objj = FD[item][2];        var flag = false;        if ((xx < x) && (x < (xx + 60)) && (yy < y) && ( y < (yy + 60))) {          $(objj).children().first().css("display", "none");          $(objj).children().last().css("display", "block").fadeOut("1600").fadeTo("slow", 0);          play_num += 10;          $('#play_num').text(play_num);        }        if (flag) {          $(objj).remove();          flag = false;        }      }      RemoveBullet(y, s1, obj);      y -= 20;      obj.css({        "top": (y) + "px",        "left": x + "px",      })    }, 100);  }  function RemoveBullet(y, s1, obj) {    /*     删除超出边界的子弹     */    if (y < 0) {      clearInterval(s1);      $(obj).remove();    }  }

 

6、运行程序

  页面加载完成则开始运行游戏;

  定时器获取自己战机的坐标,并传给子弹,让子弹不断开炮;

  定时器获取随机值,并传给敌机类,让敌机不断涌现。

  $(function () {    /*     页面加载完成初始化开始游戏     */    $(".me-plan").slideDown("900");    setInterval(function () {      var x = $(".me-plan").position().left + fwidth / 2;      var y = $(".me-plan").position().top;      MoveBullet(x, y);    }, 200);    setInterval(function () {      var n = Randmon();      if (n > 130) {        var shape = '.x';      } else {        var shape = '.x2';      }      var obj = new FoePlan(n, 0, shape);      obj.Clone();    }, 1500);  });

 

 五、完整代码

 注:访问代码里图片路径需加前缀:

http://images.cnblogs.com/cnblogs_com/suoning/860380/ + 图片名字
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>外挂版打飞机 Nick Suo</title>  <base href="http://images.cnblogs.com/cnblogs_com/suoning/860380/"/>  <style>    .bg {      background-image: url("o_bg.jpg");      height: 500px;      width: 300px;      position: relative;      margin-left: 40%;      margin-top: 5%;      overflow: hidden;      border: 1px;    }    .me-plan {      width: 99px;      height: 112px;      background-image: url("o_me.png");      position: absolute;      top: 80%;      left: 35%;      display: none;      z-index: 666;    }    .bullet {      position: absolute;      display: none;      left: -10px;    }    .x, .x2 {      position: absolute;      display: none;    }    .lift {      position: absolute;      top: -110px;    }    .die {      display: none;    }    #play_num {      font-size: 30px;    }  </style></head><body><div >  <div ></div>  <div id="play_num"></div>  <div >    <img src="o_cartridge.png">  </div>  <div >    <img src="o_plain1.png">    <img src="o_die1.png">  </div>  <div >    <img src="o_plain2.png">    <img src="o_die2.png">  </div></div><script src="../jquery-1.12.4.js"></script><script>  /*   build time: Jul 28,2016 23:59   author: Nick Suo   email: 630571017@qq.com   */  var dwidth = $('.bg').width();   // 背景的宽与高  var dheight = $('.bg').height();  var fwidth = $('.me-plan').width(); // 自己战机的宽与高  var fheight = $('.me-plan').height();  var zwidth = $('.bullet').width(); // 子弹的宽与高  var zheight = $('.bullet').height();  var t = $('.bg').offset().top;   // 背景相对父元素的距离  var l = $('.bg').offset().left;  var FD = {};    // 存放敌的的对象,封装坐标及标签  var play_num = 0;  // 计算分数  $(".me-plan").mousemove(function m(event) {    /*     鼠标移动事件     */    var x = event.clientX - fwidth / 2;    var y = event.clientY - fheight / 2;    MovePlanM(x - l, y - t);  })  function MovePlanM(x, y) {    /*     战机随鼠标移动     */    if (x >= dwidth) {      x = dwidth - fwidth;    } else if (y >= dheight) {      y = dheight - fheight;    }    $('.me-plan').css({      "top": y + "px",      "left": x + "px",    });  }  $(function () {    /*     页面加载完成初始化开始游戏     */    $(".me-plan").slideDown("900");    setInterval(function () {      var x = $(".me-plan").position().left + fwidth / 2;      var y = $(".me-plan").position().top;      MoveBullet(x, y);    }, 200);    setInterval(function () {      var n = Randmon();      if (n > 130) {        var shape = '.x';      } else {        var shape = '.x2';      }      var obj = new FoePlan(n, 0, shape);      obj.Clone();    }, 1500);  });  function MoveBullet(x, y) {    /*     克隆及移动子弹、判断子弹是否射到敌机     */    var obj = $('.bullet').first().clone(true).appendTo(".bg").css("display", "block");    var s1 = setInterval(function () {      for (var item in FD) {   // 判断子弹是否射到敌机        var xx = FD[item][0];        var yy = FD[item][1];        var objj = FD[item][2];        var flag = false;        if ((xx < x) && (x < (xx + 60)) && (yy < y) && ( y < (yy + 60))) {          $(objj).children().first().css("display", "none");          $(objj).children().last().css("display", "block").fadeOut("1600").fadeTo("slow", 0);          play_num += 10;          $('#play_num').text(play_num);        }        if (flag) {          $(objj).remove();          flag = false;        }      }      RemoveBullet(y, s1, obj);      y -= 20;      obj.css({        "top": (y) + "px",        "left": x + "px",      })    }, 100);  }  function RemoveBullet(y, s1, obj) {    /*     删除超出边界的子弹     */    if (y < 0) {      clearInterval(s1);      $(obj).remove();    }  }  function FoePlan(x, y, BB) {    /*     克隆及移动敌机     */    this.x = x;    this.y = y;    this.BB = BB;    this.Clone = function () {      var objj = $(this.BB).first().clone(true).appendTo(".bg").css("display", "block");      var s2 = setInterval(MovePlanFirst, 100);      function MovePlanFirst() {        FoePlan.call(this, x, y, BB);   // 类的继承        var dic = [this.x, this.y, objj];        FD[this] = dic;        RemovePlan(this.y, s2, objj);        y += 20;        objj.css({          "top": this.y + "px",          "left": this.x + "px",        })      }    }  }  function RemovePlan(y, s2, objj) {    /*     用于删除出镜的敌机     */    if (y > 600) {      clearInterval(s2);      $(objj).remove();    }  }  function Randmon() {    /*     用于随机生成x轴与敌机型号     */    var num_one = Math.random();    var num_two = num_one * 100;    if (num_two < 80) {      num_two += 100;    }    num_stree = Math.round(Math.abs(num_two));    return num_stree  }</script></body></html>

View Code

 

持续更新中...