在这个JS纸牌游戏中添加一个纸牌翻转动画

Adding a card flip animation to this JS card game?

本文关键字：一个 翻转 动画 JS 纸牌游戏 添加      更新时间：2023-09-26

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

我已经搜索了答案，但大多数解决方案都是指jquery(我不想只为一个动画实现)或CSS3(我喜欢这个例子)。可没那么走运。

js游戏使用以下内容(来自cardgamecore.js):

playingCard.redrawCardImage()强制重抽

playingCard.showFace(bool: face)设置卡片面朝上或面朝下，并在需要时重新绘制。True = face up, false = face down.

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和图像被重新绘制。此时，卡片应该有一个漂亮的翻转动画。

但是怎么做呢?

你要搜索的是"css 3 flip animation"

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

我也在玩纸牌游戏…

首先你可以这样写卡片:

<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;
}

唯一要做的就是添加'flipped'类。所以也许与其重画

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

联系了脚本的作者，他告诉我在当前脚本中不重写大部分代码是不可能的。所以这个问题可以结束了。谢谢你的帮助。

相关文章：