养了个羊（简易版）

不出意外大家是我的粉丝吧

圈粉操作一波~

话不多说直接给大家上源码

注：本案例是根据网上代码进行了优化改动禁止网上传阅！！！

代码块

接着这一步复制粘贴 ctrl+c ctrl+v大家都会吧

把下面这段代码直接进行复制粘贴到index.html文件中就完事了！


<!DOCTYPE html>
<html lang="en">
 
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="css/PC.css" class="equipment">
		<link rel="shortcut icon" href="imgs/icon.jpg">
		<title>养了个羊</title>
		<style>
			:root {
				--top-text-color: #ffffff;
			}
 
			* {
				margin: 0;
				padding: 0;
			}
 
			body {
				width: 100vw;
				height: 100vh;
				overflow: hidden;
				background-image: url(king/BG1.jpg);
				background-size: cover;
				background-position: left;
				background-color: #b6b6b6;
				user-select: none;
			}
 
			.reset {
				width: 75px;
			}
 
			.controlBGM {
				position: fixed;
				top: 20px;
				left: 20px;
				background-color: transparent;
				border: none;
			}
 
			.surplus {
				position: fixed;
				top: 15px;
				right: 20px;
				color: var(--top-text-color);
				font-size: 22px;
				font-weight: 800;
				text-shadow: 0 0 5px black;
			}
 
			.surplus::before {
				content: '剩余 ';
				font-size: 16px;
			}
 
			.operate {
				width: 100vw;
				position: fixed;
				bottom: 100px;
				left: 0;
				display: flex;
				justify-content: center;
			}
 
			.operate button {
				width: 55px;
				height: 40px;
				background-color: #ffffff;
				border-radius: 3px;
				font-size: 14px;
				color: rgb(66, 144, 255);
				font-weight: 800;
				border: none;
				margin: 0 8px;
			}
 
			@keyframes fade {
				100% {
					opacity: 0.2;
					transform: scale(0.5);
				}
			}
 
			@keyframes enter {
				0% {
					transform: scale(0);
				}
			}
 
			.levelBox {
				display: none;
			}
 
			.levelBox>div {
				width: 100vw;
				height: 100vh;
				position: fixed;
				z-index: 999;
				top: 0;
				left: 0;
				background-color: rgba(0, 0, 0, 0.5);
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
			}
 
			.levelBox>div button {
				width: 200px;
				height: 45px;
				margin-top: 20px;
				font-size: 16px;
				color: #060200;
				background-color: rgb(250, 250, 250);
				border: 1px solid transparent;
				animation: enter .3s;
			}
 
			.levelBox>div button.win {
				color: rgb(255, 102, 0);
				font-weight: 800;
			}
 
			.chronoscope {
				position: fixed;
				top: 60px;
				right: 20px;
				color: var(--top-text-color);
				font-weight: 700;
				text-shadow: 0 0 5px black;
			}
 
			.chronoscope::after {
				content: ' S';
			}
 
			.updataPage {
				width: 26px;
				color: var(--top-text-color);
				font-size: 14px;
				position: fixed;
				top: 70px;
				left: 23px;
				border: 2px solid var(--top-text-color);
				background-color: transparent;
				font-weight: 800;
			}
 
			button:focus {
				outline: none;
			}
 
			.box {
				border-color: rgb(99, 164, 255);
				bottom: 25px;
			}
 
			.goods {
				padding: 23px;
				filter: grayscale(6%);
			}
 
			.goods.grey {
				filter: grayscale(100%);
			}
 
			.hrefSheep {
				position: fixed;
				top: 100px;
				right: 20px;
				color: white;
			}
		</style>
	</head>
 
	<body>
		<button class="controlBGM"></button>
		<div class="surplus"></div>
		<div class="chronoscope">0</div>
		<button class="updataPage" onclick="javascript:location.reload();">更新</button>
		<a href="king.html" class="hrefSheep">养了个羊</a>
 
		<div class="operate">
			<button class="disorganize">洗牌</button>
			<button class="recall">撤回</button>
			<button class="lightUp">点亮</button>
			<button class="selectLevel" level="5" index="0">第一关</button>
			<button class="reset">重置</button>
		</div>
		<div class="levelBox">
			<div>
				<button level="5" index="0">第一关</button>
				<button level="8" index="1">第二关</button>
				<button level="11" index="2">第三关</button>
				<button level="14" index="3">第四关</button>
				<button level="17" index="4">第五关</button>
				<button level="20" index="5">第六关</button>
				<button level="24" index="6">第七关</button>
				<button level="29" index="7">第八关</button>
				<button level="34" index="8">第九关</button>
				<button level="40" index="9">第十关</button>
			</div>
		</div>
 
		<div class="box"></div>
 
		<audio muted autoplay src="audio/失败.mp3"></audio>
		<audio muted autoplay src="audio/胜利2.mp3"></audio>
		<audio autoplay loop class="BGAudio"></audio>
 
		<script>
			const html = document.documentElement;
			const body = document.body;
			const box = document.querySelector('.box');
			let allGoods = document.querySelectorAll('.goods');
			const selectLevel = document.querySelector('.selectLevel');
			const disorganize = document.querySelector('.disorganize');
			const reset = document.querySelector('.reset');
			const BGAudio = document.querySelector('.BGAudio');
			const controlBGM = document.querySelector('.controlBGM');
			const recall = document.querySelector('.recall');
			const surplus = document.querySelector('.surplus');
			const levelBox = document.querySelector('.levelBox');
			const levelBoxDiv = document.querySelector('.levelBox>div');
			const levelBoxBtn = document.querySelectorAll('.levelBox>div button');
			const chronoscope = document.querySelector('.chronoscope');
			const lightUp = document.querySelector('.lightUp');
			let boxGoodsLeft = 0;
			let boxVolume = 0;
			let spacing = 65;
			let disorganizeNum = 3;
			let recallNum = 3;
			let chronoscopeNum = 0;
			let range = 350;
			let lightUpNum = 3;
			const mutedSVG =
				'',
				notMutedSVG =
				'';
 
			const goodsList = [
				'zoon1', 'zoon2', 'zoon3', 'zoon4', 'zoon5', 'zoon6', 'zoon7', 'zoon8', 'zoon9',
				'fruit1', 'fruit2', 'fruit3', 'fruit4', 'fruit5', 'fruit6', 'fruit7', 'fruit8', 'fruit9',
				'cake1', 'cake2', 'cake3', 'cake4', 'cake5', 'cake6', 'cake7', 'cake8', 'cake9',
			]
 
			function randomNum(min, max) {
				min = Math.ceil(min);
				max = Math.floor(max);
				return Math.floor(Math.random() * (max - min + 1)) + min;
			}
 
			if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
				const equipment = document.querySelector('.equipment');
				equipment.setAttribute('href', 'css/mobile.css');
				spacing = 48;
				range = 0;
			}
 
			function createGoods(oneGoods) {
				const goods = document.createElement('div');
				goods.classList.add('goods');
				goods.style.backgroundImage = `url(imgs/${oneGoods}.png)`;
				goods.setAttribute('mark', oneGoods)
				goods.style.top = randomNum(155, window.innerHeight - 222) + 'px';
				goods.style.left = randomNum(20 + range, window.innerWidth - 70 - range) + 'px';
				body.appendChild(goods);
				goods.setAttribute('onclick', 'goodsClick(this)');
			}
 
			function goodsClick(self) {
				if (boxVolume >= 7 || self.classList.contains('grey')) return;
				createdAudio('audio/点击.mp3');
				const newGoods = self.cloneNode();
				newGoods.style.top = 0;
				newGoods.style.left = boxGoodsLeft + 'px';
				newGoods.style.padding = 0;
				newGoods.removeAttribute('onclick');
				boxGoodsLeft += spacing;
				boxVolume++;
				newGoods.style.opacity = 0;
				box.appendChild(newGoods);
				self.style.transition = 'top .2s, left .2s';
				self.style.padding = 0;
				self.style.top = box.offsetTop + 2 + 'px';
				self.style.left = boxGoodsLeft + box.offsetLeft - self.offsetWidth + 'px';
				setTimeout(() => {
					newGoods.style.opacity = 1;
					self.remove();
					coverGoods();
				}, 100);
				let count = 0;
				let children = [...box.children];
				children.forEach(item => item.getAttribute('mark') == newGoods.getAttribute('mark') && count++);
				let deleteNum = 3;
				if (count >= 3) {
					createdAudio('audio/得分.mp3');
					surplus.innerText = allGoods.length - 3;
					boxVolume -= 3;
					children.forEach(item => {
						if (item.getAttribute('mark') == newGoods.getAttribute('mark') && deleteNum > 0) {
							deleteNum--;
							item.style.animation = 'fade .3s linear';
							setTimeout(() => {
								item.remove();
								children = [...box.children];
								boxGoodsLeft = spacing * children.length;
								children.forEach((item, index) => {
									item.style.transition = 'left .2s';
									item.style.left = index * spacing + 'px';
								});
							}, 200);
						}
					});
				}
				boxVolume >= 7 && gameFinish('很遗憾你输了', 'audio/失败.mp3');
				setTimeout(() => {
					allGoods = document.querySelectorAll('.goods');
					if (allGoods.length <= 0) {
						gameFinish(`恭喜你通过了${selectLevel.innerText}\n用时${chronoscopeNum}秒`, 'audio/胜利2.mp3');
						const levelRecord = JSON.parse(localStorage.getItem('sheep_level_record'));
						levelRecord[selectLevel.getAttribute('index')]++;
						localStorage.setItem('sheep_level_record', JSON.stringify(levelRecord));
					}
				}, 300);
			}
 
			function gameFinish(str, audio) {
				setTimeout(() => {
					alert(str);
					selectLevel.click();
				}, 200);
				surplus.innerText = allGoods.length;
				createdAudio(audio);
				disorganizeNum = 0;
				recallNum = 0;
				lightUpNum = 0;
			}
 
			function gameStart(number) {
				boxVolume = 0;
				boxGoodsLeft = 0;
				allGoods = document.querySelectorAll('.goods');
				allGoods.forEach(item => item.remove());
				disorganizeNum = 3;
				disorganize.innerText = `洗牌 ${disorganizeNum}`;
				recallNum = 3;
				recall.innerText = `撤回 ${recallNum}`;
				lightUpNum = 3;
				lightUp.innerText = `点亮 ${lightUpNum}`;
				chronoscopeNum = 0;
				chronoscope.innerText = chronoscopeNum;
				for (let i = 0; i < number; i++) {
					const num = randomNum(0, goodsList.length - 1);
					for (let i = 0; i < 3; i++) createGoods(goodsList[num]);
				}
				allGoods = document.querySelectorAll('.goods');
				allGoods.forEach((item, index) => {
					item.style.animation = `enter .3s`;
					item.style.zIndex = index + 1;
				});
				surplus.innerText = allGoods.length;
				setTimeout(coverGoods, 300);
			}
 
			disorganize.addEventListener('click', () => {
				if (disorganizeNum <= 0) return;
				disorganizeNum--;
				disorganize.innerText = `洗牌 ${disorganizeNum}`;
				allGoods.forEach(item => {
					if (!item.getAttribute('onclick')) return;
					item.style.transition = 'top .25s, left .25s';
					item.style.top = randomNum(155, window.innerHeight - 222) + 'px';
					item.style.left = randomNum(20 + range, window.innerWidth - 70 - range) + 'px';
				});
				setTimeout(coverGoods, 300);
			});
			disorganize.innerText = `洗牌 ${disorganizeNum}`;
 
			reset.addEventListener('click', () => gameStart(selectLevel.getAttribute('level')));
 
			function createdAudio(src) {
				const audio = document.createElement('audio');
				document.body.appendChild(audio);
				audio.autoplay = true;
				audio.setAttribute('src', src);
				audio.play();
				audio.addEventListener('ended', e => e.target.remove());
			}
 
			controlBGM.addEventListener('click', () => {
				if (BGAudio.getAttribute('src')) {
					BGAudio.setAttribute('src', '');
					controlBGM.innerHTML = mutedSVG;
				} else {
					BGAudio.setAttribute('src', 'audio/audio2.mp3');
					BGAudio.play();
					controlBGM.innerHTML = notMutedSVG;
				}
			});
			controlBGM.innerHTML = mutedSVG;
 
			recall.addEventListener('click', () => {
				let len = box.children.length;
				if (len <= 0 || recallNum <= 0) return;
				recallNum--;
				recall.innerText = `撤回 ${recallNum}`;
				let lastChild = box.children[len - 1];
				const newGoods = lastChild.cloneNode();
				newGoods.style.padding = '23px';
				newGoods.style.top = randomNum(155, window.innerHeight - 222) + 'px';
				newGoods.style.left = randomNum(20 + range, window.innerWidth - 70 - range) + 'px';
				newGoods.setAttribute('onclick', 'goodsClick(this)');
				body.appendChild(newGoods);
				boxGoodsLeft -= spacing;
				boxVolume--;
				lastChild.remove();
			});
			recall.innerText = `撤回 ${recallNum}`;
 
			selectLevel.addEventListener('click', () => {
				levelBox.style.display = 'block';
				const levelRecord = JSON.parse(localStorage.getItem('sheep_level_record'));
				levelRecord.forEach((item, index) => item && levelBoxBtn[index].classList.add('win'));
			});
 
			levelBoxDiv.addEventListener('click', () => levelBox.style.display = 'none');
 
			levelBoxBtn.forEach(item => {
				item.addEventListener('click', e => {
					const level = e.target.getAttribute('level');
					gameStart(level);
					selectLevel.setAttribute('level', level);
					selectLevel.setAttribute('index', e.target.getAttribute('index'));
					selectLevel.innerText = e.target.innerText;
				});
			});
 
			const levelRecord = new Array(levelBoxBtn.length);
			for (let i = 0; i < levelRecord.length; i++) levelRecord[i] = 0;
			localStorage.getItem('sheep_level_record') || localStorage.setItem('sheep_level_record', JSON.stringify(
			levelRecord));
 
			setInterval(() => chronoscope.innerText = ++chronoscopeNum, 1000);
 
			function isIntersect(element1, element2) {
				const rect1 = element1.getBoundingClientRect();
				const rect2 = element2.getBoundingClientRect();
				return !(rect1.right - 5 < rect2.left || rect1.left > rect2.right - 5 || rect1.bottom - 5 < rect2.top || rect1
					.top > rect2.bottom - 5);
			}
 
			function coverGoods() {
				for (let i = 0; i < allGoods.length; i++) {
					allGoods[i].classList.remove('grey');
 
					for (let j = i + 1; j < allGoods.length; j++) {
						if (isIntersect(allGoods[i], allGoods[j]) && allGoods[i] != allGoods[j]) {
							if (parseInt(allGoods[i].style.zIndex) > parseInt(allGoods[j].style.zIndex)) {
								allGoods[j].classList.add('grey');
							} else {
								allGoods[i].classList.add('grey');
							}
						}
					}
				}
			}
 
			lightUp.addEventListener('click', () => {
				if (lightUpNum <= 0) return;
				allGoods.forEach(item => item.classList.remove('grey'));
				lightUpNum--;
				lightUp.innerText = `点亮 ${lightUpNum}`;
			});
 
			lightUp.innerText = `点亮 ${lightUpNum}`;
 
			gameStart(selectLevel.getAttribute('level'));
 
 
			// cheating
			let pressTime = 0;
			levelBoxDiv.addEventListener('touchstart', () => pressTime = +new Date());
			levelBoxDiv.addEventListener('touchend', () => {
				pressTime = +new Date() - pressTime;
				if (pressTime > 3000) disorganizeNum = 9;
			});
		</script>
	</body>
 
</html>

搞到这里，我已经悟了。你们呢？

没猜错的话有粉丝是不是已经运行了一遍发现报错了呢？

别急别急别急！（重要的事情说三遍）

我们刚说目录下有那么几个文件夹肯定是要放东西的呀不然建文件夹有啥作用呢？是吧

不过大家可以在网页按F12看一下控制台

也就是这个地方看看红色的报错是什么百度了解一下

接下来对目录操作

目录文件放入

有能力的粉丝自己进行探索怎么拿到缺失部分

没能力的私信dd~~~

文件东西放入了就可以正常执行代码，快去试试吧！

注：本案例是根据网上代码进行了优化改动禁止网上传阅！！！

相关阅读:
【latex】参考文献bbl错误，Package inputenc Error,Misplaced alignment
客户心声｜腾讯云数据库助力国信证券反洗钱系统分布式改造
 RabbitMQ 消息队列学习 (四)
Vscode 设置clang-format
Yakit工具篇：子域名收集的配置和使用
 可视化学习：使用极坐标参数方程和SDF绘制有趣的图案
 SQL SERVER Inregration Services-OLE DB、Oracle和ODBC操作
 多元共进｜2023 Google 开发者大会主旨演讲亮点回顾
 MySQL面试八股文（2022最新整理）
jvm参数顺序问题
原文地址：https://blog.csdn.net/qq_45690359/article/details/127169410