h5春节小游戏制作
2021/4/13 18:26:22
本文主要是介绍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" src="./img/niu_bg.png" />
<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" src="./img/niu_bg.png" />
<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" src="./img/niu_bg.png" />
<img class="p-a hidden" src="./img/niu_bg.png" />
</div>
</div>
<!-- 上一步下一步 -->
<div>
<div class="confirm p-a prev">
<span>上一步</span>
</div>
<div class="confirm p-a next">
<span>下一步</span>
</div>
</div>
<!-- 颜色 -->
<div class="select_color p-a d-flex flex-wrap" style="width: 6rem">
<div class="div div1 mb10 blur">
<div
style="
background-color: #30e1e3;
transform: translate(0.1rem, 0.11rem);
"
></div>
</div>
<div class="div div2 cyan">
<div
style="
background-color: #b9d9b2;
transform: translate(0.1rem, 0.11rem);
"
></div>
</div>
<div class="div div3 green">
<div
style="
background-color: #1eb192;
transform: translate(0.1rem, 0.11rem);
"
></div>
</div>
<div class="div div4 orange">
<div
style="
background-color: #ff8e32;
transform: translate(0.1rem, 0.11rem);
"
></div>
</div>
<div class="div div5 violet">
<div
style="
background-color: #5c5d9d;
transform: translate(0.1rem, 0.11rem);
"
></div>
</div>
<div class="div div6 yellow">
<div
style="
background-color: #f0e30e;
transform: translate(0.1rem, 0.11rem);
"
></div>
</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="congratulatory2 w750 hidden">
<div class="select p-r">
<!-- 牛 -->
<div class="select_niu p-a">
<img src="./img/two_show.png" alt="" />
</div>
<!-- 上一步下一步 -->
<div>
<div class="confirm p-a prev">
<span>上一步</span>
</div>
<div class="confirm p-a next">
<span>下一步</span>
</div>
</div>
<!-- 颜色 -->
<div class="select_color p-a d-flex">
<div class="div div1">
<div
style="
background-color: #4875cf;
transform: translate(0.1rem, 0.11rem);
"
></div>
</div>
<div class="div div2">
<div
style="
background-color: #f4f4f4;
transform: translate(0.1rem, 0.11rem);
"
></div>
</div>
<div class="div div3">
<div
style="
background-color: #fdf1b3;
transform: translate(0.1rem, 0.11rem);
"
></div>
</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="congratulatory3 w750 p-r hidden">
<div class="select">
<!-- 牛 -->
<div class="select_niu p-a">
<img src="./img/three_show.png" alt="" />
</div>
<!-- 上一步下一步 -->
<div>
<div class="confirm p-a prev">
<span>上一步</span>
</div>
<div class="confirm p-a next">
<span>下一步</span>
</div>
</div>
<!-- 颜色 -->
<div class="select_color p-a d-flex">
<div class="div div1">
<div
style="
background-color: #4875cf;
transform: translate(0.1rem, 0.11rem);
"
></div>
</div>
<div class="div div2">
<div
style="
background-color: #f4f4f4;
transform: translate(0.1rem, 0.11rem);
"
></div>
</div>
<div class="div div3">
<div
style="
background-color: #fdf1b3;
transform: translate(0.1rem, 0.11rem);
"
></div>
</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="congratulatory4 w750 hidden">
<div class="select p-r">
<!-- 牛 -->
<div class="p-r">
<img src="./img/four_show.png" alt="" class="p-a" />
<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" src="./img/niu_bg.png" />
<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" src="./img/niu_bg.png" />
<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" src="./img/niu_bg.png" />
<img class="p-a hidden" src="./img/niu_bg.png" />
</div>
</div>
<!-- 上一步下一步 -->
<div>
<div class="confirm p-a prev">
<span>上一步</span>
</div>
<div class="confirm p-a next">
<span>下一步</span>
</div>
</div>
<!-- 颜色 -->
<div class="select_color p-a d-flex flex-wrap" style="width: 6rem">
<div class="div div1 mb10 blur">
<div
style="
background-color: #433ff4;
transform: translate(0.1rem, 0.11rem);
"
></div>
</div>
<div class="div div2 green">
<div
style="
background-color: #6cc049;
transform: translate(0.1rem, 0.11rem);
"
></div>
</div>
<div class="div div3 orange">
<div
style="
background-color: #ff6a00;
transform: translate(0.1rem, 0.11rem);
"
></div>
</div>
<div class="div div4 pink">
<div
style="
background-color: #e74582;
transform: translate(0.1rem, 0.11rem);
"
></div>
</div>
<div class="div div5 red">
<div
style="
background-color: #e2231a;
transform: translate(0.1rem, 0.11rem);
"
></div>
</div>
<div class="div div6 violet">
<div
style="
background-color: #aa0adf;
transform: translate(0.1rem, 0.11rem);
"
></div>
</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="congratulatory5 w750 p-r hidden">
<div class="select">
<!-- 牛 -->
<div class="select_niu p-a">
<img src="./img/five_show.png" alt="" />
</div>
<!-- 上一步下一步 -->
<div>
<div class="confirm p-a prev">
<span>上一步</span>
</div>
<div class="confirm p-a next">
<span>下一步</span>
</div>
</div>
<!-- 颜色 -->
<div class="select_color p-a d-flex">
<div class="div div1">
<div
style="
background-color: #4875cf;
transform: translate(0.1rem, 0.11rem);
"
></div>
</div>
<div class="div div2">
<div
style="
background-color: #f4f4f4;
transform: translate(0.1rem, 0.11rem);
"
></div>
</div>
<div class="div div3">
<div
style="
background-color: #fdf1b3;
transform: translate(0.1rem, 0.11rem);
"
></div>
</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="html2Image p-f"
style="
background-color: rgba(0, 0, 0, 0.5);
z-index: 13;
width: 100%;
height: 100%;
"
>
<div style="margin: 1.3rem 0 0 0.8rem">
<img id="html2Image" src="" alt="" style="width: 90%; height: 90%" />
</div>
<button
class="btn"
style="
position: absolute;
top: 0.7rem;
right: 0.3rem;
color: #fff;
background-color: rgba(0, 0, 0, 0.2);
width: 1.2rem;
"
>
×
</button>
</div>
<div class="preview1 w750 hidden" id="view1">
<div class="select p-r">
<div class="preview_text"><img src="" alt="" /></div>
<div class="preview_url">
<img src="" alt="" class="p-a" />
</div>
<div class="p-a" style="top: 11.5rem">
<button class="no">返回</button>
<button class="ok">确认生成</button>
</div>
<img src="./img/ewm.png" alt="" class="ewm p-a hidden" />
</div>
</div>
<div class="preview2 preview w750 hidden" id="view2">
<div class="select p-r">
<div class="preview_text">
<img src="" alt="" />
</div>
<div class="preview_url"><img src="" alt="" class="p-a" /></div>
<div class="p-a" style="top: 11.5rem">
<button class="no">返回</button>
<button class="ok">确认生成</button>
</div>
<img src="./img/ewm.png" alt="" class="ewm p-a" />
</div>
</div>
<div class="preview3 preview w750 hidden" id="view3">
<div class="select p-r">
<div class="preview_text"><img src="" alt="" /></div>
<div class="preview_url"><img src="" alt="" class="p-a" /></div>
<div class="p-a" style="top: 11.5rem">
<button class="no">返回</button>
<button class="ok">确认生成</button>
</div>
<img src="./img/ewm.png" alt="" class="ewm p-a" />
</div>
</div>
<div class="preview4 preview w750 hidden" id="view4">
<div class="select p-r">
<img
class="p-a"
src="./img/preview4_bottom.png"
alt=""
style="width: 7.5rem; bottom: -2rem; left: 0.5rem"
/>
<div class="preview_text"><img src="" alt="" /></div>
<div
class="preview_url p-a"
style="top: 4.5rem; transform: scale(2.5)"
>
<img src="" alt="" class="p-a" />
<img src="" alt="" class="p-a" />
<img src="" alt="" class="p-a" />
<img src="" alt="" class="p-a" />
<img src="" alt="" class="p-a" />
<img src="" alt="" class="p-a" />
<img src="" alt="" class="p-a" />
<img src="" alt="" class="p-a" />
<img src="" alt="" class="p-a" />
</div>
<div class="p-a" style="top: 11.5rem">
<button class="no">返回</button>
<button class="ok">确认生成</button>
</div>
<img src="./img/ewm.png" alt="" class="ewm p-a" />
</div>
</div>
<div class="preview5 preview w750 hidden" id="view5">
<div class="select p-r">
<div class="preview_text">
<img src="" alt="" />
</div>
<div
class="preview_url p-a"
style="top: 6rem; left: 1.5rem; transform: scale(1.5)"
>
<img src="" alt="" class="p-a" />
<img src="" alt="" class="p-a" />
<img src="" alt="" class="p-a" />
<img src="" alt="" class="p-a" />
<img src="" alt="" class="p-a" />
<img src="" alt="" class="p-a" />
<img src="" alt="" class="p-a" />
<img src="" alt="" class="p-a" />
<img src="" alt="" class="p-a" />
</div>
<div class="p-a" style="top: 11.5rem">
<button class="no">返回</button>
<button class="ok">确认生成</button>
</div>
<img src="./img/ewm.png" alt="" class="ewm p-a" />
</div>
</div>
<!-- 提示 -->
<div
class="tit hidden p-f"
style="
bottom: 6rem;
left: 2rem;
width: 3rem;
height: 1rem;
background-color: #909090;
border-radius: 1rem;
text-align: center;
line-height: 1rem;
color: #fff;
"
>
请选择颜色
</div>
</div>
<audio
id="media"
class="musicControl-active"
src="1.mp3"
loop="loop"
></audio>
<img
id="music-icon"
class="musicControl-active"
src="music.png"
alt=""
style="position: relative; top: -15rem; left: 0"
/>
<style>
.musicControl-active {
animation: rotataZ 1.2s linear infinite;
-webkit-animation: rotataZ 1.2s linear infinite;
}
@keyframes rotataZ {
0% {
transform: rotateZ(0);
}
50% {
transform: rotateZ(180deg);
}
100% {
transform: rotateZ(360deg);
}
}
@-webkit-keyframes rotataZ {
0% {
transform: rotateZ(0);
}
50% {
transform: rotateZ(180deg);
}
100% {
transform: rotateZ(360deg);
}
}
</style>
<script src="./js/jquery-3.4.1.min.js"></script>
<script src="./js/html2canvas.min.js"></script>
<script src="./js/siper.min.js"></script>
<script>
var swiper = new Swiper(".swiper-container", {
direction: "vertical",
slidesPerView: "auto",
mousewheel: true,
freeMode: true,
observer: true, //修改swiper自己或子元素时，自动初始化swiper
observeParents: true, //修改swiper的父元素时，自动初始化swiper
observeSlideChildren: true,
});
$(function () {
let arr = ["blur", "cyan", "green", "orange", "violet", "yellow"];
let ax = [];
let activeText = "";
let arr1 = ["blur", "green", "orange", "pink", "red", "violet"];
let textIndex = [];
let imgUrl = "";
let imgUrl1 = [];
/* 公共 */
/* 鼠标滑动 */
$(".index").bind("touchstart", function (e) {
(startX = e.originalEvent.changedTouches[0].pageX),
(startY = e.originalEvent.changedTouches[0].pageY);
});
$(".index").bind("touchmove", function (e) {
//获取滑动屏幕时的X,Y
(endX = e.originalEvent.changedTouches[0].pageX),
(endY = e.originalEvent.changedTouches[0].pageY);
//获取滑动距离
distanceX = endX - startX;
distanceY = endY - startY;
//判断滑动方向
if (Math.abs(distanceX) > Math.abs(distanceY) && distanceX < -50) {
$(".index").addClass("hidden");
$(".box").removeClass("hidden").addClass("visit");
}
});
// 旋转切换
function pointer(d, j) {
$(".pointer").css("transform", "rotate(" + d + "deg)");
$(".pointer").css("transition", "0.2s all");
$(".box .confirm").click((e) => {
e.stopPropagation();
$(".box").addClass("hidden");
$(".congratulatory" + j + "")
.removeClass("hidden")
.siblings()
.addClass("hidden");
});
}
// 切换类名换页面
function toggleShow(a) {
$(".congratulatory" + a + " .next").click((e) => {
e.stopPropagation();
$(".congratulatory" + a + "")
.addClass("hidden")
.siblings()
.removeClass("hidden");
$(".congratulatory")
.removeClass("hidden")
.siblings()
.addClass("hidden");
$(".congratulatory .prev").click((e) => {
e.stopPropagation();
$(".congratulatory")
.addClass("hidden")
.siblings()
.removeClass("hidden");
$(".congratulatory" + a + "")
.removeClass("hidden")
.siblings()
.addClass("hidden");
});
});
}
// 切换颜色
function toggleColor(i, number, color) {
$(".congratulatory" + i + " .select_niu img").attr(
"src",
"./img/" + number + "_show_" + color + ".png"
);
imgUrl = "./img/" + number + "_show_" + color + ".png";
}
function previewBox(b, n) {
$(".congratulatory .next").click((e) => {
e.stopPropagation();
$(".preview" + b + " .preview_text img").attr(
"src",
"./img/" + n + "_text1.png"
);
$(".ewm").addClass("hidden");
$(".congratulatory").addClass("hidden");
$(".preview" + b + "")
.removeClass("hidden")
.siblings()
.addClass("hidden");
$.each(textIndex, (index) => {
$(".preview" + b + " .preview_text img").attr(
"src",
"./img/" + n + "_text" + (textIndex[index] + 1) + ".png"
);
});
$(".preview" + b + " .preview_url img").attr("src", imgUrl);
$(".preview" + b + " .ok").click((r) => {
e.stopPropagation();
$(".ewm").removeClass("hidden");
$(".preview" + b + " button").addClass("hidden");
$(".html2Image").removeClass("hidden");
html2canvas(document.getElementById("view" + b + "")).then(
function (canvas) {
var dataUrl = canvas.toDataURL();
$("#html2Image").attr("src", dataUrl);
}
);
});
$(".preview" + b + " .no").click((e) => {
e.stopPropagation();
$(".preview" + b + "").addClass("hidden");
$(".congratulatory").removeClass("hidden");
});
$(".btn").click(() => {
$(".html2Image").addClass("hidden");
$(".preview" + b + "").removeClass("hidden");
$(".ewm").addClass("hidden");
$(".preview" + b + " button").removeClass("hidden");
});
});
}
function previewBox1(c, f) {
$(".congratulatory .next").click(function () {
$(".congratulatory").addClass("hidden");
$(".preview" + c + "")
.removeClass("hidden")
.siblings()
.addClass("hidden");
$(".ewm").addClass("hidden");
$.each($(".preview" + c + " .preview_url img"), function (idx) {
$(this).attr("src", imgUrl1[idx]);
});
$.each(textIndex, (index) => {
$(".preview" + c + " .preview_text img").attr(
"src",
"./img/" + f + "_text" + (textIndex[index] + 1) + ".png"
);
});
$(".preview" + c + " .ok").click(function () {
$(".ewm").removeClass("hidden");
$(".preview" + c + " button").addClass("hidden");
$(".html2Image").removeClass("hidden");
html2canvas(document.getElementById("view" + c + "")).then(
function (canvas) {
var dataUrl = canvas.toDataURL();
$("#html2Image").attr("src", dataUrl);
}
);
});
$(".preview" + c + " .no").click(function () {
$(".preview" + c + "").addClass("hidden");
$(".congratulatory").removeClass("hidden");
});
$(".btn").click(function () {
$(".html2Image").addClass("hidden");
$(".preview" + c + "").removeClass("hidden");
$(".ewm").addClass("hidden");
$(".preview" + c + " button").removeClass("hidden");
});
});
}
// 第二块
$(".box .turntable div").click(function () {
$(".box .select_niu img").hide().eq($(this).index()).show();
});
$(".box .confirm").click((e) => {
e.stopPropagation();
$(".box").addClass("hidden");
$(".congratulatory3")
.removeClass("hidden")
.siblings()
.addClass("hidden");
});
$(".one").click((e) => {
e.stopPropagation();
pointer(-80, "1");
});
$(".two").click((e) => {
e.stopPropagation();
pointer(-45, "2");
});
$(".three").click((e) => {
e.stopPropagation();
pointer(0, "3");
});
$(".four").click((e) => {
e.stopPropagation();
pointer(55, "4");
});
$(".five").click((e) => {
e.stopPropagation();
pointer(80, "5");
});
// 第三块
$(".congratulatory1 .div").click(function () {
$(this).addClass("active").siblings().removeClass("active");
});
$(".congratulatory1 .select_niu img").removeClass("hidden");
$(".congratulatory1 .next").click(function () {
let index = $(".congratulatory1 .div.active").index();
if ($(".congratulatory1 .select_color .div").hasClass("active")) {
$(".congratulatory1 .select_color .div").removeClass("active");
ax.push($(".congratulatory1 .select_color .active").index());
if (arr[index] == undefined) {
console.log(1);
} else {
if (imgUrl1.length < 9) {
imgUrl1.push(
"./img/one_show_" + arr[index] + ax.length + ".png"
);
var new_arr = [];
for (var i = 0; i < imgUrl1.length; i++) {
var items = imgUrl1[i];
//判断元素是否存在于new_arr中，如果不存在则插入到new_ar中
if ($.inArray(items, new_arr) == -1) {
new_arr.push(items);
}
}
}
}
if (ax.length >= 9) {
$(".congratulatory1").addClass("hidden");
$(".congratulatory").removeClass("hidden");
ax.pop();
}
previewBox1(4, "one");
$(".congratulatory .prev").click((e) => {
e.stopPropagation();
$(".congratulatory").addClass("hidden");
$(".congratulatory1").removeClass("hidden");
});
} else {
$(".tit").removeClass("hidden");
setTimeout(() => {
$(".tit").addClass("hidden");
}, 1000);
}
});
$.each(arr, (q) => {
$(".congratulatory1 .select_color ." + arr[q] + "").click(
function () {
$(".congratulatory1 .select_niu img")
.eq(ax.length + 1)
.attr(
"src",
"./img/one_show_" + arr[q] + "" + (ax.length + 1) + ".png"
);
}
);
});
$(".congratulatory1 .prev").click(function () {
if (
$(".congratulatory1 .select_niu img")
.eq(ax.length + 1)
.attr("src", "./img/niu_bg.png")
) {
ax.pop();
imgUrl1.pop();
console.log(ax);
} else {
$(".congratulatory1 .select_niu img")
.eq(ax.length + 2)
.attr("src", "./img/niu_bg.png");
}
let imgUr = $(".congratulatory1 .select_niu img").eq(1).attr("src");
if (imgUr == "./img/niu_bg.png") {
$(".congratulatory1").addClass("hidden");
$(".box").removeClass("hidden");
}
});
$(".swiper-slide").eq(0).addClass("active");
$(".swiper-slide").click(function () {
textIndex.push($(this).index());
$(this).addClass("active").siblings().removeClass("active");
});
$(".congratulatory2 .prev").click(function () {
$(".congratulatory2").addClass("hidden");
$(".box").removeClass("hidden");
});
$(".congratulatory2 .next").click(function () {
if ($(".congratulatory2 .div").hasClass("active")) {
console.log(1);
} else {
$(".tit").removeClass("hidden");
setTimeout(() => {
$(".tit").addClass("hidden");
}, 1000);
}
});
$(".congratulatory2 .div").click(function () {
$(this).addClass("active").siblings().removeClass("active");
});
$(".congratulatory2 .div1").click(function () {
toggleColor("2", "two", "blur");
toggleShow("2");
previewBox(1, "two");
});
$(".congratulatory2 .div2").click(function () {
toggleColor("2", "two", "silver");
toggleShow("2");
previewBox(1, "two");
});
$(".congratulatory2 .div3").click(function () {
toggleColor("2", "two", "gilding");
toggleShow("2");
previewBox(1, "two");
});
$(".congratulatory3 .next").click(function () {
if ($(".congratulatory3 .div").hasClass("active")) {
console.log(1);
} else {
$(".tit").removeClass("hidden");
setTimeout(() => {
$(".tit").addClass("hidden");
}, 1000);
}
});
$(".congratulatory3 .div").click(function () {
$(this).addClass("active").siblings().removeClass("active");
});
$(".congratulatory3 .prev").click(function () {
$(".congratulatory3").addClass("hidden");
$(".box").removeClass("hidden");
});
$(".congratulatory3 .div1").click(function () {
toggleColor("3", "three", "blur");
toggleShow("3");
previewBox(2, "three");
});
$(".congratulatory3 .div2").click(function () {
toggleColor("3", "three", "silver");
toggleShow("3");
previewBox(2, "three");
});
$(".congratulatory3 .div3").click(function () {
toggleColor("3", "three", "gilding");
toggleShow("3");
previewBox(2, "three");
});
// // 第三块
$(".congratulatory4 .div").click(function () {
$(this).addClass("active").siblings().removeClass("active");
$(".tit").addClass("hidden");
});
$(".congratulatory4 .select_niu img").removeClass("hidden");
$(".congratulatory4 .next").click(function () {
let index = $(".congratulatory4 .div.active").index();
if ($(".congratulatory4 .select_color div").hasClass("active")) {
ax.push($(".congratulatory4 .select_color .active").index());
$(".congratulatory4 .select_color div").removeClass("active");
console.log(ax);
} else {
$(".tit").removeClass("hidden");
}
if (ax.length == 9) {
let index = $(".congratulatory4 .div.active").index();
$(".congratulatory4").addClass("hidden");
$(".congratulatory").removeClass("hidden");
}
imgUrl1.push("./img/four_show_" + arr1[index] + ax.length + ".png");
previewBox1(5, "four");
$(".congratulatory .prev").click(function () {
$(".congratulatory").addClass("hidden");
$(".congratulatory4").removeClass("hidden");
});
});
$.each(arr1, function (m) {
$(".congratulatory4 .select_color ." + arr1[m] + "").click(
function () {
$(".congratulatory4 .select_niu img")
.eq(ax.length + 1)
.attr(
"src",
"./img/four_show_" + arr1[m] + "" + (ax.length + 1) + ".png"
);
}
);
});
$(".congratulatory4 .prev").click(function () {
if (
$(".congratulatory4 .select_niu img")
.eq(ax.length + 1)
.attr("src", "./img/niu_bg.png")
) {
ax.pop();
} else {
$(".congratulatory4 .select_niu img")
.eq(ax.length + 2)
.attr("src", "./img/niu_bg.png");
}
let imgUr = $(".congratulatory4 .select_niu img").eq(1).attr("src");
if (imgUr == "./img/niu_bg.png") {
$(".congratulatory4").addClass("hidden");
$(".box").removeClass("hidden");
}
});
$(".congratulatory5 .next").click(function () {
if ($(".congratulatory5 .div").hasClass("active")) {
console.log(1);
} else {
$(".tit").removeClass("hidden");
setTimeout(() => {
$(".tit").addClass("hidden");
}, 1000);
}
});
$(".congratulatory5 .div").click(function () {
$(this).addClass("active").siblings().removeClass("active");
});
$(".congratulatory5 .prev").click(function () {
$(".congratulatory5").addClass("hidden");
$(".box").removeClass("hidden");
});
$(".congratulatory5 .div1").click(function () {
toggleColor("5", "five", "blur");
toggleShow("5");
previewBox(3, "five");
});
$(".congratulatory5 .div2").click(function () {
toggleColor("5", "five", "silver");
toggleShow("5");
previewBox(3, "five");
});
$(".congratulatory5 .div3").click(function () {
toggleColor("5", "five", "gilding");
toggleShow("5");
previewBox(3, "five");
});
});
</script>
<script type="text/javascript">
var dataForWeixin = {
appId: "<%=appid%>",
MsgImg: "http://lx26.sunnyby.cn/2021-4-8/slt.jpg",
TLImg: "http://lx26.sunnyby.cn/2021-4-8/slt.jpg",
url: "http://lx26.sunnyby.cn/2021-4-8/index.aspx",
title: "春节", // 分享后的标题,
desc: "春节牛", // 分享后的描述信息
timestamp: "<%=timestamp%>",
nonceStr: "<%=nonceStr%>",
signature: "<%=signature%>",
jsApiList: [
"onMenuShareTimeline",
"onMenuShareAppMessage",
"onMenuShareQQ",
"onMenuShareWeibo",
],
fakeid: "",
callback: function () {},
};
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: dataForWeixin.appId, // 必填，公众号的唯一标识
timestamp: dataForWeixin.timestamp, // 必填，生成签名的时间戳
nonceStr: dataForWeixin.nonceStr, // 必填，生成签名的随机串
signature: dataForWeixin.signature, // 必填，签名，见附录1
jsApiList: dataForWeixin.jsApiList, // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
wx.ready(function () {
//在此输入各种API
//分享到朋友圈
wx.onMenuShareTimeline({
title: dataForWeixin.title, // 分享标题
link: dataForWeixin.url, // 分享链接
desc: dataForWeixin.desc, // 分享描述
imgUrl: dataForWeixin.MsgImg, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
},
});
//分享给朋友
wx.onMenuShareAppMessage({
title: dataForWeixin.title, // 分享标题
desc: dataForWeixin.desc, // 分享描述
link: dataForWeixin.url, // 分享链接
imgUrl: dataForWeixin.TLImg, // 分享图标
type: "", // 分享类型,music、video或link，不填默认为link
dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
},
});
//QQ
wx.onMenuShareQQ({
title: dataForWeixin.title, // 分享标题
desc: dataForWeixin.desc, // 分享描述
link: dataForWeixin.url, // 分享链接
imgUrl: dataForWeixin.MsgImg, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
},
});
//QQ微博
wx.onMenuShareWeibo({
title: dataForWeixin.title, // 分享标题
desc: dataForWeixin.desc, // 分享描述
link: dataForWeixin.url, // 分享链接
imgUrl: dataForWeixin.TLImg, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
},
});
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，
//所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});
wx.error(function (res) {
//alert(res);
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});
</script>
<script>
// 背景音乐
$(function () {
var Hmedia = document.getElementById("media");
// Hmedia.play();
document.addEventListener(
"WeixinJSBridgeReady",
function () {
Hmedia.load();
Hmedia.play();
Hmedia.loop = false;
},
false
);
//循环播放
Hmedia.onended = function () {
Hmedia.load();
Hmedia.play();
};
wx.error(function (res) {
//alert(res.errMsg);
});
//music icon
$("#music-icon").click(function () {
var _this = $(this);
if (_this.hasClass("musicControl-active")) {
_this.removeClass("musicControl-active");
// Hmedia.load();
Hmedia.pause();
} else {
_this.addClass("musicControl-active");
Hmedia.load();
Hmedia.play();
}
});
});
</script>
</body>
</html>
这篇关于h5春节小游戏制作的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-11-14动态路由项目实战：从入门到上手
- 2024-11-14函数组件项目实战：从入门到简单应用
- 2024-11-14获取参数项目实战：新手教程与案例分析
- 2024-11-14可视化开发项目实战：新手入门教程
- 2024-11-14可视化图表项目实战：从入门到实践
- 2024-11-14路由懒加载项目实战：新手入门教程
- 2024-11-14路由嵌套项目实战：新手入门教程
- 2024-11-14全栈低代码开发项目实战：新手入门指南
- 2024-11-14全栈项目实战：新手入门教程
- 2024-11-14useRequest教程：新手快速入门指南
