微信小程序黑白块游戏

代码如下：

//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为分数+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 = ["请点击第一个白块！游戏结束", "别点白块！游戏结束", "时间到"];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(){// 判断是否小于0var 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();}
})

急速模式

//play.js
// // play
var app = getApp()
Page({data: {typeName: '急速模式',score: 0,blockData:[],scrollHeight: 0,canRun: false},onLoad: function(){var that = this;// 设置titlewx.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){// 点击白块一定会报错 差别在于报错文案// 判断是否是点击的第一行// 被点击的idvar 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){// 黑块是应该点击的块// 判断是否是点击的第一行// 被点击的idvar 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归0var 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);// 赋值给对应的objorderArray[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);}})}
})

无尽模式

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

//结束
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'});}
})

本文感谢无私开源的程序员点击获取项目