养了个羊（简易版）

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

圈粉操作一波~

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

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

代码块

接着这一步复制粘贴 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~~~

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

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

相关阅读:
SpringMVC框架的详细解读
 欧几里得聚类提取
 Linux提权的几种常用方法
 Unity 2021 LTS / Unity 2022 LTS New Shader Graph Node 参考样本
 Node.js 中解析 HTML 的方法介绍
 【NSFileManager常用方法之判断 Objective-C语言】
Cocos Creator 3.x 热更新
 〖Python 数据库开发实战 - Redis篇④〗- Redis命令行客户端与图形客户端的简单使用
 全国计算机等级考试三级数据库技术
 python计算脚长青少年电子学会等级考试中小学生python编程等级考试一级真题答案解析2022年9月
原文地址：https://blog.csdn.net/qq_45690359/article/details/127169410