VUE小案例：扑克消消乐（包含全部代码）_vue h5移动端消消乐-优快云博客

本文分享了一个使用Vue.js制作的扑克消消乐游戏案例，包括详细的代码和资源下载链接。通过实例化卡片类，利用Vue的数据绑定和事件处理，实现了翻牌匹配的游戏逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、案例介绍

今天学习了Vue，做了一个Vue的一个小案例：扑克消消乐。这个案例对初学Vue 的同学来说也算有一点的难度。

但是仔细思考，整个案例算不上难。案例的布局已经给出了，只需要对相应的功能进行实现。

需要学习这个案例的同学可以留言评论，看到了我会私信给你的.

或者你可以自己在我文章这里复制，目录结构和所有代码图片我都贴出来了。

下载地址：https://download.youkuaiyun.com/download/djklsajdklsajdlk/12405960

https://download.youkuaiyun.com/download/djklsajdklsajdlk/12405957

二、案例展示

服了，上传个gif图片搞了好久。待会总结一下如何成功上传gif,发布到我的博客里面。

https://blog.youkuaiyun.com/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/vue@2.6.11"></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>