基于微信小程序的猜数字小游戏设计与实现

淩亂°似流年 2024-03-25 10:15 29阅读 0赞

目录  
一、技术基础 1  
1.1 微信小程序开发基础 1  
1.1.1 小程序技术背景 1  
1.1.2 小程序框架基础 2  
1.2 小程序样式、布局与事件响应 2  
1.2.1 样式与布局基础 2  
1.2.2 浮动与定位 3  
1.2.3 Flex 布局基础 3  
1.2.4 事件响应基础 4  
1.3 小程序组件 5  
1.3.1 组件定义与属性视图容器组件 5  
1.3.2 view 组件 5  
1.3.3 scroll-view 组件 6  
1.3.4 滑块视图组件 6  
1.3.5 基础组件 6  
1.3.6 text 组件 6  
1.3.7 progress 组件 6  
1.3.8 表单组件 6  
1.3.9 导航组件 8  
1.4 小程序功能 API 8  
1.4.1 数据缓存功能 8  
1.4.2 音频播放功能 8  
1.4.3 网络请求功能 8  
二、总体设计与详细设计 9  
2.1 总体设计 9  
2.2 详细设计 10  
2.2.1 主页 10  
2.2.2 首页背景音乐 14  
2.3 数据判断 15  
2.3.1 主页面内容 15  
2.3.2 首页背景音乐 15  
三、功能测试 16  
1.4 小程序功能 API  
1.4.1 数据缓存功能  
微信小程序可以通过wx.setStorage（wx.setStorageSync）、wx.getStorage（wx.getStorageSync）、  
wx.clearStorage（wx.clearStorageSync）对本地缓存进行设置、获取和清理。本地缓存最大为10MB  
1.4.2 音频播放功能  
调用wx.createInnerAudioContext()接口可以返回一个InnerAudioContext对象，然后就可以使用这个对象定它的属性  
1.4.3 网络请求功能  
  
调用wx.request()接口，可以请求网络接口，不过微信小程序有要求，只能发起https请求  
  
  
每个微信小程序需要事先设置通讯域名，小程序只可以跟指定的域名进行网络通信。包括普通 HTTPS  
  
  
（wx.request）、上传文件（wx.uploadFile）、下载文件（wx.downloadFile) 和 WebSocket 通信  
  
  
（wx.connectSocket）。  
  
  
从基础库 2.4.0 开始，网络接口允许与局域网 IP 通信，但要注意 不允许与本机 IP 通信  
  
二、总体设计与详细设计  
2.1 总体设计  
  
一共三个页面  
  
  
主页 ：负责进入 tabbar 页面, tabbar 页面有两个页面,首页和记录页  
  
  
首页 ：可点击按钮生成随机数,然后输入数字,点击确定按钮进行判断并提示偏大或偏小能显示猜的次数,点击重置按钮可重置随机数并清空输入和猜的次数  
  
  
记录页 ：显示每次猜对的随机数,次数,时间,标有序号  
  
页面统一采用暖色调, 主体部分使用 绝对定位 , 内部使用 flex 布局使用本地存储数据 ( wx.getStorageSync , wx.setStorageSync )

{
        
      "pages": [
        "pages/index/index",
        "pages/home/home",
        "pages/logs/logs"
      ],
      "window": {
        
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#efca9e",
        "navigationBarTitleText": "猜数游戏",
        "navigationBarTextStyle": "black"
      },
      "tabBar": {
        
        "color": "#000000",
        "selectedColor": "#e97d4c",
        "borderStyle": "black",
        "backgroundColor": "#fdebc3",
        "list": [{
        
          "selectedIconPath": "/imgs/homeselected.png",
          "iconPath": "/imgs/home.png",
          "pagePath": "pages/home/home",
          "text": "首页"
        }, {
        
          "selectedIconPath": "/imgs/logsselected.png",
          "iconPath": "/imgs/logs.png",
          "pagePath": "pages/logs/logs",
          "text": "记录"
        }]
      },
      "usingComponents": {
        
        "iconfont": "/iconfont/iconfont"
      },
      "requiredBackgroundModes": ["audio"],
      "style": "v2",
      "sitemapLocation": "sitemap.json"
    }

![在这里插入图片描述][b322a425f03c43319906e859a5ce1ab8.png_pic_center]  
![在这里插入图片描述][f7311721beb14beb98a53c3ecbb24212.png_pic_center]  
![在这里插入图片描述][bad5031900964d1a8179e6248aea14e5.png_pic_center]  
![在这里插入图片描述][74842e53efa844c796ead9fbcc1ba189.png_pic_center]  
![在这里插入图片描述][975800696aa148afa32063318d61aab1.png_pic_center]  
![在这里插入图片描述][e5b37b09fa3d4b099daf7667c5d72771.png_pic_center]  
![在这里插入图片描述][df52cbd6d1cb47ee850bb46c0fdb9789.png_pic_center]  
![在这里插入图片描述][bb9e0e5662214fd5aef7906f6f39b8f6.png_pic_center]  
![在这里插入图片描述][278747835f4b43cb8e18d6bba2a4bbaa.png_pic_center]  
![在这里插入图片描述][c1d644a13bdf41dbac89c1712cb7f970.png_pic_center]  
![在这里插入图片描述][81320416559b4987bebae42cf7323d1e.png_pic_center]  
![在这里插入图片描述][6cb850b71361482094c5edf11a8eabcf.png_pic_center]  
![在这里插入图片描述][2d36f8cdca9f40ffa30ffaf0c39c6899.png_pic_center]  
![在这里插入图片描述][0973473cb06d46a5ab768b5171f9177a.png_pic_center]  
![在这里插入图片描述][36eef259b296448885c4609727fa2e90.png_pic_center]  
![在这里插入图片描述][6ce549c492da419da39585d660a9bb1d.png_pic_center]  
![在这里插入图片描述][62e0be04eb594df1a31eb9900ca4a04a.png_pic_center]  
![在这里插入图片描述][68977efaf04940fcb732e22e6c3925db.png_pic_center]

[b322a425f03c43319906e859a5ce1ab8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/c3143f5a29834a428872c821a2bd70b0.png
[f7311721beb14beb98a53c3ecbb24212.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/ead63fa75b1c452cb20c636cbcca57b8.png
[bad5031900964d1a8179e6248aea14e5.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/3a5759b85a8f4116ab401e10bc743f11.png
[74842e53efa844c796ead9fbcc1ba189.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/68c6811c92884cbb95637d2d577697c6.png
[975800696aa148afa32063318d61aab1.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/377f7fdedda8480fad5c688143386b70.png
[e5b37b09fa3d4b099daf7667c5d72771.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/59875190ceaf473ca7f434b623729ab8.png
[df52cbd6d1cb47ee850bb46c0fdb9789.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/64f91f14557f4342a36c5b01ed8e357c.png
[bb9e0e5662214fd5aef7906f6f39b8f6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/73b46a8ed7294e4bb789409249029481.png
[278747835f4b43cb8e18d6bba2a4bbaa.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/00eef56b0a9341d79f026a7fda67677e.png
[c1d644a13bdf41dbac89c1712cb7f970.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/68c4ee65cf694106a4860a5ddd34c6db.png
[81320416559b4987bebae42cf7323d1e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/44129067117b4c23a763a2bfe15563da.png
[6cb850b71361482094c5edf11a8eabcf.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/00f030f02794484fa5a60009ac64c978.png
[2d36f8cdca9f40ffa30ffaf0c39c6899.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/905c684ea5144bdcbb9b41de9f8c2abb.png
[0973473cb06d46a5ab768b5171f9177a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/cfc223b5b1d147beaad67aa5dc13415d.png
[36eef259b296448885c4609727fa2e90.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/c61608bd10194e63a61515f0e845f4f6.png
[6ce549c492da419da39585d660a9bb1d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/7ce519254c1e49448305b7d24a0dba0a.png
[62e0be04eb594df1a31eb9900ca4a04a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/bd2ecc37b4a743eba57957764d424f19.png
[68977efaf04940fcb732e22e6c3925db.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/370001ffc2af4c69a79aaa9c49201acb.png