html5纸牌配对游戏-无法将图片与精灵分开

Question

我有一个大的sprite图片，其中包含约16张图片。 我想从精灵中剪切图像并动态粘贴到背景图像上。
编辑：这是HTML代码：

这是CSS代码：

 body{
text-align:center;
background: BROWN url(../images/bg.jpg);
}
#game{
border-radius: 10px;
border: 1px solid GRAY;
background: DARKGREEN url(../images/table.jpg);
width: 500px;
height: 460px;
margin: 0 auto;
display: flex;
justify-content: center; 
align-items: center;
}
.card{
perspective: 600px;
width: 80px;
height: 120px;
position: absolute;
transition: all .3s;
}

.face{
border-radius: 10px;
width: 100%;
height: 100%;
position: absolute;
transition-property: opacity, transition, box-shadow;
transition-duration: .3s;
backface-visibility: hidden;
}
.front{
background: GRAY url(../images/deck.png) 0 -480px;
}
.back{
background: LIGHTGREY url(../images/deck.png);
transform: rotate3d(0,1,0,-180deg); 
}

.card:havor .face, .card-flipped .face {
box-shadow: 0 0 10px #aaa;
}
.card-flipped .front{
transform: rotate3d(0,1,0,180deg);
}
.card-flipped .back{
transform: rotate3d(0,1,0,0deg);
}
.card-removed{
opacity: 0;
}

.cardAJ {background-position: -800px 0;} 
.cardAQ {background-position: -880px 0;} 
.cardAK {background-position: -960px 0;} 
.cardBJ {background-position: -800px -120px;} 
.cardBQ {background-position: -880px -120px;} 
.cardBK {background-position: -960px -120px;} 
.cardCJ {background-position: -800px -240px;} 
.cardCQ {background-position: -880px -240px;} 
.cardCK {background-position: -960px -240px;} 
.cardDJ {background-position: -800px -360px;} 
.cardDQ {background-position: -880px -360px;} 
.cardDK {background-position: -960px -360px;}

图片

BG

甲板

*

表

我试图动态地将图像甲板拆分为几部分，即使用jQuery代码，如下所示：

$(function(){
//clone 12 copies of the card
for(var i=0; i<11;i++)
{
    $(".card:first-child").clone().appendTo("#cards");
}
// initialise each card's position 
$("#cards").children().each(function(index){
 //align the cards to be 4*3 ourselves.
 var x = ($(this).width()+20)*(index%4);
 var y = ($(this).hegith+20)*Math.floor(index/4);
 $(this).css("transform"," tranlateX( "+x+" px) tranlateY( "+y+" px)");

});

}）;

请告诉我要进行哪些更改才能获得所需的结果。

Answer 1

您的.card被堆叠，是因为您使用了以下position: absolute

检查这个小提琴： 小提琴

更改CSS：

.card {
  perspective: 600px;
  width: 80px;
  height: 120px;
  float: left;
  transition: all .3s;
  margin: 10px;
}

注意 ：关闭div <div class="face back"></div>

Answer 2

您不需要使用javascript来对齐卡，只能使用CSS来做到这一点：

首先将clearfix添加到父级#cards并添加宽度和高度：

#cards {
  width: 100%;
  height: 100%;
}
#cards:before,
#cards:after {
    content: " ";
    display: table;
}

#cards:after {
    clear: both;
}

然后在每张卡之间添加一些边距：

.card{
    width: 80px;
    height: 120px;
    float: left; //to align each card
    margin: 15px; //to give some space between them
}

//this says: each 4th card add a bigger margin-left, to align better the row.
.card:nth-of-type(4n+1) {
  margin-left: 40px;
}

这是一个工作示例： http : //codepen.io/sandrina-p/pen/xEaJjw