AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

【微信小程序】别踩白块源码免费分享

2023-07-08 127
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
日志服务 SLS，月写入数据量 50GB 1个月
简介： 【微信小程序】别踩白块源码免费分享

微信小程序“别踩白块”源码分享

一、项目目录框架及配置

1.文件框架

（1）pages文件夹：

（2）app.js

（3）app.json

（4）app.wxss

（5）app.wxml

（6）project.config.json

（7）sitemap.json

（8）utills文件夹

2.项目配置

二、别踩白块结构分析

1. 模块功能：

2. 文件配置

二、别踩白块各模块代码

1. 全局配置

（1）app.json

（2）app.js

（3）app.wxss

（4）project.config.json

2.首页配置（index）

（1）index.js

（2）index.json

（3）index.wxml

（4）index.wxss

3. 无尽模式配置（endless）

（1）play.js

（2）play.json

（3）play.wxml

（4）play.wxss

4. 计时模式配置（time）

（1）play.js

（2）play.json

（3）play.wxml

（4）play.wxss

5. 急速模式配置（speed）

（1）play.js

（2）play.json

（3）play.wxml

（4）play.wxss

6. 游戏结束配置（end）

（1）end.js

（2）end.json

（3）end.wxml

（4）end.wxss

7. 日志文件配置（logs）

（1）logs.js

（2）logs.json

（3）logs.wxml

（4）logs.wxss

三、别踩白块效果实现

1. 首页效果

2. 模块效果


先看效果图（自己做小程序很简单，下面是具体实现）

首先，要了解微信小程序的开发工具——微信开发者工具

可以在微信公众平台下载软件


一、项目目录框架及配置


1.文件框架


（1）pages文件夹：


存放小程序的页面文件，书写各个页面代码以及组件，里面包括各种全局文件。


（2）app.js


小程序入口文件，用于定义全局数据和函数的使用，可以指定微信小程序的生命周期函数。


（3）app.json


全局文件， 对小程序进行配置，小程序的全局配置，小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等; 包括配置小程序是由哪些页面组成，配置小程序的窗口及背景色，配置导航条样式，配置默认标题等。


（4）app.wxss


全局的样式文件。


（5）app.wxml


构建页面结构


（6）project.config.json


保存开发工具配置项


（7）sitemap.json


网站地图，可以对小程序进行seo优化，让搜索排名靠前


（8）utills文件夹


存放全局的一些.js文件，公共用到的一些事件处理代码文件可以放到该文件夹下，用于全局调用。


以下是结构示图

2.项目配置


一个小程序最开始要使用app.json文件来对微信小程序进行全局配置，它决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等基础元素。

{
  "pages": [
    "pages/index/index",
    "pages/endless/play",
    "pages/time/play",
    "pages/speed/play",
    "pages/end/end",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "别踩白块",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json"
}

二、别踩白块结构分析


1. 模块功能：


无尽模式、计时模式、急速模式、查看日志


2. 文件配置


二、别踩白块各模块代码


1. 全局配置


（1）app.json


代码如下：

{
  "pages": [
    "pages/index/index",
    "pages/endless/play",
    "pages/time/play",
    "pages/speed/play",
    "pages/end/end",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "别踩白块",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json"
}

（2）app.js


代码如下：

//app.js
App({
  onLaunch: function () {
    //调用API从本地缓存中获取数据
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  getUserInfo:function(cb){
    var that = this
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //调用登录接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  },
  getHeighestScore: function(scoreName, cb){
    this.globalData[scoreName] = wx.getStorageSync(scoreName);
    typeof cb == "function" && cb(this.globalData[scoreName])
  },
  globalData:{
    userInfo: null,
    currentScore: 0,
    endlessScore: null,
    timeScore: null,
    speedScore: null
  }
})

（3）app.wxss


代码如下：

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}

（4）project.config.json


代码如下：

{
  "description": "项目配置文件",
  "packOptions": {
    "ignore": []
  },
  "setting": {
    "urlCheck": true,
    "es6": true,
    "enhance": false,
    "postcss": true,
    "preloadBackgroundData": false,
    "minified": true,
    "newFeature": false,
    "coverView": true,
    "nodeModules": false,
    "autoAudits": false,
    "showShadowRootInWxmlPanel": true,
    "scopeDataCheck": false,
    "uglifyFileName": false,
    "checkInvalidKey": true,
    "checkSiteMap": true,
    "uploadWithSourceMap": true,
    "compileHotReLoad": false,
    "useMultiFrameRuntime": true,
    "useApiHook": true,
    "useApiHostProcess": false,
    "babelSetting": {
      "ignore": [],
      "disablePlugins": [],
      "outputPath": ""
    },
    "enableEngineNative": false,
    "bundle": false,
    "useIsolateContext": true,
    "useCompilerModule": true,
    "userConfirmedUseCompilerModuleSwitch": false,
    "userConfirmedBundleSwitch": false,
    "packNpmManually": false,
    "packNpmRelationList": [],
    "minifyWXSS": true
  },
  "compileType": "miniprogram",
  "libVersion": "2.16.1",
  "appid": "wxd5512791eaec8564",
  "projectname": "miniprogram-1",
  "debugOptions": {
    "hidedInDevtools": []
  },
  "scripts": {},
  "isGameTourist": false,
  "condition": {
    "search": {
      "list": []
    },
    "conversation": {
      "list": []
    },
    "game": {
      "list": []
    },
    "plugin": {
      "list": []
    },
    "gamePlugin": {
      "list": []
    },
    "miniprogram": {
      "list": []
    }
  }
}

2.首页配置（index）


（1）index.js


代码如下：

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    userInfo: {},
    heighestScore: 0,
    longestTime: 0
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  goGame: function(event){
    var gameType = event.target.id;
    wx.redirectTo({
      url: '../'+gameType+'/play'
    })
  },
  onLoad: function () {
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
        userInfo:userInfo
      })
    })
    // 最高分数
    app.getHeighestScore('endlessScore', function(heighestScore){
      app.globalData.endlessScore = heighestScore || 0;
      that.setData({
        heighestScore: heighestScore || 0
      })
    });
    // 最长时间
    app.getHeighestScore('timeScore', function(heighestScore){
      app.globalData.timeScore = heighestScore || 0;
      that.setData({
        longestTime: heighestScore || 0
      })
    });
  }
})

（2）index.json


代码如下：

{}

（3）index.wxml


代码如下：

<!--index.wxml-->
<view class="container">
  <view class="line">
    <view class="blocks black" id="endless" bindtap="goGame">
      <text>无尽模式</text>
    </view>
    <view class="blocks" id="time" bindtap="goGame">
      <text>计时模式</text>
    </view>
  </view>
  <view class="line">
    <view class="blocks" id="speed" bindtap="goGame">
      <text>急速模式</text>
    </view>
    <view class="blocks black" bindtap="bindViewTap">
      <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>
  </view>
  <view class="line">
    <view class="blocks black">
      <text>最高分数：{{heighestScore}}</text>
    </view>
    <view class="blocks">
      <text>最长时间:{{longestTime}}</text>
    </view>
  </view>
</view>

（4）index.wxss


代码如下：

/**index.wxss**/
page {
  height: 100%;
}
.line {
  height: 33%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.blocks {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}
.black {
  background: #000000;
}
.black text {
  color: #ffffff;
}
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}
.userinfo-nickname {
  color: #aaa;
}

3. 无尽模式配置（endless）


（1）play.js


代码如下：

// play 
var app = getApp()
Page({
  data: {
    typeName: '无尽模式',
    silding: false,
    score: 0,
    blockData:[]
  },
  onReady: function(){
      var array = [];
      // 先生成一个10个长度的数组
      for(var i = 0; i < 10; i++){
          // 生成一个随机位数为1的数组
          var orderArray = [0,0,0,0];
          var randomNum = Math.floor(Math.random() * 4);
          orderArray[randomNum] = 1;
          array.push({id: i, block: orderArray});
      }
      this.setData({
          blockData: array.reverse()
      });
  },
  handleClick: function(events){
      var id = events.currentTarget.id;
      var line = id.split("-")[1];
      var column = id.split("-")[2];
      var isBlack = id.split("-")[3];
      var blockData = this.data.blockData.reverse();
      var score = this.data.score;
      var orderArray = [0,0,0,0];
      // 判断是否是第一行
      if(line != blockData[0].id){
        this.handleWrong(0, score);
        return;
      }
      // 判断是否正确
      if(isBlack != 1){
        this.handleWrong(1, score);
        return;
      }
      // 正确下一个
      // 分数++
      // 最后一个小块的id为分数+10
      score++;
      orderArray[Math.floor(Math.random() * 4)] = 1;
      blockData.push({id: score+10, block: orderArray});
      blockData.shift();
      this.setData({
          silding: true,
          score: score,
          blockData: blockData.reverse()
      });
  },
  handleWrong: function( type , score){
      const titleArr = ["请点击第一个白块！游戏结束", "别点白块！游戏结束"];
      wx.showToast({
            title: titleArr[type],
            icon: 'cancel', 
            duration: 2000,
            complete: function(){
                // 将此分数存入全局变量
                app.globalData.currentScore = score;
                // 若此分数比最高分数还高 将其存入本地
                if(score > app.globalData.endlessScore){
                    app.globalData.endlessScore = score;
                    wx.setStorageSync('endlessScore',score);
                }
                var timer = setTimeout(function(){
                        wx.redirectTo({
                            url: '../end/end?type=endless&score=' + score
                        })
                        clearTimeout(timer);
                    }, 2000);
            }
        })
  },
  onLoad: function(){
      var that = this;
      wx.setNavigationBarTitle({
        title: that.data.typeName
      });
  }
})

（2）play.json


游戏模式中不需要全局配置

代码如下：

{}

（3）play.wxml


代码如下：

<!--play.wxml-->
<view class="score">{{score}}</view>
<view class="play-box">
    <block wx:for="{{blockData}}" wx:for-index="i" wx:key="i">
        <view class="block-line" id="line-{{blockData[i].id}}">
            <block wx:for="{{blockData[i].block}}" wx:key="*this" wx:for-index="j">
                <view wx:if="{{blockData[i].block[j] == 0}}" id="block-{{blockData[i].id}}-{{j}}-{{0}}" class="block" bindtap="handleClick"></view>
                <view wx:else class="block black" id="block-{{blockData[i].id}}-{{j}}-{{1}}" bindtap="handleClick"></view>
            </block>  
        </view>
    </block>
</view>

（4）play.wxss


代码如下：

/*page {
    display: flex;
    flex-direction: column-reverse;
}*/
.score {
    position: fixed;
    top: 2rem;
    left: 50%;
    font-size: 3rem;
    color: #fc2736;
    transform: translate(-50%, 0);
    z-index: 10;
}
.play-box {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0; 
}
.block-line {
    width: 100%;
    overflow: hidden;        
}
.block {
    width: 5rem;
    height: 8rem;
    float: left;
    border: 1px solid #000000;
    box-sizing: border-box;
}
.black {
    background: #000000;
}

4. 计时模式配置（time）


（1）play.js


代码如下：

// play 
var app = getApp()
Page({
  data: {
    typeName: '计时模式',
    score: 0,
    time: 60,
    shouldStop: false,
    blockData:[]
  },
  onReady: function(){
      var array = [];
      // 先生成一个10个长度的数组
      for(var i = 0; i < 10; i++){
          // 生成一个随机位数为1的数组
          var orderArray = [0,0,0,0];
          var randomNum = Math.floor(Math.random() * 4);
          orderArray[randomNum] = 1;
          array.push({id: i, block: orderArray});
      }
      this.setData({
          blockData: array.reverse()
      });
  },
  handleClick: function(events){
      var id = events.currentTarget.id;
      var line = id.split("-")[1];
      var column = id.split("-")[2];
      var isBlack = id.split("-")[3];
      var blockData = this.data.blockData.reverse();
      var score = this.data.score;
      var orderArray = [0,0,0,0];
      // 判断是否是第一行
      if(line != blockData[0].id){
        this.handleWrong(0, score);
        return;
      }
      // 判断是否正确
      if(isBlack != 1){
        this.handleWrong(1, score);
        return;
      }
      // 正确下一个
      // 分数++
      // 最后一个小块的id为分数+10
      score++;
      orderArray[Math.floor(Math.random() * 4)] = 1;
      blockData.push({id: score+10, block: orderArray});
      blockData.shift();
      this.setData({
          silding: true,
          score: score,
          blockData: blockData.reverse()
      });
  },
  handleWrong: function( type , score){
      const titleArr = ["请点击第一个白块！游戏结束", "别点白块！游戏结束", "时间到"];
      var _this = this;
      wx.showToast({
            title: titleArr[type],
            icon: 'cancel', 
            duration: 2000,
            complete: function(){
                // 将此分数存入全局变量
                app.globalData.currentScore = score;
                // 停止计数器
                _this.setData({
                  shouldStop: true
                });
                // 若此分数比最高分数还高 将其存入本地
                if(score > app.globalData.timeScore){
                    app.globalData.timeScore = score;
                    wx.setStorageSync('timeScore',score);
                }
                var timer = setTimeout(function(){
                        wx.redirectTo({
                            url: '../end/end?type=time&score=' + score
                        })
                        clearTimeout(timer);
                    }, 2000);
            }
        })
  },
  timeInterval: function(){
    var that = this;
    var timer = setInterval(function(){
        // 判断是否小于0
        var nowTime = that.data.time;
        if(that.data.shouldStop){
          clearInterval(timer);
        }
        if(nowTime > 1){
          that.setData({
            time: nowTime-1
          });
          return;
        }
        that.setData({
          time: nowTime-1
        });
        that.handleWrong(2, that.data.score);
        clearInterval(timer);
      }, 1000);
  },
  onLoad: function(){
      var that = this;
      wx.setNavigationBarTitle({
        title: that.data.typeName
      });
      this.timeInterval();
  }
})

（2）play.json


代码如下：

{}

（3）play.wxml


代码如下：

<!--play.wxml-->
<view class="time">时间：{{time}}s</view>
<view class="score">分数：{{score}}</view>
<view class="play-box">
    <block wx:for="{{blockData}}" wx:for-index="i" wx:key="i">
        <view class="block-line" id="line-{{blockData[i].id}}">
            <block wx:for="{{blockData[i].block}}" wx:key="*this" wx:for-index="j">
                <view wx:if="{{blockData[i].block[j] == 0}}" id="block-{{blockData[i].id}}-{{j}}-{{0}}" class="block" bindtap="handleClick"></view>
                <view wx:else class="block black" id="block-{{blockData[i].id}}-{{j}}-{{1}}" bindtap="handleClick"></view>
            </block>  
        </view>
    </block>
</view>

（4）play.wxss


代码如下：

/* pages/time/play.wxss */
.time {
    position: fixed;
    top: 2rem;
    left: 50%;
    font-size: 2rem;
    color: #fc2736;
    transform: translate(-50%, 0);
    z-index: 10;
}
.score {
    position: fixed;
    top: 5rem;
    left: 50%;
    font-size: 2rem;
    color: #fc2736;
    transform: translate(-50%, 0);
    z-index: 10;
}
.play-box {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0; 
}
.block-line {
    width: 100%;
    overflow: hidden;        
}
.block {
    width: 5rem;
    height: 8rem;
    float: left;
    border: 1px solid #000000;
    box-sizing: border-box;
}
.black {
    background: #000000;
}

5. 急速模式配置（speed）


（1）play.js


代码如下：

// // play 
var app = getApp()
Page({
  data: {
    typeName: '急速模式',
    score: 0,
    blockData:[],
    scrollHeight: 0,
    canRun: false
  },
  onLoad: function(){
      var that = this;
      // 设置title
      wx.setNavigationBarTitle({
        title: that.data.typeName
      });
  },
  onReady: function(){
      var array = [];
      // 先生成一个10个长度的数组
      for(var i = 0; i < 10; i++){
        array.push(this.getNewLine(i));
      }
      this.setData({
          blockData: array.reverse()
      });
  },
  handleClickWhite: function(events){
      // 点击白块一定会报错 差别在于报错文案
      // 判断是否是点击的第一行
      // 被点击的id
      var id = events.currentTarget.id;
      // 被点击的行
      var line = id.split("-")[1];
      // 数据
      var blockData = this.data.blockData.concat().reverse();
      // 当前分数
      var score = this.data.score;
      // 判断是否是第一行
      if(line != this.getClickableBlockLine(blockData)){
        this.handleWrong("请点击第一个黑块！游戏结束", score);
      } else {
        // 点击的第一行白块  
        this.handleWrong("别点白块！游戏结束", score);
      }
  },
  handleClickBlack: function(events){
      // 黑块是应该点击的块
      // 判断是否是点击的第一行
      // 被点击的id
      var id = events.currentTarget.id;
      // 被点击的行
      var line = id.split("-")[1];
      // 数据
      var blockData = this.data.blockData.concat().reverse();
      // 当前分数
      var score = this.data.score;
      // 可点击的第一行
      var clickableLine = this.getClickableBlockLine(blockData);
      // 判断是否是第一行
      if(line == clickableLine){
        // 点击了第一行黑块 
        // 判断是否是是第一次
        if(score == 0){
            // 启动滑动程序
            this.run();
        }
        score++;
        // 将黑块变灰块
        this.getBlockBlackToGray(line, blockData);
        // 分数++
        this.setData({
            score: score,
            blockData: blockData.concat().reverse()
        });
      } else {
        // 点击的不是第一行白块  
        this.handleWrong("请点击第一个黑块！游戏结束", score);
      }
  },
  handleClickGray: function(events){
      // 灰块是指黑块点击之后的块 
      // 其在显示是白块 并且同样不可点
      var score = this.data.score;
      this.handleWrong("别点白块！游戏结束", score);
  },
  run: function(){
      // 滑动方法
      var that = this;
      var speed = 10;
      this.setData({
          canRun: true
      });
      var timer = setInterval(function(){
          // 当前滑动距离
          if(!that.data.canRun){
              clearInterval(timer);
              return;
          }
          var currentScrollHeight = that.data.scrollHeight;
          // 当前分数
          var score = that.data.score;
          // 滑块数据
          var blockData = that.data.blockData.concat().reverse();
          if(Math.abs(currentScrollHeight) == 150){
              // 滑到临界点
              // 判断是否过期
              // 判断条件是 第一个滑块的状态是否为已点击
              if(that.checkFirstLineBlockClicked(blockData[0].block)){
                  // 没过期
                  // 继续 去除旧节点 插入新节点 scrolllHeight归0
                  var newId = blockData[blockData.length - 1].id + 1;
                  blockData.push(that.getNewLine(newId));
                  blockData.shift();
                  that.setData({
                      scrollHeight: 0,
                      blockData: blockData.concat().reverse()
                  });
                  return;
              }
              // 过期
              // 报错
              that.handleWrong("请点击白块！游戏结束", score);
              return;
          }
          currentScrollHeight = currentScrollHeight - speed;
          that.setData({
              scrollHeight: currentScrollHeight
          });
      }, 20);
  },
  checkFirstLineBlockClicked: function(blockDataLine){
      for(var i = 0; i < blockDataLine.length; i++){
          if(blockDataLine[i] == 2){
              return true;
          }
      }
      return false;
  },
  getBlockBlackToGray: function(line, blockData){
      for(var i = 0; i < blockData.length; i++){
          if(blockData[i].id == line){
              var currentArray = blockData[i].block;
              for(var j = 0; j < currentArray.length; j++){
                  if(currentArray[j] == 1){
                      currentArray[j] = 2;
                      return;
                  }
              }
          }
      }
  },
  getClickableBlockLine: function(blockData){
      var line = 0;
      for(var i = 0; i < blockData.length; i++){
          var block = blockData[i].block;
          for(var j = 0; j < block.length; j++){
            // 行内四个元素 有1即可
            if(block[j] == 1){
                return blockData[i].id;
            }
          }
      }
      return line;
  },
  getNewLine: function(i){
      // 生成一个标准的数据
      var orderArray = [0,0,0,0];
      // 生成一个随机数
      var randomNum = Math.floor(Math.random() * 4);
      // 赋值给对应的obj
      orderArray[randomNum] = 1;
      return {id: i, block: orderArray};
  },
  handleWrong: function(text, score){
      this.setData({
          canRun: false
      });
      wx.showToast({
            title: text,
            icon: 'cancel', 
            duration: 2000,
            complete: function(){
                // 将此分数存入全局变量
                app.globalData.currentScore = score;
                // 若此分数比最高分数还高 将其存入本地
                if(score > app.globalData.speedScore){
                    app.globalData.speedScore = score;
                    wx.setStorageSync('speedScore',score);
                }
                var timer = setTimeout(function(){
                    wx.redirectTo({
                        url: '../end/end?type=speed&score=' + score
                    })
                    clearTimeout(timer);
                }, 2000);
            }
        })
  }
})

（2）play.json


代码如下：

{}

（3）play.wxml


代码如下：

<!--play.wxml-->
<view class="score">{{score}}</view>
<view class="play-box" style="bottom: {{scrollHeight}}px">
    <block wx:for="{{blockData}}" wx:for-index="i" wx:key="i">
        <view class="block-line" id="line-{{blockData[i].id}}">
            <block wx:for="{{blockData[i].block}}" wx:key="*this" wx:for-index="j">
                <view wx:if="{{blockData[i].block[j] == 0}}" id="block-{{blockData[i].id}}-{{j}}-{{0}}" class="block" bindtap="handleClickWhite"></view>
                <view wx:elif="{{blockData[i].block[j] == 1}}" class="block black" id="block-{{blockData[i].id}}-{{j}}-{{1}}" bindtap="handleClickBlack"></view>
                <view wx:else class="block gray" id="block-{{blockData[i].id}}-{{j}}-{{2}}" bindtap="handleClickGray"></view>
            </block>  
        </view>
    </block>
</view>

（4）play.wxss


代码如下：

/*page {
    display: flex;
    flex-direction: column-reverse;
}*/
.score {
    position: fixed;
    top: 2rem;
    left: 50%;
    font-size: 3rem;
    color: #fc2736;
    transform: translate(-50%, 0);
    z-index: 10;
}
.play-box {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0; 
}
.block-line {
    width: 100%;
    overflow: hidden;        
}
.block {
    width: 5rem;
    height: 8rem;
    float: left;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    box-sizing: border-box;
    transition: .2s all;
}
.black {
    background: #000000;
}
.gray {
    background: #ffffff;
}

6. 游戏结束配置（end）


（1）end.js


代码如下：

var app = getApp()
Page({
  data: {
    currentScore: 0,
    gameType: "",
    heighestScore: 0,
    backUrl: ""
  },
  onLoad: function(options){
    var score = options.score;
    var gameType = options.type;
    var text = {endless: "无尽模式", time: "计时模式", speed: "极速模式"};
    // 从全局变量中获取分数
    this.setData({
      currentScore: app.globalData.currentScore,
      gameType: text[gameType],
      heighestScore: app.globalData[gameType + "Score"],
      backUrl: '../'+gameType+'/play'
    });
  }
})

（2）end.json


代码如下：

{}

（3）end.wxml


代码如下：

<view class="current">{{gameType}}</view>
<view class="current">本次分数：{{currentScore}}</view>
<view class="highest">最高分数：{{heighestScore}}</view>
<navigator url="{{backUrl}}" redirect class="go-again">再来一次</navigator>
<navigator url="../index/index" redirect class="go-home">返回首页</navigator>

（4）end.wxss


代码如下：

/* pages/end/end.wxss */
.current {
    margin-top: 40rpx;
    margin-bottom: 40rpx;
    text-align: center;
    font-size: 1.5rem;
}
.highest {
    text-align: center;
    font-size: 1.5rem;
}
.go-again {
    text-align: center;
    display: block;
    width: 200rpx;
    margin: 200rpx auto 0 auto;
    padding: 20rpx;
    border-radius: 10rpx;
    color: #ffffff;
    background: #fc2736;
}
.go-home {
    text-align: center;
    display: block;
    width: 200rpx;
    margin: 100rpx auto 0 auto;
    padding: 20rpx;
    border-radius: 10rpx;
    color: #ffffff;
    background: blue;
}

7. 日志文件配置（logs）


（1）logs.js


代码如下：

//logs.js
var util = require('../../utils/util.js')
Page({
  data: {
    logs: []
  },
  onLoad: function () {
    this.setData({
      logs: (wx.getStorageSync('logs') || []).map(function (log) {
        return util.formatTime(new Date(log))
      })
    })
  }
})

（2）logs.json


代码如下：

{
    "navigationBarTitleText": "查看启动日志"
}

（3）logs.wxml


代码如下：

<!--logs.wxml-->
<view class="container log-list">
  <block wx:for="{{logs}}" wx:for-item="log" wx:key="*this">
    <text class="log-item">{{index + 1}}. {{log}}</text>
  </block>
</view>

（4）logs.wxss


代码如下：

.log-list {
  display: flex;
  flex-direction: column;
  padding: 40rpx;
}
.log-item {
  margin: 10rpx;
}

三、别踩白块效果实现


1. 首页效果


文章标签：
日志服务
JavaScript
开发工具
定位技术
SEO
开发者
小程序
关键词：
微信源码
微信小程序源码
微信白块
相关实践学习
日志服务之使用Nginx模式采集日志
本文介绍如何通过日志服务控制台创建Nginx模式的Logtail配置快速采集Nginx日志并进行多维度分析。
九芒星#
目录
相关文章
diygwcom
|
1月前
|
存储 移动开发 小程序
小程序界面设计软件源码生成器
小程序界面设计软件源码生成器
diygwcom
64 5
diygwcom
|
1月前
|
移动开发 小程序 数据可视化
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
diygwcom
40 2
diygwcom
|
1月前
|
数据可视化 小程序 Cloud Native
DIY可视化业界领先的可视化快速生成FinClip小程序源码
DIY可视化业界领先的可视化快速生成FinClip小程序源码
diygwcom
31 0
热爱技术的小郑
|
3月前
|
JSON 小程序 JavaScript
微信小程序制作 购物商城首页 【内包含源码】
这篇文章提供了一个微信小程序购物商城首页的实现方法和源码，包括页面布局、数据结构、核心代码以及如何配置tabBar和搜索框组件。
热爱技术的小郑
211 4
微信小程序制作 购物商城首页 【内包含源码】
疯狂的猿
|
2月前
|
搜索推荐
2024微信个人名片在线生成HTML源码
微信个人名片卡片在线生成，这是一款微信个人名片生成网站源码，无第三方接口，本地直接生成可长期使用。 主要用于生成用户个性化的名片页面，包括头像、姓名、联系方式、个人介绍等信息。 在本地浏览器打开即可,源码是html的，也可上传到服务器上。
疯狂的猿
49 0
2024微信个人名片在线生成HTML源码
1313310884104708
|
3月前
|
缓存 开发框架 JavaScript
人人都能看懂的鸿蒙 “JS 小程序” 数据绑定原理 | 解读鸿蒙源码
人人都能看懂的鸿蒙 “JS 小程序” 数据绑定原理 | 解读鸿蒙源码
1313310884104708
59 0
小蜗牛耶
|
4月前
|
小程序 JavaScript Java
基于微信小程序便捷记账系统设计与实现(源码+lw+部署文档+讲解等)
基于微信小程序便捷记账系统设计与实现(源码+lw+部署文档+讲解等)
小蜗牛耶
130 8
小蜗牛耶
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
小蜗牛耶
62 7
小蜗牛耶
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
小蜗牛耶
76 7
小蜗牛耶
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
小蜗牛耶
92 7

热门文章

最新文章

  • 1
    小程序审核常见驳回类型
  • 2
    【小程序开发】uniapp引入iconfont图标及使用方式
  • 3
    笑联 x mPaaS | 12 个模块，全面小程序化，如何打造真正的一次开发复用多端？
  • 4
    小程序云开发联表数据查询以及云函数中的应用
  • 5
    微信公众平台小程序会是下一个App Store吗？
  • 6
    大转盘抽奖小程序源码
  • 7
    mPaaS问题之使用小程序传参数报错如何解决
  • 8
    小程序鼠标点击按钮（改变背景颜色字体）
  • 9
    让别人的小程序长成自己的样子-更换window上下颜色--【浅入深出系列001】
  • 10
    初学者编译的第一个小程序
  • 1
    高德地图实现-微信小程序地图导航
    304
  • 2
    微信小程序封装请求
    72
  • 3
    性能工具之JMeter 微信小程序 WebSocket 脚本入门
    216
  • 4
    微信小程序用户登陆和获取用户信息功能实现
    117
  • 5
    uniapp-微信小程序-上拉和下拉触底刷新
    146
  • 6
    微信小程序和springboot实现微信支付
    218
  • 7
    微信小程序-微信支付
    68
  • 8
    微信小程序调试、断点调试
    182
  • 9
    微信小程序-分包
    68
  • 10
    开发uniapp过程中对app、微信小程序与h5的webview调试
    1110

    • 相关课程

    更多
  • IoT小程序框架课程
  • C++ 入门教程开发文档
  • 云上建站快速入门-博客、论坛、CMS、电子商务网站统统搞定
  • Lua完全自学手册图文教程
  • 场景实践 -新手玩转云计算制作一个浪漫的表白网页
  • Python爬虫实战

    • 相关电子书

    更多
  • 微信广告引擎与播放节奏算法实践
  • 微信H5视频播放器在海量业务下的实践
  • 微信高效运维之路

    • 相关实验场景

    更多
  • 搭建微信小程序（AMD 8代）
  • 搭建微信小程序
  • 1分钟SAE部署PHP商城小程序
  • 2048小游戏
  • 阿里云IoT小程序应用开发和组件实践
  • 搭建IoT小程序开发环境，创建一个应用
    • 下一篇
    阿里云OSS设置跨域访问