基于HTML/CSS/JS的爱吹风的狮子小游戏

最新推荐文章于 2022-09-23 16:13:46 发布

海拥✘

最新推荐文章于 2022-09-23 16:13:46 发布

阅读量4.9k

点赞数 6

分类专栏：游戏前端练习demo 文章标签： html css javascript

本文链接：https://blog.csdn.net/qq_44273429/article/details/113792583

版权

游戏同时被 2 个专栏收录

33 篇文章 7 订阅

订阅专栏

前端练习demo

22 篇文章 41 订阅

订阅专栏

爱吹风的狮子

一个基于HTML，CSS，Javascript的爱吹风的狮子小游戏，文章末尾给出了小游戏的源码，关注公众号【海拥】回复【爱吹风的狮子】可免费获取。

演示效果

在这里插入图片描述

演示地址

https://wanghao221.github.io/game/Lion-Game.html

（打不开的话刷新一下试试）

截图

在这里插入图片描述

代码展示

HTML

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Wanghao | Chill The Lion</title>
		<link rel="icon" type="image/x-icon" href="../favicon.ico"/>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="google-site-verification" content="i3bVXD3ywVilJt3b0Denbr2n41les3p8ciIldduw4X0" />
		
		<div id="world"></div>
		<div id="instructions">按住并拖动以产生风<br/><span class="lightInstructions">小狮子一定会很舒服</span></div>
		
		<div id="credits">
			<div class="made-with-love">
			  Made with
			  <i>♥</i> by
			  <a target="_blank" href="https://blog.csdn.net/qq_44273429/">海拥CSDN博客</a>
			</div>
		  <p>Copyright © <a href="https://wanghao221.github.io/">Wang Hao</a></p>
		</div>
		</head>
	<body>
	</body>
</html>

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans:800);
		#world {
		  background: #ebe5e7;
		  position:absolute;
		  width:100%;
		  height:100%;
		  overflow:hidden;
		}
		#instructions{
		  position:absolute;
		  width:100%;
		  top:50%;
		  margin: auto;
		  margin-top:120px;
		  font-family:'Open Sans', sans-serif;
		  color:#653f4c;
		  font-size:.9em;
		  text-transform: uppercase;
		  text-align : center;
		  user-select: none;
		}
		.lightInstructions {
		  color:#993f4c;
		  font-size:.8em;
		}
		
		#credits{
		  position:absolute;
		  width:100%;
		  margin: auto;
		  bottom:0;
		  margin-bottom:20px;
		  font-family:'Open Sans', sans-serif;
		  color:#b297a2;
		  font-size:0.7em;
		  text-transform: uppercase;
		  text-align : center;
		}
		#credits a {
		  color:#b297a2;
		}
		
		#credits .society6 {
		  color:#993f4c;
		}