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

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

项目展示



项目链接


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;/*固定高度*/
}


js


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



相关文章
|
5月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的使命召唤游戏助手附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的使命召唤游戏助手附带文章和源代码部署视频讲解等
56 5
基于ssm+vue.js+uniapp小程序的使命召唤游戏助手附带文章和源代码部署视频讲解等
|
22天前
|
人工智能 小程序 搜索推荐
成功案例分享|使用AI运动识别插件+微搭,快速搭建AI美体运动小程序
今天给大家分享一个最近使用我们的“AI运动识别小程序插件”+“微搭”搭建小程序的经典案例。
成功案例分享|使用AI运动识别插件+微搭,快速搭建AI美体运动小程序
|
5月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的原神游戏商城附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的原神游戏商城附带文章和源代码部署视频讲解等
60 4
|
20天前
|
缓存 数据可视化 Serverless
微信小游戏 案例一 像素飞机
微信小游戏 案例一 像素飞机
16 2
|
20天前
|
JavaScript 小程序 前端开发
微信小程序 案例二 飞机大战
微信小程序 案例二 飞机大战
37 0
微信小程序 案例二 飞机大战
|
11天前
|
小程序 搜索推荐 前端开发
短剧小程序开发案例
首先,明确你的短剧平台的目标用户群体和他们的需求。比如,年轻用户可能更倾向于轻松、幽默的短剧内容,而家庭用户则可能更偏爱教育、亲子类的短剧。了解用户需求有助于你设计更符合他们口味的功能和界面
|
25天前
|
人工智能 小程序 Python
Python编程小案例——编一个事件提醒弹窗小程序
Python编程小案例——编一个事件提醒弹窗小程序
20 0
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的游戏账号交易微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的游戏账号交易微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
4月前
|
XML Java 数据格式
支付系统----微信支付20---创建案例项目--集成Mybatis-plus的补充,target下只有接口的编译文件,xml文件了,添加日志的写法
支付系统----微信支付20---创建案例项目--集成Mybatis-plus的补充,target下只有接口的编译文件,xml文件了,添加日志的写法
支付系统----微信支付16----创建案例项目-引入Swagger
支付系统----微信支付16----创建案例项目-引入Swagger