[英]html5 card matching game - can't separate images from a sprite
I have a big sprite image which has around 16 images in it. 我有一个大的sprite图片,其中包含约16张图片。 I am want to cut images from the sprite and paste on the background image dynamically.
我想从精灵中剪切图像并动态粘贴到背景图像上。
Edit: here is the Html code: 编辑:这是HTML代码:
here is the css code : 这是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;}
images 图片
I am trying to split the image deck into pieces dynamically ie using jQuery code which is as follows: 我试图动态地将图像甲板拆分为几部分,即使用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)");
});
}); });
Please tell me what changes shall I make to get the desired result. 请告诉我要进行哪些更改才能获得所需的结果。
Your .card
was stacked because you used position: absolute
您的
.card
被堆叠,是因为您使用了以下position: absolute
Checkou t this fiddle: Fiddle 检查这个小提琴: 小提琴
Changing CSS: 更改CSS:
.card {
perspective: 600px;
width: 80px;
height: 120px;
float: left;
transition: all .3s;
margin: 10px;
}
Notice : Close right your div <div class="face back"></div>
注意 :关闭div
<div class="face back"></div>
You don't need javascript to align the cards, you can do it only with CSS: 您不需要使用javascript来对齐卡,只能使用CSS来做到这一点:
First add clearfix to the parent #cards
and add width and height: 首先将clearfix添加到父级
#cards
并添加宽度和高度:
#cards {
width: 100%;
height: 100%;
}
#cards:before,
#cards:after {
content: " ";
display: table;
}
#cards:after {
clear: both;
}
And then add some margin between each card: 然后在每张卡之间添加一些边距:
.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;
}
Here's a working example: http://codepen.io/sandrina-p/pen/xEaJjw 这是一个工作示例: http : //codepen.io/sandrina-p/pen/xEaJjw
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.