在此JS纸牌游戏中添加纸牌翻转动画？

Question

我正在玩这个纸牌游戏 ，我想添加纸牌翻转动画。

我已经用谷歌搜索了一个答案，但是大多数解决方案都引用了jquery（我不想只为1个动画实现）或CSS3（ 我喜欢这个例子 ）。 那里运气不好。

js游戏使用以下内容（来自cardgamecore.js）：

playingCard.redrawCardImage()强制纸牌重playingCard.redrawCardImage()

playingCard.showFace(bool: face)将纸牌设置为面朝上或面朝下，并在需要时进行重playingCard.showFace(bool: face) 。 true =正面朝上，false =正面朝下。

playingCard.prototype.redrawCardImage = function () {
    // Set or change the image showing on the card face
    if( !this.faceImage || !this.cardSet.backImage ) { return; }
    // Bug in Firefox - alt attributes do not change unless they are made _before_ an SRC change
    this.cardImage.setAttribute('alt',this.wayup?(this.cardSet.cardNames[this.number-1]+' '+this.suit):this.cardSet.cardWord);
    this.cardImage.src = this.wayup ? this.faceImage : this.cardSet.backImage;
};

playingCard.prototype.showFace = function (oWhich) {
    // Used to flip a card over
    if( this.redrawNewImage != oWhich ) {
        this.wayup = oWhich;
        this.redrawCardImage();
    }
};

因此，当一张纸牌显示其背面时，可使用playingCard.showFace = false 。 当您单击它时， playingCard.showFace = true并重新绘制图像。 此时，卡片应具有良好的翻转动画。

但是该怎么做呢？

Answer 1

你想谷歌搜索的是“ CSS 3翻转动画”

http://davidwalsh.name/demo/css-flip.php

Answer 2

我也在玩纸牌游戏...

首先，您可以这样写卡：

<div class='card' >
   <div class='faces'>
       <div class='face front'> Hello</div>
       <div class='face back'>Goodbye</div>
   </div>
</div>

html中都考虑到了这两种情况，尽管如此，css只会显示一个：

.card {
  -webkit-perspective: 800;
   width: 50%;
   height: 300px;
   position: relative;
   margin: 3px;
   float:left; /*if you want more than one card in a line*/

}
.card .faces.flipped {
  -webkit-transform: rotatey(-180deg); /* this style will help the card to rotate */
}
.card .faces {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d; /* This is a 3d transformation */
  -webkit-transition: 0.5s;/*the animation last 0.5secs*/
}
.card .faces .face {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden ; /*hides the back of the card until transform*/
  z-index: 2;
    font-family: Georgia;
    font-size: 3em;
    text-align: center;
    line-height: 200px;
}
.card .faces .front {
  position: absolute;
  z-index: 1;
    background: black;
    color: white;
    cursor: pointer;
}
.card .faces .back {
  -webkit-transform: rotatey(-180deg); /*allows the flip to the back of the card*/
  background-image: url("image.jpg"); /*background image for the back if you want*/
  background-size:100%;
  color:white;
  border:1px solid black;
}

剩下要做的唯一事情就是添加“翻转”类。 因此，也许与其重绘。

   $(".card").on('click',function(){
      $(this).children('.faces').toggleClass('flipped');
  });

这是一块

Answer 3

联系了脚本的作者，他告诉我，如果不重写大部分代码，则无法在当前脚本中使用。 所以这个问题可以解决。 非常感谢您尝试帮助我。