UNIRRY

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

3D回転のカードめくりで、しんけいすいじゃくするミニゲームを作った

cardgame2

昨日つくったカードめくりのミニゲームついでに、やっぱり回転するエフェクト的にもっとめくりたい気持ちになるので、いっぱいめくれる『しんけいすいじゃく』を作ってみました。そのまとめ記事になります。
※CSS3のトランジションを使用しているので、IE9以下はちゃんと動きません。

つくるのは、①カードをめくって1枚目と2枚目を確認する ②1枚目と2枚目が同じだったらめくった状態のまま ③1枚目と2枚目が違ったらめくりをもどす ④全部そろったら「もう一度やる」ボタンを表示 です。

まずは普通にhtml

裏面のimgタグに2枚づつ同じclassになるよう付与します。これを使って1枚目と2枚目が同じかどうか判別します。

<p>しんけいすいじゃくゲーム</p>
<div id="cardlist">
<ul>
<li>
<div class="omote"><img src="car2.jpg"></div>
<div class="ura"><img class="nicon" src="ura1.jpg"></div>
</li>
<li>
<div class="omote"><img src="car2.jpg"></div>
<div class="ura"><img class="canon" src="ura4.jpg"></div>
</li>
<li>
<div class="omote"><img src="car2.jpg"></div>
<div class="ura"><img class="ricoh" src="ura3.jpg"></div>
</li>
<li>
<div class="omote"><img src="car1.jpg"></div>
<div class="ura"><img class="penta" src="ura2.jpg"></div>
</li>
<li>
<div class="omote"><img src="car2.jpg"></div>
<div class="ura"><img class="canon" src="ura4.jpg"></div>
</li>
<li>
<div class="omote"><img src="car2.jpg"></div>
<div class="ura"><img class="ricoh" src="ura3.jpg"></div>
</li>
<li>
<div class="omote"><img src="car1.jpg"></div>
<div class="ura"><img class="penta" src="ura2.jpg"></div>
</li>
<li>
<div class="omote"><img src="car2.jpg"></div>
<div class="ura"><img class="nicon" src="ura1.jpg"></div>
</li>
</ul>
<div id="atrboxtxt2">もう一回やるよ</div>
</div>

css

カードはフェードインで表示したい&マウスオンでアニメーションさせたいので、「#cardlist li」のopacityを0に、それからpositionをrelativeで設定しておきます。

#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;
opacity: 0;
}
.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;
cursor: pointer;
}
.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;
}
#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したカードにオンマウスを実装する(普通にhoverじゃきかないのでon関数を使用)。
※その時、selectedがついているlistに対してはセットが組みあがっているものなので実行しないように振り分ける。
③カードのクリックで、selectedを付与して、カードのめくり関数を実行。
④クリックの時に、1枚目か2枚目かを判別しつつ(変数firstの操作で判別)、それぞれクリックしたimgのclass(変数card1,card2に格納)とlistで何番目か(変数num1,num2に格納)を取得する。
⑤2枚目をひいた時、1枚目と2枚目のimgクラス名を比較して、処理を振り分ける。
※一致すれば、listにselectedを残したまま、flagに+1する。
※一致しなければ、listのselectedを削除して、カードのもどし関数を1枚目2枚目ともに実行する。
⑥すべてのカードが引き終わったら変数flagが4になるので、4になったら「もう一度やる」ボタンを表示する。
⑦「もう一度やる」ボタンのクリックで、カードのシャッフル関数とオンマウス関数を再実行して、最初の状態にもどす。

// 変数定義
var list    = $("#cardlist li");
var card1,card2;
var num1,num2;
var first = 1;
var liarr  = [];
var flag   = 0;
  
// カードのシャッフルとマウスオーバー関数のよびだし
cardSort();
cardHover();
  
// カードをシャッフルする関数
function cardSort() {
  // 配列を空にする、flagを0にする
  liarr.length = 0;
  flag   = 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>');
  }
  // フェードイン
  $("#cardlist ul li").animate({"opacity":"1"}, 500, "easeOutQuart")
}
  
// カードのマウスオーバー関数
function cardHover() {
  $("#cardlist li").on({
      'mouseenter':function(){
          if ( !$(this).is(".selected") ) {
              $(this).animate({"top": "-8px"}, 200, "easeOutQuart");
          }
      },
      'mouseleave':function(){
          $(this).animate({"top": "0"}, 200, "easeOutQuart");
      }
  });
}
  
// カードのクリックでしんけいすいじゃくをする
jQuery(document).on("click", "#cardlist li", function(){
  // selectedのついているlistに対して以下を実行
  if ( !$(this).is(".selected") ) {        
    // クリックしたlistにselectedを付与してカードをひっくり返す
    $(this).addClass("selected");
    var linum = $("#cardlist li").index(this);
    cardRotate1(linum);
          
    // 1枚目と2枚目で処理を分岐
    if ( first == 1 ) {
        // 1枚目のカードのclassと何番目かを取得して、ひくセット枚数を+1する
        card1 = $(this).children(".ura").children("img").attr("class");
        num1  = $("#cardlist li").index(this);
        first++;
    } else {
        // 2枚目のカードのclassと何番目かを取得して、ひく枚数を1にもどす
        card2 = $(this).children(".ura").children("img").attr("class");
        num2  = $("#cardlist li").index(this);
        first = 1;
        // 1枚目と2枚目のカードが同じだったらflagを増やす、違ったらカードをもどす
        if ( card1 == card2 ) {
            flag++;
        } else if ( card1 != card2 ){
            setTimeout(function(){
                cardRotate2(num1);
                cardRotate2(num2);
            } , 800);
        }
        // すべてのカード合わせが終わったら「もう一度やる」ボタンを表示
        if ( flag == 4 ) {
            $("#atrboxtxt2").show().animate({"opacity": "1"}, 500, "easeOutQuart");
        }
    }
  }
});
  
// カードめくり用関数
function cardRotate1(linum) {
  $("#cardlist li").eq(linum).children(".omote").css("-webkit-transform" , "perspective(500) rotateY(-90deg)");
  $("#cardlist li").eq(linum).children(".omote").css("-moz-transform" , "perspective(500px) rotateY(-90deg)");
  $("#cardlist li").eq(linum).children(".omote").css("transform" , "perspective(500px) rotateY(-90deg)");
  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);
}
  
// カードもどし用関数
function cardRotate2(linum) {
  $("#cardlist li").eq(linum).children(".ura").css("-webkit-transform" , "perspective(500) rotateY(90deg)");
  $("#cardlist li").eq(linum).children(".ura").css("-moz-transform" , "perspective(500px) rotateY(90deg)");
  $("#cardlist li").eq(linum).children(".ura").css("transform" , "perspective(500px) rotateY(90deg)");
  setTimeout(function(){
    $("#cardlist li").eq(linum).children(".omote").css("-webkit-transform" , "perspective(500) rotateY(0deg)");
    $("#cardlist li").eq(linum).children(".omote").css("-moz-transform" , "perspective(500px) rotateY(0deg)");
    $("#cardlist li").eq(linum).children(".omote").css("transform" , "perspective(500px) rotateY(0deg)");
  } , 300);
  $("#cardlist li").eq(linum).removeClass("selected");
}
  
// もう一回
$("#atrboxtxt2").click(function(){
  cardSort();
  cardHover();
  $("#atrboxtxt2").hide().css("opacity","0");
});

カードめくりでしんけいすいじゃくするミニゲーム

ミニゲーム

gamesample


horoscope

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