微信小程序黑白块游戏
代码如下：
//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();
}
})急速模式
//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);
}
})
}
})
无尽模式
//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
});
}
})//结束
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'
});
}
})本文感谢无私开源的程序员点击获取项目