html5卡匹配游戏 - 无法从精灵中分离图像

Question

我有一个大的精灵图像，里面有大约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

查看这个小提琴：Fiddle

更改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