jQuery_jqueryを使用して実装されたサイコロ投げゲームのアニメーション効果

実装原理：サイコロを投げた後、jQueryのanimate()関数でサイコロの変位を変更し、途中で遅延効果を加え、サイコロの背景を変更し、最後にアニメーションを停止します。ランダムに生成されたポイントに到達し、ロールされたポイントの数が表示されます。実際、アニメーション プロセスでは、異なる画像の複数のフレームを追加します (Flash アニメーション ビデオのフレームと同じです)。フレームごとに実行すると、アニメーション効果がより良くなります。
1. 準備
この例では、インターネットから入手したサイコロ素材を使用します。写真 (1) -6点）と中間トランジション効果（モーションブラー処理）を施した画像を同じ画像上に配置し、dice.pngとして保存し、サイコロの背景画像として使用します。
jQuery ライブラリをロードします。これは必要です。

コードをコピー コードは次のとおりです:

次に、HTML ページの本文に次のコードを追加します。#dice はサイコロを配置するために使用され、#result はプロンプトを表示するために使用されます。情報。

コードをコピー コードは次のとおりです:

上のサイコロを直接クリックしてください。

2. CSS コード
画像 dice.png を .dice にロードするために背景を使用します。次に、いくつかのスタイルを使用して、さまざまなサイコロの数字を配置し、さまざまな背景位置の値を通じてエフェクト画像をトランジションしました。トランジション効果画像に簡単なぼかし加工を施しました。 CSS3を使用して画像のぼかし効果を加工することもできます。なお、#dice_mask は後述する連打防止のために使用されます。

コードをコピーします コードは次のとおりです。

.wrap{width:90px height:90px; :120px 自動 30px 自動; 位置:相対}
.dice{幅:90px; 高さ:90px; 背景:url(dice.png) 繰り返しなし;}
.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{background-position:-5px -876px}
p#result{text-align:center; font-size:16px}
p#result span{font -太さ:#f30;マージン:6px}
#dice_mask{幅:90px; 背景:#fff; 上:0; 0; z -index:999}

3. jQuery コード
サイコロをクリックすると、最初にサイコロのスタイルをプリセットします (最後のアニメーションの後にスタイルをクリアします)。色 透明な #dice_mask を使用して、繰り返しクリックされないようにサイコロを覆い、1 から 6 までの乱数を生成します。次に、animate() 関数を使用してサイコロの変位を変更し、サイコロのクラスを変更して、遷移のぼやけた背景画像が表示され、少し遅れて次のフレームのアニメーションに入ります。 アニメーションの最後に、サイコロのクラス スタイルが dice_x に配置されます。

コードをコピー コードは次のとおりです:

$(function(){
var dice = $("#dice");
dice.click(function(){
dice.attr("class","dice"); //清除上次アニメーション画後の数量
dice.css("cursor","default")
$(".wrap").append("

< ;/div>");//加遮罩
var num = Math.floor(Math.random()*6 1);//产生随机数1-6
dice.animate({left: ' 2px'}, 100,function(){
dice.addClass("dice_t")
}).delay(200).animate({top:'-2px'},100,function(); {
dice.removeClass("dice_t").addClass("dice_s")
}).lay(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);
$("#result").html("您掷得点数是" num " dice.css('cursor','pointer');
$("#dice_mask").remove();//移除遮罩
});
});
});

重複ポイントの防止に関する多くの関数、jQuery が提供する one()、live()、bind()、on() などの関数がこの例にあります行不通，所以我想了个办法，当点击色子後開始アニメーション画時，用一和色子大小一样的透明遮蔽罩层将色子遮住，使用在漫画运行中不可连续重复点击色子，当アニメーションの実行が完了したら、再度遮蔽層を削除すると、このような色子が再度ポイントされることができます。このようなアニメーション効果は、Flash の代わりに jQuery を使用することで実現できますが、Flash を使用しない場合でも同様です。
の関連技術の文章と例のコードは、色子の抽出頻度を制御することができ、これも趣味の 1 つです。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

もっと見る

人気の記事

R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）

2週間前 By 尊渡假赌尊渡假赌尊渡假赌

スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？

1 か月前 By DDD

R.E.P.O.最高のグラフィック設定

2週間前 By 尊渡假赌尊渡假赌尊渡假赌

アサシンのクリードシャドウズ：シーシェルリドルソリューション

1週間前 By DDD

R.E.P.O.誰も聞こえない場合はオーディオを修正する方法

2週間前 By 尊渡假赌尊渡假赌尊渡假赌

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？

7403

15

Java チュートリアル

1630

14

CakePHP チュートリアル

1358

52

Laravel チュートリアル

1268

25

PHP チュートリアル

1218

29

もっと見る