[Jquery]实现三个盒子两两交换的考眼力游戏

眼力夺宝小游戏

实现三个盒子随机两两交换猜盒子的游戏

实现效果如下

实现方法及完整代码如下

<!DOCTYPE html>
<html><head><title>眼力夺宝</title><script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
</head><body><p>游戏规则：在三个奖励里面点击选择一个，记住它所在的盒子里，在一系列交换后如果猜对了盒子即获得奖励，猜错则没有。</p><input id="btn1" type="button" onclick="swap()" value="开始" /><input id="btn2" type="button" onclick="reswap()" value="重新开始" /><div class="box" id="div1"><span class="font">5元现金</span></div><div class="box" id="div2"><span class="font">20元代金券</span></div><div class="box" id="div3"><span class="font">10元运费券</span></div><div id="remind"></div><script>// 全局变量：box保存点击的盒子标签，chooseID记住开始选择的盒子id，isChoose是否已经选择var box;var chooseID = '';var isChoose = false;$(function() {// 点击盒子事件$('.box').click(function(e) {if (!isChoose) {// 当还没有选择时if (e.target.id == '') {// 当点击的是div里的文字，找到文字的父元素div，改变div样式，显示文字box = $(e.target).parent()[0]var id = box.id;$(box).addClass('choose');$('.font').show();} else {// 当点击的是div，改变div样式，显示文字box = e.target;var id = box.id;$(box).addClass('choose');$('.font').show();}if (chooseID == '') {// 第一次选择，记住此idchooseID = id;} else {// 第二次选择，判断是否与第一次id相同if (chooseID == id) {$('#remind').text('恭喜你猜对啦！获得' + $($(box).children()[0]).text());// 判断完后将chooseID置空下次使用chooseID == '';} else {$('#remind').text('很遗憾你猜错了！');chooseID == '';}}isChoose = true;}})});function swap() {//点击开始，开始随机两两交换，将字隐藏，样式变回之前的样式$('.box').removeClass('choose');var font = $('.font');font.hide();//按钮置灰var btn1 = $('#btn1');var btn2 = $('#btn2');btn1.attr("disabled", "disabled");btn2.attr("disabled", "disabled");//count保存交换的次数var count = 0;// 定义随机交换次数6~10（可配置）var randomCount = Math.floor(Math.random() * 6 + 10);// setInterval循环执行交换var myTimer = setInterval(function() {// 随机产生0、1、2三个数，用于指明哪两个盒子交换，具体方法见judge函数var num = Math.floor(Math.random() * 2);var randomarr = judge(num);var div1 = $('#div1'),div2 = $('#div2'),div3 = $('#div3');// 获取随机出来的两个divvar obj1 = eval('div' + randomarr[0])var obj2 = eval('div' + randomarr[1])//获取两个盒子的位置var p1 = obj1.offset(),p2 = obj2.offset();//交换两个盒子位子动画obj1.animate(p2, 140);obj2.animate(p1, 140);//执行一次交换count+1count++;//当count=规定的次数时，清理定时器，打开重新开始按钮if (count == randomCount) {clearInterval(myTimer);//设置定时器等最后一个动画执行完成后才打开重新开始按钮setTimeout(function() {btn2.removeAttr('disabled');}, 140)}}, 280)//isChoose置为false，即不可再次点击盒子，保证每次能点一个isChoose = false;}function reswap() {//打开按钮，所有样式状态回到初始状态$('#btn1').removeAttr('disabled');$('.box').removeClass('choose');$('.font').show();$('#remind').text('');chooseID = '';isChoose = false;}//judge函数根据传入的的随机数0~2返回三种数组,函数根据返回的两个值，确定哪两个盒子交换位子//规定x=0:盒子1和盒子2交换，x=2:盒子1和盒子2交换,x=3:盒子1和盒子2交换function judge(x) {switch (x) {case 0:return [1, 2];break;case 1:return [1, 3];break;case 2:return [2, 3];break;}}</script><style>/*定义好三个盒子的初始位置*/#div1,#div2,#div3 {width: 70px;height: 70px;padding: auto;position: absolute;top: 200px;left: 200px;background-color: orange;line-height: 70px;text-align: center;font-size: 13px;}#div2 {top: 300px;left: 100px}#div3 {top: 300px;left: 300px}.choose {transform: scale(1.5);}</style>
</body></html>

代码可能有更好的写法，以上代码仅供参考

[Jquery]实现三个盒子两两交换的考眼力游戏相关推荐

TCP 的三次握手+两次交换+四次挥手
目录 1.TCP 的三次握手+两次交换+四次挥手 1.1.三次握手 1.1.1.流程 1.1.2.两次握手为什么不可以? 1.1.3.第一次握手是否可以携带数据? 1.1.4.第二次握手是否可以携带数 ...
左神讲算法——异或的高级操作（两数交换+经典面试题）
目录 1. 异或的性质 2. 两数交换 3. 经典面试例题参考链接:2021最新左神数据结构算法全家桶 1. 异或的性质异或可以看成相同为1,不同为0:也可以看作无进位相加,有奇数个1则结果为1, ...
23. Leetcode 24. 两两交换链表中的节点 (链表-基础操作类-交换链表)
给你一个链表,两两交换其中相邻的节点,并返回交换后链表的头节点.你必须在不修改节点内部的值的情况下完成本题(即,只能进行节点交换).示例 1:输入:head = [1,2,3,4] 输出:[2,1,4 ...
LeetCode-链表-24. 两两交换链表中的节点
24. 两两交换链表中的节点思路:使用一个头节点,然后用cur指针指向头 /*** Definition for singly-linked list.* struct ListNode {* in ...
leetcode24. 两两交换链表中的节点(思路+解析)
一:题目二:思路思路: 1.分析题意这是相邻结点进行交换如果是4个结点那么1和2交换 3和4交换如果是3个结点那么就1和2进行交换 3不动 2.这里我们定义一个虚拟头节点方便操作,我们只 ...
c++ std 方法取两个数的较大_【数据结构C++】两数交换(4种方法)
一.语言:C++ 二.内容:通过函数调用实现两个数的交换三.方法: 正常函数交换引用类型的函数交换指针类型的函数交换宏函数定义交换(不常见) #include <iostream> ...
LeetCode 24.两两交换链表中的节点 C语言
题目 24.两两交换链表中的节点给定一个链表,两两交换其中相邻的节点,并返回交换后的链表. 你不能只是单纯的改变节点内部的值,而是需要实际的进行节点交换. 示例: 给定 1->2->3- ...
24. 两两交换链表中的节点-两两反转链表-LeetCode
一.题目二.思路 1.采用递归的方式 2.可以通过递归的方式实现两两交换链表中的节点. 递归的终止条件是链表中没有节点,或者链表中只有一个节点,此时无法进行交换. 如果链表中至少有两个节点,则在两两 ...
C++ 两两交换链表中的节点
C++ 两两交换链表中的节点给你一个链表,两两交换其中相邻的节点,并返回交换后链表的头节点.你必须在不修改节点内部的值的情况下完成本题(即只能进行节点交换). 示例1 输入:head = [1, ...

[Jquery]实现三个盒子两两交换的考眼力游戏

眼力夺宝小游戏

[Jquery]实现三个盒子两两交换的考眼力游戏相关推荐

最新文章

热门文章