您的位置：首页 > 移动开发 > 微信开发

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

2016-08-03 10:09 246 查看

一、简介

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

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

<!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 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>

<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

持续更新中...

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航