3D card Flip game

In this example below you will see how to do a 3D card Flip game with some HTML / CSS and Javascript

This pen is the main core of a Html / js game i've built for a digital activation web based using jquery and greensocks.

Thumbnail
This awesome code was written by Nytsee, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Nytsee ©
  • HTML
  • CSS
  • JavaScript
    <div id="console">INit</div>

<div id="canvas-game">

</div>

/*Downloaded from https://www.codeseek.co/Nytsee/3d-card-flip-game-pPLzaW */
    .box{
  margin:0;
  padding:0;
  display:block;
  position:relative;
  height:200px;
  width:200px;
  float:left;
  margin:7px;
}

  .facet{
    position:absolute;
    width:200px;
    height:200px;
    top:0;
    left:0;
    display:block;
    overflow:hidden;
    @mixin maintain-ratio($ratio: 1 1) {
  @if length($ratio) < 2 or length($ratio) > 2 {
    @warn "$ratio must be a list with two values.";
  }

  $width: 100%;
  $height: percentage(nth($ratio, 2) / nth($ratio, 1));
  
  width: $width;
  height: 0;
  padding-bottom: $height;
}
  }
  .front{
    background:green;
  }
  .back{
    background:yellow;
  }




/*Downloaded from https://www.codeseek.co/Nytsee/3d-card-flip-game-pPLzaW */
    // Orininal pen -> https://codepen.io/Nytsee/pen/pPLzaW
var  TimerMe,
     simultaneous = 0 ,
     boxTween,
     variantes = ["black","pink","blue","green","red","yellow"],
     limitedArr = [],
     gameArr = [],
     currentSet = [],
     maxV = 3;

function checkSet(){
  if($(".fliped").length == 2){
          
    $(".fliped").each(function(){
      currentSet.push($(this).attr("rel"))
    })
    if(currentSet[0] == currentSet[1]){
      alert("felicidad")
    }
    //We remove all entries of our currentSet array
    currentSet = [];
  }
  console.log(currentSet)
}



  /*xxx = $.grep(variantes, function(ixd) {
  return ixd == "pink" ;
  }).length;*/

//console.log(xxx)

//console.log('leng :'+variantes.length)
for(t=0;t<maxV;t++){
  elem_into_limitedArr = Math.floor(Math.random() * variantes.length);
    if(jQuery.inArray(variantes[elem_into_limitedArr], limitedArr) != -1) {
    t--;
  }else{
    limitedArr.push(variantes[elem_into_limitedArr]);
  //console.log("for : "+elem_into_limitedArr)
}
}

console.log("Limited array "+ limitedArr)
//console.log("Limited array "+ limitedArr.length)

for(i=0;i<(maxV*2);i++){
  SelectedID = Math.floor(Math.random() * limitedArr.length);
  nbOcc = $.grep(gameArr, function(ixd) {
  return ixd == limitedArr[SelectedID];
  }).length;
  
  //console.log("Nbr occurences de  : "+limitedArr[SelectedID]+" et de : "+nbOcc)
  if(nbOcc > 1){ i--;}else{
    gameArr.push(limitedArr[SelectedID]);
  }
  
}

//console.log(gameArr)






function startCount(thiss){
   var boxTween = TweenLite.to( $(thiss) , 0.5, {rotationY:0, ease:Back.easeOut, delay:3 ,overwrite: "all", onComplete:function(){
    (this.target).removeClass("fliped");
   }});
 // TweenLite.to( $(".card") , 1.2, {rotationY:0, ease:Back.easeOut, delay:0.5});
 }

for(i=0;i<gameArr.length;i++){
  $("#canvas-game").append("<div class='box'><div class='card' rel='"+gameArr[i]+"'><div class='facet front'><h1>front</h1></div><div class='facet back'><h1>"+gameArr[i]+"</h1></div></div></div>");
}


//set the 3D property to the parent box with a perspective of 800
TweenLite.set(".box", {perspective:800});
//card box should preserve 3D perspective by respecting zindex and overlaping elements
TweenLite.set(".card", {transformStyle:"preserve-3d"});
//we set a horizontal symmetry to the back facet
TweenLite.set(".back", {rotationY:180});
//backfaceVisibility is a css property wich hide any facet once she is not shown to the user// doesnt work in 2D mode
TweenLite.set([".back", ".front"], {backfaceVisibility:"hidden"});

$(".card").click(function() {
    $('#console').html($(".fliped").length);
    if($(this).hasClass('fliped')){ return false; }
  
    if($(".fliped").length > 1){
         TweenLite.to( $(".fliped") , 0.5, {rotationY:0, ease:Back.easeOut, onComplete:function(){
         (this.target).removeClass("fliped");
   }});
     
    }
  
  
  
    /*if((simultaneous+=1) === 3){ 
         
         TweenLite.to( $(".card") , 0.5, {rotationY:0, ease:Back.easeOut});
         //alert(simultaneous);
         simultaneous = 1;
    }*/
  
  
  TweenLite.to($(this), 1.2, {rotationY:180, ease:Back.easeOut, onComplete:startCount($(this)) });
  $(this).addClass("fliped");
 
   
  checkSet();  
  console.log(simultaneous);
 });

//a nice little intro;)
TweenMax.staggerTo($(".card"), 1, {rotationY:-180, repeat:1, yoyo:true}, 0.1);



Comments