jquery小游戏之接元宝
相信接元宝的游戏大家都很熟悉了，自从抓住神经猫火了之后，微信游戏越来越多，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;width: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;width:200px;">得分<span id="num">0</span > </div>
<div style="float:right;position:absolute;height:20px;width: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;width:200px;z-index:999" id="over">时间到啦！！！！！！</div>';
$("body").append(ove);
$("body").append(over);
}
</script>
</html >
OK,基本上代码不难，就是利用面向对象的思想，这里最值得一提的便是构造元宝的实例，因为元宝要随机出现，并且落地后（无论接到与否），都要奖构建的实例回收并且重新构造。当然，操作的任务移动其实很简单，并没有多少难度，只要将元宝构建完毕即可，另外元宝的属性和方法最核心的便是掉落的方法，然后我们在掉落方法中加入判断函数即可。
最后上图：
转载于:https://www.cnblogs.com/qianyongV/p/3968796.html
jquery小游戏之接元宝相关推荐
- [原创]中国象棋翻翻棋,休闲,对战,娱乐,小游戏,jQuery小游戏,下载即用,代码注释全（附源码）
ChessInvert 介绍 中国象棋翻翻棋,休闲,对战,娱乐,小游戏,在线 效果预览 开源许可证 使用 Apache-2.0 开源许可协议,商用请联系原创作者me. 使用说明 引入jQuery,及j ...
- jQuery小游戏之锅打灰太郎
HTML代码: <!doctype html> <html> <head> <meta charset="utf-8"> <t ...
- jQuery小游戏——小鸟飞行闪躲
引言:主要应用jQuery的使用 功能介绍:注册,登录,小鸟的移动,小鸟和怪物的碰撞--移除小鸟,小鸟吃金币,怪物的随机出现,控制怪物出现的数量,金币的随机出现,关卡设置,排行榜. 游戏演示: 首先我 ...
- jQuery小游戏-弹弹球
效果展示: CSS样式: #box {width: 600px;height: 650px;border: 5px solid rgb(245, 164, 96);position: relativ ...
- jQuery实现小游戏源代码--打灰太狼
注:该游戏是通过学习B站李南江老师jQuery后,再其基础上做的修正. 不多说,直接上代码:代码有详细的注释,应该不难看懂 首先是HTML代码:值得一提的是,我这里引入的是jQuery1.12.4版本 ...
- jquery青蛙过河小游戏源码
下载地址jquery实现的青蛙过河小游戏源码,js小游戏源码. dd:
- jQuery实现别踩白块小游戏(简易版)
别踩白块分享 这是个漫长的寒假,编程使我快乐.在学习jQuery时,在家练习做了这个小游戏,也算是提升一下实际使用能力. 现在记录下来给大家参考,不足之处请大家谅解. 先上截图: 使用代码前请先导入j ...
- 用javascript+jquery编写的小游戏-贪吃蛇(双人对战版)
前言 这是我在多年前初学jquery, 并结合javascript, 编写的一个小游戏.那洋洋洒洒几千行的js代码时刻提醒着我"不忘初心!". 效果演示 代码 引入文件 由于用到了 ...
- Jquery简单实现2048小游戏
Jquery实现2048小游戏思路整理 1.搭建基础的UI界面 2048需要4*4的表格,所我们要先搭建基础的UI界面:可以使用表格,然后再对基础的单元格进行样式设置: <body>< ...
最新文章
- SQVI和SAP查询QUERY的区别和使用注意事项
- MQ消息队列产品测试
- Tomcat server launch debug - OrderAnalytics
- leetcode 10 --- 正则表达式匹配
- 好男人都结婚了吗？最后的研究结论亮了……
- Python与Java-你首选哪个？
- Linux系统编程35：多线程之如何理解Linux中的线程以及轻量级进程LWP
- Windows下的包管理工具scoop
- rails 3 中 app/model 目录下添加继承
- vue的watch使用（如淘宝优惠券设置计算属性时候）
- R语言在大气污染数据分析中的应用-时间序列分析（一）
- 如何使用Java代码将GBK编码格式的工程转换为UTF-8编码格式的工程
- sql python r_Mode Studio，支持Python，R和SQL的云数据分析利器
- RedHatLinux新手入门教程(4)(转)
- 《C专家编程》学习笔记（对链接的思考）
- 实现省市区镇四级联动选择器（地址选择）
- ae合成设置快捷键_AE脚本使用快捷键控制关键帧操作 Keyboard v1.2.2【资源分享1449】...
- 安装不成功问题解决办法
- 一个屌丝程序猿的人生（四十）
- maya表面种植物体插件 Plant Objects on surface v1.0 下载及教程