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手速测试小游戏实现思路详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • jQuery制作拼图小游戏

    源代码思路分析: [一]如何生成图片网格,我想到两种方法: (1)把这张大图切成16张小图,然后用img标签的src (2)只有一张大图,然后每个元素的背景图用css的background-position进行切割定位,这样就需要16个数组[0,0],[-150,0],[-300,0]..........(我采用这种) [二]图片背景定位数组与布局定位数组 在选择了使用CSS定位切图,就需要生成数据. 需要的css背景 定位数组为:[0,0],[-150,0],[-300,0],[-450,0]

  • jQuery编写网页版2048小游戏

    jQuery编写网页版2048小游戏

    大致介绍 看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了,但是自己实现起来会遇到各种问题.比如,在最后判断游戏是否结束的时候,我写的语句语法是对的,但就是不执行.最后通过对视频源码的分析对比,发现原作者写的一个setTimeout定时器有额外的意思,本来我以为它就是简单的一个延时动画,其实他是在等待另外一个函数执行完毕.-_-||.最后还是很高兴能写出来,也改进了一些源

  • jQuery实现简易的天天爱消除小游戏

    jQuery实现简易的天天爱消除小游戏

    今天分享一枚小demo:<天天爱消除游戏>,我想大家对这个游戏不陌生吧!?近期挺火的一款手游 妙味的讲师也很喜欢玩这款游戏 ,课余时间就写了个简易版天天的爱消除,除了PC端以外,试试在iPad.iPhone上玩吧~ 涉及知识点:JS.HTML5; 游戏截图: CSS: *{ margin:0; padding:0;} #ul1{ position:relative; margin:20px auto; background:#1b1f2b; overflow:hidden;} #ul1 li{

  • jQuery实现别踩白块儿网页版小游戏

    大致介绍 终于结束了考试,放假回家了.这次的别踩白块儿网页版要比之前做的 jQuery编写网页版2048小游戏 要简单一点,基本的思路都差不多. 这篇博客并不是详细的讲解,只是大致介绍函数的作用,其中实现的细节注释中有解释,网上的这个源码有点乱,如果想看比较整齐的源码或者视频的可以QQ联系我(免费)(找共同学习的伙伴) 思路 这个小游戏可以抽象化分为3层 ◆最底下的一层是基本的样式(可见的) ◆中间的层是最主要的,是一个4x3的二维数组,游戏中我们都是对这个二维数组进行操作(不可见的) ◆最上面

  • jQuery网页版打砖块小游戏源码分享

    jQuery网页版打砖块小游戏源码分享

    这是一款基于jQuery实现网页版打砖块小游戏源码,满满的童年回忆. 为大家分享的jQuery实现网页版打砖块小游戏源码如下 效果演示 源码下载 <!DOCTYPE html> <html lang="en" > <head> <meta charset="gb2312" /> <title>jQuery网页版打砖块小游戏源码</title> <link href="css/ma

  • 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 *:nt

  • 原生js实现贪食蛇小游戏的思路详解

    原生js实现贪食蛇小游戏的思路详解

    先不多说先上图 下面是代码部分(这里你可以根据需要改变蛇头和身体还有食物的图片,然后默认的样式是使用纯颜色的如果没有更改我的背景图片的话------改这些图开始是想搞笑一下朋友哈哈哈,请不要在意哈),还有操作键是使用 ↑ ↓ ← → ) <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>贪食蛇</title>

  • python实现逢七拍腿小游戏的思路详解

    逢七拍腿游戏 几个小朋友在一起玩逢七拍腿的游戏,从1开始数数,当数到7的倍数或者尾号是7时,拍一下腿.现在从1数到99,假设每个人都没有错,计算一下共要拍腿几次? 第一种实现思路:通过在for循环语句中使用continue语句来实现计算拍腿次数.首先假设可拍腿次数为最高次数99,每触发满足的条件的时候就直接跳转到下一次循环当中,最后的total减1则不执行,不满足条件时total则减1.因此实际上total减去的是不满足条件的数字,代码如下: total = 99 #记录拍腿次数的变量 for

  • jQuery validate+artdialog+jquery form实现弹出表单思路详解

    功能描述: 在页面弹出一个form表单,ajax无刷新提交表单,表单需通过验证. 适用范围: 适用于在列表页面新增,修改记录. 需要加载的js文件: jquery.min.js artDialog.js iframeTools.js jquery.form.js jquery.validate.js 实现思路: 在页面中将表单放到一个隐藏的容器中,用artdialog弹出该form并对form加上jqueryvalidate验证,提交采用jqueryform ajax提交,由于都是用现成的插件写

  • Python实战小游戏飞机大战详解

    Python实战小游戏飞机大战详解

    目录 导语 ​正文 一.环境安装 二.我方飞机 三.敌方飞机 四.控制键盘移动 五.检测子弹碰撞 六.效果图 总结 导语 "看见别人都那么努力,那么勤奋,那么意气风发地走在成功的道路上,你问问自己:难道就不想成为他们的绊脚石吗?" --周一整理好心情好好出发吧! 大家好啊,还在学习的小小伙伴儿慢慢学哈~学完基础的你,今天可以放松下,跟着小编玩会儿游戏再继续哦! 新的一周要努力哦!赶不上别人至少也要慢慢溜上去,晓得吧?乖巧.jpg "晓得晓得,会努力的". ​大家还记

  • 使用Matlab制作大富翁小游戏的过程详解

    使用Matlab制作大富翁小游戏的过程详解

    目录 1.自定义头像及名称 2.买地.收费.破产 3.部分代码展示 gui_init.m self_init.m 4.修改记录 5.下载地址 大富翁大家都玩过,走到建筑的位置可以买地,第二圈走到买过的地可以升级,别人经过后需要付过路费,每次经过起点都会获得一定资金,玩到最后还没破产的就是胜者,这里我用MATLAB制作了一款MATLAB版的大富翁小游戏: 1.自定义头像及名称 点击方框内加号可换头像,点击文本区域可改昵称: 当然即使不换头像点击开始后,也会自动分配头像和名称: 2.买地.收费.破产

  • JS学习笔记之贪吃蛇小游戏demo实例详解

    本文实例讲述了JS学习笔记之贪吃蛇小游戏demo实例.分享给大家供大家参考,具体如下: 最近跟着视频教程打了一个贪吃蛇, 来记录一下实现思路, 先上代码 静态页 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>贪吃蛇</title> </head> <style> *{ mar

  • C语言实现扫雷小游戏完整算法详解(附完整代码)

    C语言实现扫雷小游戏完整算法详解(附完整代码)

    目录 前言 1.算法基本思路 2.算法详解 1.初始化数组与打印数组 2.设置雷 3.排查与标记 4.CountMine函数计算周围雷的个数 5.ExpandMine函数递归展开周围所有安全区域 3.完整代码!!! 总结 前言 扫雷是一个常见小游戏,那么如何用C语言实现扫雷呢?学习了二维数组之后,我们可将扫雷的网格区域存储为二维数组,从而使用C语言实现扫雷. 1.算法基本思路 首先,用一个二维数组存储雷的分布,雷的分布在游戏期间从始至终不变,下文称为mine数组.用另一个二维数组存储排查出的雷的

  • 基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)

    基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)

    随着html5的兴起,那些公司对大型游戏的开发正在慢慢疏远,一.开发周期长:二.运营花费高:他们正找一些能够克服这些缺点的替代品.正好,html5的出现可以改变这些现状,在淘宝.京东等一些大型电商网站.QQ.微信等聊天软件都出现了html5的小游戏,这说明html5越来越受到大家的青睐.接下来我用javascript实现一个小型游戏---打地鼠. 一．游戏简介 打地鼠这个游戏相信大家都不陌生,也是童年时候一款经典的游戏.本次游戏的编写是以html文件形式完成的,并且使用HBulider软件进行编

  • jQuery实现数字华容道小游戏(实例代码)

    <!DOCTYPE html> <html> <head><meta charset="utf-8"> <title>数字华容道</title> <script type="text/javascript" src="jquery.min.js"></script> <style type="text/css"> *{

随机推荐