Skip to content

S
SURPRISED
Commit 4cfef27c authored by Mac's avatar Mac
Browse files
Options

打老鼠

parent d4629afd
master
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing with 570 additions and 19 deletions
html/annualMeeting/AnnuaLmeetingHome.html
View file @ 4cfef27c
......@@ -61,7 +61,6 @@
<script src="../../js/moveJs/jquery.min.js"></script>
<script src="../../js/moveJs/jquery.signalR.min.js"></script>
<script type="text/javascript" src="../../js/layer/layer.js"></script>
<script type="text/javascript" src="js/JsBarcode.all.min.js"></script>
<script>
var conn = $.hubConnection("http://192.168.2.65:7838/signalr", {
......@@ -94,6 +93,8 @@
//年会首页菜单
proxy.on("getMenus", function (data){
console.log(data)
$(".menu_view").remove()
var html="";
$.each(data, function(i,v) {//这里的函数参数是键值对的形式，k代表键名，v代表值
......@@ -106,7 +107,6 @@
});
proxy.on('getPrograms',function (data) {
console.log(data)
programguides(data)
......@@ -117,6 +117,10 @@
})
}
function menu_btn(id) {
if(id == 1){
window.location.href = './HitMouse.html'
}
if(id ==5 ){ //我的礼品
......
html/annualMeeting/HitMouse.html
View file @ 4cfef27c
......@@ -9,29 +9,261 @@
<meta http-equiv="Cache-Control" content="no-siteapp" />
<title>打老鼠</title>
<script type="text/javascript" src="../../js/autosize2.js"></script>
<script type="text/javascript" src="../../js/jquery-1.10.2.js"></script>
<style>
html,
body {
margin: 0;
padding: 0;
overflow-x: hidden;
height: 100%;
}
</style>
<link rel="stylesheet" href="css/HitMouse.css">
</head>
<body>
<div class="Box">
<!-- 头部一块-->
<div class="top">
<div class="top_title">
<img src="../../images/aM/home.png" alt="" class="return">
<p>打老鼠</p>
<img src="../../images/aM/ranging.png" alt="" class="ranging">
</div>
<div class="top_data">
<div class='Td_L'>
<p>分数：</p>
<p class="score">0分</p>
</div>
<div class='Td_R'>
<p>时间：</p>
<p id="time">30</p>
<img src="../../images/aM/countdown.png" alt="" class="time_img">
</div>
</div>
</div>
<!-- 打老鼠部分-->
<div class="hole-container">
<div class="hole" style="transform: translate(0.5rem, 0) scale(0.8, 0.8);">
<div class="mouse">
</div>
</div>
<div class="hole" style="transform: translate(1.5rem, 0) scale(0.8, 0.8);">
<div class="mouse">
</div>
</div>
<div class="hole" style="transform: translate(2.5rem, 0) scale(0.8, 0.8);">
<div class="mouse">
</div>
</div>
<div class="hole" style="transform: translate(0.30rem, 0.6rem) scale(1, 1);">
<div class="mouse">
</div>
</div>
<div class="hole" style="transform: translate(1.45rem, 0.6rem) scale(1, 1);">
<div class="mouse">
</div>
</div>
<div class="hole" style="transform: translate(2.64rem, 0.6rem) scale(1, 1);">
<div class="mouse">
</div>
</div>
<div class="hole" style="transform: translate(0.15rem, 1.5rem) scale(1.2, 1.2);">
<div class="mouse">
</div>
</div>
<div class="hole" style="transform: translate(1.4rem, 1.5rem) scale(1.2, 1.2);">
<div class="mouse">
</div>
</div>
<div class="hole" style="transform: translate(2.8rem, 1.5rem) scale(1.2, 1.2);">
<div class="mouse">
</div>
</div>
</div>
<!--底部云-->
<img src="../../images/aM/cloud.png" alt="" class="bottom">
<!-- 弹出的一层-->
<div class="status">
<p>游戏即将开始</p>
</div>
<div class="status1">
<p>保存体力，等待开始</p>
</div>
<div class="circleCount">3</div>
<input type="button" value="开始" id="Start" style="z-index:9999;position: fixed;top:0;">
<!-- 排行榜-->
<div class="rank_mask">
<div class="zhezao"></div>
<div class="rank_box">
<div class="rBox_top"></div>
<div class="rank_y">
<p>你的排名 第</p>
<p>1</p>
<p>名</p>
</div>
<div class="rank_i">
<div class="rank_item">
<div class="rank_itemL">
<div class="rank_num">1</div>
<p>李思思</p>
</div>
<div class="rank_itemR">
<div class="shuxi"></div>
<p>1234</p>
</div>
</div>
</div>
<div class="Close"></div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="../../js/md5.js"></script>
<script type="text/javascript" src="../../js/mian.js"></script>
<script src="../../js/moveJs/jquery.min.js"></script>
<script src="../../js/moveJs/jquery.signalR.min.js"></script>
<script type="text/javascript" src="../../js/layer/layer.js"></script>
<script>
var status=0; //活动状态
var conn = $.hubConnection("http://192.168.2.65:7838/signalr", {
qs: `i=1951&n=张建国&p=${encodeURIComponent(
"http://imgfile.oytour.com/New/Upload/User/20191018150051176.png"
)}`
});
var proxy = conn.createHubProxy("annualLeaveHub");
conn.start().done(data => {
sendMsg()
}).fail(data => {});
getMsg()
function sendMsg(msg,type) {
if(type == 1){
proxy.invoke("ReadyGame", msg).done(data => {
layer.msg('开始准备');
});
}
//0,未开始；1，准备中；2，进行中；-1，已结束 菜单状态
proxy.invoke("GetMenuStatus", 'Mouse').done(data => {
if(data.status == 0){
$('.status').css({'display':'flex'});
}
});
}
function ces(msg) {
sendMsg('Mouse',1)
}
function getMsg() {
//随时获取游戏的状态
proxy.on('getChangeMenu',function (data) {
if(data.status==1){
}
});
}
// sort 是顺序，score分数，type -1鼠，2猪，location位置（出现在第几个洞），interval时间（与下一个间隔时间单位：毫秒）
let data=[
{"Sort":1,"Type":1,"Location":1,"Interval":349},
];
var key = 0
var timer1;
var score = 0;
var Count=3;
var Count2=30;
function ces2(){
key = 0
timer1 = setInterval(increase ,data[key].Interval+300)
}
function increase() {
var wz = data[key].Location-1
if(data[key].Type == 1){
//创建img元素
$('.hole-container .hole:eq('+wz+') .mouse').append('<img src="../../images/aM/mouse.png" alt="">');
$('.hole-container .hole:eq('+wz+') .mouse img').animate({top:"0.05rem"},600);
//为老鼠的时候加100分
$('.hole-container .hole:eq('+wz+') .mouse img').click(function () {
score=score+100;
$('.score').html(score+ '分')
})
$('.hole-container .hole:eq('+wz+') .mouse img').animate({top:"0.65rem"},600);
//等动画消失之后删除元素
setTimeout(function () {
$('.hole-container .hole:eq('+wz+') .mouse').empty();
},1200)
}
if(data[key].Type == 2){
$('.hole-container .hole:eq('+wz+') .mouse').append('<img src="../../images/aM/pig.png" alt="">');
$('.hole-container .hole:eq('+wz+') .mouse img').animate({top:"0.05rem"},600);
$('.hole-container .hole:eq('+wz+') .mouse img').click(function () {
score=score-50;
$('.score').html(score+ '分')
})
$('.hole-container .hole:eq('+wz+') .mouse img').animate({top:"0.65rem"},600);
setTimeout(function () {
$('.hole-container .hole:eq('+wz+') .mouse').empty();
},1200)
}
if(key == data.length-1){
//清楚定时器
clearInterval(timer1)
}
key++
}
//模拟监听到开始事件
$("#Start").click(function(){
StartGame();
});
function StartGame() {
Count=3;
Count2=30;
$('.circleCount').css('display','block');
$('.status1').css('display','flex');
var clock = window.setInterval(function(){
Count--;
$('.circleCount').html(Count);
if(Count==0){
$('.circleCount').css('display','none');
$('.status1').css('display','none');
window.clearInterval(clock);
Count30();
}
}, 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)
}
$('.Close').click(function () {
$('.rank_mask').css('display','none')
})
</script>
</html>
html/annualMeeting/css/Amhome.css
View file @ 4cfef27c
......@@ -122,7 +122,7 @@ p{
}
.center{
width: 90%;
height: 4.41rem;
/*height: 50%;*/
margin-left: 5%;
margin-top: 1rem;
display: flex;
......@@ -132,11 +132,11 @@ p{
.center .tilte{
color: #FDD54B;
font-size: 0.28rem;
height: 10%;
height: 13%;
}
.center_box{
width: 100%;
height: 90%;
height: 87%;
display: flex;
flex-direction: row;
overflow-y: auto;
......
html/annualMeeting/css/HitMouse.css 0 → 100644
View file @ 4cfef27c
html,
body {
margin: 0;
padding: 0;
overflow-x: hidden;
height: 100%;
}
p{
margin: 0;
}
li{
list-style: none;
}
.Box{
width: 100%;
height: 100%;
background-image: url('../../../images/aM/mouse_bg.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.top{
display: flex;
flex-direction: column;
align-items: center;
width: 90%;
height: 0.9rem;
justify-content: space-between;
}
.top_title{
width: 2.86rem;
height: 0.36rem;
background-image: url('../../../images/aM/m_bg1.png');
background-size: 100% 100%;
background-repeat: no-repeat;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.return{
width: 0.23rem;
height: 0.23rem;
margin-left: 0.23rem;
}
.top_title{
color: #FDD54B;
font-size: 0.16rem;
}
.ranging{
width: 0.235rem;
height: 0.215rem;
margin-right: 0.23rem;
}
.top_data{
width: 100%;
height: 0.22rem;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.Td_L{
width: 0.9rem;
height: 0.22rem;
border-radius: 0.11rem;
background: #5A0D66;
display: flex;
align-items: center;justify-content: center;
}
.Td_L,.Td_R p{
color: #FFFE01;
font-size: 0.12rem;
}
.Td_R{
width: 0.9rem;
height: 0.22rem;
border-radius: 0.11rem;
background: #5A0D66;
display: flex;
align-items: center;justify-content: center;
position: relative;
}
.time_img{
width: 0.14rem;
height: 0.22rem;
position: absolute;
left: 0;
top:0
}
.bottom{
width: 100%;
height: 0.54rem;
position: absolute;
left: 0;
bottom: 0;
}
/*打老鼠部分*/
.hole-container{
width: 100%;
height: 38%;
position: absolute;
left: 0;
bottom: 0.8rem;
}
.hole-container .hole{
width: 0.81rem;
height: 0.27rem;
background-image: url('../../../images/aM/dong.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
}
.mouse{
position: absolute;
width: 0.83rem;
height: 0.68rem;
overflow: hidden;
top:-0.5rem
}
.mouse img{
position: absolute;
width: 0.83rem;
height: 0.68rem;
top:0.65rem;
z-index: 100;
}
.status{
width: 90%;
height: 0.45rem;
align-items: center;
justify-content: center;
position: absolute;
left: 5%;
top:40%;
background: black;
opacity: 0.5;
border-radius: 0.05rem;
display: none;
}
.status p{
color: #FFFE01;
font-size: 0.20rem;
}
.status1{
width: 90%;
height: 0.45rem;
align-items: center;
justify-content: center;
position: absolute;
left: 5%;
top:40%;
background: black;
opacity: 0.5;
border-radius: 0.05rem;
display: none;
}
.status1 p{
color: #FFFE01;
font-size: 0.20rem;
}
.circleCount{
position: absolute;
width:0.5rem;
height:0.5rem;
top:50%;
left:50%;
margin-left:-0.25rem;
color:#fdbe23;
font-size:0.3rem;
border-radius:50%;
text-align: center;
line-height: 0.5rem;
border:0.05rem 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{
position: absolute;
left: 0;
top:0;
width: 100%;height: 100%;
display: none;
}
.zhezao{
width: 100%;height: 100%;
position: absolute;
left: 0;
top: 0;
background: #111111;
opacity: 0.5;
}
.rank_box{
width: 90%;
height: 75%;
position: relative;
background-image: url('../../../images/aM/rank_bg.png');
background-size: 100% 100%;
background-repeat: no-repeat;
margin: 18% 5% 2%;
z-index: 100;
display: flex;
flex-direction: column;
align-items: center;
}
.rBox_top{
width: 100%;
height: 0.75rem;
position: absolute;
left: 0;
top:-0.22rem;
background-image: url('../../../images/aM/rank_top.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}
.rank_y{
width: 80%;
height: 0.4rem;
display: flex;
align-items: center;
justify-content: center;
margin-top: 0.5rem;
border: 2px solid #CE3711;
background: #FFE0BA;
border-radius: 8px;
}
.rank_y p{
color: #873630;
font-size: 0.14rem;
}
.rank_i{
width: 80%;
height: 70%;
overflow-y: hidden;
}
.rank_item{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-top: 0.1rem;
}
.rank_itemL{
display: flex;
flex-direction: row;
align-items: center;
}
.rank_item .rank_num{
width: 0.17rem;
height: 0.17rem;
display: flex;
align-items: center;
justify-content: center;
color: #FFFF27;
font-size: 0.13rem;
background-image: url('../../../images/aM/rangpm.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}
.rank_itemL p{
color: #B7540D;
font-size: 0.12rem;
margin-left: 0.1rem;
}
.rank_itemR{
width: 25%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.shuxi{
width: 1px;height: 0.13rem;
background: #B7540D;
}
.rank_itemR p{
color: #B7540D;
font-size: 0.12rem;
}
.Close{
position: absolute;
left: 50%;
bottom: -0.4rem;
margin-left: -0.17rem;
width: 0.34rem;
height: 0.34rem;
background-image: url('../../../images/aM/close.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}
images/aM/close.png 0 → 100644
View file @ 4cfef27c
images/aM/close.png

3.55 KB

images/aM/dong_bg1.png 0 → 100644
View file @ 4cfef27c
images/aM/dong_bg1.png

5.26 KB

images/aM/dong_bg2.png 0 → 100644
View file @ 4cfef27c
images/aM/dong_bg2.png

7.65 KB

images/aM/rangpm.png 0 → 100644
View file @ 4cfef27c
images/aM/rangpm.png

2.79 KB

images/aM/rank_bg.png 0 → 100644
View file @ 4cfef27c
images/aM/rank_bg.png

34.5 KB

images/aM/rank_top.png 0 → 100644
View file @ 4cfef27c
images/aM/rank_top.png

22.3 KB

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