jQuery+PHPで実装したサイコロ抽選ゲームの例、jquery dice_PHPチュートリアル
- WBOYオリジナル
- 2016-07-13 10:10:161178ブラウズ
jQuery+PHPで実装したサイコロ抽選ゲーム、jquery diceの例
この記事の例では、jQuery+PHP で実装されたサイコロ抽選ゲームの詳細な手順を説明します。参考のためにみんなで共有してください。具体的な分析は次のとおりです:
このゲームは、jQuery と PHP の知識を使用して、サイコロのポイントを投げることによって抽選の効果を設計します。もちろん、開発者は、この例を抽選のシナリオに少し変更することができます。 Webサイト。レンダリングは次のとおりです:
ここをクリックして、この Web サイトから完全なサンプルコードをダウンロードしてください。
HTML部分:
まず、サイコロと賞品の素材を 2 つ用意する必要があります。これらの作者はすでにパッケージ化してアップロードしていますので、自由にダウンロードしてください。 HTML ページに次の HTML 構造コードを記述します。.wrap はサイコロとプロンプト情報の配置に使用され、#prize は賞品の配置に使用されます。
コードをコピーします コードは次のとおりです:
& Lt; div id = 'msg' & gt;
。
CSS部分:
ページ レイアウトを合理的に標準化するには、CSS テクノロジーを使用する必要があります。合計 10 個の四角形で賞品を囲みます。抽選中に中央の四角形を直接クリックできます。 。 CSS 位置決めテクノロジーを使用してページ レイアウトを実装できます。
コードをコピーします
コードは次のとおりです:
.demo{幅:650px;高さ:420ピクセル;マージン: 60px 自動 10px 自動;位置:相対; }
.wrap{幅:200px;高さ:100ピクセル;位置:絶対;マージン左:220ピクセル;マージントップ:140px; z-index:1000;}
#msg{表示:なし;幅:50ピクセル;高さ:20ピクセル;パディング:4px;背景:#ffc;ボーダー:1px ソリッド #fc9;
テキスト整列:中央;色:#f30;フォントサイズ:18px;位置:絶対; z-インデックス:1001;右:-20ピクセル;上:-10px}
.dice{幅:90px;高さ:90ピクセル;表示ブロック;フロート:左;背景:url(dice.png) 繰り返しなし;カーソル:ポインタ}
#dice_mask{幅:200px;高さ:100ピクセル;背景:#fff;不透明度:0;位置:絶対;トップ:0;左:0; z-インデックス:999}
.dice_1{背景位置:-5px -4px}
.dice_2{背景位置:-5px -107px}
.dice_3{背景位置:-5px -212px}
.dice_4{背景位置:-5px -317px}
.dice_5{背景位置:-5px -427px}
.dice_6{背景位置:-5px -535px}
.dice_t{背景位置:-5px -651px}
.dice_s{背景位置:-5px -763px}
.dice_e{背景位置:-5px -876px}
#賞{位置:相対}
#賞品li{位置:絶対;幅:150ピクセル;高さ:112ピクセル;ボーダー:1px ソリッド #d3d3d3}
#d_0{左:0;トップ:0}
#d_1{左:160ピクセル;トップ:0}
#d_2{左:320ピクセル;トップ:0}
#d_3{左:480ピクセル;トップ:0}
#d_4{左:480ピクセル;トップ:128px}
#d_5{左:480ピクセル;トップ:256px}
#d_6{左:320ピクセル;トップ:256px}
#d_7{左:160ピクセル;トップ:256px}
#d_8{左:0;トップ:256px}
#d_9{左:0;トップ:128px}
.mask{不透明度: 0.6;幅:150ピクセル;高さ:112ピクセル;行の高さ:32px;背景:#ffc;
z-インデックス:1001;位置:絶対;トップ:0;左:0;テキスト整列:中央;フォントサイズ:16px}
jQuery部分：
私たちは jQquery を使用して、色の子アニメーション、大富翁作品の段階的なアニメーションを含むフロントエンド動作を完了します。その中には、重複防止ポイント知知、ajax 相互知、アニメーション示唆知が含まれています。全体の操作フローは次のように要約できます。 >dice.php に ajax 要求を送信 ->色子アニメーションを完了 ->数量を提示 ->最終アイテム位置までアニメーションを停止 ->ポンプを完了。
复制代価代価如下:
$(関数(){
$('#dice').click(function(){
$('#prize li .mask').remove();
$('.wrap').append('');//加遮罩
var dice1 = $('#dice1');
var dice2 = $('#dice2');
$.getJSON('dice.php',function(json){
var num1 = json[0];
var num2 = json[1];
diceroll(dice1,num1);//掷色子1アニメ
diceroll(dice2,num2);//掷色子2アニメ
var num = parseInt(num1)+parseInt(num2);
$('#msg').css('top','-10px').fadeIn(500).text(num+'点').animate({top:'-50px'},'1000').fadeOut (500);
roll(0, num);// 逐次步运アニメーション画
});
});
});
関数 diceroll() は、このサイトの冒頭の文章で説明されている、jQuery の animate() によって実現される、位置移動、遅延、背景形式の変更によるアニメーション効果の 1 つです。
$('#dice').click(function(){
$('#prize li .mask').remove();
$('.wrap').append('');//加遮罩
var dice1 = $('#dice1');
var dice2 = $('#dice2');
$.getJSON('dice.php',function(json){
var num1 = json[0];
var num2 = json[1];
diceroll(dice1,num1);//掷色子1アニメ
diceroll(dice2,num2);//掷色子2アニメ
var num = parseInt(num1)+parseInt(num2);
$('#msg').css('top','-10px').fadeIn(500).text(num+'点').animate({top:'-50px'},'1000').fadeOut (500);
roll(0, num);// 逐次步运アニメーション画
});
});
});
复制代価代価如下:
関数 diceroll(dice,num){
Dice.attr('class','dice');//最後のアニメーション後のポイントをクリアします
dice.css('カーソル','デフォルト'); 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('カーソル','ポインタ'); }); }
関数 roll() は非常に重要です。setInterval() でインターバルアニメーションを設定し、0.5 秒ごとに実行します。パラメータ i は初期位置を表し、パラメータ step は実行する必要があるステップ数を表します。この場合、それはサイコロの点数、つまり実行する必要があるステップの数です。 i に基づいて現在の賞品に .mask を追加します。i の値が step に等しい場合、アニメーションが停止され、サイコロのマスクが削除されます (クリックの繰り返しを防ぐため)。
コードをコピーします
関数 diceroll(dice,num){
Dice.attr('class','dice');//最後のアニメーション後のポイントをクリアします
dice.css('カーソル','デフォルト'); 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('カーソル','ポインタ'); }); }
関数 roll() は非常に重要です。setInterval() でインターバルアニメーションを設定し、0.5 秒ごとに実行します。パラメータ i は初期位置を表し、パラメータ step は実行する必要があるステップ数を表します。この場合、それはサイコロの点数、つまり実行する必要があるステップの数です。 i に基づいて現在の賞品に .mask を追加します。i の値が step に等しい場合、アニメーションが停止され、サイコロのマスクが削除されます (クリックの繰り返しを防ぐため)。
コードは次のとおりです:
関数 roll(i,step){
var time = setInterval(function(){
if(i>9){
var t = i - 10;
$('#d_'+t).append('');
$('#d_'+(t-1)+' .mask').remove();
}
$('#d_'+i).append('');
$('#d_'+(i-1)+' .mask').remove();
if(i==step){
,,,,,,,,,,、
$('#dice_mask').remove();//マスクを削除
}
i++;//前進を続けてください
},500); }
PHP パート:
dice.php は次のことを行う必要があります: 設定された当選確率に基づいて合計ポイントを取得し、合計ポイントに基づいて 2 つのサイコロのポイントを割り当て、最後に 2 つのサイコロのポイントをフロントエンド ページに返します。
コードをコピーします
コードは次のとおりです:
// 勝つ確率を設定します
$prize_arr = array(
'2' => 配列('id'=>2,'v'=>10)、
'3' => 配列('id'=>3,'v'=>20)、
'4' => 配列('id'=>4,'v'=>5)、
'5' => 配列('id'=>5,'v'=>5)、
'6' => 配列('id'=>6,'v'=>20)、
'7' => 配列('id'=>7,'v'=>2)、
'8' => 配列('id'=>8,'v'=>3)、
'9' => 配列('id'=>9,'v'=>20)、
'10' => 配列('id'=>10,'v'=>0)、
'11' => 配列('id'=>11,'v'=>10)、
'12' => 配列('id'=>12,'v'=>5)、
);
foreach ($prize_arr as $key => $val) {
$arr[$val['id']] = $val['v']; }
$sum = getRand($arr); //確率に基づいて特典 ID を取得し、合計ポイントを取得します
//サイコロポイントを割り当てる
$arrs = 配列(
'2' => 配列(配列(1,1))、
'3' => 配列(配列(1,2))、
'4' => 配列(配列(1,3),配列(2,2)),
'5' => 配列(配列(1,4),配列(2,3)),
'6' => 配列(配列(1,5),配列(2,4),配列(3,3)),
'7' => 配列(配列(1,6),配列(2,7),配列(3,4)),
'8' => 配列(配列(2,6),配列(3,5),配列(4,4)),
'9' => 配列(配列(3,6),配列(4,5)),
'10' => 配列(配列(4,6),配列(5,5)),
'11' => 配列(配列(5,6))、
'12' => 配列(配列(6,6))
);
$arr_rs = $arrs[$sum]
$i = array_rand($arr_rs);// 配列をランダムに取得します
$arr_a = $arr_rs[$i]; shuffle($arr_a);// 順序をシャッフルします
エコー json_encode($arr_a);
関数 getRand() は確率を計算するために使用されます
i++;//前進を続けてください
},500); }
PHP パート:
dice.php は次のことを行う必要があります: 設定された当選確率に基づいて合計ポイントを取得し、合計ポイントに基づいて 2 つのサイコロのポイントを割り当て、最後に 2 つのサイコロのポイントをフロントエンド ページに返します。
コードをコピーします
コードは次のとおりです:
// 勝つ確率を設定します
$prize_arr = array(
'2' => 配列('id'=>2,'v'=>10)、
'3' => 配列('id'=>3,'v'=>20)、
'4' => 配列('id'=>4,'v'=>5)、
'5' => 配列('id'=>5,'v'=>5)、
'6' => 配列('id'=>6,'v'=>20)、
'7' => 配列('id'=>7,'v'=>2)、
'8' => 配列('id'=>8,'v'=>3)、
'9' => 配列('id'=>9,'v'=>20)、
'10' => 配列('id'=>10,'v'=>0)、
'11' => 配列('id'=>11,'v'=>10)、
'12' => 配列('id'=>12,'v'=>5)、
);
foreach ($prize_arr as $key => $val) {
$arr[$val['id']] = $val['v']; }
$sum = getRand($arr); //確率に基づいて特典 ID を取得し、合計ポイントを取得します
//サイコロポイントを割り当てる
$arrs = 配列(
'2' => 配列(配列(1,1))、
'3' => 配列(配列(1,2))、
'4' => 配列(配列(1,3),配列(2,2)),
'5' => 配列(配列(1,4),配列(2,3)),
'6' => 配列(配列(1,5),配列(2,4),配列(3,3)),
'7' => 配列(配列(1,6),配列(2,7),配列(3,4)),
'8' => 配列(配列(2,6),配列(3,5),配列(4,4)),
'9' => 配列(配列(3,6),配列(4,5)),
'10' => 配列(配列(4,6),配列(5,5)),
'11' => 配列(配列(5,6))、
'12' => 配列(配列(6,6))
);
$arr_rs = $arrs[$sum]
$i = array_rand($arr_rs);// 配列をランダムに取得します
$arr_a = $arr_rs[$i]; shuffle($arr_a);// 順序をシャッフルします
エコー json_encode($arr_a);
関数 getRand() は確率を計算するために使用されます
コードをコピーします
コードは次のとおりです:
//確率を計算する
関数 getRand($proArr) {
$結果 = '';
//確率配列の合計確率精度
$proSum = array_sum($proArr);
//確率配列ループ
foreach ($proArr as $key => $proCur) {
$randNum = mt_rand(1, $proSum); If ($randNum $result = $key; 休憩
} else {
$proSum -= $proCur; }
}
設定を解除 ($proArr)
$result を返します。 }
この記事で説明した内容が皆様の PHP プログラミング設計に役立つことを願っています。
http://www.bkjia.com/PHPjc/937083.html
www.bkjia.com
true//確率配列ループ
foreach ($proArr as $key => $proCur) {
$randNum = mt_rand(1, $proSum); If ($randNum $result = $key; 休憩
} else {
$proSum -= $proCur; }
}
設定を解除 ($proArr)
$result を返します。 }
この記事で説明した内容が皆様の PHP プログラミング設計に役立つことを願っています。
http://www.bkjia.com/PHPjc/937083.html
www.bkjia.com
http://www.bkjia.com/PHPjc/937083.html
技術記事声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。