<template>
<view class="container">
<view class="flex align-center justify-center bg_board">
<view
:style="'width:' +(itemWitdth*length+10*length+10)+ 'rpx;height:' +(itemWitdth*length+10*length+10)+ 'rpx;'"
style="background-color: #efefef;position: relative;">
<view @click="clicked(item)" v-for="(item,index) in list" :key="index"
:class="item.id == length*length ? 'bg_space' : 'bg_num'"
class="flex align-center justify-center rounded"
style="margin-top: 10rpx;margin-left: 10rpx;position: absolute;font-size: 60rpx;color: #FFFFFF;"
:style="'left:' +item.left+ 'rpx;top:' +item.top+ 'rpx;width:' +itemWitdth+ 'rpx;height:' +itemWitdth+ 'rpx;'">
{{item.id == length*length ? '' : item.id}}
</view>
</view>
</view>
<view class="flex align-center justify-center">
<uni-number-box :disabled="numDisable" :max="8" :min="3" :value="3" background="#2979FF" color="#fff" @change="changeLength"/>
</view>
<!-- 规则说明 -->
<view style="margin-top: 10rpx;">
<view class="u-m-t-10 fontBold u-font-32 c757575">规则说明:</view>
<view class="u-m-t-20 c757575">1.从左上角由1开始，排列方块，通过循环运动，完成每一行的布置，最后布置好后进行滑块拖动归位即可；</view>
<view class="u-m-t-10 c757575">2.每次胜利可获得15枚心愿币，每天有3次闯关机会</view>
</view>
<view class="goBang-btn justify-center" @click="restart">
<!-- <u-icon name="reload" size="30" color="#999"></u-icon> -->
<text>重来</text>
</view>
<!-- <view class="flex align-center justify-center">
<input type="text" style="width: 200rpx;height: 60rpx;background-color: #1ea7b3;padding: 10rpx;margin: 10rpx;" placeholder="输入生成长度" v-model="value">
</view>
<button @click="changeLength">修改长度</button> -->
<!-- <button @click="moveLeft">左移测试空白移动</button>
<button @click="moveRight">右移测试空白移动</button>
<button @click="moveTop">上移测试空白移动</button>
<button @click="moveBottom">下移测试空白移动</button> -->
</view>
</template>
<script>
import api from '@/util/request/api.js'
export default {
data() {
return {
value: '',
length: 3, //生成的长度
itemWitdth: 200,
spacePosRow: 0,
spacePosColumn: 0,
list: [], //显示的位置与内容数组
listNums: [], //逻辑计算数组
listAllTrueNums: [], //正确顺序数组
// [1,2,3],
// [4,5,6],
// [7,8,9]
isStart: false,
numDisable: false ,//为false的时候可以设置长度
times: 0, // 剩余次数
score: 15, // 每次获胜得到的心愿币
}
},
onLoad(option) {
// 生成用于判断完成的二维数组,不会改变
for (let i = 0; i < this.length; i++) {
let item = []
for (let j = 0; j < this.length; j++) {
item.push(j + i * this.length + 1)
}
this.listAllTrueNums.push(item)
}
// console.log(JSON.stringify(this.listAllTrueNums));
// 初始化
this.init();
// console.log(JSON.stringify(this.list));
if (option.times){
this.times = 3 - parseInt(option.times);
}
uni.showToast({title: "还剩" + this.times + "次机会", icon:'none'});
},
methods: {
// 初始化位置与用于计算的数组
init() {
this.spacePosRow = this.length - 1;
this.spacePosColumn = this.length - 1;
// 单个移块宽度
this.itemWitdth = 600 / this.length
this.listNums = [];
this.list = [];
// 生成用于计算的二维数组
for (let i = 0; i < this.length; i++) {
let item = []
for (let j = 0; j < this.length; j++) {
item.push(j + i * this.length + 1)
}
this.listNums.push(item);
}
// 位置定位
for (let i = 0; i < this.length; i++) {
for (let j = 0; j < this.length; j++) {
let item = {
id: j + i * this.length + 1,
left: (this.itemWitdth + 10) * j,
row: j,
column: i,
top: (this.itemWitdth + 10) * i
}
this.list.push(item)
}
}
// 打乱位置
this.disruptTheOrder();
},
clicked(item) {
// console.log(JSON.stringify(item));
if (!this.isStart) {
this.numDisable = true;
this.isStart = true;
}
// 获取点击位置
let row = item.row;
let column = item.column;
// 获取点击位置的行和列数组
let rowList = this.listNums[column]
let columnList = []
// console.log(JSON.stringify(rowList));
for (let i = 0; i < this.length; i++) {
columnList.push(this.listNums[i][row])
}
// 判断左右是否为空白
if (rowList[row - 1]) { //左侧是否为空白
// console.log(rowList[row-1]);
if (rowList[row - 1] == this.length * this.length) {
let item = rowList[row - 1];
rowList[row - 1] = rowList[row];
rowList[row] = item;
// console.log("交换");
this.listNums[column] = rowList;
this.spacePosRow += 1;
}
}
if (rowList[row + 1]) { //右侧是否为空白
// console.log(rowList[row+1]);
if (rowList[row + 1] == this.length * this.length) {
let item = rowList[row + 1];
rowList[row + 1] = rowList[row];
rowList[row] = item;
// console.log("交换");
this.listNums[column] = rowList;
this.spacePosRow -= 1;
}
}
// 判断上下是否为空白
if (columnList[column - 1]) { //上侧是否为空白
// console.log(columnList[column-1]);
if (columnList[column - 1] == this.length * this.length) {
let item = columnList[column - 1];
columnList[column - 1] = columnList[column];
columnList[column] = item;
// console.log("交换");
for (let i = 0; i < this.length; i++) {
this.listNums[i][row] = columnList[i]
}
this.spacePosColumn += 1;
}
}
if (columnList[column + 1]) { //下侧是否为空白
// console.log(columnList[column+1]);
if (columnList[column + 1] == this.length * this.length) {
let item = columnList[column + 1];
columnList[column + 1] = columnList[column];
columnList[column] = item;
// console.log("交换");
for (let i = 0; i < this.length; i++) {
this.listNums[i][row] = columnList[i]
}
this.spacePosColumn -= 1;
}
}
//console.log(JSON.stringify(rowList));
//console.log(JSON.stringify(columnList));
// 将二维数组显示到页面
this.showToList();
//检测是否完成游戏
this.allTrueOver();
},
changeLength(val) {
// console.log(val)
this.length = parseInt(val);
this.listAllTrueNums = [];
for (let i = 0; i < this.length; i++) {
let item = []
for (let j = 0; j < this.length; j++) {
item.push(j + i * this.length + 1)
}
this.listAllTrueNums.push(item)
}
// console.log(JSON.stringify(this.listAllTrueNums));
this.init();
},
// 将二维数组显示到页面
showToList() {
for (let i = 0; i < this.length; i++) {
for (let j = 0; j < this.length; j++) {
this.list[j + i * this.length].id = this.listNums[i][j];
}
}
},
// 空白左移
moveLeft() {
if (this.spacePosRow <= 0) return;
// console.log("空白左移");
// console.log(this.spacePosColumn);
// console.log(this.spacePosRow);
// 空白位置 row length column length
let item = this.listNums[this.spacePosColumn][this.spacePosRow]
this.listNums[this.spacePosColumn][this.spacePosRow] = this.listNums[this.spacePosColumn][this
.spacePosRow - 1
]
this.listNums[this.spacePosColumn][this.spacePosRow - 1] = item;
this.spacePosRow -= 1;
// 将二维数组显示到页面
this.showToList();
},
// 空白右移
moveRight() {
if (this.spacePosRow >= this.length - 1) ret
评论5