JQuery测手速小游戏-遁地龙卷风

2024-05-10 10:16:03

(-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测手速小游戏-遁地龙卷风相关推荐

【Python】利用tkinter开发测手速小游戏
一.简介利用tkinter开发测手速的小游戏,大家10s内可以点击鼠标多少次呢?想测试一下吗?来试试测手速下游戏吧!仅供娱乐~ 试玩视频: 测手速小游戏游戏截图: 二.代码分模块介绍 2.1 导入 ...
奥运测手速小游戏（傅女神）
看到傅园慧女神的洪荒之力,心中也充满了洪荒之力,顺势做一个测手速的小游戏,虽然做的有点渣.谁让我既不会美术又不会动画,图还得自己做.动画还得自己截,差点折腾死我. 下面展示(轻吐槽,我知道做得难看): ...
CocosCreator拼手速小游戏（教程 + 源码）TS实现小游戏
CocosCreator拼手速小游戏(教程 + 源码)TS实现小游戏前言游戏完成后的样子玩法:在10秒内点击屏幕中间的按钮,最终记录一共点击了多少下源码在Q群:1130122408 这个游戏比 ...
Alex - 用python来写测手速游戏
# 测手速游戏 # 文字:按钮:0 次/s # 按钮 import time import tkinter # 1.初始化 mywindow = tkinter.Tk() # 3.设置标题 mywin ...
Deqin- 升级版测手速游戏
import tkinter import time import cct = tkinter.Tk() t.geometry("500x500") t.title("反 ...
succi -测手速游戏
import tkinter as tk import time window=tk.Tk() window.title('测手速游戏') window.geometry('600x500') # L ...
手机测试android程序下载,测手速下载_测手速手机版下载「安卓版」-太平洋下载中心...
这是一款用来做测试的综合测试类应用,可以测试你的各种能力. 在首页,你可以测试你的手速,首页的测手速共有5秒,10秒,20秒,30秒,60秒共五种模式可选.测试完成后你可以把测试结果分享到qq空间,q ...
使用jquery—Canvas实现html5小游戏——《坦克大战》
目录 1.项目背景 2.项目展示 3.设计思路 3.1.坦克移动 3.2.坦克开火 3.3.击中坦克 4.实现代码 5.总结 1.项目背景 2021年春节期间在家无聊,正好又学过一些前端的知识,因此就 ...
计算机练手速的游戏,玩手速的游戏有哪些手机上练手速的游戏推荐
玩手速的游戏有哪些,手速游戏顾名思义就是需要玩家有着敏捷快的反应和手速才能应对的游戏了,跑跑车为您带来手机上练手速的游戏推荐. 点杀泰坦2 作为剑圣来防卫世界的战斗还在持续,但是更多全新的更加危险的巨 ...

最新文章

热门文章