首页 > 其他分享 >uniapp js 划消小游戏 1.0 去控制台看打印(仅作参考)

uniapp js 划消小游戏 1.0 去控制台看打印(仅作参考)

时间:2024-08-30 14:16:33浏览次数:11  
标签:uniapp arr const console value js 1.0 ref 1000

<template>   <view class="wrap">     划消:{{ sdNum }} * {{ sdNum }}     <view class="btn" style="padding: 32rpx; background: pink" @click="clickBtn">点击划消按钮</view>     <view class="btn" style="padding: 32rpx; background: pink" @click="startGame"       >点击划消开始游戏按钮</view     >     <view class="btn" style="padding: 32rpx; background: pink" @click="endGame"       >点击划消结束后,计算时间游戏按钮</view     >     <view class="time">{{ startTime }}</view>     <view>99999--随机需要划消的值:{{ randomNum }}</view>     <view>88888--随机需要划消的值一共出现的次数:{{ repeatNum }}</view>   </view> </template>
<script setup lang="ts"> import { ref } from 'vue' import { onShow } from '@dcloudio/uni-app' // import { taskDetail, memberInfo } from '@/api/hmm' // import store from '@/store' // import { transformTimeTwo } from '@/utils/hmm' const sdNum = ref(5) // const countDownRef = ref(null) const rightList = ref([]) // 随机值 const randomNum = ref(0) // 重复的随机值 次数 const repeatNum = ref(0) // 倒计时时间 const goToState = ref(false) const timmer = ref(null) const startTime = ref('03:00') const stopTime = ref(0) const newDateTime = ref(0)
onShow(() => {   generateShuDu() }) // 初始化数独 const generateArr = () => {   const arr = []   for (let i = 0; i < sdNum.value; i++) {     arr[i] = []     for (let j = 0; j < sdNum.value; j++) {       arr[i][j] = Math.floor(Math.random() * 9) + 1     }   }   return arr } const generateShuDu = () => {   rightList.value = []   randomNum.value = 0   repeatNum.value = 0   const arr = generateArr()   console.log(arr)   //   随机数去重   const duplicateRemoval = []   for (let i = 0; i < arr.length; i++) {     // console.log(arr[i])     for (let j = 0; j < arr[i].length; j++) {       if (duplicateRemoval.indexOf(arr[i][j]) == -1) {         duplicateRemoval.push(arr[i][j])       }       //   console.log(arr[i][j])     }   }   const randomValue = Math.floor(Math.random() * duplicateRemoval.length)   console.log(duplicateRemoval)   console.log(randomValue)   randomNum.value = duplicateRemoval[randomValue]   rightList.value = duplicateRemoval   console.log(222)
  console.log(randomNum.value)   for (let i = 0; i < arr.length; i++) {     for (let j = 0; j < arr[i].length; j++) {       if (arr[i][j] == randomNum.value) {         repeatNum.value = repeatNum.value + 1       }     }   }   console.log(repeatNum.value) }
// // 点击重新开始了数独游戏 const clickBtn = () => {   generateShuDu() }
// 点击开始计时 const startGame = () => {   if (goToState.value == false) {     goToState.value = true     clearInterval(timmer.value)     timmer.value = null     startTime.value = '03:00'     stopTime.value = new Date().getTime() + 3 * 60 * 1000     //   stopTime.value = new Date().getTime() + 5 * 1000     timmer.value = setInterval(() => {       newDateTime.value = stopTime.value - new Date().getTime()       console.log(newDateTime.value)       console.log(22)       if (newDateTime.value <= 0) {         startTime.value = '00:00'         clearInterval(timmer.value)         console.log('游戏超时自动结束')       } else {         startTime.value = transformTime(newDateTime.value)       }     }, 1000)   } } // 点击结束 计算分数 const endGame = () => {   if (goToState.value == true) {     goToState.value = false     clearInterval(timmer.value)     timmer.value = null     const residueTime = transformTime(newDateTime.value, 'stop')     console.log(residueTime)   } } // 时间转换 const transformTime = (date, state) => {   var datetime = ''   //计算出小时数   var leave1 = date % (24 * 3600 * 1000) //计算天数后剩余的毫秒数   //计算相差分钟数   var leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数   var minutes =     Math.floor(leave2 / (60 * 1000)) < 10       ? '0' + Math.floor(leave2 / (60 * 1000))       : Math.floor(leave2 / (60 * 1000))   //计算相差秒数   var leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数   var seconds =     Math.round(leave3 / 1000) < 10 ? '0' + Math.round(leave3 / 1000) : Math.round(leave3 / 1000)   if (state == 'stop') {     const secondsNum = Number(seconds) + Number(minutes) * 60     return secondsNum   } else {     datetime = minutes + ':' + seconds     return datetime   } } </script>
<style lang="scss"></style>

标签:uniapp,arr,const,console,value,js,1.0,ref,1000
From: https://www.cnblogs.com/dreammiao/p/18388667

相关文章

  • uniapp js 数独小游戏 写死的简单数独 数独 3.0
    <template> <viewclass="wrap">  数独:{{sdNum}}*{{sdNum}}  <viewclass="btn"style="padding:32rpx;background:pink"@click="startFun">点击开始计时</view>  <viewclass="btn&q......
  • 基于nodejs_vue+express框架个人健康管理系统的设计与实现_7999g
    个人健康管理系统按照功能由三部分构成的,三部份是用户、医生和管理员。主要功能有出诊医生、预约挂号、健康档案、疾病评枯等。系统软件用户、医生与管理员的功能模块图个人健康服务平台是以医院的状况为起点,综合网络空间开发设计要求。目的是将个人健康通过网络平台变换为在......
  • day15JS-es6的基础语法
     1.严格模式1.1严格模式的使用方法使用方法1:"usestrict";开启严格模式。使用方法2:<scripttype="moaule"></script> 当设置script标签为模块化时,自动启用严格模式。 1.2严格模式的限制1. 要求变量不能重名。//报错"usestrict";vara=2;vara=4; 2.......
  • 分享:JS事件循环机制,宏任务和微任务
     为什么会讲这个主题? 这要从一个bug讲起,10月26号,app端,我的考勤日历面板上的信息在ios上显示不全。效果见手机视频。 当时我们几个排查了2-3天都没找到原因,review代码各种改都不行。(此时打开代码看下,src/app/myAttendance/attendance.vueline298line246)最后通过setTimeo......
  • 技术分享:jsx语法和应用
    首先问问大家对JSX了解多少,可以提几个问题,引发大家的思考和求知欲。然后开始讲 JSX是React架构里的东西,但是不局限于React,它是一种JavaScript的语法扩展,完全是JavaScript内部实现的,所以vue里面也能用。 JSX的优点:JSX执行更快,因为它在编译为JavaScript代码后进行了优化它是......
  • JS动态引入模块
    这是静态引入,importxxfrom‘xxx’;这是动态引入,import('xxx')动态引入是一个异步操作,即它会返回一个Promise对象,因此我们可以捕获引入失败的异常。具体运用场景:路由由后端动态生成,前端根据获取到的路由动态生成菜单,并根据对应路由去找到对应的组件进行跳转。譬如路由为/hom......
  • 基于ssm+vue.js的山东红色旅游信息管理系统附带文章源码部署视频讲解等
    文章目录前言详细视频演示具体实现截图核心技术介绍后端框架SSM前端框架Vue持久层框架MyBaits为什么选择我代码参考数据库参考测试用例参考源码获取前言......
  • js逆向之jsRpc
    github: https://github.com/jxhczhl/JsRpc 简介:通过远程调用(rpc)的方式免去抠代码补环境 原理:在网站的控制台新建一个WebScoket客户端链接到服务器通信,调用服务器的接口服务器会发送信息给客户端客户端接收到要执行的方法执行完js代码后把获得想要的内容发回给服务......
  • 基于java ssm jsp mysql大学生社团管理系统毕业设计项目实战
    前言......
  • 基于java ssm jsp mysql大学生勤工助学管理系统毕业设计项目实战
    前言......