h5春节小游戏制作

最新推荐文章于 2022-01-12 14:39:34 发布
VIP文章 最新推荐文章于 2022-01-12 14:39:34 发布
阅读量303 收藏 2
点赞数
分类专栏： 游戏开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46399258/article/details/115674246
版权

h5春节小游戏制作

话不多说，直接上代码


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="viewport"
      content="width=320,maximum-scale=1.3,user-scalable=no"
    />
    <title>Document</title>
    <link rel="stylesheet" href="./css/siper.min.css" />
    <link rel="stylesheet" href="./css/reset.min.css" />
    <link rel="stylesheet" href="./css/public.min.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./css/animate.min.css" />
    <script
      type="text/javascript"
      src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"
    ></script>
    <script src="./js/font-size.min.js"></script>
    <style>
      body {
    
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
      }
      .swiper-container {
    
        width: 100%;
        height: 100%;
      }
      .swiper-wrapper {
    
        width: 4rem;
        height: 6rem !important;
      }
      .swiper-slide {
    
        text-align: center;
        font-size: 18px;
        width: 4rem;
        height: 1rem;
        line-height: 100px;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        background-size: 100%;
      }
      .active {
    
        background: url("./img/congratulatory_kuang.png") no-repeat center;
        background-size: 100%, 100%;
      }
      .active span {
    
        color: #ca0000 !important;
      }
      .swiper-slide {
    
        height: 1rem !important;
      }
      .swiper-slide span {
    
        font-size: 0.6rem;
        font-family: "方正榜书行简体";
        color: #ffe291;
        height: 42px;
        line-height: 42px;
      }
      .refresh {
    
        position: absolute;
        line-height: 100px;
        bottom: 100%;
        text-align: center;
        width: 100%;
      }
      .loadmore {
    
        position: absolute;
        line-height: 20px;
        top: 100%;
        text-align: center;
        width: 100%;
      }
      .swiper-scrollbar-drag {
    
        height: 2rem !important;
      }
      .congratulatory .next {
    
        top: 9.3rem;
        left: 4rem;
      }
      .congratulatory .prev {
    
        top: 9.3rem;
        right: 2rem;
      }
      .congratulatory .select_niu {
    
        width: 4rem;
        top: 2.5rem;
        left: 1.7rem;
      }
      .congratulatory .swiper-slide span {
    
        width: 60%;
      }
      .congratulatory .swiper-slide:nth-child(1) span {
    
        background: url("./img/congratulatory1.png") no-repeat center;
        background-size: 100%;
      }
      .congratulatory .swiper-slide:nth-child(1).active span {
    
        background: url("./img/congratulatory11.png") no-repeat center;
        background-size: 100%;
      }
      .congratulatory .swiper-slide:nth-child(2) span {
    
        background: url("./img/congratulatory2.png") no-repeat center;
        background-size: 100%;
      }
      .congratulatory .swiper-slide:nth-child(2).active span {
    
        background: url("./img/congratulatory22.png") no-repeat center;
        background-size: 100%;
      }
      .congratulatory .swiper-slide:nth-child(3) span {
    
        background: url("./img/congratulatory3.png") no-repeat center;
        background-size: 100%;
      }
      .congratulatory .swiper-slide:nth-child(3).active span {
    
        background: url("./img/congratulatory33.png") no-repeat center;
        background-size: 100%;
      }
      .congratulatory .swiper-slide:nth-child(4) span {
    
        background: url("./img/congratulatory4.png") no-repeat center;
        background-size: 100%;
      }
      .congratulatory .swiper-slide:nth-child(4).active span {
    
        background: url("./img/congratulatory44.png") no-repeat center;
        background-size: 100%;
      }
      .congratulatory .swiper-slide:nth-child(5) span {
    
        background: url("./img/congratulatory5.png") no-repeat center;
        background-size: 100%;
      }
      .congratulatory .swiper-slide:nth-child(5).active span {
    
        background: url("./img/congratulatory55.png") no-repeat center;
        background-size: 100%;
      }
      .congratulatory .swiper-slide:nth-child(6) span {
    
        background: url("./img/congratulatory6.png") no-repeat center;
        background-size: 100%;
      }
      .congratulatory .swiper-slide:nth-child(6).active span {
    
        background: url("./img/congratulatory66.png") no-repeat center;
        background-size: 100%;
      }
      .congratulatory .swiper-slide:nth-child(7) span {
    
        background: url("./img/congratulatory7.png") no-repeat center;
        background-size: 100%;
      }
      .congratulatory .swiper-slide:nth-child(7).active span {
    
        background: url("./img/congratulatory77.png") no-repeat center;
        background-size: 100%;
      }
      .congratulatory .swiper-slide:nth-child(8) span {
    
        background: url("./img/congratulatory8.png") no-repeat center;
        background-size: 100%;
      }
      .congratulatory .swiper-slide:nth-child(8).active span {
    
        background: url("./img/congratulatory88.png") no-repeat center;
        background-size: 100%;
      }
      .congratulatory .swiper-slide:nth-child(9) span {
    
        background: url("./img/congratulatory9.png") no-repeat center;
        background-size: 100%;
      }
      .congratulatory .swiper-slide:nth-child(9).active span {
    
        background: url("./img/congratulatory99.png") no-repeat center;
        background-size: 100%;
      }
    </style>
  </head>
  <body class="o-hidden" style="height: 100vh">
    <div class="w750 o-hidden">
      <div class="w750 p-r bg index">
        <div class="p-a text_time p-r">
          <div class="xwf_2021 animated fadeInRight fast"></div>
          <div
            class="xwf_2022 animated fadeInRight fast"
            style="animation-delay: 0.5s"
          ></div>
          <div
            class="xwf_2023 animated fadeInRight fast"
            style="animation-delay: 1s"
          ></div>
          <div
            class="xwf_2024 animated fadeInRight fast"
            style="animation-delay: 1.5s"
          ></div>
          <div
            class="xwf_2025 p-a animated fadeInRight fast"
            style="animation-delay: 2s"
          >
            <img src="./img/jinniu.png" alt="" />
          </div>
        </div>
        <div class="p-a niu">
          <img src="./img/niu.png" alt="" />
        </div>
        <div class="p-a text animated fadeInLeft fast delay-1s"></div>
      </div>

      <div class="w750 p-r box hidden">
        <div class="select">
          <!-- 牛 -->
          <div class="select_niu p-a">
            <img class="hidden" src="./img/one_show.png" alt="" />
            <img class="hidden" src="./img/two_show.png" alt="" />
            <img class="visib" src="./img/three_show.png" alt="" />
            <img class="hidden" src="./img/four_show.png" alt="" />
            <img class="hidden" src="./img/five_show.png" alt="" />
          </div>
          <!-- 确认选择 -->
          <div class="confirm p-a" style="top: 6.7rem; left: 2.5rem">
            <span>确认选择</span>
          </div>
          <!-- 切换形象 -->
          <div class="switch p-a d-flex">
            <div class="animated tada fast delay-1s">点击牛</div>
            <div class="animated tada fast delay-2s">切换</div>
            <div class="animated tada fast delay-3s">形象</div>
          </div>
          <!-- 云 -->
          <div class="xwf_cloud p-r">
            <div class="p-a left"></div>
            <div class="p-a right"></div>
          </div>
          <!-- 转盘 -->
          <div class="turntable p-r" style="top: 1rem">
            <div class="p-a one"><img src="./img/one.png" alt="" /></div>
            <div class="p-a two"><img src="./img/two.png" alt="" /></div>
            <div class="p-a three"><img src="./img/three.png" alt="" /></div>
            <div class="p-a four"><img src="./img/four.png" alt="" /></div>
            <div class="p-a five"><img src="./img/five.png" alt="" /></div>
          </div>
          <!-- 指针 -->
          <div class="pointer p-a"></div>
        </div>
      </div>

      <div class="congratulatory w750 p-r hidden">
        <div class="select">
          <!-- 牛 -->
          <div class="select_niu p-a o-hidden">
            <!-- Swiper -->
            <div class="swiper-container">
              <div class="swiper-wrapper">
                <div class="swiper-slide active"><span></span></div>
                <div class="swiper-slide"><span></span></div>
                <div class="swiper-slide"><span></span></div>
                <div class="swiper-slide"><span></span></div>
                <div class="swiper-slide"><span></span></div>
                <div class="swiper-slide"><span></span></div>
                <div class="swiper-slide"><span></span></div>
                <div class="swiper-slide"><span></span></div>
                <div class="swiper-slide"><span></span></div>
              </div>
            </div>
          </div>
          <!-- 上一步 预览海报 -->
          <div>
            <div class="confirm p-a prev">
              <span>上一步</span>
            </div>
            <div class="confirm p-a next">
              <span>预览海报</span>
            </div>
          </div>
          <!-- 云 -->
          <div class="xwf_cloud p-r">
            <div class="p-a left"></div>
            <div class="p-a right"></div>
          </div>
        </div>
      </div>

      <div class="w750 congratulatory1 hidden">
        <div class="select p-r">
          <div class="p-r">
            <img
              src="./img/one_show.png"
              alt=""
              class="p-a"
              style="width: 3rem; height: 4rem; top: 2.5rem; left: 2.3rem"
            />
            <div class="select_niu p-a p-r">
              <img class="p-a hidden" src="./img/niu_bg.png" />
              <img class="p-a hidden" src="./img/niu_bg.png" />
              <img class="p-a hidden&
最低0.47元/天 解锁文章
X W F
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
新年联欢会游戏.doc
09-19
新年联欢会游戏.doc
HTML新年趣味小程序,推荐10款春节必备小程序，让你欢欢喜喜过新年
weixin_42396180的博客
06-18 1432
“冬尽今宵促，年开明日长“除夕在我们的期盼中已经到来，相信不少小伙伴在已经开始心心念念晚上的团圆饭以及熬夜守岁啦。除了传统的迎新春习俗外，还有什么新鲜玩法呢？猿仔今天就推荐10款小程序，吃喝玩乐发红包发祝福样样都不能缺，让你开开心心过大年！1、「狗年祝福语」新春佳节拜年祝福语免不了，「狗年祝福语」这款小程序内置了不少狗年祝福语，让你不需要再去百度搜索，并且可定制对方称呼，直接转发给亲戚的微信。不过...
推荐10款超级有趣的HTML5小游戏
tyygming的专栏
04-04 667
HTML5的发展速度比任何人的都想像都要更快。更加强大有效的和专业的解决方案已经被开发......甚至在游戏世界中！这里跟大家分享有10款超级趣味的HTML5游戏，希望大家能够喜欢！ Kern Type, the kerning game 帮助你学习kern游戏的在线小游戏 Z-Type impactJS开发的设计游戏 Cut the Rope 这个切绳子的游戏，大家肯定在ip...
新年Java小游戏之「年兽大作战」祝您笑口常开
热门推荐
q1472750149的博客
01-12 1万+
这个游戏加上编写文章，上班摸鱼时间加上回家的空闲时间，大概花了三天多。 java写这玩应真的很痛苦，各种状态位，各种图片和逻辑判断，脑袋都快炸了。而且肯定没有前端的精致，效果一般，偶尔会有卡顿，各位就图一乐，随便捧捧场啊。过程大于结果。 源码gitee地址：gitee.com/wei_rong_xi… 一、玩法介绍 进入初始界面，会看到一只大年兽位于正中间，然后是一直小老虎，也就是我们的玩家，点击【空格】即可开始游戏： 敲击空格，将进入游戏。从上至下分别是： 年兽的血量【NIAN'S HP
html5制作端午节游戏,零代码怎么制作一个端午节H5小游戏页面？
weixin_34987818的博客
06-10 553
不光端午节，任何小游戏类型都可以轻松搞定！六月已经过了三分之一，“粽子节”也马上要到了，每当这时候，又到新媒体运营人和设计师头秃的时刻，在传统的节日里，如何把传统的节日使用互联网元素表现，让更多的年轻人能够参与进来，H5这个形式或许是个不错的选择，而小游戏又容易让用户参与与分享。在端午节做互动小游戏营销制作，其实有一个万能的制作思路，不光是在端午节，更是可几乎以应用在所有的节日上面上的形式。今天我...
430个h5小游戏源码demo
09-13
430个h5小游戏源码demo
30多款h5小游戏
03-27
历史上最好玩的微信公众号小游戏，都在这里了，希望对你有帮助
H5小游戏源码 愚公移山.zip
10-15
游戏源码 欢迎下载
H5小游戏源码 十滴水.zip
10-14
游戏源码 欢迎下载
H5小游戏源码 一笔画.zip
10-15
游戏源码 欢迎下载
node-v9.6.0-x86.msi
04-29
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
Python基于机器学习的分布式系统故障诊断系统源代码，分布式系统的故障数据进行分析，设计故障诊断模型，高效地分析并识别故障类别
04-29
基于技术手段（包括但不限于机器学习、深度学习等技术）对分布式系统的故障数据进行分析，设计故障诊断模型，高效地分析并识别故障类别，实现分布式系统故障运维的智能化，快速恢复故障的同时大大降低分布式系统运维工作的难度，减少运维对人力资源的消耗。在分布式系统中某个节点发生故障时，故障会沿着分布式系统的拓扑结构进行传播，造成自身节点及其邻接节点相关的KPI指标和发生大量日志异常
JavaScript前端开发的核心语言前端开发的核心语言
最新发布
04-29
javascript 当今互联网时代，JavaScript已经成为了前端开发的核心语言它是一种高级程序设计语言，通常用于网页的交互和动态效果的实现。JavaScript的灵活性以及广泛的使用使得它变得异常重要，能够为用户带来更好的用户体验。 JavaScript的特点之一是它的轻量级，它可以在网页中运行无需单独的编译或下载。这意味着网页可以更快地加载并且用户无需安装额外的软件才能运行网页上的JavaScript代码。此外，与HTML和CSS紧密结合，可以直接在HTML文档中嵌入，使得网页的开发变得非常便捷。 JavaScript具有动态性，它可以在浏览器中实时修改页面内容和样。它可以通过操作DOM（文档对象模型来动态地修改网页的结构和布局，并且可以根据用户的行为实时地响应各种事件，如点击、标悬停、滚动等。这使得开发者可以轻松地为网页添加交互性和动态效果，提供更好的用户体验。 JavaScript也是一种面向对象的语言。它支持对象、类、继承、多态等面向对象编程的概念，使得代码结构更加清晰和可维护。开发者可以创建自定义的对象和方法，对功能进行封装和复用，提高代码的可读性和可维护性。
四则运算自动生成程序安装包
04-29
四则运算自动生成程序安装包
基于Linux的私有文件服务器(网盘).zip
04-29
基于Linux的私有文件服务器(网盘)
源代码-access 管理 系统 API 文件.zip
04-29
源代码-access 管理 系统 API 文件.zip
海康机器人智能读码器工业协议操作手册V1.0.2.pdf
04-29
海康机器人智能读码器工业协议操作手册V1.0.2.pdf
256ssm-mysql-jsp 在线捐赠系统.zip（可运行源码+数据库文件+文档）
04-29
根据需求，确定系统采用JSP技术，JAVA作为编程语言，MySQL作为数据库。整个系统要操作方便、易于维护、灵活实用。主要实现了系统用户管理、注册用户管理、信息发布管理、医疗物品分类管理、项目信息管理、捐赠项目管理、志愿者申请管理、个人求助管理、个人捐赠统计、系统管理等功能。 前台用户模块包括： 1. 首页：网站打开的第一个页面，显示网站的最新信息。 2. 用户注册/登录、3. 新闻资讯、4. 暖心故事、5. 我要求助、6. 我要捐赠、7. 我们的项目、8. 志愿者中心：实现志愿者中心的列表显示、9. 系统简介、10. 在线留言、11. 用户后台 后台管理员模块包括： 1. 系统用户管理、2. 注册用户管理、3. 信息发布管理、4. 医疗物品分类管理、5. 项目信息管理、6. 捐赠项目管理、7. 志愿者申请管理、8. 个人求助管理：管理员可以设置个人求助审核状态，可以删除个人求助审核信息。 9. 个人捐赠统计：管理员可以查看个人捐赠统计信息。 10. 系统管理：管理员可以对留言板信息进行查看、回复或删除 关键词：医药捐赠系统；JSP;MySQL
h5 海外小游戏 源码
07-01
H5海外小游戏源码具有一些优势，例如开发周期短、制作成本低、跨平台适配性好等。因此，越来越多的开发者选择使用H5技术开发海外小游戏。 H5海外小游戏源码包括了游戏的各个方面的代码，例如游戏的界面设计、游戏...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

X W F

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值