家人想玩那个触摸画框圈起来的数字相加等于10就消除的。但是官方的有广告，还有时间限制，于是自己开发了一个，在这里记录一下。如果影响了官方运营请联系下架此文章。哦对了 不会自动添加数哈，可以点左侧 加号 随机位置添加 剩余数最多的相加等于10的数 例如剩余7最多 则添加3，8最多则添加2
点 复制 长按 粘贴MiniGames: 无聊自研
<template>
<view class="page_main">
<view class="top_linear">
<view class="top_mean_left">
<text>步数 </text>
<text class="top_mean_tv"> {{steps}}</text>
</view>
<view class="top_mean_center">
<text>分数 </text>
<text class="top_mean_tv"> {{fraction}}</text>
</view>
<view class="top_mean_right">
<text>用时 </text>
<text class="top_mean_tv"> {{timecount}}</text>
</view>
<view class="top_mean_right">
<text>剩余 </text>
<text class="top_mean_tv"> {{surplusnum}}</text>
</view>
</view>
<view class="contentone">
<canvas class="canvas_cla" canvas-id="myCanvas" style="width: 300px; height: 480px;"></canvas>
</view>
<view class="contenttwo">
<canvas class="canvas_cla" canvas-id="myCanvass" style="width: 300px; height: 480px;"
@touchstart="touchstart" @touchend="touchend" @touchmove="touchmove"></canvas>
</view>
<view class="add_button_view">
<view class="add_button" style="margin-left: 10rpx;" @click="xk_click">
新开
</view>
<view class="not_add_button" style="margin-left: 10rpx;" @click="cl_click">
重来
</view>
<view class="add_button" style="margin-left: 10rpx;" @click="ts_click">
提示
</view>
<view v-if="isshowstart" class="not_add_button" style="margin-left: 10rpx;margin-right: 10rpx;"
@click="zt_click" @longpress="zt_long_click">
复制\粘贴
</view>
<view v-else class="not_add_button" style="margin-left: 10rpx;" @click="zt_click"
@longpress="zt_long_click">
复制\粘贴
</view>
<view v-if="!isshowstart" class="add_button" style="margin-left: 10rpx;margin-right: 10rpx;"
@click="zanting_click">
{{stopOrStart}}
</view>
</view>
<view class="zhezhao" v-if="isshowstart">
<view class="dialog_back">
<cover-view class="add_button_ef" style=" color: #07a5a6;" @tap.stop.prevent="start_zhezhao">
开始
</cover-view>
<cover-view class="add_button_ef" style="color: #07a5a6;" @tap.stop.prevent="back_zhezhao">
返回
</cover-view>
</view>
</view>
<movable-area v-if="!isshowstart" class="movable-area">
<movable-view class="movable-view" direction="all">
<image class="goto_top" @click="add_click()" src="../../static/addpeople.png" mode="">
</image>
</movable-view>
</movable-area>
</view>
</template>
<script>
export default {
data() {
return {
// 棋盘大小
gridWidth: 30, //棋盘格子宽
gridHeight: 30, //棋盘格子高
timer: '', //计时器
isshowstart: true, //是否显示开始dialog
datalist: [], //操作数据
yuanlist: [], //本盘游戏原始数据
touchstartx: 0, //触摸开始x坐标
touchstarty: 0, //触摸开始y坐标
ctx: '', //画布一 棋盘
ctxtwo: '', //画布二 操作
mbcount: 10, //计算和的目标值
timecount: 0, //用时
fraction: 0, //分数
steps: 0, //步数
surplusnum: 160, //剩余数量
isTiming: false, //计时器是否启动
stopOrStart: '', //暂停、开始按钮名称
tsstartindex: [0, -1], //以那个位置开始提示
htsendindex: [], //横向提示结束位置
vtsendindex: [], //竖向提示结束位置
qtsendindex: [], //区域提示结束位置
fxqtsendindex: [], //区域提示结束位置
fxqtsendindext: [], //区域提示结束位置
dqstepsflag: 0
};
},
onReady() {
const ctx = uni.createCanvasContext('myCanvas');
const ctxtwo = uni.createCanvasContext('myCanvass');
this.ctx = ctx
this.ctxtwo = ctxtwo
this.init()
},
onShow() {
clearInterval(this.stopTimer());
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
clearInterval(this.stopTimer());
},
methods: {
/**
* 手动增加一条数据
*/
add_click: function() {
this.tsstartindex = [0, -1]
var indexs = []
for (var i = 0; i < this.datalist.length; i++) {
var arr = this.datalist[i]
for (var j = 0; j < arr.length; j++) {
if (!arr[j].value) {
let index = [i, j]
indexs.push(index)
}
}
}
if (indexs.length != 0) {
let bean = this.getRandomInt(0, indexs.length - 1)
var value = 10 - this.tongji()
// var value = this.getRandomInt(1, 9)
this.datalist[indexs[bean][0]][indexs[bean][1]].value = value
var valbean = this.datalist[indexs[bean][0]][indexs[bean][1]]
this.addvalue(valbean.startx, valbean.starty, value)
}
},
tongji: function() {
var shuzu = [{
value: 0,
flag: 1,
},
{
value: 0,
flag: 2,
},
{
value: 0,
flag: 3,
},
{
value: 0,
flag: 4,
},
{
value: 0,
flag: 5,
},
{
value: 0,
flag: 6,
},
{
value: 0,
flag: 7,
},
{
value: 0,
flag: 8,
},
{
value: 0,
flag: 9,
},
]
for (var i = 0; i < this.datalist.length; i++) {
var arr = this.datalist[i]
for (var j = 0; j < arr.length; j++) {
switch (arr[j].value * 1) {
case 1:
shuzu[0].value = shuzu[0].value * 1 + 1
break
case 2:
shuzu[1].value = shuzu[1].value * 1 + 1
break
case 3:
shuzu[2].value = shuzu[2].value * 1 + 1
break
case 4:
shuzu[3].value = shuzu[3].value * 1 + 1
break
case 5:
shuzu[4].value = shuzu[4].value * 1 + 1
break
case 6:
shuzu[5].value = shuzu[5].value * 1 + 1
break
case 7:
shuzu[6].value = shuzu[6].value * 1 + 1
break
case 8:
shuzu[7].value = shuzu[7].value * 1 + 1
break
case 9:
shuzu[8].value = shuzu[8].value * 1 + 1
break
}
}
}
console.log("aaa", JSON.stringify(shuzu))
// 使用 sort 方法根据 age 属性值排序
// 默认情况下，sort 方法会按照字符串的 Unicode 码点进行排序
// 因此我们需要提供一个比较函数来指定按照数字大小排序
shuzu.sort((a, b) => b.value - a.value);
// 如果你想要按照升序排序，可以交换 a和b的位置
// shuzu.sort((a, b) => a.age - b.age);
// 输出排序后的数组
console.log(shuzu);
return shuzu[0].flag
},
/**
* 在棋盘 x y 位置增加value
*
*/
addvalue: function(x, y, value) {
// 只在特定格子上标注数字
const textX = x + this.gridWidth / 2 - 7;
const textY = y + this.gridHeight / 2 + 7;
this.ctx.setFillStyle('#07a5a6');
this.ctx.setFontSize(14);
this.ctx.fillText(value, textX, textY);
this.ctx.draw(true)
this.jssy()
this.fraction = this.fraction - 7 > 0 ? this.fraction - 7 : 0
if (this.dqstepsflag > 0) {
this.dqstepsflag--
}
console.log(this.dqstepsflag)
},
/**
* 提示点击事件
*/
ts_click: function() {
//连续点击提示 计算本次提示的开始坐标的row cul
var that = this
that.clear()
if (this.tsstartindex[1] == 9) {
this.tsstartindex = [this.tsstartindex[0] + 1, 0]
} else {
this.tsstartindex = [this.tsstartindex[0], this.tsstartindex[1] + 1]
}
//通过循环挨个取下一个提醒中 操作数据中有value的坐标 作为本次提醒开始坐标
for (var i = this.tsstartindex[0]; i < this.datalist.length; i++) {
var arr = this.datalist[i]
for (var j = this.tsstartindex[1]; j < arr.length; j++) {
if (arr[j].value) {
console.log("ts_click", i, j)
this.tjh(1, i, j)
return
}
}
}
},
/**
* @param {Object} flag 1 点击提示 2 自动计算
* @param {Object} row
* @param {Object} cul
*/
tjh: function(flag, row, cul) {
var that = this
if (flag == 2) {
if (cul >= 9) {
row = row + 1
cul = 0
} else {
cul = cul + 1
}
}
if (row < this.datalist.length) {
var arr = this.datalist[row]
if (cul <= 9) {
if (arr[cul].value) { //有值 取计算
//提示初始值
this.tsstartindex = [row, cul]
this.csts(1, [row, cul])
} else { //没值 自动循环
this.tjh(2, row, cul)
}
}
}
},
/**
* @param {Object} flag 取横向和竖向 flag 相邻值 和 flag*flag 的区域值
* @param {Object} indexs //计算初始值
*/
csts: function(flag, indexs) {
this.vtsendindex = []
this.htsendindex = []
this.qtsendindex = []
this.fxqtsendindex = []
var row = indexs[0]
var cul = indexs[1]
var shusum = 0
//竖向取几个数
for (var i = 0; i <= flag; i++) {
//竖向
if (row + flag <= 15) { //竖向起始值+取的个数 超出棋盘 不计算
shusum = shusum + this.datalist[row + i][cul].value * 1
}
}
if (shusum == 10) { // 竖向存在符合的 将最后的目标方块坐标记录
this.vtsendindex = [row + flag, cul]
}
var hengsum = 0
//横向取几个数
for (var i = 0; i <= flag; i++) {
//横向
if (cul + flag <= 9) { //横向起始值+取的个数 超出棋盘 不计算
hengsum = hengsum + this.datalist[row][cul + i].value * 1
}
}
if (hengsum == 10) { //横向存在符合的 将最后的目标方块坐标记录
this.htsendindex = [row, cul + flag]
}
var quyusum = 0
//区块取几个数 flag*flag
for (var i = 0; i <= flag; i++) {
for (var j = 0; j <= flag; j++) {
if (row + flag <= 15 && cul + flag <= 9) { //起始值+取的个数 超出棋盘 不计算
quyusum = quyusum + this.datalist[row + i][cul + j].value * 1
}
}
}
if (quyusum == 10) { //区块存在符合的 将最后的目标方块坐标记录
this.qtsendindex = [row + flag, cul + flag]
}
var quyusumfx = 0
if (cul == 9) {
console.log("cul==", cul, "---flag===", flag)
//区块取几个数 flag*flag
for (var i = 0; i <= flag; i++) {
for (var j = 0; j <= flag; j++) {
console.log("cul==", cul, "---flag===", flag)
if (row + flag <= 15 && cul - flag >= 0) { //起始值+取的个数 超出棋盘 不计算
quyusumfx = quyusumfx + this.datalist[row + i][cul - j].value * 1
console.log("33333333===", quyusumfx)
}
}
}
}
if (quyusumfx == 10) {
this.fxqtsendindex = [row + flag, cul - flag]
}
if (this.htsendindex.length || this.vtsendindex.length || this.qtsendindex.length || this.fxqtsendindex
.length) { //有提示
console.log("有提示，横向", JSON.stringify(this.htsendindex))
console.log("有提示，竖向", JSON.stringify(this.vtsendindex))
console.log("有提示，区域", JSON.stringify(this.qtsendindex))
console.log("有提示，反向区域", JSON.stringify(this.fxqtsendindex))
this.tsrs()
} else {
console.log("没提示")
if (hengsum + shusum + quyusum + quyusumfx != 0) { //计算的不是空值
if (cul < 9) {
if (hengsum < 10 || shusum < 10 || quyusum < 10) { //三种方式有小于目标值的
this.csts(flag + 1, indexs) //继续取
} else { //三种方式都大于目标值 计算下一个
this.tjh(2, row, cul)
}
} else if (cul == 9) {
if (shusum < 10 || quyusumfx < 10) { //三种方式有小于目标值的
this.csts(flag + 1, indexs) //继续取
} else { //三种方式都大于目标值 计算下一个
this.tjh(2, row, cul)
}
}
} else { //计算结果是空值 计算下一个
this.tjh(2, row, cul)
}
}
},
/**
* 标记提示位置
*/
tsrs: function() {
this.ctxtwo.draw();
if (this.htsendindex.length) {
const x = this.datalist[this.tsstartindex[0]][this.tsstartindex[1]].startx; // 起点X坐标
const y = this.datalist[this.tsstartindex[0]][this.tsstartindex[1]].starty; // 起点Y坐标
const width = this.datalist[this.htsendindex[0]][this.htsendindex[1]].endx - x; // 区域宽度
const height = this.datalist[this.htsendindex[0]][this.htsendindex[1]].endy - y; // 区域高度
this.ctxtwo.beginPath();
this.ctxtwo.setStrokeStyle('#00a90d'); // 设置矩形框颜色为红色
this.ctxtwo.setLineWidth(4); // 设置矩形框线宽
// 绘制矩形
this.ctxtwo.rect(x, y, width, height);
this.ctxtwo.stroke(); // 描边矩形
this.ctxtwo.closePath(); // 结束路径
this.ctxtwo.draw(true);
}
if (this.vtsendindex.length) {
const x = this.datalist[this.tsstartindex[0]][this.tsstartindex[1]].startx; // 起点X坐标
const y = this.datalist[this.tsstartindex[0]][this.tsstartindex[1]].starty; // 起点Y坐标
const width = this.datalist[this.vtsendindex[0]][this.vtsendindex[1]].endx - x; // 区域宽度
const height = this.datalist[this.vtsendindex[0]][this.vtsendindex[1]].endy - y; // 区域高度
this.ctxtwo.beginPath();
this.ctxtwo.setStrokeStyle('#f0a99d'); // 设置矩形框颜色为红色
this.ctxtwo.setLineWidth(4); // 设置矩形框线宽
// 绘制矩形
this.ctxtwo.rect(x, y, width, height);
this.ctxtwo.stroke(); // 描边矩形
this.ctxtwo.closePath(); // 结束路径
this.ctxtwo.draw(true);
}
if (this.qtsendindex.length) {
const x = this.datalist[this.tsstartindex[0]][this.tsstartindex[1]].startx; // 起点X坐标
const y = this.datalist[this.tsstartindex[0]][this.tsstartindex[1]].starty; // 起点Y坐标
const width = this.datalist[this.qtsendindex[0]][this.qtsendindex[1]].endx - x; // 区域宽度
const height = this.datalist[this.qtsendindex[0]][this.qtsendindex[1]].endy - y; // 区域高度
this.ctxtwo.beginPath();
this.ctxtwo.setStrokeStyle('#00f99d'); // 设置矩形框颜色为红色
this.ctxtwo.setLineWidth(4); // 设置矩形框线宽
// 绘制矩形
this.ctxtwo.rect(x, y, width, height);
this.ctxtwo.stroke(); // 描边矩形
this.ctxtwo.closePath(); // 结束路径
this.ctxtwo.draw(true);
}
if (this.fxqtsendindex.length) {
const x = this.datalist[this.fxqtsendindex[0]][this.fxqtsendindex[1]].startx; // 起点X坐标
const y = this.datalist[this.tsstartindex[0]][this.tsstartindex[1]].starty; // 起点Y坐标
const width = this.datalist[this.tsstartindex[0]][this.tsstartindex[1]].endx - x; // 区域宽度
const heightsss = this.datalist[this.fxqtsendindex[0]][this.fxqtsendindex[1]].endy - y; // 区域高度
const height = heightsss > 0 ? heightsss : -heightsss
this.ctxtwo.beginPath();
this.ctxtwo.setStrokeStyle('#00f99d'); // 设置矩形框颜色为红色
this.ctxtwo.setLineWidth(4); // 设置矩形框线宽
// 绘制矩形
this.ctxtwo.rect(x, y, width, height);
this.ctxtwo.stroke(); // 描边矩形
this.ctxtwo.closePath(); // 结束路径
this.ctxtwo.draw(true);
}
if (this.fxqtsendindext.length) {
const x = this.datalist[this.fxqtsendindext[0]][this.fxqtsendindext[1]].startx; // 起点X坐标
const y = this.datalist[this.fxqtsendindext[0]][this.fxqtsendindext[1]].starty; // 起点Y坐标
const width = this.datalist[this.tsstartindex[0]][this.tsstartindex[1]].endx - x; // 区域宽度
const height = this.datalist[this.tsstartindex[0]][this.tsstartindex[1]].endy - y; // 区域高度
this.ctxtwo.beginPath();
this.ctxtwo.setStrokeStyle('#00f99d'); // 设置矩形框颜色为红色
this.ctxtwo.setLineWidth(4); // 设置矩形框线宽
// 绘制矩形
this.ctxtwo.rect(x, y, width, height);
this.ctxtwo.stroke(); // 描边矩形
this.ctxtwo.closePath(); // 结束路径
this.ctxtwo.draw(true);
}
// 清空指定区域
},
/**
* 返回按钮点击事件
*/
back_zhezhao: function() {
uni.navigateBack({
delta: 1
})
},
/**
* 粘贴
*/
zt_long_click: function() {
var ddddd = [
[{
"value": 1
}, {
"value": 5
}, {
"value": 9
}, {
"value": 6
}, {
"value": 9
}, {
"value": 4
}, {
"value": 3
}, {
"value": 2
}, {
"value": ''
}, {
"value": 1
}],
[{
"value": 3
}, {
"value": 3
}, {
"value": 5
}, {
"value": 5
}, {
"value": 5
}, {
"value": 7
}, {
"value": 2
}, {
"value": 3
}, {
"value": 3
}, {
"value": 6
}],
[{
"value": 5
}, {
"value": 6
}, {
"value": 7
}, {
"value": 1
}, {
"value": 8
}, {
"value": 6
}, {
"value": 4
}, {
"value": 6
}, {
"value": 5
}, {
"value": 2
}],
[{
"value": 8
}, {
"value": 4
}, {
"value": 6
}, {
"value": 9
}, {
"value": 9
}, {
"value": 2
}, {
"value": 5
}, {
"value": 8
}, {
"value": 4
}, {
"value": 5
}],
[{
"value": 4
}, {
"value": 2
}, {
"value": 5
}, {
"value": 9
}, {
"value": 7
}, {
"value": 6
}, {
"value": 3
}, {
"value": 6
}, {
"value": 5
}, {
"value": 7
}],
[{
"value": 1
}, {
"value": 8
}, {
"value": 3
}, {
"value": 5
}, {
"value": 8
}, {
"value": 1
}, {
"value": 9
}, {
"value": 7
}, {
"value": 3
}, {
"value": 4
}],
[{
"value": 5
}, {
"value": 4
}, {
"value": 9
}, {
"value": 5
}, {
"value": 6
}, {
"value": 6
}, {
"value": 6
}, {
"value": 7
}, {
"value": 7
}, {
"value": 4
}],
[{
"value": 7
}, {
"value": 8
}, {
"value": 6
}, {
"value": 1
}, {
"value": 7
}, {
"value": 3
}, {
"value": 1
}, {
"value": 4
}, {
"value": 5
}, {
"value": 4
}],
[{
"value": 7
}, {
"value": 3
}, {
"value": 6
}, {
"value": 1
}, {
"value": 8
}, {
"value": 2
}, {
"value": 4
}, {
"value": 5
}, {
"value": 9
}, {
"value": 8
}],
[{
"value": 9
}, {
"value": 6
}, {
"value": 1
}, {
"value": 6
}, {
"value": 9
}, {
"value": 6
}, {
"value": 7
}, {
"value": 4
}, {
"value": 4
}, {
"value": 1
}],
[{
"value": 8
}, {
"value": 9
}, {
"value": 6
}, {
"value": 9
}, {
"value": 8
}, {
"value": 7
}, {
"value": 2
}, {
"value": 9
}, {
"value": 4
}, {
"value": 5
}],
[{
"value": 1
}, {
"value": 3
}, {
"value": 9
}, {
"value": 6
}, {
"value": 4
}, {
"value": 2
}, {
"value": 3
}, {
"value": 2
}, {
"value": 7
}, {
"value": 2
}],
[{
"value": 7
}, {
"value": 7
}, {
"value": 9
}, {
"value": 6
}, {
"value": 9
}, {
"value": 6
}, {
"value": 3
}, {
"value": 5
}, {
"value": 5
}, {
"value": 4
}],
[{
"value": 7
}, {
"value": 6
}, {
"value": 4
}, {
"value": 5
}, {
"value": 7
}, {
"value": 1
}, {
"value": 1
}, {
"value": 3
}, {
"value": 4
}, {
"value": 1
}],
[{
"value": 7
}, {
"value": 3
}, {
"value": 8
}, {
"value": 4
}, {
"value": 2
}, {
"value": 4
}, {
"value": 4
}, {
"value": 7
}, {
"value": 1
}, {
"value": 1
}],
[{
"value": 9
}, {
"value": 3
}, {
"value": 3
}, {
"value": 5
}, {
"value": 4
}, {
"value": 6
}, {
"value": 1
}, {
"value": 1
}, {
"value": 6
}, {
"value": 9
}]
]
this.tsstartindex = [0, -1]
var that = this
that.stopTimer()
uni.getClipboardData({
success: function(res) {
console.log(res.data);
that.yuanlist = res.data
that.datalist = res.data
that.timecount = 0
that.fraction = 0
that.steps = 0
that.dqstepsflag = 0
that.isshowstart = true
that.drawBoard();
}
})
},
/**
* 复制
*/
zt_click: function() {
this.tsstartindex = [0, -1]
uni.setClipboardData({
data: JSON.stringify(this.yuanlist),
success: (res) => {
}
})
},
/**
* 新开一局
*/
xk_click: function() {
this.tsstartindex = [0, -1]
this.datalist = []
this.yuanlist = []
this.timecount = 0
this.fraction = 0
this.steps = 0
this.dqstepsflag = 0
this.stopTimer()
this.clear()
this.init()
},
/**
* 重来
*/
cl_click: function() {
this.tsstartindex = [0, -1]
this.datalist = JSON.parse(JSON.stringify(this.yuanlist))
this.timecount = 0
this.fraction = 0
this.steps = 0
this.dqstepsflag = 0
this.stopTimer()
this.clear()
this.drawBoard();
},
/**
* 进入页面初始化数据
*/
init: function() {
for (let row = 0; row < 16; row++) {
var beans = []
for (let col = 0; col < 10; col++) {
let bean = {
value: this.getRandomInt(1, 9)
}
beans.push(bean)
}
this.datalist[row] = beans
}
this.yuanlist = JSON.parse(JSON.stringify(this.datalist))
this.drawBoard();
},
// 打乱数组的函数
shuffle: function(array) {
let currentIndex = array.length,
temporaryValue, randomIndex;
// 当还剩有元素未洗牌时
while (0 !== currentIndex) {
// 选取一个剩下的元素
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// 并与当前元素交换
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
},
/**
* 触摸屏幕开始 记录开始坐标
*/
touchstart: function(e) {
if (!this.isTiming) {
return
}
let startx = e.touches[0].x
let starty = e.touches[0].y
this.touchstartx = startx > 0 ? startx : 0
this.touchstarty = starty > 0 ? starty : 0
},
/**
* 触摸屏幕结束 计算
*/
touchend: function(e) {
if (!this.isTiming) {
return
}
let endx = e.changedTouches[0].x > 0 ? e.changedTouches[0].x : 0
let endy = e.changedTouches[0].y > 0 ? e.changedTouches[0].y : 0
this.jszb(this.touchstartx, this.touchstarty, endx, endy)
},
/**
* 触摸屏幕移动 画框
*/
touchmove: function(e) {
if (!this.isTiming) {
return
}
// e.touches[0].x
this.drawRectangle(e.touches[0].x, e.touches[0].y);
},
/**
* 根据触摸结束位置xy 画边框
*/
drawRectangle: function(endx, endy) {
this.ctxtwo.beginPath();
this.ctxtwo.setStrokeStyle('#00a99d'); // 设置矩形框颜色为红色
this.ctxtwo.setLineWidth(2); // 设置矩形框线宽
// this.ctx.rect(this.touchstartx, this.touchstarty, endx - this.touchstartx, endy - this
// .touchstarty); // 绘制矩形
this.ctxtwo.rect(Math.min(this.touchstartx, endx), Math.min(this.touchstarty, endy), Math.abs(
endx -
this
.touchstartx), Math.abs(endy - this.touchstarty));
this.ctxtwo.stroke(); // 描边矩形
this.ctxtwo.closePath(); // 结束路径
this.ctxtwo.closePath();
// this.drawBoard();
this.ctxtwo.draw();
},
/**
* 清空 操作画布
*/
clear: function() {
this.ctxtwo.draw();
},
/**
*根据传入的开始和结束xy 值 需要计算那些位置
*/
jszb: function(startx, starty, endx, endy) {
//方向操作
if (endx < startx) {
let temp = endx
endx = startx
startx = temp
}
//方向操作
if (endy < starty) {
let temp = endy
endy = starty
starty = temp
}
var startrow //触摸开始行
var startcol //触摸开始列
var endrow //触摸结束行
var endcol //触摸结束列
var arrs = this.datalist
//取出各个元素进行元素 开始xy 和结束xy
for (var i = 0; i < arrs.length; i++) {
var arr = arrs[i]
for (var j = 0; j < arr.length; j++) {
//取出元素
var bean = arr[j]
// 元素startx小于触摸开始x且 元素endx 大于 触摸开始x 且 元素starty 小于触摸开始y 且 元素endy 大于 触摸开始y
if (bean.startx < startx && bean.endx > startx && bean.starty < starty && bean.endy >
starty) { //取得开始行列
startrow = i
startcol = j
}
// 元素startx小于触摸结束x且 元素endx 大于 触摸结束x 且 元素starty 小于触摸结束y 且 元素endy 大于 触摸结束y
if (bean.startx < endx && bean.endx > endx && bean.starty < endy && bean.endy > endy) {
//取得结束行列
endrow = i
endcol = j
}
}
}
this.getvaleu(startrow, endrow, startcol, endcol)
},
//取出指定行列 的数据计算
getvaleu: function(startrow, endrow, startcol, endcol) {
var jsflag = false
var count = 0
//从开始行到结束行 取出行数据
for (var i = startrow; i <= endrow; i++) {
//从取出的行数据中 从开始列到结束列 取出列数据
for (var j = startcol; j <= endcol; j++) {
console.log(JSON.stringify(this.datalist[i][j])) //取出的每一个元素
count = count + this.datalist[i][j].value * 1 //计算这些元素value 和
}
}
if (count == this.mbcount) { //与 目标值比较 相同
for (var i = startrow; i <= endrow; i++) { //将圈起来的元素 value 置空
for (var j = startcol; j <= endcol; j++) {
this.datalist[i][j].value = ""
}
}
this.steps++ //步数增加1
if (this.dqstepsflag < 15) {
this.dqstepsflag++
}
//计算分数
if (this.dqstepsflag < 5) { //步数小于5 一步2分
this.fraction = this.fraction + 2
} else if (this.dqstepsflag >= 5 && this.dqstepsflag < 10) { //步数大于等于5 小于10 一步3分
this.fraction = this.fraction + 3
} else if (this.dqstepsflag >= 10 && this.dqstepsflag < 15) { //步数大于等于10 小于15 一步5分
this.fraction = this.fraction + 5
} else if (this.dqstepsflag >= 15) { //步数大于等于15 一步10分
this.fraction = this.fraction + 10
}
console.log(this.steps)
console.log(this.dqstepsflag)
console.log(this.fraction)
//清空 以消除的区域
this.eraseArea(startrow, endrow, startcol, endcol)
//计算剩余
this.jssy()
//清空画布 二
this.clear();
//还原提醒初始值
this.tsstartindex = [0, -1]
} else {
console.log("错误")
//还原提醒初始值
this.tsstartindex = [0, -1]
this.clear();
}
},
/**
* 计算剩余未消除数量
*/
jssy: function() {
this.surplusnum = 0
for (var i = 0; i < this.datalist.length; i++) {
var arr = this.datalist[i]
for (var j = 0; j < arr.length; j++) {
if (arr[j].value) {
this.surplusnum++
}
}
}
},
/**
* 清空 计算成功的 棋盘区域
*/
eraseArea: function(startrow, endrow, startcol, endcol) {
for (var i = startrow; i <= endrow; i++) {
for (var j = startcol; j <= endcol; j++) {
console.log(JSON.stringify(this.datalist[i][j]))
const x = this.datalist[i][j].startx; // 起点X坐标
const y = this.datalist[i][j].starty; // 起点Y坐标
const width = this.datalist[i][j].endx - x; // 区域宽度
const height = this.datalist[i][j].endy - y; // 区域高度
console.log(x, y, width, height)
this.ctx.clearRect(x + 1, y + 1, width - 2, height - 2);
this.ctx.draw(true);
}
}
},
/**
* 绘制棋盘 填充数据
*/
drawBoard() {
// 绘制棋盘格子
for (let row = 0; row < 16; row++) {
for (let col = 0; col < 10; col++) {
const x = col * this.gridWidth;
const y = row * this.gridHeight;
// 绘制格子边框
this.ctx.rect(x, y, this.gridWidth, this.gridHeight);
this.ctx.setStrokeStyle('#000');
this.ctx.stroke();
// 只在特定格子上标注数字
const textX = x + this.gridWidth / 2 - 7;
const textY = y + this.gridHeight / 2 + 7;
let bean = this.datalist[row][col]
bean.startx = x
bean.starty = y
bean.endx = x + this.gridWidth
bean.endy = y + this.gridHeight
this.ctx.setFillStyle('#000');
this.ctx.setFontSize(14);
this.ctx.fillText(bean.value, textX, textY);
}
}
// 结束绘制
this.ctx.draw();
this.jssy()
},
/**
* 界面开始按钮
*/
start_zhezhao: function() {
this.isshowstart = false
this.stopOrStart = "暂停"
this.tsstartindex = [0, -1]
this.startTimer()
},
/**
* 暂停按钮点击事件
*/
zanting_click: function() {
if (this.isTiming) {
this.stopTimer()
} else {
this.startTimer()
}
this.tsstartindex = [0, -1]
},
/**
* 开始计时器
*/
startTimer() {
this.stopOrStart = "暂停"
this.isTiming = true
this.timer = setInterval(() => {
this.timecount++
}, 1000)
},
/**
* 停止计时器
*/
stopTimer() {
this.stopOrStart = "继续"
this.isTiming = false
clearInterval(this.timer)
},
/**
* 生成min 到 max 的随机数
*/
getRandomInt: function(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
}
};
</script>
<style scoped>
.contentone {
width: 100vw;
height: 100vw;
position: absolute;
top: 80rpx;
display: flex;
justify-content: center;
}
.contenttwo {
width: 100vw;
height: 100vw;
position: absolute;
top: 80rpx;
display: flex;
justify-content: center;
}
.canvas_cla {}
.add_button_view {
display: flex;
z-index: 4;
/*row 横向 column 列表 */
flex-direction: row;
justify-content: center;
align-items: center;
text-align: center;
height: 140rpx;
width: 100vw;
background: #fff;
border-top: solid 1rpx #efefef;
position: fixed;
bottom: 0;
}
.add_button {
flex: 1;
height: 88rpx;
border: solid 2rpx #07a5a6;
color: #fff;
background: #07a5a6;
font-size: 32rpx;
border-radius: 10rpx;
align-items: center;
justify-content: center;
display: flex;
}
.not_add_button {
background: #effcfb;
flex: 1;
height: 88rpx;
border: solid 2rpx #07a5a6;
color: #07a5a6;
font-size: 32rpx;
border-radius: 10rpx;
align-items: center;
justify-content: center;
display: flex;
}
.add_button_ef {
margin-left: 32rpx;
margin-right: 32rpx;
padding-top: 30rpx;
padding-bottom: 30rpx;
width: 300rpx;
border: solid 2rpx #efefef;
color: #999;
background: #efefef;
font-size: 32rpx;
border-radius: 10rpx;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
vertical-align: center;
}
.not_add_button_ef {
margin-left: 32rpx;
margin-right: 32rpx;
background: #efefef;
flex: 1;
height: 88rpx;
border: solid 2rpx #efefef;
color: #999;
font-size: 32rpx;
border-radius: 10rpx;
align-items: center;
justify-content: center;
display: flex;
z-index: 9999;
}
.zhezhao {
position: fixed;
top: 0;
bottom: 0;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.4);
z-index: 9999;
}
.dialog_back {
position: fixed;
z-index: 12;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
justify-content: center;
align-items: center;
display: flex;
}
.top_linear {
display: flex;
flex-direction: row;
justify-content: space-between;
display: flex;
flex-direction: row;
height: 80rpx;
}
.top_mean_left {
margin-left: 32rpx;
}
.top_mean_right {
margin-right: 32rpx;
}
.top_mean_tv {
color: #07a5a6;
}
.goto_top {
position: fixed;
bottom: 0;
left: 0;
width: 84rpx;
height: 84rpx;
}
.movable-area {
pointer-events: none; // 这个属性设置为none,让所有事件穿透过去
z-index: 100;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.movable-view {
pointer-events: auto; // 重设为auto,覆盖父属性设置
height: 50px;
width: 50px;
left: 10%;
top: 80%;
}
.page_main {
width: 100vw;
height: 100vh;
background-color: #efefef;
}
</style>
扫一扫
5695
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
