微信小程序项目实例——别踩白块

文章目录

微信小程序项目实例——别踩白块
一、项目展示
二、无尽模式
三、计时模式
四、急速模式
文末

项目代码见文字底部，点赞关注有惊喜

一、项目展示

别踩白块是一款微信小游戏
分为无尽模式、计时模式、急速模式三种模式
用户需要点击不断移动的黑色方块
若点击到白色方块则游戏结束

二、无尽模式

无尽模式下可以一直进行游戏
直到失败为止

其中方块的生成和点击计数代码如下：

<!--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>

// 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为分数+10score++;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});}
})

具体的代码和实现效果可以看资源

三、计时模式

计时模式下
用户将在指定时间内点击黑块
时间到则结束游戏

四、急速模式

急速模式下
黑块的移动速度提升

文末

具体的介绍就到这里了
有兴趣的同学可以继续研究
代码放到下面链接里了

点击下载小程序

微信小程序项目实例——别踩白块相关推荐

【微信小程序】别踩白块源码免费分享
微信小程序"别踩白块"源码分享一.项目目录框架及配置 1.文件框架 (1)pages文件夹: (2)app.js (3)app.json (4)app.wxss (5)app.w ...
微信小程序uni.getImageInfo踩坑大计划
B站https://www.bilibili.com/read/cv6317437 如果你在使用getImageInfo的时候真机调试没问题,上传生成体验版的时候或者是线上版本没反应,主要原因是网络图 ...
微信小程序项目实例——二维码生成器
微信小程序项目实例--二维码生成器文章目录微信小程序项目实例--二维码生成器一.项目展示二.项目核心代码三.效果展示文末项目代码见文字底部,点赞关注有惊喜一.项目展示项目是一个简单实 ...
微信小程序项目实例——手势解锁
微信小程序项目实例--手势解锁文章目录微信小程序项目实例--手势解锁一.项目展示二.设置手势.手势解锁三.手势重置文末:项目代码项目代码见文字底部一.项目展示这是一款简单实用的手势解 ...
微信小程序项目实例——摇色子
微信小程序项目实例--摇色子文章目录微信小程序项目实例--摇色子一.项目展示二.核心代码三.效果图文末项目代码见文字底部,点赞关注有惊喜一.项目展示摇色子是一款简易的游戏类小程序用 ...
微信小程序项目实例——食堂吃哪个
微信小程序项目实例--食堂吃哪个文章目录微信小程序项目实例--食堂吃哪个一.项目展示二.操作流程和核心代码三.效果展示文末项目代码见文字底部,点赞关注有惊喜一.项目展示这是一款娱乐性 ...
微信小程序项目实例——体质计算器
微信小程序项目实例--体质计算器文章目录微信小程序项目实例--体质计算器一.项目展示二.项目核心代码文末项目代码见文字底部,点赞关注有惊喜一.项目展示体质计算器是一款简单的健康类小程序 ...
微信小程序项目实例——记账本
微信小程序项目实例--记账本文章目录微信小程序项目实例--记账本一.项目展示二.首页三.效果图文末项目代码见文字底部,点赞关注有惊喜一.项目展示这是一款简易的记账本小程序用户可以记 ...
微信小程序项目实例——心情记事本
微信小程序项目实例--心情记事本文章目录微信小程序项目实例--心情记事本一.项目展示二.首页三.效果图文末项目代码见文字底部,点赞关注有惊喜一.项目展示心情记事本是一款可以记录当前心 ...

微信小程序项目实例——别踩白块

微信小程序项目实例——别踩白块

文章目录

一、项目展示

二、无尽模式

三、计时模式

四、急速模式

文末

微信小程序项目实例——别踩白块相关推荐

最新文章

热门文章