jquery开发的”天才笨笨碰“游戏
前段时间湖南卫视的快乐大本营里有一款“天才笨笨碰”游戏非常火。这款游戏主要是考选手的声母联想词语的能力。
小篇在看完这个节目后用jquery制作了“天才笨笨碰”网页游戏。先上效果图：
游戏规则：
1.如图点击开始，系统会给中间五个小块随机分配五个声母（哈哈，这边可能有些网友已经忘记声母都有哪些了。声母一共有23个：b p m f d t n l g k h j q x zh ch sh r z c s y w）
2.两位选手用这五个声母来联想词语，或句子。把含声母的色块推到对方那一边就胜利了（注意：中间的红色色块是不能动的。可以用）。在规定的时间内如果还没想到词语就换对方回答。
3.如上图，我们试玩下，可能大家比较明白游戏规则。这组的可移动声母是“ n f p t”,固定声母是“s”。假设美洋洋先开始： 美洋洋想到了“发烫” ，声母“ f t”就跑到灰太狼这一边。如图:
此时。轮到灰太狼回答，灰太狼在规定时间内未想到词来回答。又轮到美洋洋回答，美洋洋回答”哪怕“ ”n p“是”哪怕“的声母，”n p“移动。这样喜美洋洋成功的把四个可移动声母推到了对方，恭喜美洋洋获得了胜利。如下图：
”天才笨笨碰“游戏代码：
1.html代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>天才笨笨碰游戏-爱编程</title>
<link href="base.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<script src="basejs.js" type="text/javascript"></script>
</head>
<body> <div class="left">
<br />
<br />
<br />
<br /> <br />
<br /> <br /> <br /> <br /> <br /> <br />
<img alt="" src="hui.jpg" />
</div>
<div class="right"> <input style=" width:70px; height:40px;" type="button" value="开始" onclick="Start()" />
<br />
<br />
总时间：<label style="font-size:18px" id="zong">180</label>
<br />
<br />
<input type="button" value="重置" onclick="Reset()" /> 单次时间：<label style="font-size:18px" id="dan">30</label>
<br />
<br />
<br />
<br /> <br />
<br /> <img alt="" src="xi.jpg" />
</div>
<div class="content">
<div class="con">
<a href="javascript:"></a><a class="two" href="#"></a><span runat="server" id="span1"></span>
</div>
<div class="con">
<a href="javascript:"></a><a class="two" href="#"></a><span runat="server" id="span2"></span>
</div>
<div class="con">
<a href="javascript:"></a><a class="two" href="#"></a><span runat="server" id="span3"></span>
</div>
<div class="con">
<a href="javascript:"></a><a class="two" href="#"></a><span runat="server" id="span4"></span>
</div>
<div class="con">
<span style="background: #CC3333" runat="server" id="span5"></span>
</div>
</div> </body>
</html>
2.js代码：
$(function () {
$(".con a").click(function () {
var origin1 = $(this).position().left;
var origin2 = $(this).parent().find("span").position().left;
$(this).animate({ "left": origin2 }, "normal", "easeOutQuart");
$(this).parent().find("span").animate({ "left": origin1 }, "normal", "easeOutQuart");
});
})
//从一个给定的数组arr中,随机返回num个不重复项
function getArrayItems(arr, num) {
//新建一个数组,将传入的数组复制过来,用于运算,而不要直接操作传入的数组;
var temp_array = new Array();
for (var index in arr) {
temp_array.push(arr[index]);
}
//取出的数值项,保存在此数组
var return_array = new Array();
for (var i = 0; i < num; i++) {
//判断如果数组还有可以取出的元素,以防下标越界
if (temp_array.length > 0) {
//在数组中产生一个随机索引
var arrIndex = Math.floor(Math.random() * temp_array.length);
//将此随机索引的对应的数组元素值复制出来
return_array[i] = temp_array[arrIndex];
//然后删掉此索引的数组元素,这时候temp_array变为新的数组
temp_array.splice(arrIndex, 1);
} else {
//数组中数据项取完后,退出循环,比如数组本来只有10项,但要求取出20项.
break;
}
}
return return_array;
}
function Start() {
//测试
var my_array = new Array("b", " p", " m", "f", "d ", "t", " n", " l", " g", " k", " h", " j ", "q ", "x", " zh ", "ch", " sh ", "r ", "z ", "c ", "s", " y ", "w");
my_array = getArrayItems(my_array, 5);
$("span").each(function (i) {
$(this).html(my_array[i]);
});
$("#zong").html(180);
$("#dan").html(30);
Zong(); //总时间
Dan(); //单次时间
}
//总时间
var z_time
function Zong() {
clearInterval(z_time);
z_time = setInterval(function () {
var z = $("#zong").html();
if (z <= 1) {
alert("时间到，两选手打成了平手！");
clearInterval(z_time);
clearInterval(d_time)
}
$("#zong").html(z - 1);
}, 1000)
}
var d_time;
//单次时间
function Dan() {
clearInterval(d_time);
d_time = setInterval(function () {
var d = $("#dan").html();
if (d <= 1 && $("#zong").html() > 1) {
$("#dan").html(30);
d = 30;
alert("换另一选手！");
return;
}
$("#dan").html(d - 1);
}, 1000)
}
function Reset()
{
$("#dan").html(30)
}
3.css代码：
body
{
margin:;
padding:;
}
.content
{
margin: 0 270px;
margin-top: 5px;
width: 600px;
}
.con
{
position: relative;
height: 140px;
}
.con a, .con span
{
display: block;
position: absolute;
width: 110px;
height: 110px;
background: #777;
line-height: 110px;
font-size: 60px;
text-align: center;
color: #FFF;
}
.con span
{
background: #333;
left: 300px;
}
.two
{
left: 600px;
}
.left
{
width: 383px;
float: left;
}
.right
{
padding-right: 50px;
text-align: right;
width: 333px;
float: right;
}
代码很简单。js代码也有注释。网友们应该看得懂吧。主要用到了取随机数方法。
好了，到这里，这款”天才笨笨碰“游戏到此分享完毕。初次写博客，程序员吗，文字功底不好，欢迎网友拍砖。转载望保留原文链接。
原文链接：http://www.cnblogs.com/liaohuolin/p/3908630.html
jquery开发的”天才笨笨碰“游戏的更多相关文章
- jquery开发的数字相加游戏(你能玩几分)
jquery开发的数字相加游戏,我在一轮中玩了632分(如下图),你能玩几分,哈哈... 我要试一试 下面贡献下这款“数字相加游戏”的开发过程. html部分: <div class=" ...
- 第15.39节、splitDockWidget和tabifyDockWidget嵌套布局QDockWidget的PyQt人机对话案例：笨笨机器人
专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 一.引言 在第<第三十一章.containers容器类部件QDo ...
- pygame开发PC端微信打飞机游戏
pygame开发PC端微信打飞机游戏 一.项目简介 1. 介绍 本项目类似曾经火爆的微信打飞机游戏.游戏将使用Python语言开发,主要用到pygame的API.游戏最终将会以python源文件gam ...
- [转]jquery开发自定义的插件总结
本文转自:http://www.cnblogs.com/Jimmy009/archive/2013/01/17/jquery%E6%8F%92%E4%BB%B6.html 前几天在玩jquery,今天 ...
- 《深入PHP与jQuery开发》读书笔记——Chapter3
<深入PHP与jQuery开发>第三章学习笔记 1.PHP的魔术方法(在对象中发生某些例行事件时会自动调用这些方法) PHP提供了魔术方法__construct()(构造函数),在新对象被 ...
- 《深入PHP与jQuery开发》读书笔记——Chapter1
由于去实习过后,发现真正的后台也要懂前端啊,感觉javascript不懂,但是之前用过jQuery感觉不错,很方便,省去了一些内部函数的实现. 看了这一本<深入PHP与jQuery开发>, ...
- 2014.7.8模拟赛【笨笨当粉刷匠】|bzoj1296 [SCOI]粉刷匠
笨笨太好玩了,农田荒芜了,彩奖用光了,笨笨只好到处找工作,笨笨找到了一份粉刷匠的工作.笨笨有n条木板需要被粉刷.每条木板被分成m个格子,每个格子要被刷成红色或蓝色.笨笨每次粉刷,只能选择一条木板上一段 ...
- VR外包AR外包公司（虚拟现实外包公司）承接虚拟现实项目开发（企业、教育、游戏）
VR外包AR外包公司(虚拟现实外包公司)承接虚拟现实项目开发(企业.教育.游戏) 可公对公签正规合同,开发票. 我们是北京的公司.专业团队,成员为专业 VR/AR 产品公司一线开发人员,有大型产品开发 ...
- Dropdown.js基于jQuery开发的轻量级下拉框插件
Dropdown.js 前言 在SPA(Single Page Application)盛行的时代,jQuery插件的轮子正在减少,由于我厂有需求而开发了这个插件.如果觉得本文对您有帮助,请给个赞,以 ...
随机推荐
- iOS 修改UITabBar的默认点击行为
项目截图 当我接到如上图这个需求的时候,评估了一下.感觉如上图的效果用自定义UITabBar的方式就可以实现了(做法类似新浪微博的自定义UITabBar中的不规则按钮),没错,就是干.一番折腾之后,我 ...
- 【Algorithm】快速排序
一. 算法描述 快速排序:快速排序采用分治法进行排序,首先是分割,选取数组中的任意一个元素value(默认选用第一个),将数组划分为两段,前一段小于value,后一段大于value:然后再分别对前半段 ...
- [aaronyang] nodejs学习-mongodb[1]
1.资源提供与安装(ayjs.net) 学习说明:nodejs还是在非windows环境下操作好,所以一切还是 当前时间:2014年12月06日aaronyang 官网地址:www.mongodb.o ...
- Linux系统排查——CPU负载篇
本随笔介绍CPU负载的排查手段. 查看系统负载的工具:uptime,w,都能查看系统负载,系统平均负载是处于运行或不可打扰状态的进程的平均数, 可运行:运行态,占用CPU,或就绪态,等待CPU调度. ...
- sqlserver 在尝试加载程序集 ID 65537 时 Microsoft .NET Framework 出错.服务器可能资源不足
报错信息: 处理报表时出错. 对数据集“query”执行查询失败. 在尝试加载程序集 ID 65536 时 Microsoft .NET Framework 出错.服务器可能资源不足,或者不信任该程序 ...
- SharePoint 2013 Farm 安装指南——构建一个双层SharePoint Farm
最近要对公司里的SharePoint进行升级,由于旧的系统SharePoint 2010已经有2年了,上面改动比较多,而且权限也很混乱了,所以下定决心要对其做一次升级,重新部署一台新的SharePoi ...
- df -h和du -sh显示结果不一样的原因及解决
一.背景:一台2T硬盘的mysql服务器,保存电话的CDR信息.按照历史数据的水平,一个月能生成20+GB的文件.然而短短的半年时间,满了?! 登录服务器看谁占了这么大的空间?好吧,slow-quer ...
- [转]MVC 框架教程
Spring web MVC 框架提供了模型-视图-控制的体系结构和可以用来开发灵活.松散耦合的 web 应用程序的组件.MVC 模式导致了应用程序的不同方面(输入逻辑.业务逻辑和 UI 逻辑)的分离 ...
- jenkins 批量修改 去掉勾选Build whenever a SNAPSHOT dependency is built
进入jenkins 的jobs的上一层目录 执行 sed -i 's/<ignoreUpstremChanges>false<\/ignoreUpstremChanges>/& ...
- java用String类的toUpperCase()和toLowerCase()方法转字符串的大小写
1.如何判断英文字母的大小写: package com.ldw.string; import java.util.Scanner; /** * @author 作者:ldw E-mail: csu.l ...