相信接元宝的游戏大家都很熟悉了，自从抓住神经猫火了之后，微信游戏越来越多，html5像人们料想的那样逐渐占据舞台。当然由于浏览器兼容的问题，html5的游戏依然只能在移动端大展拳脚，不过没关系。今天博主给大家带来一个jquery接元宝的小游戏，即使在ie6下也可以运行。
不多说先上代码：
<!DOCTYPE PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang = "en" >
<head><meta charset = "UTF-8" >
<script src = "jquery-1.8.3.min.js" ></script>
<title>游戏</title > </head>
<body>
<div style="background:url(bei.png);position:absolute;margin:auto auto;650px;height:450px;border:1px solid #131E63" id="stage">
<img src="xiaozhu.png" style="position:absolute;bottom:10px;left:260px" id="npc"/ > </div>
<div style="position:absolute;height:20px;200px;">得分<span id="num">0</span > </div>
<div style="float:right;position:absolute;height:20px;200px;left:600px">时间<span id="time">15</span > </div>
<div style="position:absolute;top:480px;left:100px;">
提示：a键向左移动，d键向右移动
</div>
</body>
<script>
$(function(){
// 构造人物
var npc = $("#npc"),
left, time = $("#time"),
stage = $("#stage");
//计时器
var timer = 15;
t = setInterval(function() {
timer--;
time.html(timer);
}, 1000);
//读取键盘事件
var left = npc.css('left').match(/d+/) * 1;
$(document).keydown(function(d) {
//alert(d.keyCode)
d.keyCode==68;
alert(d.keyCode);
if (d.keyCode == 68) {
left = npc.css('left').match(/d+/) * 1;
if (left > 550) {
return false;
} else {
npc.css("left", left + 25 + 'px');
}
}
if (d.keyCode == 65) {
left = npc.css('left').match(/d+/) * 1;
//alert(left)
if (left <= 0) {
return false;
} else {
npc.css("left", left - 25 + 'px');
}
}
});
//载入元宝节点
var rank = [],
num = $("#num"),
number;
rank[0] = '<img src="yuanbao.png" class="money" style="position:absolute;top:0;left:0;display:none;"/>';
rank[1] = '<img src="yuanbao.png" class="money-1" style="position:absolute;top:0;left:0;display:none;"/>';
rank[2] = '<img src="yuanbao.png" class="money-2" style="position:absolute;top:0;left:0;display:none;"/>';
$(stage).append(rank[0]);
$(stage).append(rank[1]);
$(stage).append(rank[2]);
//创建元宝对象
function money(dom, left, top) {
this.i = 2;
this.dom = $(dom);
this.left = left;
this.top = top;
this.dom.css("top", top).css("left", left).css("display", "block"); //设定元宝初始位置
this.flag = true; //加分锁
}
money.prototype = {
//元宝对象的move方法
move: function() {
if (timer <= 0) {
stop();
clearTimeout(t);
clearTimeout(m);
clearTimeout(t1);
clearTimeout(t2);
clearTimeout(t3);
return false;
}
var val = Math.abs(left - this.left);
this.i += 0.03;
this.top = this.dom.css("top").match(/d+/) * 1;
if (this.top >= 335 && val <= 45) {
this.dom.css("display", "none");
this.i = 2;
if (this.flag == true) { //加分
//console.log(this.flag)
number = num.html() * 1 + 20;
num.html(number);
this.flag = false; //锁分
} else {
return false;
}
} else if (this.top > 370) { //未接到元宝，元宝消失，收回
this.dom.css("display", "none");
this.i = 2;
clearTimeout(this.t);
this.flag = false; //收回同样锁分
} else { //元宝运动
this.dom.css("top", this.top + this.i + "px");
}
}
};
//游戏开始，生成元宝实例
start();
m = setInterval(function() {
clearTimeout(t1);
clearTimeout(t2);
clearTimeout(t3);
start();
}, 3000);
function start() {
var top = [],
left = [];
for (var i = 0; i < 3; i++) {
top[i] = Math.floor(Math.random() * 200 + 200);
left[i] = Math.floor(Math.random() * 400);
//console.log(top);
}
var qy = new money('.money', top[0], left[0]);
t1 = setInterval(function() {
qy.move();
}, 15);
var by = new money('.money-1', top[1], left[1]);
t2 = setInterval(function() {
by.move();
}, 15);
var cy = new money('.money-2', top[2], left[2]);
t3 = setInterval(function() {
cy.move();
}, 15);
}
});
//结束操作
function stop() {
var ove = '<div style="9999px;height:9999px;z-index:99;opacity:0.5;background:#fff;"></div>',
over = '<div style="position:absolute;top:200px;left:200px;font-size:20px;height:500px;200px;z-index:999" id="over">时间到啦！！！！！！</div>';
$("body").append(ove);
$("body").append(over);
}
</script>
</html >
OK,基本上代码不难，就是利用面向对象的思想，这里最值得一提的便是构造元宝的实例，因为元宝要随机出现，并且落地后（无论接到与否），都要奖构建的实例回收并且重新构造。当然，操作的任务移动其实很简单，并没有多少难度，只要将元宝构建完毕即可，另外元宝的属性和方法最核心的便是掉落的方法，然后我们在掉落方法中加入判断函数即可。
最后上图：