js实现一个树丛中找动物小游戏效果代码

代码语言:html

所属分类:游戏

代码描述:js实现一个树丛中找动物小游戏效果代码

代码标签: 丛中 动物 小游戏 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开


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

<head>

  <meta charset="UTF-8">

  
<style>
html {
	background:MediumSeaGreen;
	background-size: 20% auto;
	overflow: hidden;
	font-family: sans-serif;
	font-size: 36px;
	line-height: 100%;
	text-align: center;
}

p {
	margin-top: 0;
}
p .bird {
	cursor: auto;
}
p span {
	font-weight: 900;
}

.grass {
	width: 1vw;
	height: 100%;
	position: absolute;
	bottom: 0;
	background-color: green;
	background: linear-gradient(to bottom, forestgreen 75%, olive);
	background-size: 200% auto;
	box-shadow: 0 0 10px black;
	border-radius: 100% 100% 0 0;
	transform-origin: center bottom;
	pointer-events: none;
	animation: sway 5s linear infinite;
}
@keyframes sway {
	25% {
		transform: skewX(3deg);
	}
	75% {
		transform: skewX(-3deg);
	}
}

.bird {
	position: absolute;
	font-size: 36px;
	line-height: 100%;
	cursor: pointer;
	user-select: none;
}
.bird:hover {
	z-index: 2 !important;
}
</style>


</head>

<body >
  <!-- 🦉🦚🦜🦢🦩🐦🐧🦅🦆 -->
<p>Can you find <span>9</span> birds?<br></p>
   
  
      <script>
var grass = 100;
var colors = ["green", "darkgreen", "olive"];
var birds = ["🦉", "🦚", "🦜", "🦢", "🦩", "🐦", "🐧", "🦅", "🦆"];
var win = [
	"What a keen eye you have!",
	"Maybe you should go birding?",
	"Clapping. Lots of clapping!",
	"You have won the great prize of our kudos!"
];
function addGrass() {
	for (var i = 0; i < grass; i++) {
		var t = .........完整代码请登录后点击上方下载按钮下载查看

网友评论0