微信小程序----猜数字游戏.

目标:简单猜字游戏,系统随机生成一个数,玩家可以猜8次,8次未猜对,游戏结束;未到8次猜对,游戏结束。

思路和要求:

  创建四个页面,“首页”,“开始游戏”,“游戏规则”,“关于我们”。

(1)“首页”:可以点击“开始游戏”、“游戏规则”、“关于我们”,分别跳转到相应页面;

(2)“开始游戏”:初始化以后,随机生成一个数字,玩家可以猜8次,在8次之内猜对,游戏结束,可重新开始;未在8次之内猜对,游戏结束;

(3)“游戏规则”:用文字说明游戏的要求;

(4)“关于我们”:关于游戏开发人员等内容。

注意:创建不使用云服务的js模板的项目。

效果图:

第一步  app.json里面创建了四个页面。

index —— “首页”

game —— “开始游戏”

about —— “关于我们”

rules —— “游戏规则”

接着对页面进行设计,再进行功能设计。

第二步 对每个界面进行设计以及界面的逻辑

        (1)分别自定义每个页面的导航栏的标题

分析:不是全局变量,是局部变量,即分别在页面的json文件自定义导航栏标题。

        (2)设置全局样式,为微信小程序页面设置全局样式。

设置全局样式,为微信小程序页面设置全局样式。

(3)“首页”界面设计

效果图:

        (4)"游戏规则"页面设计

需要组件:text组件。

效果图如下:

        (5)“关于我们”页面进行设计

要求:text组件,主要是为了描述开发者等信息。

效果图:

        (6)“开始游戏”页面设计

划分为:三个板块,分别是:部欢迎语句、表单----输入框and提交按钮、提示语句;

        关键点:样式+内容

        样式如下:

        效果如下:

        页面逻辑:在js文件里面对游戏初始化:

        进入游戏界面,需要随机生成一个数,这个数是正确答案(answer),用户输入框可以输入数字(x),有8次机会,每提交一次(Count)需要有提示语句(tip),判断游戏状态(isGameStart),当正确答案与输入的数值相同时,结束游戏。

页面加载后调用初始化函数:

页面逻辑:

当游戏结束后,不能再输入数字,跳转到一个页面可以重新开始游戏,游戏又回到初始化。

解决办法:

使用block组件,可以使代码为一个整体,通过判断游戏是否结束(使用if else),来显示不同的内容。

效果图:

js代码:

// pages/game/game.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
   /**
   * 数据初始化
   */
  initial:function () {
    this.setData({
      answer: Math.round(Math.random() * 100),    //随机数
      count: 0,     // 回合数
      tip : '',     //提示语句
      x : -1,       //用户猜的数
      isGageState : true  //游戏状态
    }
    )  
  },

  /*获取用户输入的数字*/
  getNumber(e){
    //console.log(e.detail.value)
    this.setData({x :e.detail.value})
  },

  /*开始猜数字*/
  guess(){
    //获取用户输入的数字
    let x = this.data.x;
    //console.log(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 = tip + '\n第' + count + '回合' + x +',猜对了!';
        this.setData({isGageState : false});    //游戏结束
      }else if(x > answer){
        tip = tip + '\n第' + count + '回合' + x +',大了';
      }else{
        tip = tip + '\n第' + count + '回合' + x +',小了!';
      }
      //如果次数为8,游戏结束
      if(count == 8){
        tip = tip + '\n 游戏结束';
        this.setData({isGageState : false});    //游戏结束
      }
      //每次都需要更新原来的值,提示语句和回合数
      this.setData({
        tip : tip,
        count : count
      });
    }
  },
  /* 重新开始
   */
  restartGame(){
    this.initial();
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.initial();

  }
})

总结知识点:

1、<view class = "样式"></view>
2、<button type = "类型" form-type = "reset是将所有输入内容置为初始状态" bindtap = “点击按钮的事件”>内容<button>
3、设置全局样式,如果全局样式需要在这个页面显示

即:使用view组件:<view class = "container"> <view>
4、<text id = "内容,写样式时,需加#">内容<text>
5、<text id = "内容,写样式时,需加#">{{内容未变量时,要将变量放在两个大括号}}<text>
6、<form>表单里面有按钮,点击后提交内容</form>
7、<input bindinput = "输入框事件,一般未获取输入框里面的内容" type = "类型" placeholder = "输入框未输入显示的内容"></input>
js文件里面的知识点总结:
1、在js文件里面调用函数,格式:this.函数名称();
2.js文件初始化,可以写一个初始化函数,使用 this.setData({初始化1,初始化2});setData函数为其赋值。
3、改变变量的值:this.setData({变量名称: 值})
4、想要获取输入框里面的内容,不知道输入框内容是哪一个变量时,可以使用console.log(e)把事件打印出来,通过输入写代码。
5、获取变量:this.data.变量名称
6、使用轻度提示:
        wx.showToast({
                title: '需要提示的·内容,
              });

第三步 四个界面之间的关系

index.wxml代码:

分别点击“开始游戏”、“游戏规则”、“关于我们”字样跳转到对应页面。

index.js代码如下:

Page({

  /**
   * 页面的初始数据
   */
  data: {
    
  },
 goToGame(){
   wx.navigateTo(
     {
       url:'/pages/game/game'
     }
   )
 },

 goToRules(){
  wx.navigateTo(
    {
      url:'/pages/rules/rules'
    }
  )
},
goToAbout(){
  wx.navigateTo(
    {
      url:'/pages/about/about'
    }
  )
}
})

以上为全部内容,如有不正确的地方,敬请批评指正。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

hadoop基本概念

一、概念 Hadoop 是一个开源的分布式计算和存储框架。 Hadoop 使用 Java 开发&#xff0c;所以可以在多种不同硬件平台的计算机上部署和使用。其核心部件包括分布式文件系统 (Hadoop DFS&#xff0c;HDFS) 和 MapReduce。 二、HDFS 命名节点 (NameNode) 命名节点 (NameNod…

STM32 | Systick定时器(第四天)

STM32 第四天 一、Systick定时器 1、定时器概念 定时器:是芯片内部用于计数从而得到时长的一种外设。 定时器定时长短与什么有关???(定时器定时长短与频率及计数大小有关) 定时器频率换算单位:1GHZ=1000MHZ=1000 000KHZ = 1000 000 000HZ 定时器定时时间:计数个数…

Django缓存(二)

一、视图缓存 Django的缓存可以设置缓存指定的视图,具体方式使用django.views.decorators.cache.cache_page, 方法有2种方式: 装饰器:以方法以装饰器的方式使用 from django.views.decorators.cache import cache_page@cache_page(60 * 15,cache="default") def…

CRC计算流程详解和FPGA实现

一、概念 CRC校验&#xff0c;中文翻译过来是&#xff1a;循环冗余校验&#xff0c;英文全称是&#xff1a;Cyclic Redundancy Check。是一种通过对数据产生固定位数的校验码&#xff0c;以检验数据是否存在错误的技术。 其主要特点是检错能力强、开销小&#xff0c;易于电路实…

【prompt六】MaPLe: Multi-modal Prompt Learning

1.motivation 最近的CLIP适应方法学习提示作为文本输入,以微调下游任务的CLIP。使用提示来适应CLIP(语言或视觉)的单个分支中的表示是次优的,因为它不允许在下游任务上动态调整两个表示空间的灵活性。在这项工作中,我们提出了针对视觉和语言分支的多模态提示学习(MaPLe),以…

“架构(Architecture)” 一词的定义演变历史(依据国际标准)

深入理解“架构”的客观含义&#xff0c;不仅能使IT行业的系统架构设计师提升思想境界&#xff0c;对每一个积极的社会行动者而言&#xff0c;也具有长远的现实意义&#xff0c;因为&#xff0c;“架构”一词&#xff0c;不只限于IT系统&#xff0c;而是指各类系统(包括社会系统…

python(django)之流程接口管理后台开发

1、在models.py中加入流程接口表和单一接口表 代码如下&#xff1a; from django.db import models from product.models import Product# Create your models here.class Apitest(models.Model):apitestname models.CharField(流程接口名称, max_length64)apitester model…

C#,图论与图算法,计算图(Graph)的岛(Island)数量的算法与源程序

1 孤岛数 给定一个布尔矩阵,求孤岛数。一组相连的1形成一个岛。例如,下面的矩阵包含5个岛: 在讨论问题之前,让我们先了解什么是连接组件。无向图的连通分量是一个子图,其中每两个顶点通过一条路径相互连接,并且不与子图外的其他顶点连接。 所有顶点相互连接的图只有一个…

java数据结构与算法基础-----字符串------正则表达式---持续补充中

java数据结构与算法刷题目录&#xff08;剑指Offer、LeetCode、ACM&#xff09;-----主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/123063846 目前校招的面试&#xff0c;经常会遇到各种各样的有关字符串处理的算法。掌…

【docker系列】深入理解 Docker 容器管理与清理

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

JVM——运行时数据区

前言 由于JAVA程序是交由JVM执行的&#xff0c;所以我们所说的JAVA内存区域划分也是指的JVM内存区域划分&#xff0c;JAVA程序具体执行的过程如下图所示。首先Java源代码文件会被Java编译器编译为字节码文件&#xff0c;然后由JVM中的类加载器加载各个类的字节码文件&#xff0…

解决win10安装软件提示Microsoft Store界面

解决方法 1. 打开设置&#xff0c;找到应用 2. 应用与功能&#xff0c;选择任何来源

Day18:LeedCode 513.找树左下角的值 112. 路径总和 106.从中序与后序遍历序列构造二叉树

513. 找树左下角的值 给定一个二叉树的 根节点 root&#xff0c;请找出该二叉树的 最底层 最左边 节点的值。 假设二叉树中至少有一个节点。 示例 1: 输入: root [2,1,3] 输出: 1 思路:出该二叉树的 最底层 最左边 节点的值找出深度最大的第一个结点(左结点先遍历) 方法一…

【数据挖掘】实验5:数据预处理(1)

实验5&#xff1a;数据预处理&#xff08;1&#xff09; 一&#xff1a;实验目的与要求 1&#xff1a;熟悉和掌握数据预处理&#xff0c;学习数据清洗、数据集成、数据变换、数据规约、R语言中主要数据预处理函数。 二&#xff1a;实验内容 【缺失值分析】 第一步&#xff1…

java selenium 元素点击不了

最近做了一个页面爬取&#xff0c;很有意思被机缘巧合下解决了。 这个元素很奇怪&#xff0c;用xpath可以定位元素&#xff0c;但是就是click()不了。 试过了网上搜的一些办法&#xff1a; //尝试一 WebElement a_tag driver.findElement(By.xpath("xxx")); a_tag…

【SysBench】OLTP 基准测试示例

前言 本文采用 MySQL 沙盒实例作为测试目标&#xff0c;使用 sysbench-1.20 对其做 OLTP 基准测试。 有关 MySQL 沙盒的更多信息&#xff0c;请参阅 玩转 MySQL Shell 沙盒实例&#xff0c;【MySQL Shell】6.8 AdminAPI MySQL 沙盒 。 1、部署一个 MySQL 沙盒实例 使用 mysq…

云计算 3月18号 (mysql安装及操作)

一、Mysql 1.1 MySQL数据库介绍 1.1.1 什么是数据库DB&#xff1f; DB的全称是database&#xff0c;即数据库的意思。数据库实际上就是一个文件集合&#xff0c;是一个存储数据的仓库&#xff0c;数据库是按照特定的格式把数据存储起来&#xff0c;用户可以对存储的数据进行…

mac 安装 nvm 【真解决问题】

前提 没有node环境已有git 下载 我用的gitee极速下载 git clone https://gitee.com/mirrors/nvm.git ~/.nvm && cd ~/.nvm && git checkout git describe --abbrev0 --tags配置 1. 配置变量 在用户的目录下新增文件 .zshrc export NVM_DIR"$HOME/…

[数据结构]二叉树(下)

一、二叉树的节点和深度关系 1.满二叉树 我们可以假设二叉树有N个节点&#xff0c;深度为h我们可以恒容易得到满二叉树每行的节点数&#xff0c;然后错位相减,算出节点与高度的关系。 2.完全二叉树 注意我这个是因为最后一行的节点数为1。 二、向上调整建堆和向下调整建堆的时…

【Node.js】CSR、SSR、SEO

SSR 和 CSR SSR &#xff08;Server-Side Rendering&#xff09;服务端渲染&#xff0c;请求数据和拼装都在服务端完成&#xff0c;相当于在服务端直接完成html。 而 Vue,react 等框架&#xff0c;是在客户端完成渲染拼接的&#xff0c;属于CSR&#xff08;Client-Side Rende…