基于 HTML5/CSS/JS 响应式圣诞老人过悬崖小游戏

作者：海拥(haiyong.site)

2021 年 12 月 20 日
本文字数：803 字
阅读完需：约 3 分钟

基于 HTML5/CSS/JS 响应式圣诞老人过悬崖小游戏，拉杆子跨越悬崖小游戏，拉杆子过关小游戏非常火爆，并且非常好玩受欢迎，游戏玩法:按住鼠标伸出一根棍子。

预览地址: http://haiyong.site/santa-claus

游戏截图：

Html 代码：

<!DOCTYPE html><html lang="en" ><head><meta charset="UTF-8"><title>海拥 | 圣诞老人过桥</title><link rel="icon" type="image/x-icon" href="http://haiyong.site/wp-content/uploads/2021/07/cropped-59255587-1-192x192.jpg"/><link rel="stylesheet" href="https://demo.mycodes.net/html5/guoxuanya/css/style.css"><!-- CSS FILES --><link rel="stylesheet" href="css/style.css">
</head><body>
<script  src="js/script.js"></script><div style="text-align:center;"><p>更多源码：<a href="http://haiyong.site/moyu" target="_blank">海拥</a></p></div></body></html>

复制代码

CSS 代码：

html,body {  height: 100%;  margin: 0;}
body {  font-family: Arial, Verdana, sans-serif;  cursor: grab;  display: flex;  justify-content: center;  align-items: center;  color: white;  background-color: #1e1a33;}
div,i {  user-select: none;  pointer-events: none;}
i {  position: fixed;  color: white;  top: -10%;  z-index: 9999;  animation-name: snowflakes-fall, snowflakes-shake;  animation-duration: 10s, 3s;  animation-timing-function: linear, ease-in-out;  animation-iteration-count: infinite, infinite;  animation-play-state: running, running;}
@keyframes snowflakes-fall {  0% {    top: -10%;  }  100% {    top: 100%;  }}
@keyframes snowflakes-shake {  0% {    transform: translateX(0px);  }  50% {    transform: translateX(80px);  }  100% {    transform: translateX(0px);  }}

复制代码

发布于: 1 小时前阅读数: 5

原文链接:【http://xie.infoq.cn/article/05983750e0ee01422f8771ca4】。

海拥(haiyong.site)

关注

公众号：海拥 2021.11.29 加入

【个人网站】haiyong.site 【软件技能】Java，Python，JS 【兴趣爱好】学习使我快乐，编程令我永生【个人称号】HDZ核心组成员,CSDN原力作者

发布

暂无评论

创作场景

基于 HTML5/CSS/JS 响应式圣诞老人过悬崖小游戏

海拥(haiyong.site)

评论