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

目录

效果图

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' });}}
});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/201317.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ElasticSearch篇---第三篇

系列文章目录 文章目录 系列文章目录前言一、了解ElasticSearch 深翻页的问题及解决吗?二、熟悉ElasticSearch 性能优化三、ElasticSearch 查询优化手段有哪些?前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这…

编程过程中出现bug如何应对?

编程过程中出现bug如何应对&#xff1f; 1.找错误原因 如果完全不知道出错的原因&#xff0c;或者说存在着很多错误的有原因&#xff0c;----》控制变量法 例如&#xff0c;昨天我在使用torchrun 多卡并行一个程序的时候&#xff0c;出现了大量的bug, 于是我将报错信息放在网…

visual Studio MFC 平台实现拉普拉斯和拉普拉斯与直方图均衡化与中值滤波相结合实现比较

拉普拉斯变换的原理与应用 本文使用visual Studio MFC 平台实现图像增强中的拉普拉斯变换&#xff0c;同时拉普拉斯一般不会单独使用&#xff0c;与其他平滑操作相结合&#xff0c;本文使用了拉普拉斯与直方图均衡化以及与中值滤波相结合&#xff0c;也对三种方式进行了对比 关…

如何提高Pycharm的使用体验?

汉化 文件---设置---插件---chinese---安装---重启ide 代码补全 tabnine 文件---设置---插件---tabnine---安装---重启ide 重启ide后生效&#xff0c;补全效果如下 自定义背景 文件---设置---外观---背景图像---选择图片---调整透明度保存即可 设置头部声明 英文版…

基于Java SSM框架实现社区疫情防控管理系统项目【项目源码+论文说明】计算机毕业设计

基于java的SSM框架实现社区疫情防控管理系统演示 摘要 随着科学技术的飞速发展&#xff0c;社会的方方面面、各行各业都在努力与现代的先进技术接轨&#xff0c;通过科技手段来提高自身的优势&#xff0c;社区疫情防控管理信息系统当然也不能排除在外。社区疫情防控管理信息系…

Unity3D对CSV文件操作(创建、读取、写入、修改)

系列文章目录 Unity工具 文章目录 系列文章目录前言一、Csv是什么&#xff1f;二、创建csv文件2-1、构建表数据2-2、创建表方法2-3、完整的脚本&#xff08;第一种方式&#xff09;2-4、运行结果2-5、完整的脚本&#xff08;第二种方式&#xff09;2-6、运行结果2-7、想用哪种…

springboot075电影评论网站系统设计与实现

springboot075电影评论网站系统设计与实现 成品项目已经更新&#xff01;同学们可以打开链接查看&#xff01;需要定做的及时联系我&#xff01;专业团队定做&#xff01;全程包售后&#xff01; 2000套项目视频链接&#xff1a;https://pan.baidu.com/s/1N4L3zMQ9nNm8nvEVf…

面试题:公司规定所有接口都用 post 请求,这是为什么?

文章目录 前言get 与 post 的区别所有接口都用 post 请求&#xff1f;网友程墨 Morgan网友苏莉安网友大宽宽 前言 最近在逛知乎的时候发现一个有趣的问题&#xff1a;公司规定所有接口都用 post 请求&#xff0c;这是为什么&#xff1f; 看到这个问题的时候其实我也挺有感触的…

可编程电子负载的应用前景如何

可编程电子负载是一种模拟真实负载的电子设备&#xff0c;它可以模拟各种不同类型和规格的负载&#xff0c;如电阻、电容、电感等。通过可编程的方式&#xff0c;用户可以根据需要灵活地调整负载的大小、电压、电流等参数&#xff0c;以满足不同的测试需求。随着科技的不断发展…

pod容器内无法访问集群外部主机ipv6地址

一、背景 同事反馈他这边有一环境出现pod容器内无法请求集群外部主机ipv6地址&#xff0c;但是在pod所在集群所主机上是可以请求到外部主机ipv6地址。 二、问题处理过程 首先主机和主机之间ipv6地址能通讯&#xff0c;说明主机之间网络是没啥问题&#xff0c;哪问题就出在容器…

微信小程序已经审核通过但是提示订单中心path不通过

设置-基本设置-服务内容声明 更改path重新审核即可

ABCDE类网络的划分及保留网段

根据IP地址的分类&#xff0c;IP地址被分为A、B、C、D和E五类。下面是对ABCDE类网络的划分及保留网段的详细描述&#xff1a; A类网络&#xff1a;范围从1.0.0.0到127.0.0.0&#xff0c;网络地址的最高位必须是“0”&#xff0c;可用的A类网络有127个&#xff0c;每个网络能容…

【算法提升—力扣每日一刷】五日总结【11/30-12/04】

2023/11/30 力扣每日一刷&#xff1a;1.两数之和 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是&#xff0c;数组中同一个元…

TCP协议实现一对一聊天

服务端代码&#xff1a; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.io.PrintWriter; import java.net.ServerSocket; import java.net.Socket; import java.util.Scanner;/*** 发送消息线程*/ class Send e…

linux无法打开M4a格式音频的解决方法

linux是开源系统&#xff0c;之所以打不开&#xff0c;是因为部分linux系统为了避免版权问题&#xff0c;没有m4a的解码插件。所以&#xff0c;解决的办法是安装如下两个非常小的转换器&#xff0c;我们一般用不到转换器的功能&#xff0c;而是反向应用&#xff0c;通过两个几十…

『亚马逊云科技产品测评』活动征文|基于亚马逊EC2云服务器安装Bolo开源博客

授权声明&#xff1a;本篇文章授权活动官方亚马逊云科技文章转发、改写权&#xff0c;包括不限于在 Developer Centre, 知乎&#xff0c;自媒体平台&#xff0c;第三方开发者媒体等亚马逊云科技官方渠道 亚马逊EC2云服务器&#xff08;Elastic Compute Cloud&#xff09;是亚马…

shell脚本实战之mysql-物理备份实现周内备份策略

一.shell脚本要求 # 数据库备份脚本方式: 物理备份# 工具:xtrabackup过程# 需求1:不允许有任何的安在脚本中&#xff0c;# 需求2:在脚本中&#xff0c;不允许有任何的交互式代码容&#xff0c;使用日志记录# 需求3:在脚本中&#xff0c;不允许有任何输出# 需求4:每周为一个循环…

TA-Lib学习研究笔记(九)——Pattern Recognition (6)

TA-Lib学习研究笔记&#xff08;九&#xff09;——Pattern Recognition &#xff08;6&#xff09; 最全面的形态识别的函数的应用&#xff0c;通过使用A股实际的数据&#xff0c;验证形态识别函数&#xff0c;用K线显示出现标志的形态走势&#xff0c;由于入口参数基本上是o…

百度/抖音/小红书/微信搜索品牌形象优化怎么做?

搜索口碑是网络营销不可或缺的一部分&#xff0c;企业如何做好品牌搜索口碑优化呢&#xff1f;小马识途营销顾问建议从以下几方面入手。 1. 通过关键字优化提高自身知名度 通过对竞争对手和目标客户的关键字进行分析&#xff0c;企业可以确定哪些关键字可以提高自身品牌知名度。…

IDEA Maven 配置国内源

基本步骤 分别设置下图的两个&#xff0c;一个是对当前项目的设置&#xff0c;一个是对以后创建的项目设置&#xff0c;这样以后就不用重新配置了。 将下面的两个勾选上 注意&#xff0c;两个地方&#xff0c;Settings 和 Settings for New Projects 的勾都要勾上。 前往 User…