界面.gif
html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="index.css">
<script type="text/javascript" src="libs/jquery.min.js"></script>
</head>
<body>
<div class="wrapper" id="container">
<div id="playArea"></div>
<!-- 用户 -->
<div id="controlArea">
<div id="thumb">
<img src="img/player.jpg" height="40" width="40">
</div>
<div id="paperShow">
</div>
<div id="control">
<button class="clear"></button>
<button class="sendPaper"></button>
</div>
</div>
<!-- 纸牌区域 -->
<div id="paperArea">
</div>
</div>
<script type="text/javascript" src="index2.js"></script>
</body>
</html>
js文件
$(document).ready(function() {
var b,count=54,paperCounts=13;
var papers =new Array(count);//牌
for(var i=0;i<53;i++){
papers[i]=i;
}
//洗牌
function shuffle(){
for (var j = 0; j < 53; j++) {
var rd=parseInt(Math.random()*53);
b=papers[j];
papers[j]= papers[rd];
papers[rd]=b;
}
}
for(var j=0;j<13;j++){
shuffle();
var x = papers[j]%13*(-90);
var y = parseInt(papers[j]/13)*(-120);
var left = x+"px";
var top = y+"px";
var paperj = "paper" + j;
var singlePaper = $("<button class='paper'></button>");
singlePaper.addClass(paperj);
singlePaper.css({
"background-position":left+" "+top
});
$("#paperArea").append(singlePaper);
}
//选牌
$(".paper").click(function(){
if($(this).hasClass('selected')){
$(this).animate({
"top":"+10px"
})
$(this).removeClass("selected");
}else {
$(this).animate({
"top":"-10px"
})
$(this).addClass("selected");//牌选中
}
});
//发牌
$(".sendPaper").click(function(){
if($("#paperShow").children('.paper') != null){
$('#paperShow .paper').remove();
}
for(var k=0;k<paperCounts;k++){
var index = ".paper"+k;
if($(index).hasClass('selected')){
$("#paperShow").append($(index));
}
}
});
$(".clear").click(function(){
for(var k=0;k<paperCounts;k++){
var index = ".paper"+k;
$(index).removeClass('selected');
$(index).animate({
"top":"+10px"
});
$("#paperArea").append($(index));
}
});
});
flex搭建页面
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
#container {
position: realtive;
top: 40px;
left: 40px;
width: 800px;
height: 800px;
background-color: #9CBFD0;
border: 1px solid gold;
border-radius: 10px;
display: flex;
flex-direction: column;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
background-image:url(img/bg_1.png);
}
#playArea {
display:flex;
flex-basis: 60%;
}
#controlArea {
width: 100%;
display:flex;
flex-basis: 20%;
}
#thumb {
background-color: lightblue;
padding-top: 40px;
flex-basis: 10%;
}
#thumb img {
width: 100%;
height: 100%;
}
#paperShow {
background-color: rgba(255,255,255,0.5);
display: flex;
justify-content: center;
flex-basis: 80%;
}
#control {
background-color: lightblue;
flex-basis: 10%;
flex-direction:column;
display: flex;
}
#paperArea {
display: flex;
flex-basis: 20%;
background-color: lightgray;
padding-left: 20px;
}
#control .sendPaper {
background-image: url(img/button.png);
background-position: -550px 0%;
width: 86px;
height: 40px;
}
#control .clear {
background-image: url(img/button.png);
background-position: -640px 0%;
width: 86px;
height: 40px;
}
#paperShow .paper {
position: relative;
margin-right: -40px;
background-image: url(img/paper.png);
width: 90px;
height: 120px;
}
#paperArea .paper {
position: relative;
top:10px;
margin-right: -40px;
background-image: url(img/paper.png);
width: 90px;
height: 120px;
}
需要完善的功能：
在发牌的同时，需要按照3-10,J,Q,K,A,2,大王，小王的顺序进行排序
