一、案例介绍
今天学习了Vue,做了一个Vue的一个小案例:扑克消消乐。 这个案例对初学Vue 的同学来说也算有一点的难度。
但是仔细思考,整个案例算不上难。案例的布局已经给出了,只需要对相应的功能进行实现。
需要学习这个案例的同学可以留言评论,看到了我会私信给你的.
或者你可以自己在我文章这里复制,目录结构和所有代码图片我都贴出来了。
下载地址:https://download.csdn.net/download/djklsajdklsajdlk/12405960
https://download.csdn.net/download/djklsajdklsajdlk/12405957
二、案例展示
服了,上传个gif图片搞了好久。待会总结一下如何成功上传gif,发布到我的博客里面。
https://blog.csdn.net/djklsajdklsajdlk/article/details/106035506
三、项目源码
1.目录结构(我会发布到我的资源里面,或者留言找我发你)
2.项目源码
1.css文件
文件名:matchgame.css
@charset "utf-8";
body {
text-align: center;
background-image: url("../images/bg.jpg");
}
#game {
width: 502px;
height: 462px;
margin: 0 auto;
border: 1px solid #666;
border-radius: 10px;
background-image: url("../images/table.jpg");
position: relative;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
}
#cards {
width: 380px;
height: 400px;
position: relative;
margin: 30px auto;
}
.card {
width: 80px;
height: 120px;
display: inline-block;
border-radius: 10px;
background: #999 url("../images/deck.png") 0 -480px;
margin: 5px;
}
.card:hover {
-webkit-box-shadow: 0 0 40px #aaa;
}
2.html文件
文件名:消扑克.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>消扑克</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<link href="css/matchgame.css" rel="stylesheet">
</head>
<body>
<section id="game">
<div id="cards">
<div v-for="c in cards" class="card":style="c.style"
@click="click(c)"></div>
</div>
</section>
<script type="text/javascript">
//创建扑克牌类
function Card(value){
//默认设置不透明
this.value = value;//牌值0-51
this.state=0;//显示状态:0背面,1正面。-1消失
this.style={};//vue的样式
//刷新显示的状态
this.refresh = function(){
//默认设置不透明
this.style.opacity=1;
if(this.state == 1){
//计算偏移值 。纵坐标
var y = parseInt(this.value/13)*120;
//横坐标
var x =this.value %13*80;
//设置背景偏移值
this.style.backgroundPosition="-"+x+"px -"+y+"px";
// this.style.opacity = 1;
}else if(this.state == 0){
this.style.backgroundPosition="0px -480px";
// this.st`yle.opacity = 1;
}else{
//纸牌消失 ===》透明
this.style.opacity = 0;
}
}
//给card设置默认的显示属性
this.refresh();
}
var cards=[];
for(var i=0 ; i<12 ;i++){
if(i%2==0){
var value = parseInt(Math.random()*52);
}else{
var value= this.cards[i-1].value;
}
var card = new Card(value);
//添加到数组中
cards[i] = card;
}
//打乱顺序
cards.sort(function(c1,c2){
return Math.random()>0.5?1:-1;
});
var vue = new Vue({
el:"#game",
data:{
cards:cards,
card1:null,
card2:null,
},
//生命周期事件
created :function(){
},
methods:{
click(card){
if(card.state == -1
|| card.state ==1
||(this.card1!=null && this.card2!=null)){
return;
}else{
card.state = 1;
card.refresh();
if(this.card1==null){
this.card1=card;
}else{
this.card2=card;
setTimeout(function(){
//1秒之后this不存在了,要用vue.$data
if(vue.$data.card1.value ==vue.$data.card2.value){
//隐藏
vue.$data.card1.state=-1;
vue.$data.card2.state=-1;
}else{
//重新翻过来
vue.$data.card1.state=0;
vue.$data.card2.state=0;
}
vue.$data.card1.refresh();
vue.$data.card2.refresh();
vue.$data.card1=null;
vue.$data.card2=null;
},1000);
}
}
}
}
})
</script>
</body>
</html>
三、图片
bg.jpg
deck.png
popup_bg.jpg
table.jpg