Skip to content

S
SURPRISED
Commit d4629afd authored by zhengke's avatar zhengke
Browse files
Options

增加数钱游戏h5

parent 564598bf
Hide whitespace changes
Inline Side-by-side
Showing with 574 additions and 0 deletions
html/annualMeeting/Money.html 0 → 100644
View file @ d4629afd
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="full-screen" content="true">
<meta name="screen-orientation" content="portrait">
<meta name="x5-fullscreen" content="true">
<meta name="360-fullscreen" content="true">
<link rel="stylesheet" href="css/money.css" type="text/css" />
<title>疯狂数钞票</title>
</head>
<body style="height: 100%;overflow: hidden;width: 100%;position: fixed;">
<div class="money_count">
<div class="reg_bag" style='background-image: url("img/money/red_bag.png")'></div>
<div class="money_box">
<img src="img/money/money.png" alt=""/>
</div>
<div class="wait_tips" id="wait_tips"></div>
<div class="mask"></div>
<div class="gold"></div>
<div id="touchBox"></div>
<input type="button" value="开始" id="Start" style="z-index:9999;position: fixed;top:0;">
<input type="button" value="重置" id="reset" style="z-index:9999;position: fixed;top:0;left:40px;">
<div class="time">
<div class="time-txt">倒计时</div>
<span>
<span id="time">0</span>秒
</span>
</div>
<div class="tipsDiv">保存体力，等待开始</div>
<div class="circleCount">3</div>
</div>
<div class="play_tips" id="play_tips">
<div class="arrow"></div>
<div class="hand"></div>
</div>
<div class="opt">
<div class="back_ico" id="back_ico"></div>
<div class="rank_ico" id="rankBtn"></div>
</div>
<div class="rank_mask">
<div style="height:3rem"></div>
<div class="close" id="closeBtn"></div>
<div class="rank_list_box">
<div class="rank_dec"></div>
<div class="rank_list_ranking">
<div class="rank_list_rankingBs">
<div class="my_rank">
<p class="my_rankTop" style="padding:1.5rem 0 0.2rem 0">
<span class="my-rank-title">您当前排名为</span>&nbsp;&nbsp;
<span class="rank_myTop" id="myTop">1</span>&nbsp;&nbsp;名
</p>
</div>
<div class="rank" id="rankBox" style="height: 27rem;">
<div class="rank-row">
<span class="rank-num num1"></span>
<img src="img/money/back_ico.png"/>
<span class="rank-name">张三</span>
<span class="rank-score">10400</span>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="../../js/jquery-1.10.2.js"></script>
<script>
$(function () {
var music=document.getElementById('music');
var money_en = $("body");
//传递后台的分数
var i= 0;
var off =true;
var Count=3;
var Count2=30;
//点击关闭统计弹窗
$('.close').click(function(){
$('.rank_mask').css('display','none');
});
//点击查看排行榜
$('#rankBtn').click(function(){
$('.rank_mask').css('display','block');
});
//模拟监听到再来一次重置事件
$("#reset").click(function(){
location.reload();
//StartGame();
});
//模拟监听到开始事件
$("#Start").click(function(){
StartGame();
});
//游戏开始
function StartGame(){
//3秒倒计时
$('.circleCount').html(3);
Count=3;
Count2=30;
$('.circleCount').css('display','block');
$('.tipsDiv').css('display','block');
$('.play_tips').css('display','none');
var clock = window.setInterval(function(){
Count--;
$('.circleCount').html(Count);
if(Count==0){
$('.circleCount').css('display','none');
$('.tipsDiv').css('display','none');
window.clearInterval(clock);
Count30();
startMove();
}
}, 1000);
}
//30秒倒计时
function Count30(){
$("#time").html(30);
let clock = window.setInterval(function() {
Count2--;
$("#time").html(Count2);
if (Count2 === 0) {
window.clearInterval(clock);
//显示统计窗口
$('.rank_mask').css('display','block');
}
}, 1000)
}
function startMove(){
money_en.on("touchstart", function(e) {
if (e.cancelable) {
// 判断默认行为是否已经被禁用
// if (!e.defaultPrevented) {
// e.preventDefault();
// }
}
startX = e.originalEvent.changedTouches[0].pageX;
startY = e.originalEvent.changedTouches[0].pageY;
});
money_en.on("touchend", function(e) {
if (e.cancelable) {
// 判断默认行为是否已经被禁用
// if (!e.defaultPrevented) {
// e.preventDefault();
// }
$('.play_tips').css('display','none');
}
moveEndX = e.originalEvent.changedTouches[0].pageX;
moveEndY = e.originalEvent.changedTouches[0].pageY;
X = moveEndX - startX;
Y = moveEndY - startY;
if ( Y < 0 ) {
//music.play();
if(off){
var time= setInterval(function () {
if(Count2==0){
clearInterval(time);
$(".money_box").remove();
}
},1000);
}
off =false;
// setTimeout(function () {
// music.play();
// },10);
// music.playbackRate = 4;
// music.defaultPlaybackRate = 4;
$(".money_box").find('img').animate({
"top":"-1000"
},400, function () {
$(this).remove();
i+=100;
//$(".money_add span").html("￥"+i)
});
setTimeout(function () {
$(".money_box").append('<img src="img/money/money.png">');
},100)
}
});
}
document.addEventListener("WeixinJSBridgeReady", function () {
music.load();
}, false);
});
</script>
</html>
\ No newline at end of file
html/annualMeeting/css/money.css 0 → 100644
View file @ d4629afd
html, body, h1, h2, h3, h4, h5, h6, div, dl, dt, dd, ul, ol, li, p, blockquote, pre, hr, figure, table, caption, th, td, form, fieldset, legend, input, button, textarea, menu {
margin: 0;
padding: 0
}
html, body {
width: 100%;
height: 100%
}
html {
font-size: 62.5%
}
body {
font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
font-size: 1.4rem
}
* {
touch-action: pan-y
}
.money_count{
width: 100%;
height: 100%;
background: url(../img/money/money_bg.jpg) no-repeat center;
background-size: 100% auto;
position: relative;
overflow: hidden;
}
.reg_bag{
width: 86%;
height: 100%;
position: absolute;
bottom: -20px;
background: no-repeat center bottom;
background-size: 100% auto;
left: 7%;
}
.money_count .money_box {
width: 66%;
height: 100%;
position: relative;
margin: 0 auto;
}
.money_count .mask {
width: 86%;
height: 135px;
position: absolute;
bottom: -20px;
left: 7%;
background: url(../img/money/mask.png) no-repeat center 0;
background-size: 100% auto;
z-index: 501;
pointer-events: none;
}
.money_count .gold {
width: 100%;
height: 60px;
position: absolute;
bottom: 0;
background: url(../img/money/gold.png) no-repeat center 0;
background-size: 100% auto;
z-index: 502;
pointer-events: none;
}
.money_count #touchBox {
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: 999;
}
.wait_tips {
position: absolute;
top: 50%;
margin-top: -50px;
color: #fdbe22;
font-size: 2.5rem;
width: 100%;
font-weight: bold;
background: rgba(17,17,17,0.6);
padding: 20px 0;
text-align: center;
z-index: 998;
display:none;
}
.opt {
position: absolute;
top: 15px;
left: 15px;
z-index: 9999;
font-size: 1.4rem;
}
.opt .back_ico {
width: 50px;
background: url(../img/money/back_ico.png) no-repeat center;
background-size: contain;
display: inline-block;
padding-top: 41px;
font-weight: bold;
color: #fdbe22;
}
.opt .rank_ico {
width: 50px;
background: url(../img/money/rank_ico.png) no-repeat center;
background-size: contain;
padding-top: 41px;
display: inline-block;
font-weight: bold;
color: #fdbe22;
}
.time {
position: absolute;
top: 15px;
right: 20px;
font-weight: bold;
font-size: 2rem;
color: #fff;
}
.time div {
display: inline-block;
position: relative;
top: -3px;
}
.time span {
font-size: 3.6rem;
color: #fdbe23;
font-weight: bold;
padding: 0 5px;
}
.rank_mask {
position: absolute;
background-color: rgba(0,0,0,.5);
top: 0;
width: 100%;
height: 100%;
z-index: 1000;
display: none;
}
.rank_mask .close {
width: 32px;
height: 32px;
background: url(../img/money/rank_close.png) no-repeat center;
position: absolute;
top: 75px;
right: 20px;
background-size: contain;
z-index: 9999;
}
.rank_mask .rank_list_box {
background: url(../img/money/rank_list_boxBs.png) no-repeat;
background-size: 100% 100%;
width: 89%;
margin: 0 auto;
position: relative;
border-bottom-left-radius: 2em;
border-bottom-right-radius: 2em;
margin-top: 20%;
padding: 0 11px 18px;
}
.rank_mask .rank_dec {
width: 100%;
height: 178px;
background: url(../img/money/rank_list_dec.png) no-repeat center;
background-size: contain;
position: absolute;
top: -89px;
left: 0;
}
.rank_list_ranking {
padding-top: 70px;
width: 100%;
margin: 10px auto 0;
}
.rank_list_rankingBs {
background: url(../img/money/rankBs.png) no-repeat;
background-size: 100% 100%;
padding-bottom: 14px;
}
.rank_mask .my_rank, .rank_mask .my_money {
font-size: 2rem;
font-weight: bold;
text-align: center;
height: 5.5rem;
background: url(../img/money/rank_myFraction.png) no-repeat bottom center;
background-size: 87%;
}
.my_rankTop {
margin: 0 auto;
background-image: -webkit-linear-gradient(bottom,#c58726,#843a06,#211e14);
-webkit-background-clip: text;
-webkit-text-fill-color: #d8a8a800;
}
.rank_myTop {
color: #9a5612;
text-shadow: -2px -2px 0 #FFF033;
font-size: 2.4rem;
}
.rank_mask .rank {
height: 300px;
overflow-y: auto;
padding: 5px 18px;
}
.play_tips {
position: absolute;
background-color: rgba(0,0,0,.5);
z-index: 999;
top: 0;
width: 100%;
height: 100%;
}
.play_tips .arrow {
width: 40%;
height: 100%;
background: url(../img/money/arrow.png) no-repeat center;
background-size: contain;
margin: 30px auto;
}
.play_tips .hand {
width: 120px;
height: 120px;
background: url(../img/money/hand.png) no-repeat center;
background-size: contain;
position: absolute;
top: 350px;
left: 180px;
-webkit-animation: handSwipe 1.8s ease infinite;
-moz-animation: handSwipe 1.8s ease infinite;
animation: handSwipe 1.8s ease infinite;
}
@-webkit-keyframes handSwipe {
0{
top: 400px;
opacity: 1;
}
70%{
top: 250px;x
opacity: 1;
}
100%{
top: 250px;
opacity: 0;
}
}
@-moz-keyframes handSwipe {
0{
top: 400px;
opacity: 1;
}
70%{
top: 250px;
opacity: 1;
}
100%{
top: 250px;
opacity: 0;
}
}
@keyframes handSwipe {
0{
top: 400px;
opacity: 1;
}
70%
{
top: 250px;
opacity: 1;
}
100%
{
top: 250px;
opacity: 0;
}
}
.money_box img{
position: absolute;
bottom:-25px;
width:100%;
}
.tipsDiv{
position: absolute;
top:50%;
width:100%;
height:5rem;
background:rgba(0,0,0,0.5);
color:#fdbe23;
text-align: center;
line-height: 5rem;
font-size:2.5rem;
}
.circleCount{
position: absolute;
width:5rem;
height:5rem;
top:50%;
left:50%;
margin-left:-2.5rem;
color:#fdbe23;
font-size:3rem;
border-radius:50%;
text-align: center;
line-height: 5rem;
border:0.3rem solid #fdbe23;
display: none;
animation: numberAni 1s infinite ease;
display:none;
}
@keyframes numberAni {
1% {
transform: scale(8);
opacity: 1
}
90% {
transform: scale(1);
opacity: 0
}
100% {
transform: scale(8);
opacity: 0
}
}
.rank_mask .rank-num.num1 {
background: url(../img/money/new-number1.png) no-repeat center;
background-size: contain;
}
/*.rank_mask .rank-num.num2 {*/
/*background: url("../img/mobile_img/rank_num2.png") no-repeat center;*/
/*background-size: contain;*/
/*}*/
/*.rank_mask .rank-num.num3 {*/
/*background: url("../img/mobile_img/rank_num3.png") no-repeat center;*/
/*background-size: contain;*/
/*}*/
.rank_mask .rank-num {
width: 22px;
height: 28px;
float: left;
line-height: 28px;
}
.rank_mask .my_rank {
padding-top: 18px;
}
.my_rankTop{
margin: 0 auto;
background-image: -webkit-linear-gradient(bottom,#c58726,#843a06,#211e14);
-webkit-background-clip: text;
-webkit-text-fill-color: #d8a8a800;
}
.rank_mask .rank-row span {
display: inline-block;
}
.rank_mask .rank-row {
margin-top: 5px;
color: #bb5b15;
font-weight: bold;
}
.rank_mask .rank-score {
padding-left: 3px;
width: 58px;
text-align: right;
padding-right: 3px;
border-left: 2px solid #ce7e61;
color: #c56a09;
font-weight: bold;
}
.rank_mask .rank-name {
width: 115px;
text-align: left;
padding-left: 7px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
position: relative;
top: 3px;
}
.rank_mask .rank-row img {
width: 28px;
height: 28px;
vertical-align: middle;
border-radius: 50%;
position: relative;
top: -3px;
margin-left: 4px;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment