JQuery测手速小游戏-遁地龙卷风
(-1)写在前面
我用的chrome49，jquery3.0，我得到过399分，信不信由你。
(1)设计思路
两个p元素放在div里，每个p元素的高度和宽度都和div一样，当鼠标放在div上时，第一个p向上移动(更改marginTop值)，当鼠标离开div上时，第一个p向下移动。
(2)知识储备
a. :nth-child
#lol p:nth-child(1),当前元素p相对于他的父元素的所有子元素，如果第一个元素是p则匹配成功。
#lol :nth-child(1) 相当于#lol *:nth-child(1)
(3) 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<script type="text/javascript" src="debug-jquery-3.0.0.js"></script>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>为了生活</title>
<style type="text/css">
*
{
margin:0px;
padding:0;
}
body
{
position:absolute;
}
#lol
{
width:400px;
height:400px;
position:absolute;
overflow:hidden;
cursor:pointer;
}
#lol p
{
width:400px;
height:400px;
}
#lol p:nth-child(1)
{
background:blue;
}
#lol p:nth-child(2)
{
background:orange;
}
</style>
<script type="text/javascript">
$(function()
{
var $lol = $("#lol"),
$oneP = $lol.children().first(),
$score = $("#score");
$lol.centerPos();
$lol.hover(function()
{
$oneP.animate({marginTop:-$oneP.height()},400)
},function()
{
var number = -parseInt($oneP.css("marginTop"));
if(number == $oneP[0].offsetHeight)
{
number = 0;
}
$(score).text(number);
$oneP.stop(true,false).animate({marginTop:0},400);
})
})
$.fn.centerPos = function()
{
var parent;
this.each(function(index)
{
parent = this.parentNode;
if(parent == document.body)
{
parent = window;
}
var position = $(this).css("position");
if(position == "fixed" || position=="absolute")
{
$(this).css("left",($(parent).width()-this.offsetWidth)/2+"px")
.css("top",($(parent).height()-this.offsetHeight)/2+"px");
}
else
{
window.console.error("没有设置有效的position值");
}
})
return this;
}
</script>
</head
<body>
<div>当前得分：<span id="score">0</span>分</div>
<div id="lol">
<p></p>
<p></p>
</div>
</body>
</html>
JQuery测手速小游戏-遁地龙卷风的更多相关文章
- 在HTML页面中有jQuery实现实现拼图小游戏
1.用jQuery实现拼图小游戏 2.首先获得td的点击事件.再进行交换位置 3.下面这种仅供参考 4.下面这些是HTMl标签 当这个世界变得越来越复杂的时候,内心最需保持一份简单一份纯真:
- 几款用jQuery写的h5小游戏
人人都说前端用来做游戏是一件很困难的事情,遇到这些js的逻辑性问题,是不是有点懵?其实,做完一款游戏之后就会发现,没啥难的地方,差不多都是换汤不换药,作为爱玩游戏的我,也总结收集了几款比较流行的小软件 ...
- jQuery网页版五子棋小游戏源码下载
体验效果:http://hovertree.com/texiao/game/4/ 网页五子棋源代码: <!DOCTYPE html> <html> <head> & ...
- jQuery实现拼图小游戏
小熊维尼拼图 2017-07-23 ...
- Vue.js小游戏：测试CF打狙速度
此项目只测试反应速度,即手点击鼠标的反应速度 html代码 <div id="top">请等待图片变颜色,颜色便的那一刻即可点击测手速</div> < ...
- Python 小游戏 Bunny
最近在学习Python,所以上网找了一个小程序练练手. 关于这款名为[Bunny]的小游戏,详细请看下面的链接: http://www.oschina.net/translate/beginning- ...
- 打字机游戏Ⅱ之手速pk
前言 demo预览->typewriter gameⅡ (chrome only 没做兼容) 别看一开始时速度不快,会线性增长的哦,反正楼主的score还没达到过40... 为什么叫Ⅱ呢?之前写 ...
- js、jQuery实现2048小游戏
2048小游戏 一.游戏简介: 2048是一款休闲益智类的数字叠加小游戏 二. 游戏玩法: 在4*4的16宫格中,您可以选择上.下.左.右四个方向进行操作,数字会按方向移动,相邻的两个数字相同就会合 ...
- .NET手撸2048小游戏
.NET手撸2048小游戏 2048是一款益智小游戏,得益于其规则简单,又和2的倍数有关,因此广为人知,特别是广受程序员的喜爱. 本文将再次使用我自制的"准游戏引擎"FlysEng ...
随机推荐
- Manacher算法
Manacher算法是求回文串最高效的算法,能在线性时间内求出以每一个字符为中心的最长回文串. 首先,我们都能想出$O(N^2)$求出每一个字符为中心的最长回文串的算法.那么我们考虑这样一种情况. ...
- MongoDB的安装及CURD操作
MongoDB的下载地址:http://www.mongodb.org/downloads MongoDB有32bit和64bit两个版本,32bit只能存放2GB数据.我们选择64bit版进行下载. ...
- C#读写文本文件
static public string Read(string path) { StreamReader sr = new StreamReader(path,Encoding.Default); ...
- win7下exe提示无法正常启动（0xc0000906）
本人遇见是 avast问题,卸了
- FreeImage使用
http://blog.csdn.net/byxdaz/article/details/6056509 http://blog.chinaunix.net/uid-20660110-id-65639. ...
- sql server 使用for xml path 将1列多行转换为字符串连接起来,俗称 sql 合并字符
由于项目的原因,需要将一些记录分类汇总,但还要列出相关的明细,这样的需求我还是第一次遇到,蛋疼了,还是请求一下度娘吧.搜索一番还是有结果,请看以下例子: create table tb ([id] i ...
- 简单CSS布局留用
1.导航栏固定显示代码,文字居中,z-index header{ position: fixed; top: 0px; left: 10%; width: 80%; height: 80px; bor ...
- 深入理解docker的link机制
https://yq.aliyun.com/articles/55912 摘要: 什么是docker的link机制 同一个宿主机上的多个docker容器之间如果想进行通信,可以通过使用容器的ip地址来 ...
- SHIFT后门拿服务器之方法总结
提权工具如下:cmd.exe Churrasco.exe nc.exe 提权前提:Wscript组件成功开启 如果Wscript组件被关闭,则使用以下方法开启: 源代码: <object run ...
- Working with Transactions (EF6 Onwards)
Data Developer Center > Learn > Entity Framework > Get Started > Working with Transactio ...