前段时间湖南卫视的快乐大本营里有一款“天才笨笨碰”游戏非常火。这款游戏主要是考选手的声母联想词语的能力。

小篇在看完这个节目后用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开发的”天才笨笨碰“游戏的更多相关文章

  1. jquery开发的数字相加游戏(你能玩几分)

    jquery开发的数字相加游戏,我在一轮中玩了632分(如下图),你能玩几分,哈哈... 我要试一试 下面贡献下这款“数字相加游戏”的开发过程. html部分: <div class=" ...

  2. 第15.39节、splitDockWidget和tabifyDockWidget嵌套布局QDockWidget的PyQt人机对话案例：笨笨机器人

    专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 一.引言 在第<第三十一章.containers容器类部件QDo ...

  3. pygame开发PC端微信打飞机游戏

    pygame开发PC端微信打飞机游戏 一.项目简介 1. 介绍 本项目类似曾经火爆的微信打飞机游戏.游戏将使用Python语言开发,主要用到pygame的API.游戏最终将会以python源文件gam ...

  4. [转]jquery开发自定义的插件总结

    本文转自:http://www.cnblogs.com/Jimmy009/archive/2013/01/17/jquery%E6%8F%92%E4%BB%B6.html 前几天在玩jquery,今天 ...

  5. 《深入PHP与jQuery开发》读书笔记——Chapter3

    <深入PHP与jQuery开发>第三章学习笔记 1.PHP的魔术方法(在对象中发生某些例行事件时会自动调用这些方法) PHP提供了魔术方法__construct()(构造函数),在新对象被 ...

  6. 《深入PHP与jQuery开发》读书笔记——Chapter1

    由于去实习过后,发现真正的后台也要懂前端啊,感觉javascript不懂,但是之前用过jQuery感觉不错,很方便,省去了一些内部函数的实现. 看了这一本<深入PHP与jQuery开发>, ...

  7. 2014.7.8模拟赛【笨笨当粉刷匠】|bzoj1296 [SCOI]粉刷匠

    笨笨太好玩了,农田荒芜了,彩奖用光了,笨笨只好到处找工作,笨笨找到了一份粉刷匠的工作.笨笨有n条木板需要被粉刷.每条木板被分成m个格子,每个格子要被刷成红色或蓝色.笨笨每次粉刷,只能选择一条木板上一段 ...

  8. VR外包AR外包公司（虚拟现实外包公司）承接虚拟现实项目开发（企业、教育、游戏）

    VR外包AR外包公司(虚拟现实外包公司)承接虚拟现实项目开发(企业.教育.游戏) 可公对公签正规合同,开发票. 我们是北京的公司.专业团队,成员为专业 VR/AR 产品公司一线开发人员,有大型产品开发 ...

  9. Dropdown.js基于jQuery开发的轻量级下拉框插件

    Dropdown.js 前言 在SPA(Single Page Application)盛行的时代,jQuery插件的轮子正在减少,由于我厂有需求而开发了这个插件.如果觉得本文对您有帮助,请给个赞,以 ...

随机推荐

  1. .net获取当前url各种属性(文件名、参数、域名、端口等)的方法（转）

    假设当前页完整地址是:http://www.test.com:80/aaa/bbb.aspx?id=5&name=kelli "http://"是协议名 "www ...

  2. solrj索引操作

    添加索引 Solr添加文档至索引: http://www.cnblogs.com/dennisit/p/3621717.html 删除索引: 每天索引记录有一个唯一标识,索引的删除通过唯一标识操作,如 ...

  3. mysql join left join区别

    mysql默认的join是inner join,inner join 和 left join的区别看图:

  4. /proc 目录详细说明

    /proc路径详细: Linux 内核提供了一种通过 /proc 文件系统,在运行时访问内核内部数据结构.改变内核设置的机制.proc文件系统是一个伪文件系统,它只存在内存当中,而不占用外存空间.它以 ...

  5. Swift2.0语言教程之函数嵌套调用形式

    Swift2.0语言教程之函数嵌套调用形式 Swift2.0语言函数嵌套调用形式 在Swift中,在函数中还能够调用函数,从而形成嵌套调用.嵌套调用的形式往往有两种:一种是在一个函数中调用其它函数:还 ...

  6. iphone app的非appstore发布方法及其免越狱安装方法

    iphone app的非appstore发布方法及其免越狱安装方法   本文包含两项内容, 1.开发者如何将app导出为可供普通用户在外部安装的ipa文件. 2.用户使用itools来安装ipa格式的 ...

  7. matlab中的Traing、Validation、Testing

    <matlab神经网络30个案例分析> ROC曲线是反映敏感性和特异性连续变量的综合指标,roc曲线真阳性率为纵坐标,假阳性率为横坐标,在坐标上由无数个临界值求出的无数对真阳性率和假阳性率 ...

  8. Linux中SFTP命令

    sftp和ftp是两种协议是不同的,sftp是ssh内含的协议,只要sshd服务器启动了,它就可用,它本身不需要ftp服务器启动. 1.常用登陆方式: 格式:sftp <user>@< ...

  9. Java – Generate random integers in a rangejava获取某个范围内的一个随机数

    In this article, we will show you three ways to generate random integers in a range. java.util.Rando ...

  10. django性能优化缓存view详解

    缓存提升性能: 1.通常的view会去数据库端执行相关的查询然后交由template渲染.数据库访问通常就是性能的瓶颈所在. 2.由于许多数据要很久才会变一次.两次连续的数据库访问通常返回的数据是一样 ...