当前位置：首页 >个人收藏

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

日期： 2021-02-12 分类：个人收藏 569次阅读

爱吹风的狮子

一个基于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;
		}

JS代码过长就不一一展示出来了

源码获取

1.CSDN积分下载地址：

https://download.csdn.net/download/qq_44273429/15210035

2.关注作者公众号【海拥】回复【爱吹风的狮子】免费获取

保存或者长按识别
在这里插入图片描述

后面我还会持续更新类似免费好玩的H5小游戏、Java小游戏、好玩、实用的项目和软件等等

Young87