js实现牧羊犬赶羊群入圈小游戏效果代码-html代码-BFW代码库

代码语言：html
所属分类：游戏
代码描述：js实现牧羊犬赶羊群入圈小游戏效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

<style>
/*** CSS debug in progress ***/
body {
	margin: 0;
	padding: 0;
	background: radial-gradient(
		rgb(144 212 147) 0%,
		rgb(89 181 92) 35%,
		rgb(65 171 69) 50%,
		rgb(30 125 34) 100%
	);
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100vw;
	height: 100vh;
	font-family: Arial, Helvetica, serif;
}

.field {
	margin: 0 auto;
	height: 100vh;
	width: 100vw;
	position: relative;
}

.sheep-zone {
	padding: 5vmin;
	position: absolute;
	border-radius: 100%;
	background: #008e0630;
	transition: 0.5s;
	box-shadow: 0 0 15px 0 #008e0630, 0 0 0 0.25vmin #ffffff20 inset;
}

.sheep {
	width: 5vmin;
	height: 6vmin;
	border: 1px #f3f3f3 solid;
	right: 500px;
	background: #fff;
	transition: 0.5s;
	border-radius: 45%;
	filter: drop-shadow(1px 1px 5px #00000080);
	animation: sheep-eating 4s 0s infinite alternate;
}

.sheep:before {
	content: "";
	background: radial-gradient(
			circle at 1.95vmin 1.5vmin,
			#fff 0.5vmin,
			transparent 0.65vmin
		),
		radial-gradient(circle at 4.5vmin 1.5vmin, #fff 0.55vmin, transparent 0.7vmin),
		radial-gradient(
			circle at 1.65vmin 2.15vmin,
			#fff 0.65vmin,
			transparent 0.8vmin
		),
		radial-gradient(
			circle at 1.15vmin 2.75vmin,
			#fff 0.5vmin,
			transparent 0.65vmin
		),
		radial-gradient(
			circle at 1.15vmin 3.35vmin,
			#fff 0.6vmin,
			transparent 0.75vmin
		),
		radial-gradient(
			circle at 1.05vmin 4.35vmin,
			#fff 0.65vmin,
			transparent 0.8vmin
		),
		radial-gradient(
			circle at 1.2vmin 5.35vmin,
			#fff 0.6vmin,
			transparent 0.75vmin
		),
		radial-gradient(
			circle at 1.5vmin 6.15vmin,
			#fff 0.55vmin,
			transparent 0.7vmin
		),
		radial-gradient(circle at 1.9vmin 6.8vmin, #fff 0.55vmin, transparent 0.7vmin),
		radial-gradient(
			circle at 2.5vmin 7.05vmin,
			#fff 0.4vmin,
			transparent 0.55vmin
		),
		radial-gradient(
			circle at 2.95vmin 7.15vmin,
			#fff 0.45vmin,
			transparent 0.6vmin
		),
		radial-gradient(
			circle at 3.65vmin 7.25vmin,
			#fff 0.25vmin,
			transparent 0.4vmin
		),
		radial-gradient(
			circle at 4.25vmin 7.2vmin,
			#fff 0.35vmin,
			transparent 0.5vmin
		),
		radial-gradient(
			circle at 4.85vmin 6.65vmin,
			#fff 0.55vmin,
			transparent 0.7vmin
		),
		radial-gradient(
			circle at 5.25vmin 6.15vmin,
			#fff 0.35vmin,
			transparent 0.5vmin
		),
		radial-gradient(
			circle at 5.25vmin 1.5vmin,
			#fff 0.45vmin,
			transparent 0.6vmin
		),
		radial-gradient(
			circle at 5.5vmin 2.35vmin,
			#fff 0.5vmin,
			transparent 0.65vmin
		),
		radial-gradient(
			circle at 6.05vmin 3.25vmin,
			#fff 0.45vmin,
			transparent 0.6vmin
		),
		radial-gradient(
			circle at 5.95vmin 4.05vmin,
			#fff 0.4vmin,
			transparent 0.55vmin
		),
		radial-gradient(
			circle at 5.75vmin 4.85vmin,
			#fff 0.5vmin,
			transparent 0.65vmin
		),
		radial-gradient(
			circle at 5.65vmin 5.75vmin,
			#fff 0.55vmin,
			transparent 0.7vmin
		);
	width: calc(5vmin + 2vmin);
	height: calc(6vmin + 2vmin);
	position: absolute;
	border-radius: 25%;
	margin-left: -1vmin;
	margin-top: -1vmin;
}

.sheep:after {
	content: "";
	background: radial-gradient(
			circle at 70% 65%,
			#333 0.2vmin,
			transparent 0.275vmin
		),
		radial-gradient(circle at 30% 65%, #333 0.2vmin, transparent 0.275vmin),
		#efe3d3;
	width: 2.35vmin;
	height: 2.75vmin;
	position: absolute;
	border-radius: 35% 35% 0 0;
	margin-left: 1.3vmin;
	margin-top: -2vmin;
	border-bottom: 1px dashed #fff;
	clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
}

.sheep-pen {
	position: absolute;
	background: radial-gradient(#d6bc97a3 50%, #59b55c 75%, #59b55c 80%);
	width: 45vmin;
	height: 45vmin;
	border-radius: 100%;
	left: calc(50% - 22.5vmin);
	top: calc(50% - 22.5vmin);
	border: 5vmin dotted #d6bc97a3;
	z-index: -1;
	filter: blur(5px);
	box-sizing: border-box;
}

@keyframes sheep-eating {
	0% {
		transform: rotate(0deg);
	}
	20% {
		transform: rotate(45deg);
	}
	40% {
		transform: rotate(45eg);
	}
	60% {
		transform: rotate(80deg);
	}
	80% {
		transform: rotate(80deg);
	}
	100% {
		transform: rotate(130deg);
	}
}

.sheep-zone:nth-child(2) {
	transform: rotate(-40deg);
}
.sheep-zone:nth-child(3) {
	transform: rotate(-70deg);
}
.sheep-zone:nth-child(4) {
	transform: rotate(-110deg);
}
.sheep-zone:nth-child(5) {
	transform: rotate(-150deg);
}
.sheep-zone:nth-child(6) {
	transform: rotate(-180deg);
}
.sheep-zone:nth-child(7) {
	transform: rotate(-210deg);
}
.sheep-zone:nth-child(8) {
	transform: rotate(-250deg);
}
.sheep-zone:nth-child(9) {
	transform: rotate(-290deg);
}

.sheep-zone:nth-child(2) .sheep {
	animation-duration: 5s;
}
.sheep-zone:nth-child(3) .sheep {
	animation-duration: 4.5s;
}
.sheep-zone:nth-child(4) .sheep {
	animation-duration: 3.5s;
}
.sheep-zone:nth-child(5) .sheep {
	animation-duration: 5.5s;
}
.sheep-zone:nth-child(6) .sheep {
	animation-duration: 6s;
}
.sheep-zone:nth-child(7) .sheep {
	animation-duration: 6.5s;
}
.sheep-zone:nth-child(8) .sheep {
	animation-duration: 7s;
}
.sheep-zone:nth-child(9) .sheep {
	animation-duration: 7.5s;
}

#element {
	background: red;
	position: absolute;
	top: 30vmin;
	left: 30vmin;
	width: 20vmin;
	height: 20vmin;
}

#dog {
	width: 3.5vmin;
	height: 7vmin;
	background-color: #8e5541;
	border-radius: 70% 70% 100% 100%;
	transition-duration: 500ms;
	transition-timing-function: ease-out;
	position: fixed;
	transform-origin: center center;
	margin-left: -2vmin;
	margin-top: -3.5vmin;
	filter: drop-shadow(0px 0px 10px #00000040);
	left: 65%;
	top: 75%;
}

#dog:before {
	content: "";
	width: calc(100% - 0.35vmin);
	height: calc(100% - 0.35vmin);
	position: absolute;
	border-radius: 70% 70% 100% 100%;
	margin-left: -0.175vmin;
	margin-top: -0.175vmin;
	border: 0.35vmin dotted #8e5541;
}

#dog:after {
	content: "";
	background: radial-gradient(
			circle at 70% 65%,
			#333 0.2vmin,
			transparent 0.275vmin
		),
		radial-gradient(circle at 30% 65%, #333 0.2vmin, transparent 0.275vmin),
		radial-gradient(circle at 50% 5%, #333 0.25vmin, transparent 0.35vmin),
		#8e5541;
	width: 2.35vmin;
	height: 2.75vmin;
	position: absolute;
	border-radius: 2vmin 2vmin 1.5vmin 1.5vmin;
	margin-left: 0.55vmin;
	margin-top: -2.5vmin;
	border-bottom: 0.35vmin dotted #ffffff;
	animation: pitching 1s 0s infinite alternate;
	transform-origin: center bottom;
	clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}

@keyframes pitching {
	0% {
		transform: rotate(-25deg);
	}
	50% {
		transform: rotate(25deg);
	}
	100% {
		transform: rotate(-25deg);
	}
}

#dog > div {
	position: absolute;
	width: 0.5vmin;
	height: 3vmin;
	background-color: #8e5541;
	left: calc(50% - 0.3vmin);
	top: 90%;
	border-radius: 0 0 100% 0;
	animation: tail 0.65s 0s infinite alternate;
	transform-origin: center top;
}

@keyframes tail {
	0% {
		transform: rotate(-45deg);
	}
	50% {
		transform: rotate(45deg);
	}
	100% {
		transform: rotate(-45deg);
	}
}

#dog.sit > div,
#dog.sit:after {
	animation: none;
}

#dog.left {
	transform: rotate(-90deg);
}
#dog.right {
	transform: rotate(90deg);
}
#dog.top {
	transform: rotate(0deg);
}
#dog.bottom {
	transform: rotate(180deg);
}

#dog.top.left {
	transform: rotate(-45deg);
}
#dog.top.right {
	transform: rotate(45deg);
}
#dog.bottom.left {
	transform: rotate(-135deg);
}
#dog.bottom.right {
	transform: rotate(135deg);
}

/*** sheep pen ***/
.sheep-pen > span {
	background: red;
	height: 16vmin;
	width: 1vmin;
	position: absolute;
	top: 5vmin;
	transform: rotate(12deg);
	opacity: 0.5;
}

.sheep-pen > span:nth-child(2) {
	background: #673ab7;
	height: 16vmin;
	width: 1vmin;
	position: absolute;
	top: 19vmin;
	transform: rotate(-41deg);
	left: 4vmin;
}

.sheep-pen > span:nth-child(3) {
	background: #2196f3;
	height: 16vmin;
	width: 1vmin;
	position: absolute;
	top: 24.5vmin;
	transform: rotate(-93deg);
	left: 18vmin;
}

.sheep-pen > span:nth-child(4) {
	background: #ffeb3b;
	height: 16vmin;
	width: 1vmin;
	position: absolute;
	top: 18vmin;
	transform: rotate(37deg);
	left: 31vmin;
}

.sheep-pen > span:nth-child(5) {
	background: #ff5722;
	height: 16vmin;
	width: 1vmin;
	position: absolute;
	top: 4vmin;
	transform: rotate(-17deg);
	left: 33.5vmin;
}

.sheep-pen:before {
	content: "";
	border: 3vmin dotted #d6bc97a3;
	position: absolute;
	width: calc(100% + 0vmin);
	height: calc(100% + 0vmin);
	border-radius: 100%;
	left: -3vmin;
	top: -3vmin;
}
.sheep-pen:after {
	content: "";
	border: 4vmin dotted #d6bc97a3;
	border-radius: 100%;
	left: -5vmin;
	top: -5vmin;
	transform: rotate(45deg);
	filter: blur(5px);
}

.sheep-zone.scared {
	background: #ff000.........完整代码请登录后点击上方下载按钮下载查看