当前位置: 首页 > news >正文

微信小程序之猜数字和猜拳小游戏

目录

效果图

app.json

一、首页(index3)的代码

wxml代码

wxss代码

二、猜数字页面(index)代码

wxml代码

wxss代码

js代码

三.游戏规则页面(logs)代码

wxml代码

wxss代码

四.猜拳页面(q1)代码

wxml代码

wxss代码

js代码


效果图

app.json

一、首页(index3)的代码

wxml代码

<view class="box2"><navigator url="../index/index"><button type="default">猜数字</button></navigator>
</view>
<view class="box2"><navigator url="../logs/logs"><button type="primary">游戏规则</button></navigator>
</view>
<view class="box3"><navigator url="../q1/q1"><button type="default">猜拳</button></navigator>
</view>

wxss代码

.box2{margin-top: 200rpx;width: 100%;height: 100rpx;
}
.box3{margin-top: 240rpx;width: 100%;height: 100rpx;
}

二、猜数字页面(index)代码

wxml代码

<view class="container"><input type="number" placeholder="输入1到100的数字" bindinput="onInputChange"/><button bindtap="makeGuess">猜数字</button><text>{{message}}</text><view><text>猜数字历史:\n</text><block wx:for="{{guesses}}" wx:key="*this"><text>第{{index + 1}}次: {{item.num}} - {{item.hint}}\n</text></block></view>
</view>

wxss代码

.container {padding: 20px;
}input {width: 100%;border: 1px solid #ccc;padding: 10px;margin-bottom: 10px;
}button {width: 100%;background-color: #1aad19;color: white;padding: 10px;border: none;
}.history {margin-top: 20px;
}.history text {display: block; 
}

js代码

Page({data: {numberToGuess: null,guesses: [],guessCount: 0,inputNumber: '',message: '',hint: ''},onLoad: function() {this.startNewGame();},startNewGame: function() {const randomNum = Math.round(Math.random() * 100) + 1;this.setData({numberToGuess: randomNum,guesses: [],guessCount: 0,message: '开始猜数字吧!',hint: ''});},onInputChange: function(e) {this.setData({inputNumber: e.detail.value});},makeGuess: function() {const guess = parseInt(this.data.inputNumber, 10);if (isNaN(guess) || guess < 1 || guess > 100) {this.setData({ message: '请输入1到100之间的数字。' });return;}let newHint = '';if (guess === this.data.numberToGuess) {newHint = '猜对了!';this.setData({message: '恭喜你猜对了!游戏即将重新开始。',hint: newHint});setTimeout(() => {this.startNewGame();}, 2000);} else {newHint = guess < this.data.numberToGuess ? '猜小了!' : '猜大了!';this.setData({message: '继续猜...',hint: newHint});}const count = this.data.guessCount + 1;const guesses = this.data.guesses.concat({ num: guess, hint: newHint });this.setData({guessCount: count,guesses: guesses});if (count >= 5) {this.setData({message: '游戏结束,即将跳转...'});setTimeout(() => {wx.navigateTo({url: '/pages/index3/index3' });}, 2000);}}
});

三.游戏规则页面(logs)代码

wxml代码

<view class="demo-box">
<text>1.游戏仅供娱乐2.此游戏有很多不足3.玩家可以提供您宝贵意见
</text>
</view>

wxss代码

.demo-box{display: flex;flex-direction: column;align-items: center;justify-content: space-around;height: 100vh;
}
text{margin: 0 50rpx;line-height: 100rpx;
}

四.猜拳页面(q1)代码

wxml代码

<view class="container"><button bindtap="makeChoice" data-choice="scissors">剪刀</button><button bindtap="makeChoice" data-choice="rock">石头</button><button bindtap="makeChoice" data-choice="paper">布</button><text>玩家胜利次数:{{playerWins}}</text><text>电脑胜利次数:{{computerWins}}</text><text>平局次数:{{draws}}</text><text>{{message}}</text>
</view>

wxss代码

.container {display: flex;flex-direction: column;align-items: center;justify-content: center;
}button {margin: 10px;
}

js代码

Page({data: {playerWins: 0,computerWins: 0,draws: 0,message: ''},makeChoice: function(event) {const playerChoice = event.currentTarget.dataset.choice;const choices = ['scissors', 'rock', 'paper'];const computerChoice = choices[Math.round(Math.random() * choices.length)];const result = this.judge(playerChoice, computerChoice);if (result === 'win') {this.setData({playerWins: this.data.playerWins + 1,message: '你赢了这一轮!'});} else if (result === 'lose') {this.setData({computerWins: this.data.computerWins + 1,message: '电脑赢了这一轮!'});} else {this.setData({draws: this.data.draws + 1,message: '这一轮是平局!'});}this.checkGameEnd();},judge: function(player, computer) {if (player === computer) {return 'draw';}if ((player === 'scissors' && computer === 'paper') ||(player === 'rock' && computer === 'scissors') ||(player === 'paper' && computer === 'rock')) {return 'win';}return 'lose';},checkGameEnd: function() {if (this.data.playerWins === 2 || this.data.computerWins === 2) {wx.navigateTo({url: '/pages/index3/index3' });}}
});

相关文章:

微信小程序之猜数字和猜拳小游戏

目录 效果图 app.json 一、首页&#xff08;index3&#xff09;的代码 wxml代码 wxss代码 二、猜数字页面&#xff08;index&#xff09;代码 wxml代码 wxss代码 js代码 三.游戏规则页面&#xff08;logs&#xff09;代码 wxml代码 wxss代码 四.猜拳页面&#xff…...

CETN01 - How to Use Cloud Classroom

文章目录 I. Introduction to Cloud ClassroomII. How to Use Cloud Classroom1. Publish Resources2. Conduct Activities3. Class Teaching Reports4. View Experience Values5. Performance in Cloud Classroom I. 云课堂介绍II. 如何使用云课堂1. 发布资源2. 进行活动3. 班…...

安卓8预装可卸载应用

环境 系统&#xff1a;Android 8 CPU:MTK 理论上改法适用于其他平台&#xff0c;比如展讯。 不适用于安卓11。安卓11请参照android 11预装APP到data/app目录 实现 假设要内置test这个应用。 第一步把test添加到系统编译配置中&#xff0c;不同平台或cpu文件不一样。 比如&am…...

微服务实战系列之MemCache

前言 书接前文&#xff0c;马不停蹄&#xff0c;博主继续书写Cache的传奇和精彩。 Redis主要用于数据的分布式缓存&#xff0c;通过设置缓存集群&#xff0c;实现数据的快速响应&#xff0c;同时也解决了缓存一致性的困扰。 EhCache主要用于数据的本地缓存&#xff0c;因无法保…...

解决服务端渲染程序SSR运行时报错: ReferenceError: document is not defined

现象&#xff1a; 原因&#xff1a; 该错误表明在服务端渲染 (SSR) 过程中&#xff0c;有一些代码尝试在没有浏览器环境的情况下执行与浏览器相关的操作。这在服务端渲染期间是一个常见的问题&#xff0c;因为在服务端渲染期间是没有浏览器 API。 解决办法&#xff1a; 1. 修…...

【漏洞复现】狮子鱼任意文件上传漏洞

漏洞描述 狮子鱼CMS(Content Management System)是一种网站管理系统,旨在帮助用户更轻松地创建和管理网站。它具有用户友好的界面和丰富的功能,包括页面管理、博客、新闻、产品展示等。 狮子鱼CMS使用简单直观的管理界面,使得网站所有者可以方便地进行内容的发布、管理和…...

LINUX 下部署github仓库

打开tumx django-admin startproject project_name #创建django项目 project_name配置git ssh-keygen # 生成密钥 连接 github 在github中打开setting 添加密钥 并且允许 write access git init # 把当前文件夹配置为git仓库 git config --global user.name xxx git config --g…...

CentOS中安装数据库

1.下载 网址&#xff1a;https://dev.mysql.com/downloads/mysql/ 按如图选择&#xff0c;然后点击Download 这里它让我们登录&#xff0c;我们直接选择不登录&#xff0c;直接下载 2.关闭防火墙 systemctl disable firewalld3.正式安装 切换到/usr/local下 cd /usr/l…...

GPT-Crawler一键爬虫构建GPTs知识库

GPT-Crawler一键爬虫构建GPTs知识库 写在最前面安装node.js安装GPT-Crawler启动爬虫结合 OpenAI自定义 assistant自定义 GPTs&#xff08;笔者用的这个&#xff09; 总结 写在最前面 GPT-Crawler一键爬虫构建GPTs知识库 能够爬取网站数据&#xff0c;构建GPTs的知识库&#xf…...

在微信小程序中如何改变默认打开的页面

在微信小程序中&#xff0c;在我们编写页面的时候&#xff0c;可能会在重新渲染的时候导致页面跳转到默认打开的页面上&#xff0c;为了提升用户的一个体验&#xff0c;我们可以设置一些内容来修改小程序默认打开的页面&#xff0c;提升开发者的开发体验。 当我们打开一个微信…...

Ardupilot开源飞控之VTOL之旅:配件试装

Ardupilot开源飞控之VTOL之旅&#xff1a;配件试装 1. 源由2. 分析2.1 【修改使用】FC & PDB & GPS打印件2.2 【直接使用】VTX & CRSF打印件 3. 试装3.1 【结构】问题1&#xff1a;GPS座子尺寸非常紧凑&#xff0c;需要用力压入卡座内。3.2 【结构】问题2&#xff…...

STM32-GPIO

一、GPIO简介 GPIO&#xff08;General Purpose Input Output&#xff09;通用输入输出口 可配置8种输入输出模式 引脚电平&#xff1a;0V~3.3V&#xff0c;部分引脚可容忍5V 输出模式下&#xff1a;可控制端口输出高低电平&#xff0c;用以驱动LED、控制蜂鸣器、模拟通信协议输…...

MySQL的事务

<!DOCTYPE html> <html> <head> <meta charset"UTF-8" /> <title>MySQL的事务</title> </head> <body> <!-- 事务是一组操作的集合&#xff0c;它是一个不可分隔的工作单位&#xff0c;事务会把所有的操作作…...

go-carbon v2.2.14 发布,轻量级、语义化、对开发者友好的 Golang 时间处理库

carbon 是一个轻量级、语义化、对开发者友好的 golang 时间处理库&#xff0c;支持链式调用。 目前已被 awesome-go 收录&#xff0c;如果您觉得不错&#xff0c;请给个 star 吧 github.com/golang-module/carbon gitee.com/golang-module/carbon 安装使用 Golang 版本大于…...

解决 IIS HTTP 403 错误问题

最近上传附件 IIS 总是返回 HTTP 403 错误,在踩了很多配置的坑之后,终于把问题解决了,于是特意写了本篇文章。 虽然网络上的文章不少,大都写的没错,但是他们没有很清晰的把问题描述清楚,导致一些新手在看这些文章跟着处理问题的时候难免会踩坑,于是我就以我踩坑的经验写…...

字符设备驱动基础—并发控制

一、上下文和并发场合 执行流&#xff1a;有开始有结束总体顺序执行的一段代码 又称上下文 应用编程&#xff1a;任务上下文 内核编程&#xff1a; 任务上下文&#xff1a;五状态 可阻塞 a. 应用进程或线程运行在用户空间 b. 应用进程或线程运行在内核空间&#xff08;通过调…...

5-Tornado入门、程序的原理图、tornado不能使用同步代码的演示

安装 pip install tornado第一个程序 from tornado import web from tornado import ioloop class IndexHandler(web.RequestHandler):def get(self):self.write(Hello Tornado!!123)if __name__ __main__:# 1.创建了app对象&#xff0c;设置路由,并开启debug模式app web.A…...

mysql原理--InnoDB记录结构

1.InnoDB行格式 我们平时是以记录为单位来向表中插入数据的&#xff0c;这些记录在磁盘上的存放方式也被称为 行格式 或者 记录格式 。 设计 InnoDB 存储引擎的大叔们到现在为止设计了4种不同类型的 行格式 &#xff0c;分别是 Compact 、 Redundant 、Dynamic 和 Compressed 行…...

ES6基础语法

目录 一、解构 数组解构 对象解构 字符串解构 数值解构 布尔值解构 二、箭头函数 和普通函数区别? 三、拓展运算符 ... 一、解构 给右侧值匹配对应的变量 等号两侧模式一定要匹配 数组解构 /*** 解构&#xff1a;从数组或者对象中提取值&#xff0c;给变量进行赋值操作就…...

java8 常用code

文章目录 前言一、lambda1. 排序1.1 按照对象属性排序&#xff1a;1.2 字符串List排序&#xff1a;1.3 数据库排序jpa 2. 聚合2.1 基本聚合&#xff08;返回对象list&#xff09;2.2 多字段组合聚合&#xff08;直接返回对象list数量&#xff09; 二、基础语法2.1 List2.1.1 数…...

docker 镜像管理

搜索镜像&#xff1a;这种方法只能用于官方镜像库搜索基于 centos 操作系统的镜像# docker search centos ​按星级搜索镜像&#xff1a; 查找 star 数至少为 100 的镜像&#xff0c;默认不加 s 选项找出所有相关 ubuntu 镜像&#xff1a; # docker search ubun…...

Jira 中如何修改时间为绝对时间

问题描述 在使用Jira的时候&#xff0c;有一些时间显示的是相对时间&#xff0c;如&#xff1a;2天前&#xff0c;3个小时前等&#xff0c;有些用户不习惯这样的显示方式&#xff0c;希望使用绝对的时间格式&#xff0c;如&#xff1a;2022年2月22日 22:22 应该怎样修改 解…...

班级查分软件制作教程:老师必备技能!

首先&#xff0c;你需要选择一个合适的软件平台来制作班级查分软件。推荐使用群发成绩&#xff0c;因为它是一个功能强大且易于使用的在线查询系统&#xff0c;可以帮助你快速高效地制作班级查分软件​。 在制作班级查分软件之前&#xff0c;你需要准备好学生的成绩数据。这可以…...

Linux 的性能调优的思路

Linux操作系统是一个开源产品&#xff0c;也是一个开源软件的实践和应用平台&#xff0c;在这个平台下有无数的开源软件支撑&#xff0c;我们常见的apache、tomcat、mysql等。 开源软件的最大理念是自由、开放&#xff0c;那么Linux作为一个开源平台&#xff0c;最终要实现的是…...

如何通过webdriver禁用浏览器定位功能

今天碰到一个小问题&#xff0c;在使用了代理ip的情况下访问某些站点&#xff0c;但是还是显示本地的ip地址&#xff0c;这个是什么问题呢&#xff0c;原来是谷歌浏览器默认打开了定位功能 那么问题来了&#xff0c;如何在使用webdriver的时候关闭浏览器的定位功能呢&#xff1…...

网卡bonding绑定

目录 一、概念 1、概述&#xff1a; 二、实验 1、绑定案例&#xff1a; 一、概念 1、概述&#xff1a; 将多个物理网卡进行排列组合&#xff0c;形成逻辑网卡&#xff0c;网卡的高可用 绑定模式 mode0&#xff08;平衡负载模式&#xff09;&#xff1a;平时两块网卡均工…...

flink运行报Exception in thread “main“ java.lang.IllegalStateException

问题描述 运行flink程序时报异常&#xff0c;异常信息如下&#xff1a; Exception in thread "main" java.lang.IllegalStateException: No ExecutorFactory found to execute the application.at org.apache.flink.core.execution.DefaultExecutorServiceLoader.g…...

易点易动设备管理系统--提升设备备品备件管理效率的工具

设备备品备件管理是市场推广人员关注的重要问题之一。为了帮助市场推广人员提升设备备品备件管理效率&#xff0c;易点易动设备管理系统应运而生。本文将详细介绍易点易动设备管理系统的功能和优势&#xff0c;以及如何借助该系统提高设备备品备件管理效率&#xff0c;提升企业…...

第二十一章——网络通信

一.网络程序设计基础 1.局域网与互联网 2.网络协议 1.IP协议 IP是Internet Protocol的简称&#xff0c;是一种网络协议。 1.1 TCP/IP层次结构 2.TCP与UDP协议 TCP可保证数据从一端送至另一端时&#xff0c;能够确实送达&#xff0c;而且抵达的数据的排列顺序和送出时的顺序相…...

Siemens-NXUG二次开发-打开与关闭prt文件[Python UF][20231206]

Siemens-NXUG二次开发-打开与关闭prt文件[Python UF][20231206] 1.python uf函数1.1 NXOpen.UF.Part.Open1.2 NXOpen.UF.Part.LoadStatus1.3 NXOpen.UF.Part.Close1.4 NXOpen.UF.Part.AskUnits 2.示例代码3.运行结果3.1 内部模式3.2 外部模式 1.python uf函数 1.1 NXOpen.UF.P…...

linux wordpress 下载/湖南长沙最新疫情

1.JS基本语法&#xff1a; 1.js引入方式 js是脚本语言&#xff0c;可以在浏览器中执行。js文件是以.js为结尾的&#xff0c;引入html文件中时使用script标签&#xff0c;这时script需要添加一个属性src&#xff0c;src中写js文件的路径&#xff1b;但是js还可以直接写在html当中…...

宣城市住房和城乡建设委网站/短视频营销推广策略

Flex 是一个高效、免费的开源框架&#xff0c;可用于构建具有表现力的 Web应用程序&#xff0c;这些应用程序利用Adobe Flash Player和Adobe AIR, 可以实现跨浏览器、桌面和操作系统。虽然只能使用 Flex 框架构建 Flex应用程序&#xff0c;但Adobe Flash Builder™&#xff08;…...

可以做公司宣传的网站有哪些/互联网营销模式有哪些

1 概述 在平时开发中&#xff0c;git可以说是我们最不陌生的工具了。而且在提交线上代码或者是将自己功能分支上的代码给cherry-pick到预发分支上时&#xff0c;如果只提交了一个点那么直接cherry-pick就可以了&#xff0c;但是提交了很多点时&#xff0c;一个一个的cherry-pic…...

网站建设的合同书/网络营销策略制定

一、前言为了方便小公司没有运维开发人员&#xff0c;利用Jenkin解决了繁琐的打包部署问题。这次我就写了一个Gogs的集成教程&#xff0c;我觉的Gogs私服比较简单&#xff0c;其他的GitLab、svn、GitHub基本上也是一样的&#xff0c;搭建好了&#xff0c;开发人员只需要提交到版…...

php .net做网站哪个好/百度一下首页网址百度

一、加载过程 首先&#xff0c;我们需要搞清楚一个概念&#xff1a;我们在电脑上看到的 png 格式或者 jpg 格式的图片&#xff0c;png(jpg) 只是这张图片的容器&#xff0c;它们是经过相对应的压缩算法将原图每个像素点信息转换用另一种数据格式表示&#xff0c;以此达到压缩目…...

做网站无锡/成都网站优化平台

ComponentScan和SpringBootApplication使用后都会出现这个图标&#xff0c;而SpringBootApplication注解之所以会出现这个图标是因为在该注解内使用到了ComponentScan注解&#xff0c;表示进行了组件扫描。例如&#xff1a; 当在类上使用Controller、Service、Repository、Comp…...