Android微信小程序如何实现猜数字小游戏
发表于:2024-10-22 作者:千家信息网编辑
千家信息网最后更新 2024年10月22日,这篇文章主要介绍"Android微信小程序如何实现猜数字小游戏",在日常操作中,相信很多人在Android微信小程序如何实现猜数字小游戏问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希
千家信息网最后更新 2024年10月22日Android微信小程序如何实现猜数字小游戏
这篇文章主要介绍"Android微信小程序如何实现猜数字小游戏",在日常操作中,相信很多人在Android微信小程序如何实现猜数字小游戏问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答"Android微信小程序如何实现猜数字小游戏"的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
功能介绍
用户输入1-100之间的数字,根据结果提示用户猜的大小,如果用户猜对可以重新开始(还可以设置猜的次数)
效果图
点击开始游戏界面
游戏规则界面
关于其他界面
我的首页(效果图)使用的是index03 开始游戏使用的是index 游戏规则使用的是index01 关于其他使用的是index02
(创建文件在app.json里面,这是我的app.json创建的文件)
(由于我的首页效果图使用的是index03,所以要放在前面)
一.首页效果图(index03)的代码
WXML代码
//url是我要跳转的页面
WXSS代码
/* pages/index03/index03.wxss */.box2{ margin-top: 200rpx; width: 100%; height: 100rpx;}.box3{ margin-top: 240rpx; width: 100%; height: 100rpx;}
二.开始游戏页面(index)代码
WXML代码
{{tip}}
WXSS代码
/**index.wxss**/input{ border: 2rpx solid green; margin: 30rpx 0; height: 90rpx; /* 圆角边框 */ border-radius: 20rpx; }#tip{ /* 固定高度 */ height: 800rpx;}.demo-box{ height: 400rpx;}navigator{ text-align: center;}
index.js代码
// index.js Page({ data: { }, initial:function(){ this.setData({ // Math.round取整 //Math.random()取随机数只是0-1之间的小数 所以在此我们*100取0-100之间随机数 answer:Math.round(Math.random()*100), // 回合数 count:0, // 提示语句 tip:'', // 用户猜的数字 x:-1, // 游戏已经开始 isGameStart:true }); //控制台打印出来系统随机数答案 console.log("答案是"+this.data.answer); }, // 获取用户输入的数字 getNumber:function(e){ this.setData({ x : e.detail.value }); }, // 本回合开始猜数字 guess:function(){ // 获取用户本回合填写的数字 let x = this.data.x; // 重置x为未获得新数字状态 this.setData({x:-1}); if(x<0){ // 提示语 wx.showToast({ title: '不能小于0', }); }else if(x>100){ wx.showToast({ title:'不能大于100', }); }else{ // 回合数增加 let count = this.data.count + 1; // 获取当前提示信息 let tip = this.data.tip; // 获取正确答案 let answer = this.data.answer; if(x == answer){ tip += '\n第' + count +'回合:' + x +',猜对了!'; // 游戏结束 this.setData({isGameStart:false}); }else if(x > answer){ tip += '\n第' + count +'回合:' + x +',大了!'; }else{ tip += '\n第' + count +'回合:' + x +',小了!'; } //count回合数,这里我设置的是用户只能猜5次 if(count == 5){ tip += '\n游戏结束'; this.setData({isGameStart:false}); } // 更新提示语句和回合数 this.setData({ tip:tip, count:count }); } }, // 游戏重新开始 restartGame:function(){ this.initial(); }, //options(Object) onLoad: function(options) { this.initial(); }
三.游戏规则页面(index01)代码
WXML代码
1.系统随机生成1-100的数字让玩家猜 2.玩家共有5次机会 3.在5次之内玩家猜成功 4.点击开始游戏进入界面 5.猜对或猜对玩家可重新开始
WXSS代码
/* pages/index01/index01.wxss */.demo-box{ display: flex; //垂直布局 flex-direction: column; align-items: center; justify-content: space-around; /* width: 400rpx; */ height: 100vh;}text{ margin: 0 50rpx; //行高 line-height: 100rpx;}
四.关于其他页面(index02)代码
WXML代码
1.游戏仅供娱乐 2.此游戏有很多不足 3.玩家可以提供您宝贵意见 4.玩家根据提示猜,会有很大帮助
WXSS代码
/* pages/index02/index02.wxss */.demo-box{ display: flex; flex-direction: column; align-items: center; justify-content: space-around; /* width: 400rpx; */ height: 100vh;}text{ margin: 0 50rpx; line-height: 100rpx;}
到此,关于"Android微信小程序如何实现猜数字小游戏"的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注网站,小编会继续努力为大家带来更多实用的文章!
代码
数字
用户
玩家
回合
提示
小游戏
程序
合数
效果
效果图
游戏规则
界面
规则
页面
学习
之间
答案
随机数
首页
数据库的安全要保护哪些东西
数据库安全各自的含义是什么
生产安全数据库录入
数据库的安全性及管理
数据库安全策略包含哪些
海淀数据库安全审计系统
建立农村房屋安全信息数据库
易用的数据库客户端支持安全管理
连接数据库失败ssl安全错误
数据库的锁怎样保障安全
数据库的相近词
华为网络安全hcia
俄罗斯与乌克兰网络安全
电脑网站服务器硬件配置
软件开发要怎么做
日本无限制服务器
数据库检索技术的应用
老年人网络安全题库
拆hp服务器硬盘
网站找不到代理服务器
fifaol+3韩服数据库
互联网软件开发前途
人工智能是如何改变网络安全的
网络技术的瓶颈
我国针对网络安全出台的法律
网络安全的利
道闸软件开发
珠海酒店软件开发常见问题
开源广播服务器
数据库obs
济南软件开发外包公司哪个好
杭州嗯呐网络技术公司
天津智能医疗系统软件开发
沈阳app软件开发费用多少
深泽县首场网络安全培训
网络技术类知识产权
keil嵌入式软件开发系统
t3导入数据库
高青化工软件开发定制
生活中常用数据库有哪些