项目展示

项目链接

https://download.csdn.net/download/weixin_45525272/17043459

项目设计

关于于规则就不写了

wxml

<!--pages/game/game.wxml-->
<view class='container'><text>欢迎来到猜数字小游戏</text><form><block wx:if='{{isGameStart}}'><input bindinput='getNumber' type='number' placeholder='请输入0-100之间的数字'></input><button type='warn' form-type='reset' bindtap='guess'>提交</button></block><block wx:else><button type='primary' bindtap='restartGame'>重新开始</button></block></form><text id='tip'>{{tip}}</text>
</view>

wxss

/* pages/game/game.wxss */
/*文本框*/
input{border: 1rpx solid green;/*1rpx宽的绿色实线边框*/margin: 30rpx 0;/*上下外边距30rpx*/height: 90rpx;/*高度*/border-radius: 20rpx; /*圆角边框*/
}/*提示框*/
#tip{height:800rpx;/*固定高度*/
}

// pages/game/game.js
Page({/*** 页面的初始数据*/data: {},/*** 数据初始化*/initial: function() {this.setData({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 {//回合数增加1let 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 + '，小了！';}if (count == 8) {tip += ' \n游戏结束';this.setData({ isGameStart: false });//游戏结束}//更新提示语句和回合数this.setData({tip: tip,count: count});}},/*** 游戏重新开始*/restartGame: function() {this.initial();},/*** 生命周期函数--监听页面加载*/onLoad: function(options) {this.initial();},
})

微信小程序——猜数字游戏小案例相关推荐

猜数字游戏-小程序组件-基础入门
效果展示 1.创建页面文件首页:index.wxml 开始游戏:game.wxml 游戏规则:rules.wxml 关于我们:about.wxml 需修改aoo.json文件内的pages属性 {& ...
Python之有趣的小程序——猜数字2.0
目录前言一.前景回顾二.思路讲解三.猜数字2.0介绍四.猜数字2.0源程序五.程序讲解 1.基础部分 (1)while循环与for循环 (2)数值大小判断 2.再来一局总结前言让大家 ...
微信小程序猜数字小游戏
用户输入1-100之间的数字,根据结果提示用户猜的大小,如果用户猜对可以重新开始(还可以设置猜的次数) 效果图点击开始游戏界面游戏规则界面关于其他界面我的首页(效果图)使用的是index03 ...
Java小工具-猜数字游戏（exe版）另附Java文件转exe文件教程
游戏效果: 系统会随机生成一正整数(1~100),猜测该数字,猜的次数越少,得分越高,6次猜不中,游戏结束.在这之前你将无法退出程序! 程序部分截图: 没有很复杂的逻辑,就直接上代码了(可以直接跑): ...
第一个python小程序猜字游戏
#!/bin/python # -*- coding: UTF-8 -*- # Filename : caizi.py # 生成一个0-100以内的随机数#导入 random(随机数)模块 impor ...
猜物品游戏java编程_小猿圈Java初学者练习小案例：猜数字游戏
对于Java初学者,如果没有好的引导,可能会觉得自己学什么都不好,学什么都不会,这个时候就要给他们一下小的案例,让他们去实践一下,让他们知道自己学的东西是可以用到的,小猿圈java讲师为你准备了Jav ...
java 后台跳出提示_小猿圈Java初学者练习小案例：猜数字游戏
对于Java初学者,如果没有好的引导,可能会觉得自己学什么都不好,学什么都不会,这个时候就要给他们一下小的案例,让他们去实践一下,让他们知道自己学的东西是可以用到的,小猿圈java讲师为你准备了Jav ...
【入门级C语言程序 -- 猜数字】Guess Number Game
今天小玄给大家带来一个简单的C语言小程序 -- 猜数字的游戏. 其中主要涉及到的要点是随机数的产生 : 首先需要引入头文件 :<stdlib.h> <time.h> 然后去使 ...
JavaScript应用——手把手教你做一个页面化猜数字游戏
一听到猜数字游戏,想必大家都不太陌生吧?是的没错,很多人都用C语言或者Java写过猜数字游戏小程序,博主也不例外,之前写过C语言版本的猜数字游戏,感兴趣的同学可以看看C语言版本猜数字游戏.本篇博客主要 ...

微信小程序——猜数字游戏小案例

文章目录

项目展示

项目链接

项目设计

微信小程序——猜数字游戏小案例相关推荐

最新文章

热门文章