移动端微信h5

<template><div class="container" id="container"><div class="regBag"></div><div class="moneyBox"><transitionv-for="(item,index) in showImgList":key="index"appearname="animate__animated animate__bounce"enter-active-class="animate__bounceOutUp"leave-active-class="animate__bounceOutDown"><div class="money" key="img" style="z-index: 0;width: 104%;"></div></transition><div class="money" style="z-index: -50;"></div><div class="money" style="z-index: -49;"></div><div class="money" style="z-index: -48;"></div><div class="money" style="z-index: -47;"></div><div class="money" style="z-index: -46;"></div><div class="money" style="z-index: -45;"></div><div class="money" style="z-index: -44;"></div><div class="money" style="z-index: -43;"></div><div class="money" style="z-index: -42;"></div></div><div class="wait_tips" v-if="!startType" id="wait_tips" style="opacity: 1; transform: scale(1, 1);"><img src="@/assets/images/ready.png" v-if="readySrc == 0"><img src="@/assets/images/3.png" v-else-if="readySrc == 1"><img src="@/assets/images/2.png" v-else-if="readySrc == 2"><img src="@/assets/images/1.png" v-else-if="readySrc == 3"><img src="@/assets/images/go.png" v-else-if="readySrc == 4"></div><div class="mask"></div><div class="gold"></div><div class="time"><div class="timeTxt">倒计时</div><span id="time">{{ timeCount }}</span></div><div class="totalScore">积分：<span>{{ count }}</span></div><div class="opt"><div class="back_ico" id="backBtn" @click.stop="toBackIndex()"></div><div class="rank_ico" id="rankBtn" v-if="rankBtnShow" @click.stop="openRankList()"></div></div><div class="playTips" id="playTips" :class="{touchend:touchState}" v-if="newVal === 4"><div class="arrow"></div><div class="hand"></div></div><div class="rank_mask" id="rank_list" v-if="rankShow"><div style="height: 3em;"></div><div class="close" id="closeBtn" @click.stop="closeRankList()"></div><div class="rank_box"></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"><span class="my-rank-title">您当前排名为</span>&nbsp;&nbsp;<span class="rank_myTop" id="myTop">{{ curRank }}</span>&nbsp;&nbsp;名</p></div><div class="rank" id="rankBox" style="height: 232px;"><div class="rank-row" :class="{'rank-active': index === curRank - 1}" v-for="(item, index) in rankList" :key="index"><span>{{ index + 1 }}</span><img :src="item.headimgurl" alt=""><span class="rank-name">{{ item.nickName }}</span><span class="rank-score">{{ item.scores }}</span></div></div></div></div></div></div></div>
</template><script setup lang="ts">
import wx from 'weixin-js-sdk';
import { getSign, getRedirectUrl, getOpenId, getUserInfo, getRankList } from "@/api/login.ts"const showImgList = ref([])
const touchInfo = reactive({startX: 0,startY: 0
})
const touchState = ref(false)
const rankShow = ref(false)
const rankBtnShow = ref(false)
const count = ref(0)
const timeCount = ref(30)
const gameTimer = ref(null)
const codeStr:any = new URLSearchParams(window.location.search).get('code')
const openId = ref('')
const rankList = ref([])
const startType = ref(false)
const readySrc = ref(0)
const curRank = ref(0)
const getRankListData = () => {getRankList().then((res: any) => {if (res.code === 200) {rankList.value = res.datacurRank.value = rankList.value.findIndex((item: any) => item.openId === openId.value) + 1}})
}
watch(timeCount, (newVal) => {if (newVal <= 0) {getRankListData()clearInterval(gameTimer.value);gameTimer.value = nullrankShow.value = truereadySrc.value = 0startType.value = falserankBtnShow.value = true}
})
watch(readySrc, (newVal) => {if (newVal === 4) {setTimeout(() => {startType.value = truetimeCount.value = 30gameTimer.value = setInterval(function () {timeCount.value -= 1}, 1000);}, 1000);}
})
let websocket = null
// const wsUrl = 'ws://8.140.57.214:890/websocket'
const wsUrl = 'wss://h5.xqiot.top/game-socket/websocket'
const getAngle = (angx, angy) => (Math.atan2(angy, angx) * 180) / Math.PI;
const getDirection = (startx, starty, endx, endy) => {const angx = endx - startx;const angy = endy - starty;let result = 0;//如果滑动距离太短if (Math.abs(angx) < 2 && Math.abs(angy) < 2) {console.log('==>点击了一下');return result;}const angle = getAngle(angx, angy);if (angle < 0 && -90 < angle) {result = 1console.log('往【右上】滑动1');} else if (angle < -90 && -180 < angle) {result = 2console.log('往【左上】滑动2');} else if (angle < 90 && 0 < angle) {result = 3console.log('往【右下】滑动0');} else {result = 4console.log('往【左下】滑动0');}return result;
};
//排行榜关闭
const closeRankList = () => {rankShow.value = false
}
//打开排行榜
const openRankList = () => {getRankListData()rankShow.value = true
}const getCode = () => {getRedirectUrl().then((res: any) => {if (res.code === 200) {window.location.href = res.data}})
}
const getSignInfo = () => {const params = {url:encodeURIComponent(location.href.split('#')[0])}getSign(params).then((res: { data: any;code:number }) => {if(res.code === 200) {wx.config({debug: false, // 开启调试模式，调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: 'xxx', // 必填，公众号的唯一标识timestamp: res.data.timestamp, // 必填，生成签名的时间戳nonceStr: res.data.nonceStr, // 必填，生成签名的随机串signature: res.data.cardSign, // 必填，签名jsApiList: ['closeWindow']});getCode()}});
}const toBackIndex = () => {window.location.href = 'https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=xxx==#wechat_redirect'
}
//获取随机数
const randomNum = (length = 32) => {//默认32位const arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];let num = '';for(let i = 0;i < length;i++) {num += arr[parseInt(Math.random() * arr.length)];}return num;
}const getUserData = () => {getUserInfo({wxCode:codeStr}).then((res:any) => {if(res.code === 200) {websocket = new WebSocket(wsUrl, openId.value)const msgPayload = JSON.stringify({nickname: res.data.nickname, headimgurl: res.data.headimgurl})websocket.onopen = function () {websocket.send(JSON.stringify({msgId:randomNum(32), messageType:3, msgPayload, openId:openId.value }))}websocket.onmessage = function (event) {const eventInfo = JSON.parse(event.data)if (eventInfo.messageType === 5) {for (let index = 0; index < 5; index++) {setTimeout(() => {readySrc.value = index}, index * 1000);}}}}})
}
onBeforeMount(() => {if(!codeStr) {getSignInfo()}else{getOpenId({wxCode:codeStr}).then((res:any) => {if(res.code === 200) {openId.value = res.data.openidwebsocket = new WebSocket(wsUrl, openId.value);if(res.data.subscribe === 0) {toBackIndex()}else{getUserData()}}})}
})
onMounted(() => {//手指接触屏幕document.getElementById('container').addEventListener('touchstart',function (e) {touchInfo.startX = `${e.touches[0].pageX}`;touchInfo.startY = `${e.touches[0].pageY}`;e.stopPropagation();},false);document.getElementById('container').addEventListener('touchend',function (e) {const endX = e.changedTouches[0].pageX;const endY = e.changedTouches[0].pageY;const direction = getDirection(touchInfo.startX, touchInfo.startY, endX, endY);if(direction !== 0 && readySrc.value === 4) {if(touchState.value) {showImgList.value.push(direction)count.value += 100websocket.send(JSON.stringify({ msgId: randomNum(32), messageType: 7, msgPayload: 100, openId: openId.value }))}touchState.value = true;}e.stopPropagation();},false);});</script><style lang='scss' scoped>
@-webkit-keyframes handSwipe {0% {top: 70vh;opacity: 1;}70% {top: 200px;opacity: 1;}100% {top: 200px;opacity: 0;}
}@-moz-keyframes handSwipe {0% {top: 70vh;opacity: 1;}70% {top: 200px;opacity: 1;}100% {top: 200px;opacity: 0;}
}@keyframes handSwipe {0% {top: 70vh;opacity: 1;}70% {top: 200px;opacity: 1;}100% {top: 200px;opacity: 0;}
}
.container {width: 100%;height: 100vh;background: url("@/assets/images/bg.jpg");background-size: 100% 100%;position: relative;overflow: hidden;bottom: 0;top: 0;left: 0;.regBag{background: url('@/assets/images/red_bag.png') no-repeat center bottom;width: 86%;height: 100%;position: absolute;bottom: -20px;background-size: 100% auto;left: 7%;}.moneyBox{width: 60%;height: 100%;position: relative;margin: 0 auto;.money{background: url('@/assets/images/money.png') no-repeat center bottom;width: 100%;height: 100%;position: absolute;top: 0;background-size: 100% auto;pointer-events: none;}}.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;}.mask{width: 86%;height: 135px;position: absolute;bottom: -20px;left: 7%;background: url("@/assets/images/mask.png") no-repeat center 0;background-size: 100% auto;z-index: 501;pointer-events: none;}.gold{width: 100%;height: 60px;position: absolute;bottom: 0;background: url("@/assets/images/gold.png") no-repeat center 0;background-size: 100% auto;z-index: 502;pointer-events: none;}.time{position: absolute;top: 15px;right: 20px;font-weight: bold;font-size: 1.875rem;color: #fff;div{display: inline-block;position: relative;top: -5px;}span{font-size: 3rem;color: #fdbe23;font-weight: bold;padding: 0 5px;}}.playTips{position: absolute;background-color: rgba(0, 0, 0, .5);z-index: 999;top: 0;width: 100%;height: 100%;.arrow{width: 40%;height: 100%;background: url('@/assets/images/arrow.png') no-repeat center;background-size: contain;margin: 0 auto;}.hand{width: 120px;height: 120px;background: url('@/assets/images/hand.png') no-repeat center;background-size: contain;position: absolute;top: 90vh;left: 50%;-webkit-animation: handSwipe 1.8s ease infinite;-moz-animation: handSwipe 1.8s ease infinite;animation: handSwipe 1.8s ease infinite;}}.touchend{display: none;}.totalScore{position: absolute;z-index: 10;top: 14%;width: 100%;text-align: center;color: #ffff4d;font-size: 2rem;}/*排行榜公共样式*/.rank_mask {position: absolute;background-color: rgba(0, 0, 0, .5);top: 0;width: 100%;height: 100%;z-index: 1000;.close {width: 32px;height: 32px;background: url('@/assets/images/rank_close.png') no-repeat center;position: absolute;top: 30px;right: 20px;background-size: contain;z-index: 10;}.rank_dec {width: 100%;height: 178px;background: url('@/assets/images/rank_list_dec.png') no-repeat center;background-size: contain;position: absolute;top: -89px;left: 0;}.rank_list_box {background: url('@/assets/images/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: 7%;padding: 0 11px 18px;.rank_list_ranking {padding-top: 70px;width: 100%;margin: 10px auto 0;.rank_list_rankingBs {background: url('@/assets/images/rankBs.png') no-repeat;background-size: 100% 100%;padding-bottom: 14px;.my_rank {padding-top: 18px;padding-bottom: 10px;.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: 2rem;}}}.rank{height: 300px;overflow-y: auto;padding: 5px 18px;.rank-active{margin-top: 10px!important;margin-bottom: 10px!important;span{font-size: 1.25rem!important;}}.rank-row {margin-top: 5px;margin-left: 5px;color: #bb5b15;font-weight: bold;img {width: 28px;height: 28px;vertical-align: middle;border-radius: 50%;position: relative;top: 0;margin-left: 4px;}span {display: inline-block;}.rank-score {padding-left: 3px;width: 58px;text-align: right;padding-right: 3px;border-left: 2px solid #ce7e61;color: #c56a09;font-weight: bold;}.rank-name {width: 115px;text-align: left;padding-left: 7px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;position: relative;top: 3px;}}}.my_rank,.my_money{font-size: 1.4rem;font-weight: bold;text-align: center;height: 43px;background-size: 87%;}}}}}.opt {position: absolute;top: 15px;left: 15px;z-index: 1001;font-size: 1.4rem;.back_ico {width: 50px;background: url("@/assets/images/back_ico.png") no-repeat center;background-size: contain;display: inline-block;padding-top: 41px;font-weight: bold;color: #fdbe22;}.rank_ico {width: 50px;background: url("cd /mnt/zctq/game/rank_ico.png") no-repeat center;background-size: contain;padding-top: 41px;display: inline-block;font-weight: bold;color: #fdbe22;}}
}
</style>

pc服务端

<!-- eslint-disable no-alert -->
<!-- eslint-disable no-alert --><template><div class="container" id="container"><div id="shu-money" class="shu-money"><!-- 门帘 --><div class="shu-money-curtain"></div><!--飘钱--><div id="leafContainer" v-if="playStatus !== 1"><divstyle="top: -15%; left: 73%; animation-name: fade, drop; animation-duration: 5.55652s, 5.55652s; animation-delay: 0.34065s, 0.34065s;"><img src="@/assets/images/realLeaf2.png" style="animation-name: clockwiseSpin; animation-duration: 4.71845s;"></div><divstyle="top: -15%; left: 43%; animation-name: fade, drop; animation-duration: 6.24451s, 6.24451s; animation-delay: 1.19191s, 1.19191s;"><img src="@/assets/images/realLeaf3.png"style="animation-name: counterclockwiseSpinAndFlip; animation-duration: 5.4802s;"></div><divstyle="top: -15%; left: 94%; animation-name: fade, drop; animation-duration: 6.0655s, 6.0655s; animation-delay: 4.09718s, 4.09718s;"><img src="@/assets/images/realLeaf4.png" style="animation-name: clockwiseSpin; animation-duration: 7.04969s;"></div><divstyle="top: -15%; left: 79%; animation-name: fade, drop; animation-duration: 5.61894s, 5.61894s; animation-delay: 4.42144s, 4.42144s;"><img src="@/assets/images/realLeaf4.png" style="animation-name: clockwiseSpin; animation-duration: 7.69046s;"></div><divstyle="top: -15%; left: 66%; animation-name: fade, drop; animation-duration: 8.84404s, 8.84404s; animation-delay: 4.98969s, 4.98969s;"><img src="@/assets/images/realLeaf1.png" style="animation-name: clockwiseSpin; animation-duration: 7.70195s;"></div><divstyle="top: -15%; left: 40%; animation-name: fade, drop; animation-duration: 9.01992s, 9.01992s; animation-delay: 0.744s, 0.744s;"><img src="@/assets/images/realLeaf2.png"style="animation-name: counterclockwiseSpinAndFlip; animation-duration: 4.07854s;"></div><divstyle="top: -15%; left: 90%; animation-name: fade, drop; animation-duration: 8.0395s, 8.0395s; animation-delay: 2.08446s, 2.08446s;"><img src="@/assets/images/realLeaf3.png"style="animation-name: counterclockwiseSpinAndFlip; animation-duration: 5.32582s;"></div><divstyle="top: -15%; left: 18%; animation-name: fade, drop; animation-duration: 9.71313s, 9.71313s; animation-delay: 2.77519s, 2.77519s;"><img src="@/assets/images/realLeaf3.png" style="animation-name: clockwiseSpin; animation-duration: 5.03659s;"></div><divstyle="top: -15%; left: 59%; animation-name: fade, drop; animation-duration: 5.23788s, 5.23788s; animation-delay: 4.55604s, 4.55604s;"><img src="@/assets/images/realLeaf1.png"style="animation-name: counterclockwiseSpinAndFlip; animation-duration: 7.3365s;"></div><divstyle="top: -15%; left: 66%; animation-name: fade, drop; animation-duration: 10.4667s, 10.4667s; animation-delay: 3.90653s, 3.90653s;"><img src="@/assets/images/realLeaf2.png"style="animation-name: counterclockwiseSpinAndFlip; animation-duration: 6.4902s;"></div><divstyle="top: -15%; left: 29%; animation-name: fade, drop; animation-duration: 9.36064s, 9.36064s; animation-delay: 1.39082s, 1.39082s;"><img src="@/assets/images/realLeaf4.png" style="animation-name: clockwiseSpin; animation-duration: 5.90662s;"></div><divstyle="top: -15%; left: 34%; animation-name: fade, drop; animation-duration: 5.75967s, 5.75967s; animation-delay: 2.69622s, 2.69622s;"><img src="@/assets/images/realLeaf2.png" style="animation-name: clockwiseSpin; animation-duration: 4.10586s;"></div><divstyle="top: -15%; left: 11%; animation-name: fade, drop; animation-duration: 6.39992s, 6.39992s; animation-delay: 1.7334s, 1.7334s;"><img src="@/assets/images/realLeaf1.png"style="animation-name: counterclockwiseSpinAndFlip; animation-duration: 5.01956s;"></div><divstyle="top: -15%; left: 51%; animation-name: fade, drop; animation-duration: 9.27916s, 9.27916s; animation-delay: 4.90076s, 4.90076s;"><img src="@/assets/images/realLeaf3.png" style="animation-name: clockwiseSpin; animation-duration: 6.13165s;"></div><divstyle="top: -15%; left: 75%; animation-name: fade, drop; animation-duration: 7.84955s, 7.84955s; animation-delay: 2.18257s, 2.18257s;"><img src="@/assets/images/realLeaf1.png" style="animation-name: clockwiseSpin; animation-duration: 7.25751s;"></div><divstyle="top: -15%; left: 70%; animation-name: fade, drop; animation-duration: 9.56084s, 9.56084s; animation-delay: 2.74761s, 2.74761s;"><img src="@/assets/images/realLeaf1.png" style="animation-name: clockwiseSpin; animation-duration: 4.97211s;"></div><divstyle="top: -15%; left: 63%; animation-name: fade, drop; animation-duration: 7.37261s, 7.37261s; animation-delay: 4.42492s, 4.42492s;"><img src="@/assets/images/realLeaf1.png" style="animation-name: clockwiseSpin; animation-duration: 6.98456s;"></div><divstyle="top: -15%; left: 97%; animation-name: fade, drop; animation-duration: 6.81612s, 6.81612s; animation-delay: 2.50155s, 2.50155s;"><img src="@/assets/images/realLeaf4.png"style="animation-name: counterclockwiseSpinAndFlip; animation-duration: 5.5112s;"></div></div><!-- <div class="SecondRound" v-if="playStatus == 1"><div class="game_SecondRound_div"><div class="game_SecondRound_style">第 <span class="game_SecondRound">{{ playCount }}</span> 轮</div></div></div> --><div class="shu-rank-list"><div class="shu-rank-item" v-for="(items,index) in readyList" :key="items.openId"><div class="shu-rank-item-info" v-if="Number(items.scores) > 0"><span class="shu-rank-item-score">{{ items.scores?items.scores:0 }}</span><p class="shu-rank-item-name">{{ items.nickName?items.nickName:'' }}</p><img :src="items.headimgurl"><span class="ranking">{{ index + 1 }}</span></div><div class="shu-rank-item-head"></div><div class="shu-rank-item-body"></div><div class="shu-rank-item-desk"></div><div class="shu-rank-item-footer"></div></div></div><div class="number-ani-box" v-if="timeShow && !gameOver"><img v-if="countDownNum == 30" src="@/assets/images/03.png" class="img-num imgNumberImg"><img v-else-if="countDownNum <30&&countDownNum >19" src="@/assets/images/02.png" class="img-num imgNumberImg"><img v-else-if="countDownNum <20&&countDownNum >9" src="@/assets/images/01.png" class="img-num imgNumberImg"><img v-else src="@/assets/images/00.png" class="img-num imgNumberImg"><img v-if="countDownNum == 29||countDownNum == 19||countDownNum == 9" src="@/assets/images/09.png" class="img-num imgNumberImg2"><img v-else-if="countDownNum == 28||countDownNum == 18||countDownNum == 8" src="@/assets/images/08.png" class="img-num imgNumberImg2"><img v-else-if="countDownNum == 27||countDownNum == 17||countDownNum == 7" src="@/assets/images/07.png" class="img-num imgNumberImg2"><img v-else-if="countDownNum == 26||countDownNum == 16||countDownNum == 6" src="@/assets/images/06.png" class="img-num imgNumberImg2"><img v-else-if="countDownNum == 25||countDownNum == 15||countDownNum == 5" src="@/assets/images/05.png" class="img-num imgNumberImg2"><img v-else-if="countDownNum == 24||countDownNum == 14||countDownNum == 4" src="@/assets/images/04.png" class="img-num imgNumberImg2"><img v-else-if="countDownNum == 23||countDownNum == 13||countDownNum == 3" src="@/assets/images/03.png" class="img-num imgNumberImg2"><img v-else-if="countDownNum == 22||countDownNum == 12||countDownNum == 2" src="@/assets/images/02.png" class="img-num imgNumberImg2"><img v-else-if="countDownNum == 21||countDownNum == 11||countDownNum == 1" src="@/assets/images/01.png" class="img-num imgNumberImg2"><img v-else src="@/assets/images/00.png" class="img-num imgNumberImg2"></div><div class="box-end" v-if="gameOver"></div><!-- 准备游戏 --><div class="game-cover-man" v-if="playStatus == 1"><div class="game-cover-manTop"><img src="@/assets/images/new-back-topbs.png"></div><div class="game-cover-manCircleDiv"><div class="game-cover-manCircle"></div></div><div class="game-cover-manBottom"></div><div class="game-cover-div"><div class="cover-box"><div class="circle-light circle-light1"></div><div class="ribbon-flag"></div><div class="red-lefthand red-hand1"></div><div class="red-righthand red-hand1"></div><div class="red-build"></div><div class="glass-light"></div><div class="dai-left red-hand1"></div><div class="dai-right red-hand1"></div><div class="icon-coin1"></div><div class="icon-coin2"></div><div class="icon-coin3"></div></div><div class="game-coverTextDiv"><div class="game-coverTitle"><span class="game-coverTitleSpan">疯狂数钞票</span><span class="game-coverTitleSpan2">疯狂数钞票</span></div></div></div></div><!-- 开始游戏 --><div class="game-waiting-container" v-if="playStatus == 2"><div class="game-waiting-body"><div class="player-txt"></div><div class="player-count">{{ readyList.length }}</div><div class="player-box" style="overflow-x: auto;overflow-y:hidden"><span v-for="(item,index) in readyList" :key="item.openId" class="waiting-box" :style="{left: 114*Number(index)+'px',opacity: 1}"><img :src="item.headimgurl"></span></div><div class="game-waiting-title"><div class="game-w-title" data-text="疯狂数钞票">疯狂数钞票</div></div><!-- <div class="game-waiting-note"><div class="game-w-note"></div></div> --></div></div><div class="winner-container" v-if="gameOver"><div class="winner-body"><div class="box-title animate__animated animate__backInDown"><div class="title animate__animated animate__bounceIn animate__delay-1s"></div></div><div class="list-win-box"><div class="list-item"><div v-for="(items,index) in readyList" :key="items.openId"  class="box-win" style="opacity: 1;"><span class="name a" >{{ items.nickName }}</span><img class="a" alt="" :src="items.headimgurl" ><div class="border a" style="">{{ index + 1 }}</div><span class="score a" style="">得分：<span class="score-num">{{ items.scores }}</span></span></div></div></div></div></div><div class="game-countdown-divs-bg" v-if="playStatus == 3 && !timeShow && !gameOver"><div class="game-countdown-divs"><div class="game-titles-content">疯狂数钞票</div><div class="game-titles">疯狂数钞票</div><div class="wait-time" style="opacity: 1; transform: scale(1, 1);"><img src="@/assets/images/ready.png" v-if="readySrc == 0"><img src="@/assets/images/3.png" v-else-if="readySrc == 1"><img src="@/assets/images/2.png" v-else-if="readySrc == 2"><img src="@/assets/images/1.png" v-else-if="readySrc == 3"><img src="@/assets/images/go.png" v-else-if="readySrc == 4"></div>'<div class="wait-num-name"></div></div></div><div class="hd-game-btn-container" v-if="playStatus == 1"><div class="hd-game-btn" @click.stop="setFullScreen()"><i class="iconfont icon-expand"></i><span>全屏</span></div><div class="hd-game-btn" @click.stop="readyGame()"><i class="iconfont icon-go"></i><span>准备</span></div></div><div class="hd-game-btn-container" v-if="playStatus == 2"><div class="hd-game-btn" @click.stop="setFullScreen()"><i class="iconfont tools-ico icon-expand"></i><span>全屏</span></div><div class="hd-game-btn" @click.stop="startGame()"><i class="iconfont icon-go"></i><span>开始</span></div></div><div class="hd-game-btn-container" v-if="playStatus == 3 && !timeShow && gameOver"><!-- <div class="hd-game-btn" @click.stop="rePlayGame()"><i class="iconfont icon-refresh"></i><span>再玩</span></div> --><div class="hd-game-btn" @click.stop="setFullScreen()"><i class="iconfont tools-ico icon-expand"></i><span>全屏</span></div><div class="hd-game-btn" @click.stop="resetGame()"><i class="iconfont icon-lajitong"></i><span>重置</span></div></div></div><span v-if="playStatus==1" style="writing-mode: vertical-lr;position: relative;z-index: 999;color: #9975b3;font-size: 50px;top: 37%;left: 20%;">众诚天麒</span><span v-if="playStatus==1" style="writing-mode: vertical-lr;position: relative;z-index: 999;color: #9975b3;font-size: 50px;top: 37%;left: 72%;">小麒物联</span><div class="qr_code"  style="display: block;" v-if="playStatus!=3"><div class="qr_movediv" v-dragoncontextmenu="return false;"onselectstart="return false;"><div class="qr_code_img"><img src="@/assets/images/game.png" style="width: 154px;height: 154px;" alt=""></div><span style="color: #fff;width: 154px;font-size: 30px;display: inline-block;text-align-last: justify;">小麒物联</span></div></div><img src="@/assets/images/logo.png" style="width: 200px;height: auto;position: absolute;z-index: 999;right: 50px;top: 50px;" alt=""></div>
</template><script setup lang="ts">
import screenfull from 'screenfull'const wsUrl = 'xxx'
const playCount = ref(1)
const playStatus = ref(1)const readySrc = ref(0)
const timeShow = ref(false)
const countDownNum = ref(30)
const gameOver = ref(false)
const readyList = ref([])
// eslint-disable-next-line no-var
let websocket = null
let timer = null
// eslint-disable-next-line consistent-return
const setFullScreen = () => {//screenfull.isEnabled  此方法返回布尔值，判断当前能不能进入全屏if (!screenfull.isEnabled) {return false}//screenfull.toggle 此方法是执行全屏化操作。如果已是全屏状态，则退出全屏screenfull.toggle()}
//获取随机数
const randomNum = (length = 32) => {//默认32位const arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];let num = '';for (let i = 0; i < length; i++) {num += arr[parseInt(Math.random() * arr.length)];}return num;
}watch(readySrc, (newVal) => {if (newVal === 4) {setTimeout(() => {timeShow.value = truecountDownNum.value = 30for (let index = 0; index < 31; index++) {setTimeout(() => {countDownNum.value = 30 - index}, index * 1000);}}, 1000);}
})
watch(countDownNum, (newVal) => {if (newVal === 0) {setTimeout(() => {gameOver.value = truetimeShow.value = falseclearInterval(timer);timer = null}, 1000);}
})//准备按钮
const readyGame = () => {readyList.value = []playStatus.value = 2const websocket = new WebSocket(wsUrl, "943305991471");websocket.onopen = function () {timer = setInterval(function () {if (playStatus.value === 3) {clearInterval(timer);//如果距离顶部距离为0 清除定时器}websocket.send(JSON.stringify({ msgId: randomNum(32), messageType: 9, msgPayload: "", openId: '943305991471' }))}, 2000);}websocket.onmessage = function (event) {const eventInfo = JSON.parse(event.data)if (eventInfo.messageType === 8) {const list = JSON.parse(JSON.parse(event.data).msgPayload)if(list.length < 11) {readyList.value = JSON.parse(JSON.parse(event.data).msgPayload)}else{readyList.value = list.slice(0, 10)}}}}
//开始按钮
const startGame = () => {const websocket = new WebSocket(wsUrl, "943305991471");websocket.onopen = function () {websocket.send(JSON.stringify({ msgId: randomNum(32), messageType: 5, msgPayload: "", openId: '943305991471' }))}websocket.onmessage = function (event) {const eventInfo = JSON.parse(event.data)if (eventInfo.messageType === 8) {const list = JSON.parse(JSON.parse(event.data).msgPayload)if(list.length < 11) {readyList.value = JSON.parse(JSON.parse(event.data).msgPayload)}else{readyList.value = list.slice(0, 10)}}}playStatus.value = 3clearInterval(timer);timer = nullfor (let index = 0; index < 5; index++) {setTimeout(() => {readySrc.value = index}, index * 1000);}
}
//再玩
// const rePlayGame = () => {
//     playCount.value++
//     playStatus.value = 1
//     gameOver.value = false
// }
//重置
const resetGame = () => {playStatus.value = 1playCount.value = 1gameOver.value = false
}onMounted(() => {//判断当前浏览器是否支持WebSocketif ('WebSocket' in window) {websocket = new WebSocket(wsUrl, "943305991471");} else {// eslint-disable-next-line no-alertalert('Not support websocket');}websocket.onopen = function () {setInterval(function () {websocket.send(JSON.stringify({ msgId: randomNum(32), messageType: 2, msgPayload: "", openId: '943305991471' }));}, 60000);}//连接发生错误的回调方法websocket.onerror = function () {// eslint-disable-next-line no-alertalert("打开连接失败");};//接收到消息的回调方法websocket.onmessage = function (event) {const eventInfo = JSON.parse(event.data)console.log('eventInfo898', eventInfo)}//连接关闭的回调方法websocket.onclose = function () {// eslint-disable-next-line no-alert// alert("关闭连接成功");}//监听窗口关闭事件，当窗口关闭时，主动关闭WebSocket连接window.onbeforeunload = function () {websocket.close();}
})
</script><style lang='scss' scoped></style>