微信小程序项目实例——别踩白块
项目代码见文字底部，点赞关注有惊喜
一、项目展示
别踩白块是一款微信小游戏
分为无尽模式、计时模式、急速模式三种模式
用户需要点击不断移动的黑色方块
若点击到白色方块则游戏结束
二、无尽模式
无尽模式下可以一直进行游戏
直到失败为止
其中方块的生成和点击计数代码如下：
<!--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为分数+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
});
}
})
具体的代码和实现效果可以看资源
三、计时模式
计时模式下
用户将在指定时间内点击黑块
时间到则结束游戏
四、急速模式
急速模式下
黑块的移动速度提升
文末
具体的介绍就到这里了
有兴趣的同学可以继续研究
代码放到下面链接里了
