UNIRRY

WEBデザインとホロスコープと宇宙のブログ

3D回転を使ったカードめくりで簡易ミニゲームのサンプルをつくる

cardgame1

前回前々回の「3D回転を使ったカードめくり」でかんたんなゲームのサンプルを作ったのでその紹介です。
・前回のやつ オンマウスでカードめくり
・前々回のやつ クリックでカードめくり

つくるのは、①カードがランダムで表示 ②カードにオンマウスでちょっと動く ③当たりのカードをめくったら当たり判定 ④はずれのカードをめくったらはずれ判定 ⑤もう一度やるで最初の状態にもどす です。

まずは普通にhtml

裏面のimgタグにハズレか当たりか区別したclassを付与しておきます。hzrがハズレ、atrが当たり。

<p>赤だったら当たり☆青だったらハズレ△</p>
<div id="cardlist">
<ul>
<li>
<div class="omote"><img src="car1.jpg"></div>
<div class="ura"><img class="hzr" src="ura1.jpg"></div>
</li>
<li>
<div class="omote"><img src="car1.jpg"></div>
<div class="ura"><img class="atr" src="ura2.jpg"></div>
</li>
</ul>
<div id="atrbox"></div>
<div id="atrboxtxt2">もう一回やるよ</div>
</div>

css

カードのclass「omote」と「ura」は前回前々回と同じです。

/*  カードリスト  */
#cardlist {
position: relative;
width: 740px;
height: 445px;
margin: 100px auto 30px auto;
}
#cardlist li {
position: relative;
float: left;
margin: 0 20px 20px 0;
width: 150px;
height: 210px;
list-style: none;
cursor: pointer;
}
.omote {
position: absolute;
top: 0;
left: 0;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-webkit-transform:perspective(500) rotateY(0deg);
-moz-transform:perspective(500px) rotateY(0deg);
transform:perspective(500px) rotateY(0deg);
-webkit-transition:ease-out 0.3s -webkit-transform;
-moz-transition:ease-out 0.3s -moz-transform;
transition:ease-out 0.3s transform;
}
.ura {
position: absolute;
top: 0;
left: 0;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-webkit-transform:perspective(500) rotateY(90deg);
-moz-transform:perspective(500px) rotateY(90deg);
transform:perspective(500px) rotateY(90deg);
-webkit-transition:ease-out 0.3s -webkit-transform;
-moz-transition:ease-out 0.3s -moz-transform;
transition:ease-out 0.3s transform;
}
/*  押せないようにかぶせるdiv  */
#atrbox {
position: absolute;
top: 0;
left: 0;
display: none;
opacity: 0;
width: 740px;
height: 445px;
}
/*  もう一度やるボタン  */
#atrboxtxt2 {
position: absolute;
top: -75px;
left: 300px;
text-align: center;
display: none;
opacity: 0;
color: #fcefb1;
background: #cc581f;
width: 150px;
height: 40px;
line-height: 40px;
border-radius: 8px;  
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
cursor: pointer;
}

カードめくりでかんたんなゲーム化したjs

カードの配置をランダムにするために、一度シャッフルしたlistをappendします。
appendした要素なのでon関数で挙動を実行します。また、on関数のなかで、settimeout関数の実行が入れ子すぎてか全然きかなかったので、カードの裏面めくりは別の関数として外にだしました。

// 変数定義
var list    = $("#cardlist li");
var card;
var liarr   = [];

// カードのシャッフルとhoverをon関数で実行
cardSort();
cardHover();

// カードのシャッフル関数 listを取得して配列に格納、ランダムに並び替えた後に再度appendする
function cardSort() {  
   // 配列を空にする
   liarr.length = 0;
   // listの中のhtmlを配列に格納
   list.each(function() {
       liarr.push($(this).html());
   });
   // 格納した配列をランダムにする
   liarr.sort(function() {
       return Math.random() - Math.random();
   });
   // ulの中身をいったん削除
   $("#cardlist ul").empty();
   // ランダムになった配列をappendする
   for(i=0; i < liarr.length; i++) {
      $("#cardlist ul").append('<li>' + liarr[i] + '</li>');
   }
}
  
// カードのhover関数 appendした要素なのでon関数で実行
function cardHover() {
   $("#cardlist li").on({
       'mouseenter':function(){
           $(this).animate({"top": "-8px"}, 200, "easeOutQuart");
        },
       'mouseleave':function(){
           $(this).animate({"top": "0"}, 200, "easeOutQuart");
        }
   });
}

// カードのクリックでカードめくり
jQuery(document).on("click", "#cardlist li", function(){
   // 何番目のlistか変数に
   var linum = $("#cardlist li").index(this);
   // カード表面めくりcss3
   $(this).children(".omote").css("-webkit-transform" , "perspective(500) rotateY(-90deg)");
   $(this).children(".omote").css("-moz-transform" , "perspective(500px) rotateY(-90deg)");
   $(this).children(".omote").css("transform" , "perspective(500px) rotateY(-90deg)");
   // カードの裏面関数実行
   cardRotate1(linum);
   // カードの当たりかはずれかclassを取得
   card = $(this).children(".ura").children("img").attr("class");
   // 透明なエリアを表示してlistをクリック不可に、「もう一度」ボタンを表示
   $("#atrbox").show();
   $("#atrboxtxt2").show().animate({"opacity": "1"}, 700, "easeOutQuart");
   // 当たりだったらテキストを変更
   if ( card == "atr" ) {
       $("p").text("あたりだよ☆");
   } else {
       $("p").text("はずれでした・・・");
   }
});

// カード裏面めくり用関数
function cardRotate1(linum) {
   setTimeout(function(){
       $("#cardlist li").eq(linum).children(".ura").css("-webkit-transform" , "perspective(500) rotateY(0deg)");
       $("#cardlist li").eq(linum).children(".ura").css("-moz-transform" , "perspective(500px) rotateY(0deg)");
       $("#cardlist li").eq(linum).children(".ura").css("transform" , "perspective(500px) rotateY(0deg)");
   } , 300);
}
  
// 「もう一度」ボタンを押したら
$("#atrboxtxt2").click(function(){
   // カードのシャッフルとhover関数を再実行
   cardSort();
   cardHover();
   // ほか表示関連を最初にもどす
   $("#atrbox").hide();
   $("#atrboxtxt2").hide();
   $("p").text("赤だったら当たり☆青だったらハズレ△");
});

「3D回転を使ったカードめくり」でかんたんなゲームのサンプル

サンプル

samplerotate


horoscope

“sozatu” animation!! >>    animation1   |   animation2   |   animation3