羊了个羊

#羊了个羊

最近羊了个羊很火然后自己无法过关，所以自己写了一个来满足自己

临时花生壳链接 链接

上代码

<template>
	<view class="content">
		<view class="main">
			<view class="list" :style="`top:${index*0}px;`" v-for="da,index in datas">
				<view class="item"
					:style="`top:${Math.floor(index2/7)*100}rpx;left:${index2%7*100 +(index%2==0?-20:20)}rpx; border-color:${item.state? 'transparent':color[index]};pointer-events: ${item.state? 'none':''};display:${item.state?'none':''};background:${bgColor(item.type)}`"
					@click="handClick(item,index,index2)" v-for="item,index2 in da">
					{{type(item.type)}}
				</view>
			</view>
		</view>

		<view class="bottom">
			<view class="item" :style="`background:${bgColor(item.type)}`" v-for="item in lists">
				{{type(item.type)}}
			</view>
		</view>
		<view v-if="bGmusic" @click="bgaudio" class="cover">
			开始游戏
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				color: ['red', 'green', 'pink', 'yellow', 'blue', 'orange', 'purple'],
				datas: [],
				lists: [],
				bGmusic: true,

			}
		},
		computed: {
			type() {
				return function(index) {
					let arr = ['胡萝卜', '花菜', '火堆', '树桩', '三叉', '手套', '铃铛', '线团', '剪刀', '玉米']
					return arr[index]
				}
			},
			bgColor() {
				return function(index) {
					let color = ['rgb(238,110,28)', 'rgb(79,152,0)', 'rgb(213,50,16)', 'rgb(126,78,24)',
						'rgb(220,194,98)', 'rgb(67,165,223)', 'rgb(241,202,33)', 'rgb(243,140,191)',
						'rgb(249,101,98)', 'rgb(252,244,0)'
					]
					return color[index]
				}
			}
		},
		onLoad() {
			for (let i = 0; i < 7; i++) {
				let list = []
				for (let i = 0; i < 35; i++) {
					list.push({
						name: "水电费",
						type: Math.floor(Math.random() * 10),
						state: false
					})
				}

				this.datas.push(list)
			}
		},
		methods: {
			audio() {
				var music = null;
				music = uni.createInnerAudioContext(); //创建播放器对象
				music.src = "/static/paopao.wav";
				music.volume = 1 //音量
				music.play(); //执行播放
				music.onEnded(() => {
					//播放结束
					music = null;
				});
			},
			bgaudio() {
				// 背景音乐
				this.bGmusic = false
				var music = null;
				music = uni.createInnerAudioContext(); //创建播放器对象
				music.volume = 0.3 //音量
				music.src = "http://music.163.com/song/media/outer/url?id=33891794";
				music.play(); //执行播放
				music.onEnded(() => {
					//播放结束
					music.play();
				});
			},
			handClick(item, index, index2) {
				this.audio()
				this.datas[index][index2].state = true
				this.lists.push(item)

				let types = {
					type0: 0,
					type1: 0,
					type2: 0,
					type3: 0,
					type4: 0,
					type5: 0,
					type6: 0,
					type7: 0,
					type8: 0,
					type9: 0,
				}

				this.lists.forEach(item => {
					types['type' + item.type]++
				})
				for (let key in types) {
					if (types[key] >= 3) {
						for (let i = this.lists.length - 1; i >= 0; i--) {
							if (this.lists[i].type.toString() == key.substring(4, 5)) {
								this.lists.splice(i, 1)
								console.log('shanchu');
							}
						}
						break;


					}
				}


				if (this.lists.length >= 7) {
					uni.showModal({
						title: "小菜鸡，再给你一次机会"
					})
					this.lists = []
				}
			}

		}
	}
</script>

<style lang="scss">
	.cover {
		width: 750rpx;
		height: 100vh;
		background-color: rgba(0, 0, 0, .3);
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
		font-size: 100rpx;
	}

	.main {
		position: relative;

		.list {
			position: absolute;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;

			// border: solid red 1px;
			// pointer-events:none;
			.item {
				width: 100rpx;
				height: 100rpx;
				position: absolute;
				border: solid transparent 3px;
				// background-color: transparent;
				color: white;
				border-radius: 20rpx;
				display: flex;
				justify-content: center;
			}
		}

		.list:nth-last-of-type(1) {
			// pointer-events:none
		}
	}


	.bottom {
		width: 750rpx;
		height: 100rpx;
		border: solid red 1px;
		position: absolute;
		bottom: 0;
		display: flex;

		.item {
			width: 100rpx;
			height: 100rpx;
			color: white;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 20rpx;
			margin-left: 9rpx;
		}
	}
</style>