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

海拥✘

已于 2022-04-30 16:37:36 修改

阅读量5.4k

点赞数 11

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

于 2021-12-24 16:58:54 首次发布

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

版权

游戏同时被 3 个专栏收录

33 篇文章 7 订阅

订阅专栏

好玩

32 篇文章 15 订阅

订阅专栏

前端练习demo

22 篇文章 41 订阅

订阅专栏

💂 个人网站:【海拥】【摸鱼小游戏】
🤟 风趣幽默的人工智能学习网站：👉人工智能
💅 想寻找共同学习交流的小伙伴，请点击【全栈技术交流群】
💬 便宜且实用的计算机相关书籍：👉进来逛逛

直接跳到末尾 去评论区领书

基于HTML5+CSS+JS的响应式圣诞老人过悬崖小游戏，拉杆子跨越悬崖游戏，拉杆子过关小游戏非常火爆，好玩受欢迎

游戏玩法：按住鼠标伸出一根棍子，长度适合即可继续向前，否则就会掉下悬崖。

在线地址: https://haiyong.site/moyu/santa-claus.html

游戏截图：

PC端
在这里插入图片描述
手机端

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">
<meta name="keywords" content="游戏动画网站" />
<meta name="description" content="游戏动画网站，基于HTML5/CSS/JS响应式" /> 
<meta name="author" content="海拥(https://blog.csdn.net/qq_44273429/)" />
<meta name="copyright" content="海拥(https://blog.csdn.net/qq_44273429/)" />
<!-- 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="https://blog.csdn.net/qq_44273429/" target="_blank">海拥CSDN博客</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);
  }
}

JS代码过长就不一一展示了，需要完整源码有如下两种方式：

1.CSDN下载地址：https://download.csdn.net/download/qq_44273429/14156656
2.关注公众号【海拥】回复【圣诞老人】

🥇 评论区抽粉丝送书啦

💌 欢迎大家在评论区提出意见和建议! (抽三位幸运儿送书，实物图如下)💌

在这里插入图片描述

《Vue.js框架与Web前端开发从入门到精通》

【内容简介】

本书从Vue.js框架技术的基础概念出发，逐步深入Vue.js进阶实战，并在最后配合一个网站项目和一个后台系统开发实战案例，重点介绍了使用Vue.js+axios+ElementUI+wangEditor进行前端开发和使用组件进行Vue单页面网页复用，让读者不但可以系统地学习Vue.js前端开发框架的相关知识，而且还能对业务逻辑的分析思路、实际应用开发有更为深入的理解。
　　本书语言平实，用词诙谐，案例丰富，实用性强，特别适合刚入社会的职场新人、Vue.js框架的初级读者和进阶读者阅读，也适合希望从后台开发转型做前端的程序员等其他编程爱好者阅读。另外，本书也适合作为相关培训机构的教材使用。

有不想靠抽，想自己买的同学可以参考下面的链接

京东自营购买链接：

《Vue.js框架与Web前端开发从入门到精通》- 京东图书

当当自营购买链接：

《Vue.js框架与Web前端开发从入门到精通》- 当当图书

🌊 面试题库：Java、Python、前端核心知识点大全和面试真题资料
🌊 办公用品：精品PPT模板几千套，简历模板一千多套
🌊 学习资料：2300套PHP建站源码，微信小程序入门资料

如果中奖了联系不上则视为放弃，可以从下方公众号里找到作者的联系方式，每周都会送6~9本书，后面送书力度还会加大，一年送几百上千本不是问题。

公众号【海拥】回复【圣诞老人】可获取本篇文章源码，回复【资源】可获取上面的资料👇🏻👇🏻👇🏻