愛吹風的獅子
一個基于HTML，CSS，Javascript的愛吹風的獅子小游戲，文章末尾給出了小游戲的原始碼，關注公眾號啦啦啦好想biu點什么回復愛吹風的獅子可免費獲取，
演示效果
演示地址
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.關注作者公眾號啦啦啦好想biu點什么回復愛吹風的獅子免費獲取
保存或者長按識別
后面我還會持續更新類似免費好玩的H5小游戲、Java小游戲、好玩、實用的專案和軟體等等
相關內容
- 勇敢的兔子瘋狂奔跑小游戲
- 用HTML實作簡單的下雪特效
- youtube-dl安裝和使用方法
- 基于Hexo和GitHub搭建自己的博客
- java五子棋小游戲含免費原始碼
- 免費且好用的GIF錄制軟體LICEcap
最后，不要忘了?或📑支持一下哦
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/259255.html
標籤：其他
上一篇：Vue框架——屬性系結和樣式系結