这学期选修了《微信小程序设计》这门通识课，最近准备把本学期的部分小作业整理一下。

一、案例描述

设计一个微信小程序，由后台生成一个0~100的随机整数，用户猜这个整数，并在输入框中输入用户猜的数字，点击提交按钮，小程序将用户输入的整数与后台生成的随机整数进行比较，并输出结果。同时输出用户提交的次数。如果用户猜不出来，点击按钮可查看答案。

二、设计思路

1.页面设计思路

由于需要用户输入数字与后台随机整数进行比较，我们可以通过输入框input组件获得用户输入。接下来通过view组件显示提示信息和输入次数。最后还要有提交按钮，即button组件。我们还可以设计一个查看答案的按钮，通过hidden命令先将答案隐藏，如果用户点击查看答案按钮则显示答案。

2.逻辑层设计思路

由于需要后台生成一个0~100的随机整数，所以我们可以在js文件中定义一个random函数，用来生成随机整数。同时，我们还需要一个函数来判断用户输入与系统随机整数大小，并输出相应的结果。在判断函数中，我们可以定义一个变量i，用来计数。

三、程序设计

1.页面设计

首先通过input组件定义一个输入框来获得用户输入，代码如下：

<input placeholder="请输入一个0~100的整数" type="digit" bindinput="num"></input>

接下来通过view组件获得后台提示信息和输入次数并显示

<view>提示信息：{{tips}}</view>
<view>输入次数：{{i}}</view>

最后提交和查看答案按钮可以通过button组件实现

<button bindtap="judge">提交</button>
<button bindtap="answer">猜不出来？点我查看答案</button>

我们可以通过view组件显示答案

<view hidden="{{flag}}"><view>答案：{{rand}}</view>
</view>

2.逻辑层设计

首先通过onLoad函数生成一个0~100的随机整数，代码如下：

onLoad:function(){r=parseInt(Math.random()*101);
},

接下来通过input组件绑定的num函数获得用户的输入数字，代码如下：

num:function(e){this.setData({random:parseInt(e.detail.value)})
},

获得随机数和用户输入数字之后我们就可以进行判断，并输出提示信息，可以如下实现：

judge: function(){i++if(this.data.random == r){this.setData({tips:"恭喜你，猜对了！"})}else if(this.data.random > r){this.setData({tips:"你输入过大！"})}else{this.setData({tips:"你输入过小！"})}this.setData({i:i})
},

我们还需要一个函数来控制答案的显示，代码如下：

answer:function(){this.setData({rand:r,flag:false})
},

到这，我们的基本功能就已经实现了。

四、页面美化

基本功能实现之后，我们可以通过修改wxss文件对我们的程序进行美化。

我们可以给页面一个背景颜色，然后让输入有一个边框，之后还可以对button按钮样式进行修改设计。

代码如下：

page{background: #f1f0f6
}
input{background: #fff;height: 120rpx;margin: 10px;padding-left: 8px;border: solid 1px silver
}
button{margin: 50rpx 0rpx;background-color: red;color: white;
}

五、源代码

1.js文件代码

var rand,i=0,r,random,tips;
Page({data: {flag:true,random:'',tips:'',times:''},onLoad:function(){r=parseInt(Math.random()*101);console.log(r)},num:function(e){this.setData({random:parseInt(e.detail.value)})},
judge: function(){i++if(this.data.random == r){this.setData({tips:"恭喜你，猜对了！"})
}else if(this.data.random > r){this.setData({tips:"你输入过大！"})
}else{this.setData({tips:"你输入过小！"})
}
this.setData({i:i
})
},
answer:function(){this.setData({rand:r,flag:false})
},
})

2.wxml文件代码

<view class="title">猜数字小游戏</view>
<view><input placeholder="请输入一个0~100的整数" type="number" bindinput="num"></input>
</view>
<view style="font-size:20px;margin:10px;">提示信息：{{tips}}</view>
<view style="font-size:20px;margin:10px;">输入次数：{{i}}</view>
<button bindtap="judge" style="width:90%;">判断</button>
<button bindtap="answer" style="width:90%;">猜不出来？点我查看答案</button>
<view hidden="{{flag}}"><view style="font-size:20px;margin:10px;">答案：{{rand}}</view>
</view>

3.wxss文件代码

page{background: #f1f0f6
}
input{background: #fff;height: 120rpx;margin: 10px;padding-left: 8px;border: solid 1px silver
}
button{margin: 50rpx 0rpx;background-color: red;color: white;
}

微信小程序开发实例：猜数字小游戏相关推荐

微信小程序开发之猜词游戏
基于微信小程序开发的猜词游戏.之所以想开发这个小游戏,是因为网上类似的游戏,充斥了太多广告和暗坑,所以想想比如自己开发一个. 以下是几个截图,比较简单,但是足够自己玩了:) 源码地址供参考: 微信小程 ...
微信小程序开发学习1（小程序的入门知识）
微信小程序开发学习1(小程序的入门知识) 1.制定学习目标: 能够知道如何创建小程序项目能够清楚小程序项目的基本组成结构能够知道小程序页面的几个组成部分能够知道小程序中常见的组件如何使用能够知 ...
【微信小程序开发（云壁纸小程序教程）】
微信小程序开发(云壁纸小程序教程) 1. 准备 HBuilder X 和微信开发者工具 2. 进入网站注册小程序 3. 点击发行,这时候就用到微信开发者工具 1. 准备 HBuilder X 和微 ...
微信小程序开发详细步骤(企业小程序开发流程)
今天珍奶bb给大家简单唠唠微信小程序开发详细步骤(企业小程序开发流程)? 微信小程序制作流程是什么?微信小程序制作模板套用怎么操作?今天珍奶bb给大家简单唠唠微信小程序制作流程是什么? 在唠微信小程序 ...
视频教程-老司机讲前端之微信小程序开发成语消消乐游戏视频课程-微信开发
老司机讲前端之微信小程序开发成语消消乐游戏视频课程中国实战派HTML5培训第一人,微软技术讲师,曾任百合网技术总监,博看文思HTML5总监.陶国荣长期致力于HTML5.JavaScript.CSS3 ...
老司机讲前端之微信小程序开发成语消消乐游戏视频课程-陶国荣-专题视频课程...
老司机讲前端之微信小程序开发成语消消乐游戏视频课程-102人已学习课程介绍本课通过一个完整.真实的游戏项目,带着学员手动开发代码,本课分项目介绍.界面效果.技术分析.代码实现.打包 ...
微信小程序开发实例：猜成语游戏
文章目录一.案例描述二.设计思路 1.页面设计思路 2.逻辑层设计思路三.关键技术 1.用户选择内容实时显示在前端 2.setData给循环数组赋值 3.点击按钮删除用户当前选择 4.播放音乐 ...
微信小程序开发之——比较数字大小-创建项目(2.1)
一概述本文通过比较数字大小的案例,来学习小程序中的一些基础知识,包括页面组件.页面样式.页面逻辑的编写,了解配置文件中常见配置的含义,利用事件.数据绑定.条件渲染.表单等方式实现小程序的页面交互 ...
《微信小程序》微信小程序开发实例
wx-gesture-lock 微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 sh ...

微信小程序开发实例：猜数字小游戏