掷色子猜大小游戏

本文结合实例为大家讲解如何实现一个掷色子猜大小的游戏功能。上期我们给大家介绍了jQuery掷色子动画,本期在上期的基础上,涉及到HTML,CSS,jQuery以及PHP相关知识,文章重点关注后台PHP程序会根据用户选择的大小计算概率,控制最终掷出的点数,本例中用户猜中几率为20%。

HTML

本例中用到两粒色子,也就是说可以同时掷出两粒色子,所得的点数应该是两粒色子的点数之和。另外我们在页面上放置两个单选框,用户可以选择大小。

 <p class="sel">        <input type="radio" name="bs" id="big" value="1" checked> 大     <input type="radio" name="bs" id="small" value="0"> 小 </p> <div class="wrap">    <div id="dice"><span class="dice dice_1" id="dice1"></span>    <span class="dice dice_6" id="dice2"></span></div> </div> <p id="result">请直接点击上面的色子!</p> 

CSS

jQuery

用户选择大小,然后单击色子,这时通过$.getJSON()向后台data.php发送一个ajax请求,提交了所选的大小参数,然后根据返回的点数完成色子动画,得出所掷出的点数。

 $(function(){     $("#dice").click(function(){         $(".wrap").append("<div id=‘dice_mask‘></div>");//加遮罩         var dice1 = $("#dice1");         var dice2 = $("#dice2");         var big_num = $("#big");         var sel = $("#big").attr("checked")?1:0;         $.getJSON("data.php",{sels:sel},function(json){             var num1 = json[0];             var num2 = json[1];             $("#result").hide();             diceroll(dice1,num1);//掷色子1动画             diceroll(dice2,num2);//掷色子2动画             $("#dice_mask").remove();//移除遮罩             var num = parseInt(num1)+parseInt(num2);             $("#result").html("您掷得点数是<span>"+num+"</span>").fadeIn(2500);         });     }); }); 

跟上期实例不同的是,我们这次没有使用随机点数,而是根据后台PHP返回的点数来定义色子最终掷出的点数,使用自定义函数diceroll(dice,num),第一个参数dice表示色子对象,第二个参数num表示定义的点数。以下是自定义函数diceroll(dice,num)实现的动画代码。

 function diceroll(dice,num){     dice.attr("class","dice");//清除上次动画后的点数     dice.css(‘cursor‘,‘default‘);     dice.animate({left: ‘+2px‘}, 100,function(){         dice.addClass("dice_t");     }).delay(200).animate({top:‘-2px‘},100,function(){         dice.removeClass("dice_t").addClass("dice_s");     }).delay(200).animate({opacity: ‘show‘},600,function(){         dice.removeClass("dice_s").addClass("dice_e");     }).delay(100).animate({left:‘-2px‘,top:‘2px‘},100,function(){         dice.removeClass("dice_e").addClass("dice_"+num);         dice.css(‘cursor‘,‘pointer‘);     }); } 

PHP

PHP文件data.php的任务是根据用户前台传达过来的参数值(用户选的大或小),分配猜中几率,比如用户选大(1),则出小的几率为8,出大的几率为2,分别对应百分比。

 $num = intval($_GET[‘sels‘]); if($num==1){ //大     $v = array(8,2); }else{//小     $v = array(2,8); } $size_arr = array(     ‘0‘ => array(‘id‘=>1,‘v‘=>$v[0]),     ‘1‘ => array(‘id‘=>2,‘v‘=>$v[1]) ); 

根据设定好的概率,我们应该返回“大”还是“小”,如果是小,我们定义两粒色子点数之和为2-6,如果是大,则定义色子点数之和为8-12,然后我们用mt_rand()随机取出一个数字出来,这个数字就是用户掷出的点数。

 foreach ($size_arr as $key => $val) {     $arr[$val[‘id‘]] = $val[‘v‘]; }  $rid = getRand($arr); //根据概率计算大小 if($rid==1){     $sum = mt_rand(2,6); }else{     $sum = mt_rand(8,12); } 

我们得到了色子总点数,但是我们使用的是两粒色子,那我们就得把色子点数分配给两粒色子,这样我们定义了以下数组:

 $arrs = array(     ‘2‘ => array(array(1,1)),     ‘3‘ => array(array(1,2)),     ‘4‘ => array(array(1,3),array(2,2)),     ‘5‘ => array(array(1,4),array(2,3)),     ‘6‘ => array(array(1,5),array(2,4),array(3,3)),     ‘7‘ => array(array(1,6),array(2,7),array(3,4)),     ‘8‘ => array(array(2,6),array(3,5),array(4,4)),     ‘9‘ => array(array(3,6),array(4,5)),     ‘10‘ => array(array(4,6),array(5,5)),     ‘11‘ => array(array(5,6)),     ‘12‘ => array(array(6,6)) ); 

可以看出,点数2只能由1和1组成,而点数4则可以由1和3或者2和2组成。

最后,我们要根据总点数,从以上数组中取出对应的组(二维),然后随机取其中一组,再打乱顺序,混乱色子的数字排序,最后输出json格式数据给前端页面调用。

 $arr_rs = $arrs[$sum]; $i = array_rand($arr_rs);//随机取数组 $arr_a = $arr_rs[$i]; shuffle($arr_a);//打乱顺序 echo json_encode($arr_a);//输出json数据 

函数getRand()是用来计算概率的,在本站多篇抽奖文章中用到,详细介绍请参照本站文章:PHP+jQuery实现翻板抽奖,一下是getRand()代码:

 //计算概率 function getRand($proArr) {     $result = ‘‘;      //概率数组的总概率精度     $proSum = array_sum($proArr);      //概率数组循环     foreach ($proArr as $key => $proCur) {         $randNum = mt_rand(1, $proSum);         if ($randNum <= $proCur) {             $result = $key;             break;         } else {             $proSum -= $proCur;         }     }     unset ($proArr);      return $result; } 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="html5,动画,javascript" />
<meta name="description" content="Helloweba演示平台,演示XHTML、CSS、jquery、PHP案例和示例" />
<title>演示:jQuery掷色子动画</title>
<link rel="stylesheet" type="text/css" href="../css/main.css" />
<style type="text/css">
.demo{width:760px; height:220px; margin:10px auto;}
.wrap{width:200px; height:100px; margin:50px auto 30px auto; position:relative}
.dice{width:90px; height:90px; display:block; float:left; background:url(dice.png) no-repeat; cursor:pointer;}
.dice_1{background-position:-5px -4px}
.dice_2{background-position:-5px -107px}
.dice_3{background-position:-5px -212px}
.dice_4{background-position:-5px -317px}
.dice_5{background-position:-5px -427px}
.dice_6{background-position:-5px -535px}
.dice_t{background-position:-5px -651px}
.dice_s{background-position:-5px -763px}
.dice_e{background-position:-5px -876px}
p#result{text-align:center; font-size:16px}
p#result span{font-weight:bold; color:#f30; margin:6px}
p.sel{text-align:center; margin-top:30px}
#dice_mask{width:200px; height:100px; background:#fff; opacity:0; position:absolute; top:0; left:0; z-index:999}
</style>
<script type="text/javascript" src="../js/my.js"></script>
<script type="text/javascript">
$(function(){
    $("#dice").click(function(){
        $(".wrap").append("<div id=‘dice_mask‘></div>");//加遮罩
        var dice1 = $("#dice1");
        var dice2 = $("#dice2");
        var big_num = $("#big");
        var sel = $("#big").attr("checked")?1:0;
        $.getJSON("data.php",{sels:sel},function(json){
            var num1 = json[0];
            var num2 = json[1];
            $("#result").hide();
            diceroll(dice1,num1);//掷色子1动画
            diceroll(dice2,num2);//掷色子2动画
            $("#dice_mask").remove();//移除遮罩
            var num = parseInt(num1)+parseInt(num2);
            $("#result").html("您掷得点数是<span>"+num+"</span>").fadeIn(2500);
        });

    });
});

function diceroll(dice,num){
    dice.attr("class","dice");//清除上次动画后的点数
    dice.css(‘cursor‘,‘default‘);
    dice.animate({left: ‘+2px‘}, 100,function(){
        dice.addClass("dice_t");
    }).delay(200).animate({top:‘-2px‘},100,function(){
        dice.removeClass("dice_t").addClass("dice_s");
    }).delay(200).animate({opacity: ‘show‘},600,function(){
        dice.removeClass("dice_s").addClass("dice_e");
    }).delay(100).animate({left:‘-2px‘,top:‘2px‘},100,function(){
        dice.removeClass("dice_e").addClass("dice_"+num);
        dice.css(‘cursor‘,‘pointer‘);
    });
}
</script>
</head>

<body>
<div id="header">

   <div class="demo_topad"><script src="/js/ad_js/jquery.js" type="text/javascript"></script></div>
</div>

<div id="main">
   <h2 class="top_title"><a href="http://www.helloweba.com/view-blog-251.html">掷色子猜大小游戏(可控制概率)</a></h2>
   <div class="demo">
           <p class="sel">
               <input type="radio" name="bs" id="big" value="1" checked> 大
            <input type="radio" name="bs" id="small" value="0"> 小
        </p>
           <div class="wrap">
               <div id="dice"><span class="dice dice_1" id="dice1"></span><span class="dice dice_6" id="dice2"></span></div>
        </div>
        <p id="result">请直接点击上面的色子!</p>
   </div>

</div>

</body>
</html>
 
时间: 2024-11-08 15:47:07

掷色子猜大小游戏的相关文章

PHP制作的掷色子点数抽奖游戏实例

PHP制作的掷色子点数抽奖游戏实例,通过掷色子点数来达到抽奖的效果,为抽奖活动增添一些趣味性. 我们将在html页面中写下如下的html结构代码,.wrap用来放置色子和提示信息,#prize则是用来放置奖品的. 1 <div class="demo"> 2 <div class="wrap"> 3 <div id="msg"></div> 4 <div id="dice"

[Python学习之路] 猜大小游戏

1 # coding =utf-8 2 import random 3 4 def roll_dice(number=3, points=None): 5 if points == None: 6 points = [] 7 while number > 0: 8 point = random.randrange(1,7) 9 points.append(point) 10 number = number - 1 11 12 return points 13 14 15 def roll_res

jQuery+PHP掷色子抽奖

原文 jQuery+PHP掷色子抽奖 本文以大富翁游戏为背景,综合运用jQuery和PHP知识,设计出以掷色子点数来达成抽奖的效果,当然抽奖概率是可控的,开发者可以将本实例稍作修改即可运用到网站中的抽奖活动场景中. 查看演示 下载源码 HTML 首先我们需要准备两粒色子和奖品素材,这些作者已经打包上传了,请大家放心下载.我们将在html页面中写下如下的html结构代码,.wrap用来放置色子和提示信息,#prize则是用来放置奖品的. <div class="demo">

模拟算法_掷骰子游戏&amp;&amp;猜数游戏

模拟算法是用随机函数来模拟自然界中发生的不可预测的情况,C语言中是用srand()和rand()函数来生成随机数. 先来介绍一下随机数的生成: 1.产生不定范围的随机数 函数原型:int rand() 产生一个介于0~RAD_MAX间的整数,其具体值与系统有关系.Linux下为2147483647.我们可以在include文件夹中的stdlib.h中可以看到(Linux在usr目录下,Windows在安装目录下) 1 #include<stdio.h> 2 #include<stdlib

猜数字大小游戏,用户输入一个数字,如果大了就显示大了,如果小了就显示小了, 如果对了就提示正确(补充难度,只有5次机会,限制数字的范围在百位以内)

产生0-100之间的随机数,包括0和100 double d = Math.random() * 100; int a = (int)Math.round(d); ------------------------------------- package 水仙花数; import java.util.Scanner;/* 猜数字大小游戏,用户输入一个数字,如果大了就显示大了,如果小了就显示小了,如果对了就提示正确(补充难度,只有5次机会,限制数字的范围在百位以内)*/public class t

猜数字游戏

功能:产生一个随机数,猜随机数的大小,机会只有3次,并且如果猜错了,焦点自动返回.使用到的接口:ActionListener FocusListener; 代码: package com.niit.guessgame; import java.awt.Color; import java.awt.FlowLayout; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.awt.

猜字母游戏

猜字母游戏 猜字母游戏——设计数据结构 猜字母游戏——设计程序结构 猜字母游戏——实现字母生成方法 猜字母游戏——实现字母检测方法 猜字母游戏——实现主方法 1 猜字母游戏——设计数据结构 1.1 问题 有猜字母游戏,其游戏规则为:程序随机产生5个按照一定顺序排列的字符作为猜测的结果,由玩家来猜测此字符串.玩家可以猜测多次,每猜测一次,则由系统提示结果.如果猜测的完全正确,则游戏结束,计算玩家的游戏得分并输出:如果没有猜对,则提示猜测的结果,如猜对了几个字符,以及猜对了几个字符的位置等信息,并提

新猜数字游戏--查看历史记录

猜数字游戏,就是随机生成一个数字,猜这个数字的大小,输入的值会有提醒比真值大还是小.这个新是说通过加入队列来实现了可以查看之前输入过得值. 1 # encoding = utf-8 2 from random import randint 3 # 引入队列 4 from collections import deque 5 6 N = randint(0,100) 7 # history队列能够存储5个值 8 history = deque([],5) 9 10 def guess(k): 11

猜数游戏-不知道为什么不能输汉字

#include<stdio.h>#include<stdlib.h> int main(){ printf("************猜数游戏*************\n"); printf("***********1:开始游戏***********\n"); printf("***********2:退出游戏***********\n"); printf("***********3:游戏介绍********