快来一起打飞机、大牛带你用最2代码、写出外挂版微信打飞机 - 索宁(2)_H5之家

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); });

五、完整代码

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

+ 图片名字

<!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></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 dheight = $('.bg').height(); fheight = $('.me-plan').height(); zheight = $('.bullet').height(); l = $('.bg').offset().left; 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 () { 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(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

持续更新中...