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代码:
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head runat="server"> 3 <title>天才笨笨碰游戏-爱编程</title> 4 <link href="base.css" rel="stylesheet" type="text/css" /> 5 <script src="jquery-1.4.1.min.js" type="text/javascript"></script> 6 <script src="jquery.easing.1.3.js" type="text/javascript"></script> 7 <script src="basejs.js" type="text/javascript"></script> 8 </head> 9 <body> 10 11 <div class="left"> 12 <br /> 13 <br /> 14 <br /> 15 <br /> <br /> 16 <br /> <br /> <br /> <br /> <br /> <br /> 17 <img alt="" src="hui.jpg" /> 18 </div> 19 <div class="right"> 20 21 <input style=" width:70px; height:40px;" type="button" value="开始" onclick="Start()" /> 22 <br /> 23 <br /> 24 总时间:<label style="font-size:18px" id="zong">180</label> 25 <br /> 26 <br /> 27 <input type="button" value="重置" onclick="Reset()" /> 单次时间:<label style="font-size:18px" id="dan">30</label> 28 <br /> 29 <br /> 30 <br /> 31 <br /> <br /> 32 <br /> 33 34 <img alt="" src="xi.jpg" /> 35 </div> 36 <div class="content"> 37 <div class="con"> 38 <a href="javascript:"></a><a class="two" href="#"></a><span runat="server" id="span1"></span> 39 </div> 40 <div class="con"> 41 <a href="javascript:"></a><a class="two" href="#"></a><span runat="server" id="span2"></span> 42 </div> 43 <div class="con"> 44 <a href="javascript:"></a><a class="two" href="#"></a><span runat="server" id="span3"></span> 45 </div> 46 <div class="con"> 47 <a href="javascript:"></a><a class="two" href="#"></a><span runat="server" id="span4"></span> 48 </div> 49 <div class="con"> 50 <span style="background: #CC3333" runat="server" id="span5"></span> 51 </div> 52 </div> 53 54 </body> 55 </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代码:
1 body 2 { 3 margin: 0; 4 padding: 0; 5 } 6 .content 7 { 8 margin: 0 270px; 9 margin-top: 5px; 10 width: 600px; 11 } 12 .con 13 { 14 position: relative; 15 height: 140px; 16 } 17 .con a, .con span 18 { 19 display: block; 20 position: absolute; 21 width: 110px; 22 height: 110px; 23 background: #777; 24 line-height: 110px; 25 font-size: 60px; 26 text-align: center; 27 color: #FFF; 28 } 29 .con span 30 { 31 background: #333; 32 left: 300px; 33 } 34 .two 35 { 36 left: 600px; 37 } 38 .left 39 { 40 width: 383px; 41 float: left; 42 } 43 .right 44 { 45 padding-right: 50px; 46 text-align: right; 47 width: 333px; 48 float: right; 49 }
代码很简单。js代码也有注释。网友们应该看得懂吧。主要用到了取随机数方法。
好了,到这里,这款”天才笨笨碰“游戏到此分享完毕。初次写博客,程序员吗,文字功底不好,欢迎网友拍砖。转载望保留原文链接。
原文链接:http://www.cnblogs.com/liaohuolin/p/3908630.html
转载于:https://www.cnblogs.com/liaohuolin/p/3908630.html
jquery开发的”天才笨笨碰“游戏相关推荐
- 对对碰java_Java开发学习之用Java打造一款对对碰游戏(下篇)
本文主要向大家介绍了Java开发学习之用Java打造一款对对碰游戏,通过具体的内容向大家展现,希望对大家Java开发的学习有所帮助. 在之前的文章介绍了对对碰游戏的理论部分和介绍了JLabel.JBu ...
- 用90%的c语言开发对对碰游戏,希望大家指点哈
用90%的c语言开发对对碰游戏,希望大家指点哈 **还有部分是c++语言哈**第一次写博客哈,有什么不足望大家指出我能写出来也参考网上的一些代码哈 #include <iomanip> # ...
- C++开发对对碰游戏
相信大家都玩过开心消消乐,对对碰游戏类似于开心消消乐,利用C++语言开发的小游戏,编译器vs2010版本开发. #include "stdafx.h" #include <g ...
- 程序员炫技:用c语言开发对对碰游戏,你打几分?
我发现不少游戏都是这样,泡泡龙,对对碰,连连看,三重镇--众多游戏都是汇集三个单位便会进行消除.那么今天小编就用C语言开发出一款对对碰小游戏 这篇文章主要为大家分享了C语言对对碰游戏源码,具有一定的参 ...
- 考试题目“笨笨玩游戏”
[题目描述] 一天,笨笨和妈妈玩游戏,妈妈 给笨笨出N个正整数,让笨笨把这N个正整数连接生成一个"大"的整数,每个正整数只使用一次,让笨笨告诉妈妈这样生成的大整数的最大值. 例如, ...
- 【模拟一】笨笨玩游戏
[题目描述] 一天,笨笨和妈妈玩游戏,妈妈 给笨笨出N个正整数,让笨笨把这N个正整数连接生成一个"大"的整数,每个正整数只使用一次,让笨笨告诉妈妈这样生成的大整数的最大值. 例如, ...
- HTML5小游戏源码分享【坑爹算术题,尝试逃脱,笨笨的一家,星球大战,小英雄呼呼】
坑爹算术题 尝试逃脱 笨笨的一家 星球大战 小英雄呼呼带支付 ,完全可以上线运营喔! 下载地址: http://ziyuan4.com/html5%e5%b0%8f%e6%b8%b8%e6%88%8f ...
- 【模考3】笨笨连线游戏
[题目描述] 一天,妈妈在黑板上画了一个大大的圆,然后又在圆弧上标上1,2,3,...,,2N个数.然后让笨笨任意选取一对数(两个不同的数)上连一条直线.然后再任意选取一对数,再边一条直线,但这条直线 ...
- 模拟考试9.3-笨笨连线游戏(route.cpp)
[题目描述] 一天,妈妈在黑板上画了一个大大的圆,然后又在圆弧上标上1,2,3,...,,2N个数.然后让笨笨任意选取一对数(两个不同的数)上连一条直线.然后再任意选取一对数,再边一条直线,但这条直线 ...
最新文章
- vs2008 C++创建和调用标准DLL
- linux go语言环境配置文件,linux下安装配置go语言环境
- bzoj1036 树的统计Count 树链剖分
- UVa 11044 - Searching for Nessy
- Hibernate dbcp连接池使用方法
- xxx.lib(xxx.obj)fatal error LNK1103: debugging information corrupt; recompile module 的解决方案
- xFire入门(eclipse、tomcat环境)
- Coding and Paper Letter(四十八)
- Cocos2d-x CocosBuilder使用教程(一)HelloCocosBuilder
- IPv6在3G网的应用(转)
- java 发卡平台支付_基于jsp的自动发卡平台-JavaEE实现自动发卡平台 - java项目源码...
- 基于移动互联网的交互式卫星地面管理终端
- oracle按相同年份_英语表达方式有几个类型,时间和日期表达都是不相同的
- Spring中FrameMaker中文乱码
- Docker的安装及加速器配置
- TEX:文档的布局与组织
- 记录10--fedora 14下安装tftp软件
- 大数据相关书籍(包含Java, Scala, R, Linux, Spark, Hadoop, Hive, Hbase, Sqoop, Flume, Strom)
- 车联网(智能网联汽车)无线电频率规划发布 助力制造强国和网络强国建设
- .NET 开源开发项目
热门文章
- php新浪获取ip接口,【php】利用新浪api接口与php获取远程数据的步骤,获取IP地址,并获取相应的IP归属地...
- lora发射和接收原理_LoRa 的扩频技术
- 清华大学计算机网络体系结构,清华大学计算机网络体系结构讲义ch32(OSPF).pdf
- keras系列︱keras是如何指定显卡且限制显存用量(GPU/CPU使用)
- Linux基础_合并,归档,压缩,dump,编辑器
- 职业经理人-授权后才是管理的开始
- MYSQL的主从和主主复制模式
- Linux系统下apt-get命令详解
- Python的条件判断与循环样例
- VS2010 IDE安装问题