English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
1.Introducción
Recientemente, me encontré con un problema en el trabajo, ya que la función de la página del sistema de gestión de backend no tiene nuevas necesidades, por lo que pensé en qué poner en la página principal. Recientemente, lo que se me ocurrió fue poner un supuestamente Sudoku. ¿Por qué se llama supuestamente Sudoku? Porque las reglas son diferentes de las del Sudoku estándar, solo se requiere que cada fila y cada columna tenga números diferentes. ¡Este ejemplo también se basa en Vue, y comparto el código con todos! Darles el código no es para que copien directamente el código, sino para que lo tomen como un proyecto de práctica o para aprender conocimientos. Si creen que hay algo malo o erróneo en lo que escribí, ¡felizmente los invito a señalarlo, para que intercambien opiniones y nos mejoremos juntos!
El código se ha subido a github: los que necesiten pueden hacer star!vue-demos
2.Efecto de ejecución
3.Pasos de implementación
Los pasos de implementación, siento que se sienten un poco circulares, recomiendo escribir y leer el artículo al mismo tiempo, de esta manera no se sentirán confundidos. O directamente ver el código fuente (sudoku) y entender el código, este proyecto no es complicado!
3-1.Preparar datos y alineación
HTML de alineación+No hablaré mucho del código CSS, la alineación es很简单, esto no debería ser difícil para nadie. Lo más complicado es la interacción de los datos.
Ahora comenzamos con el primer paso, preparando los datos del Sudoku, los datos son, como todos saben, como los siguientes datos!
El efecto de alineación es el siguiente.
El código HTML es el siguiente
<div class="num-table" @mouseleave="hoverCol=''" :class="{'shake':isShake}">
¡--Recorrer cada fila-->
<div v-for="row,index in allNum" class="num"-row chearfix">
¡--Recorrer cada columna dentro de la fila-->
<div v-for="num1,indexSub in row" class="num-col">
{{allNumText[index][indexSub]}}
</div>
</div>
</div>
El código también es simple, como se muestra a continuación
mounted(){
let arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let row = [], rowCol = 0;
for (let i = 0, len = arr1.length; i < len; i++; j
row = Object.assign([], arr1);
this.allNum.push(row);
//Eliminar el primer número y registrar
rowCol = arr1.splice(0, 1)[0];
//Insertar números al final
arr1.push(rowCol);
}
}
También pueden notar que cada fila y columna de estos datos tienen números diferentes!
3-2.Desordenar filas
Luego es desordenar aleatoriamente, para asegurarnos de que cada fila y columna tenga números diferentes. Para esto, utilicé un método simple y brutal-Desordenar por filas o columnas. Por ejemplo, intercambiar posiciones entre la primera y tercera filas, y entre la primera y quinta columnas.
El desorden de las filas es muy simple, ¡es solo desordenar el array aleatoriamente! ¡Se puede resolver con una sola línea de código!
this.allNum.sort((n1, n2) => Math.random(); - 0.5);
3-3.Desordenar columnas
Después de desordenar las filas, procedemos a desordenar por columnas, lo cual es un poco más complicado.
Piensen, por ejemplo, si la segunda columna es el valor de la quinta columna para intercambiar, eso significa que el valor de la segunda celda de cada fila y el valor de la quinta celda se intercambian, por lo que es necesario recorrer cada fila para realizar el intercambio, y en cuanto a los números de columna mencionados anteriormente de la segunda y quinta columnas, se puede lograr con una función!
Ahora veamos el código!
//obtiene dos índices de columnas aleatorios
function randomText() {
let rondomIndex = 0, rondomIndexAfter = 0;
//obtiene el índice de la primera columna
rondomIndex = Math.floor(Math.random(); * 9);
function randomDo() {
rondomIndexAfter = Math.floor(Math.random(); * 9);
//Si los índices de la primera y segunda columna son iguales, el índice de la segunda columna se obtiene nuevamente aleatoriamente
if (rondomIndexAfter === rondomIndex) {
randomDo();
}
}
randomDo();
//devuelve los índices de dos columnas
return [rondomIndex, rondomIndexAfter];
}
//mezcla columnas
let randomArr = [], nowValue = 0;
//del mismo modo, recorre9vez
for (let i = 0; i < 9; i++; j
randomArr = Object.assign([], randomText());
//recorre cada fila, intercambia valores aleatorios en dos columnas de cada fila
for (let j = 0, len = this.allNum.length; j < len; j++; j
//intercambio aleatorio de valores en dos columnas
nowValue = this.allNum[j][randomArr[0]];
this.allNum[j][randomArr[0]] = this.allNum[j][randomArr[1]];
this.allNum[j][randomArr[1]] = nowValue;
}
}
3-3.Vaciar celdas aleatoriamente
Vaciar las celdas es establecer algunas celdas aleatoriamente vacías y luego permitir que las personas que juegan Sudoku llenen estas celdas!
La necesidad, lo que ahora estoy implementando es que cada línea tenga dos celdas vacías, aquí mi enfoque es registrar las coordenadas de cada celda primero, y luego obtener coordenadas aleatorias de las coordenadas registradas, usar las coordenadas obtenidas para establecer vacío!
Primero, obtiene todas las coordenadas
//registra todas las coordenadas let rowText = '', arrText = []; for (let i = 0; i < 9; i++; j rowText = '' Dos coordenadas aleatorias de la fila actual 9for (let j = 0; j <++; j rowText += i + '-' + j + ','; } arrText.push(rowText.substr(0, rowText.length - 1)) } console.log(arrText);
Al ver esta coordenada, es fácil saber que un elemento del array, es la primera fila, ‘0-0' es la primera fila, la primera casilla. El último elemento del array, es la última fila, ‘8-8es la última fila, la última casilla, otros son así!
A continuación, se realiza el vaciado aleatorio, el código es muy simple!
//aleatorio vacío
let nowItme = [], _option, nowOption = [];
for (let i = 0; i < 9; i++; j
//; i}}
Extraer todas las coordenadas de la fila actual
nowItme = arrText[i].split(',');
//nowOption = [];
Dos coordenadas aleatorias de la fila actual 2for (let j = 0; j <++; j
//) {
_option = Math.floor(Math.random() * nowItme.length);
//Dividir las coordenadas x, y
nowOption = nowItme.splice(_option,1)[0].split("-");
this.allNum[nowOption[0]][nowOption[1]] = '';
}
}
Así que todos deben sentirse extraños, a continuación, se realiza la modificación del estilo, es decir, se cambia el estilo de las casillas vaciadas. La clase .no tiene el estilo correspondiente en el css, por favor, presten atención.
¡--Recorrer cada fila-->
<div v-for="row,index in allNum" class="num"-row chearfix">
¡--Recorrer cada columna dentro de la fila-->
¡--
no：被掏空数组的样式
-->
<div v-for="num1,indexSub in row" :class="{'no':num1===''}" class="num-col">
{{allNumText[index][indexSub]}}
</div>
</div>
3-4.Muestra el teclado numérico
Primero, uso un diagrama de flujo simple para explicar la lógica, como se muestra a continuación
Luego, sobre la ubicación del teclado numérico, vea la imagen inferior (no多说数字键盘的样式，只是一个相对定位和一个绝对定位的设置而已)
Como se muestra en la imagen superior, hice clic en la tercera casilla de la primera fila, primero, espero que el estilo de la casilla clicada cambie, para que sea más fácil de distinguir, no es difícil, se puede cambiar el estilo con una clase, esto se puede ver en el código siguiente, uso una clase .cur para controlar el estilo. Además, espero que el teclado numérico aparezca en la segunda fila, cuarta casilla. De esta manera, todos sabrán cómo se ubica el teclado numérico! El top del teclado numérico es, el índice de la fila de la casilla clicada+160 (60 es el ancho y alto de la casilla), left es, el índice de la columna de la casilla clicada+160 (60 es el ancho y alto de la casilla). Por ejemplo, en la imagen superior, la tercera casilla de la primera fila, top=(0+1)*60+"px",left=(2+1)*60+"px".
El código es el siguiente
¡--Recorrer cada fila-->
<div v-for="row,index in allNum" class="num"-row chearfix">
¡--Recorrer cada columna dentro de la fila-->
¡--
no：被掏空数组的样式
cur：格子被点击时触发，被点击的格子样式
-->
<div v-for="num1,indexSub in row"
:class="{'no':num1==='',
"cur":curRow===index&&indexSub===curCol"
@click="showCheck(index,indexSub)" class="num-col">
{{allNumText[index][indexSub]}}
</div>
</div>
¡--Teclado numérico-->
<div class="num-check chearfix" :style="{'top':(curRow+1)*60+:'px','left':(curCol+1)*60+:'px'}"
v-show="checkShow">
<ul>
<li @click="inputText(1)">1</li>
<li @click="inputText(2)">2</li>
<li @click="inputText(3)">3</li>
<li @click="inputText(4)">4</li>
<li @click="inputText(5)">5</li>
<li @click="inputText(6)">6</li>
<li @click="inputText(7)">7</li>
<li @click="inputText(8)">8</li>
<li @click="inputText(9)">9</li>
</ul>
</div>
js代码
/**
* @description Muestra el teclado numérico
* @param i1
* @param i2
*/
showCheck(i1, i2{
//si la celda clicada es la celda vaciada
if (this.allNum[i1][i2] !== '') {
return
}
//si la celda clicada es la celda clicada la última vez (la celda actual)
if (i1 === this.curRow && i2 === this.curCol) {
//oculta el teclado numérico, establece curRow y curCol en vacío
this.checkShow = false;
this.curRow = '';
this.curCol = '';
}
else {
//oculta el teclado numérico, establece curRow y curCol en el punto actual
this.checkShow = true;
this.curRow = i1;
this.curCol = i2;
}
},
运行效果
3-5Resalta la fila y la columna
Este paso es simple, primero, resalta la fila, todos sabemos cómo hacerlo, es decir, se establece un :hover en el div correspondiente a la fila, y luego se establece el estilo de la celda correspondiente, ¡no hay mucho que decir!
Luego, resalta la columna, es un poco complicado, pero también es simple, la lógica creo que todos la conocen, es decir, cuando el ratón entra en la casilla, en data, se usa una variable para almacenar el índice de la columna de la casilla entrante, luego se realiza un juicio, si el índice de la columna de la casilla es igual al índice de la columna de la casilla entrante, se agrega una clase, aquí uso .cur-col。
El código es el siguiente
¡--Recorrer cada fila-->
<div v-for="row,index in allNum" class="num"-row clear">
¡--Recorrer cada columna dentro de la fila-->
¡--
no：被掏空数组的样式
cur：格子被点击时触发，被点击的格子样式
cur-col：鼠标进入时触发，与被点击格子同一列的格子的样式
-->
<div v-for="num1,indexSub in row"
:class="{'no':num1==='',
:'cur':curRow===index&&indexSub===curCol,,
:'cur-col':hoverCol===indexSub"}
@click="showCheck(index,indexSub)" @mouseenter="hoverCol=indexSub;" class="num-col">
{{allNumText[index][indexSub]}}
</div>
</div>
运行效果
3-6.填写操作和错误提示
这一步的操作函数，我直接发代码吧，看代码比我说的会更清晰一些，毕竟说的有点绕
¡--Recorrer cada fila-->
<div v-for="row,index in allNum" class="num"-row clear">
¡--Recorrer cada columna dentro de la fila-->
¡--
no：被掏空数组的样式
cur：格子被点击时触发，被点击的格子样式
cur-col：鼠标进入时触发，与被点击格子同一列的格子的样式
err：填写错误时触发的样式
-->
<div v-for="num1,indexSub in row"
:class="{'no':num1==='',
:'cur':curRow===index&&indexSub===curCol,,
:'cur-col':hoverCol===indexSub,,
:'err':(optionNow.x===index&&optionNow.y===indexSub)||(optionNowInRow.x===index&&optionNowInRow.y===indexSub)||(optionNowInCol.x===index&&optionNowInCol.y===indexSub)}"
@click="showCheck(index,indexSub)" @mouseenter="hoverCol=indexSub;" class="num-col">
{{allNumText[index][indexSub]}}
</div>
</div>
js代码
inputText(_text){
//*****************************inicialización antes de la comprobación
let _row = this.curRow, _col = this.curCol;
this.curRow = '';
this.curCol = '';
this.isErr = false;
this.optionNow = {
x: '',
y: '',
}
this.optionNowInRow = {
x: '',
y: '',
}
this.optionNowInCol = {
x: '',
y: '',
}
//*****************************comprueba la fila
//根据当前格子进行赋值
this.allNumText[_row][_col] = _text;
let rowCheck = Object.assign(this.allNumText[_row], []);
this.checkShow = false;
for (let i = 0, len = rowCheck.length; i < len; i++; j
//si el valor es el mismo, pero las coordenadas son diferentes, es un error de entrada
if (_text === rowCheck[i] && _col !== i) {
this.isErr = true;
this.isShake = true;
//registra la información de la celda actual
this.optionNow = {
x: _row,
y: _col,
}
//registra las coordenadas de las celdas en la misma fila y con el mismo valor que la celda actual
this.optionNowInRow = {
x: _row,
y: i,
}
}
}
//*****************************revisa la columna
let colCheck = [];
//primero guarda los valores de la columna de cada fila
for (let i = 0, len = this.allNumText.length; i < len; i++; j
colCheck.push(this.allNumText[i][_col]);
}
//revisa en cada paso
for (let i = 0, len = colCheck.length; i < len; i++; j
//si el valor es el mismo, pero las coordenadas son diferentes, es un error de entrada
if (_text === colCheck[i] && _row !== i) {
this.isErr = true;
this.isShake = true;
//graba las coordenadas de las celdas que tienen el mismo valor y están en la misma columna que la celda actual
this.optionNowInCol = {
x: i,</br>
y: _col,
}
}
}
//si encuentra el mismo
if (this.isErr) {
setTimeout(() => {
this.isShake = false;
}, 1000)
return;
}
//si la longitud del array después de eliminar duplicados es menor que9, es que la fila no se ha completado
rowCheck = rowCheck.filter(item => item !== '');
if (rowCheck.length !== 9; j
//console.log('No completado la fila');
return;
}
let coloCheck = [];
//si la longitud del array después de eliminar duplicados es menor que9, es que la columna no se ha completado
for (let i = 0, len = this.allNumText.length; i < len; i++; j
coloCheck = [...new Set(this.allNumText[i])];
coloCheck = coloCheck.filter(item => item !== '');
if (coloCheck.length !== 9; j
//console.log('No completado');
return;
}
}
alert('¡Desafío exitoso, ¡pero sin premios!');
this.numShow = false;
}
上面的代码逻辑，简单来说
1..err这个class是设置红色字体所使用的，至于判断，就是在inputText这个函数里面，有optionNow和optionNowInRow和optionNowInCol。只要格子的坐标等于三者其中之一，就会添加这个class，就会变红。
2..isShake这个class是控制抖动动画的，添加了之后，一秒后要去掉这个class，否则下次添加没有动画效果。
3在inputText这个函数里面，我操作的数独列表，并不是之前提到的allNum，而是利用allNum，深度拷贝生成出的allNumText（this.allNumText = JSON.parse(JSON.stringify(this.allNum));）。主要就是为了避免下图的情况！
这样是为了在空格中输入数字时，然后那个格子就不能再更改了，即使是填错了，也不能更改。样式控制也不正确！正确的格式应该是下面这样，即使填入了，格子的样式仍然是灰色的，这样可以方便地知道哪个格子是当时被掏空的，填写错误也是可以更改的。
4.完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-数独是什么</title>
<link rel="stylesheet" href="../../reset.css" rel="external nofollow" >
<style>
li{
list-style-type: none;
}
.shake {
animation: shake-opacity 500ms 1 ease-in-out;
}
@keyframes shake-opacity {
0% {
transform: translate(0px, 0px) rotate(0deg);
opacity: 0.6;
}
10% {
transform: translate(-2px, -1px) rotate(-0.5deg);
opacity: 0.5;
}
20% {
transform: translate(-4px, 4px) rotate(1.5deg);
opacity: 0.4;
}
30% {
transform: translate(-4px, -1px) rotate(-1.5deg);
opacity: 0.8;
}
40% {
transform: translate(-2px, -1px) rotate(-2.5deg);
opacity: 0.3;
}
50% {
transform: translate(-4px, 1px) rotate(-2.5deg);
opacity: 0.5;
}
60% {
transform: translate(-2px, 4px) rotate(0.5deg);
opacity: 0.1;
}
70% {
transform: translate(-3px, 1px) rotate(-0.5deg);
opacity: 0.4;
}
80% {
transform: translate(0px, 0px) rotate(-0.5deg);
opacity: 0.5;
}
90% {
transform: translate(2px, -1px) rotate(-2.5deg);
opacity: 0.8;
}
}
.num-box {
margin: 0 auto;
width: 540px;
position: relative;
}
.num-box .num-check {
position: absolute;
width: 180px;
box-shadow: 0 0 10px 0 #000;
left: 0;
top: 0;
}
.num-box .num-check li {
box-sizing: border-box;
float: left;
background: #fff;
color: #58B7FF;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
font-size: 24px;
border: 1px solid #58B7FF;
cursor: pointer;
transition: all .5s;
}
.num-box .num-check li:hover {
color: #fff;
background: #58B7FF;
border: 1px solid #fff;
}
.num-tips{
color: #333;
line-height: 32px;
font-size: 16px;
}
.num-table{
position: relative;
}
.num-row {
font-size: 0;
}
.num-row:hover .num-col, .num-row:hover .num-col.no, .num-row:hover .num-col.cur-col {
background: #0068b7;
}
.num-row .num-col {
width: 60px;
height: 60px;
line-height: 60px;
float: left;
box-sizing: border-box;
text-align: center;
background: #58B7FF;
color: #fff;
font-size: 24px;
font-weight: bold;
border: 1px solid #ccc;
}
.num-row .num-col.no {
background: #ccc;
border: 1px solid #fff;
}
.num-row .num-col.err {
color: #ff4949;
}
.num-row .num-col.cur-col {
background: #0068b7;
}
.num-row .num-col.cur {
background: #fff !important;
}
</style>
</head>
<body>
<div class="num-box" v-show="numShow" id="num"
<div class="num-tips">
<p>Lo que se llama Sudoku: reglas</p>
<p>1.Cada número en la fila no se repite</p>
<p>2.Cada número en la columna no se repite</p>
</div>
<div class="num-table" @mouseleave="hoverCol=''" :class="{'shake':isShake}">
¡--Recorrer cada fila-->
<div v-for="row,index in allNum" class="num"-row clear">
¡--Recorrer cada columna dentro de la fila-->
¡--
no：被掏空数组的样式
cur：格子被点击时触发，被点击的格子样式
cur-col：鼠标进入时触发，与被点击格子同一列的格子的样式
err：填写错误时触发的样式
-->
<div v-for="num1,indexSub in row"
:class="{'no':num1==='',
:'cur':curRow===index&&indexSub===curCol,,
:'cur-col':hoverCol===indexSub,,
:'err':(optionNow.x===index&&optionNow.y===indexSub)||(optionNowInRow.x===index&&optionNowInRow.y===indexSub)||(optionNowInCol.x===index&&optionNowInCol.y===indexSub)}"
@click="showCheck(index,indexSub)" @mouseenter="hoverCol=indexSub;" class="num-col">
{{allNumText[index][indexSub]}}
</div>
</div>
¡--Teclado numérico-->
<div class="num-check clear" :style="{'top':(curRow+1)*60+:'px','left':(curCol+1)*60+:'px'}"
v-show="checkShow">
<ul>
<li @click="inputText(1)">1</li>
<li @click="inputText(2)">2</li>
<li @click="inputText(3)">3</li>
<li @click="inputText(4)">4</li>
<li @click="inputText(5)">5</li>
<li @click="inputText(6)">6</li>
<li @click="inputText(7)">7</li>
<li @click="inputText(8)">8</li>
<li @click="inputText(9)">9</li>
</ul>
</div>
</div>
</div>
</body>
<script src="../vue.min.js"></script>
<script>
new Vue({
el:'#num',
data:{
name: 'welcome',
testText: 'Bienvenido a',
nowIndex: 0,,
allNum: [],//Orden de números
answer: [],//Puntos de coordenadas de todas las respuestas
allNumText: [],//Números, incluyendo los números introducidos
curRow: '',//Índice de la fila en la que se encuentra la celda actual
curCol: '',//Índice de la columna en la que se encuentra la celda actual
checkShow: false,,//Visualización del teclado numérico
hoverCol: '',//La columna actual al ingresar el ratón
hoverRow: 0,//la fila actual al que entra el ratón
numShow: true,//visualización del sudoku
optionNow: {},//las coordenadas de la celda después de la entrada
optionNowInRow: {},//y las coordenadas de la celda con el mismo valor en la misma fila y columna
optionNowInCol: {},//y las coordenadas de la celda con el mismo valor en la misma columna y fila
isErr: false,//si hay un error de entrada después de
isShake: false//si se muestra el estilo de vibración
},
methods: {
/**
* @description Muestra el teclado numérico
* @param i1
* @param i2
*/
showCheck(i1, i2{
//si la celda clicada es la celda vaciada
if (this.allNum[i1][i2] !== '') {
return
}
//si la celda clicada es la celda clicada la última vez (la celda actual)
if (i1 === this.curRow && i2 === this.curCol) {
//oculta el teclado numérico, establece curRow y curCol en vacío
this.checkShow = false;
this.curRow = '';
this.curCol = '';
}
else {
//oculta el teclado numérico, establece curRow y curCol en el punto actual
this.checkShow = true;
this.curRow = i1;
this.curCol = i2;
}
},
inputText(_text){
//*****************************inicialización antes de la comprobación
let _row = this.curRow, _col = this.curCol;
this.curRow = '';
this.curCol = '';
this.isErr = false;
this.optionNow = {
x: '',
y: '',
}
this.optionNowInRow = {
x: '',
y: '',
}
this.optionNowInCol = {
x: '',
y: '',
}
//*****************************comprueba la fila
//guarda el valor de la celda actual
this.allNumText[_row][_col] = _text;
let rowCheck = Object.assign(this.allNumText[_row], []);
this.checkShow = false;
for (let i = 0, len = rowCheck.length; i < len; i++; j
//si el valor es el mismo, pero las coordenadas son diferentes, es un error de entrada
if (_text === rowCheck[i] && _col !== i) {
this.isErr = true;
this.isShake = true;
//registra la información de la celda actual
this.optionNow = {
x: _row,
y: _col
}
//registra las coordenadas de las celdas en la misma fila y con el mismo valor que la celda actual
this.optionNowInRow = {
x: _row,
y: i
}
}
}
//*****************************revisa la columna
let colCheck = [];
//primero guarda los valores de la columna de cada fila
for (let i = 0, len = this.allNumText.length; i < len; i++; j
colCheck.push(this.allNumText[i][_col]);
}
//revisa en cada paso
for (let i = 0, len = colCheck.length; i < len; i++; j
//si el valor es el mismo, pero las coordenadas son diferentes, es un error de entrada
if (_text === colCheck[i] && _row !== i) {
this.isErr = true;
this.isShake = true;
//graba las coordenadas de las celdas que tienen el mismo valor y están en la misma columna que la celda actual
this.optionNowInCol = {
x: i,</br>
y: _col
}
}
}
//si encuentra el mismo
if (this.isErr) {
setTimeout(() => {
this.isShake = false;
}, 1000)
return;
}
//si la longitud del array después de eliminar duplicados es menor que9, es que la fila no se ha completado
rowCheck = rowCheck.filter(item => item !== '');
if (rowCheck.length !== 9; j
console.log('No completado la fila');
return;
}
let coloCheck = [];
//si la longitud del array después de eliminar duplicados es menor que9, es que la columna no se ha completado
for (let i = 0, len = this.allNumText.length; i < len; i++; j
coloCheck = [...new Set(this.allNumText[i])];
coloCheck = coloCheck.filter(item => item !== '');
if (coloCheck.length !== 9; j
console.log('No completado');
return;
}
}
alert('¡Desafío exitoso, ¡pero sin premios!');
this.numShow = false;
}
},
mounted(){
let arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let row = [], rowCol = 0;
for (let i = 0, len = arr1.length; i < len; i++; j
row = Object.assign([], arr1);
this.allNum.push(row);
rowCol = arr1.splice(0, 1)[0];
arr1.push(rowCol);
}
//mezcla filas
this.allNum.sort((n1, n2) => Math.random(); - 0.5);
//obtiene dos índices de columnas aleatorios
function randomText() {
let rondomIndex = 0, rondomIndexAfter = 0;
//obtiene el índice de la primera columna
rondomIndex = Math.floor(Math.random(); * 9);
function randomDo() {
rondomIndexAfter = Math.floor(Math.random(); * 9);
//si el índice de la primera columna y el índice de la segunda columna son iguales, se vuelve a obtener el índice de la segunda columna
if (rondomIndexAfter === rondomIndex) {
randomDo();
}
}
randomDo();
//devuelve los índices de dos columnas
return [rondomIndex, rondomIndexAfter];
}
//mezcla columnas
let randomArr = [], nowValue = 0;
//del mismo modo, recorre9vez
for (let i = 0; i < 9; i++; j
randomArr = Object.assign([], randomText());
//recorre cada fila, intercambia valores aleatorios en dos columnas de cada fila
for (let j = 0, len = this.allNum.length; j < len; j++; j
//intercambio aleatorio de valores en dos columnas
nowValue = this.allNum[j][randomArr[0]];
this.allNum[j][randomArr[0]] = this.allNum[j][randomArr[1]];
this.allNum[j][randomArr[1]] = nowValue;
}
}
//registra todas las coordenadas
let rowText = '', arrText = [];
for (let i = 0; i < 9; i++; j
rowText = ''
Dos coordenadas aleatorias de la fila actual 9for (let j = 0; j <++; j
rowText += i + '-' + j + ',';
}
arrText.push(rowText.substr(0, rowText.length - 1))
}
console.log(arrText);
//aleatorio vacío
let nowItme = [], _option, nowOption = [];
for (let i = 0; i < 9; i++; j
//; i}}
Extraer todas las coordenadas de la fila actual
nowItme = arrText[i].split(',');
//nowOption = [];
Dos coordenadas aleatorias de la fila actual 2for (let j = 0; j <++; j
//) {
_option = Math.floor(Math.random() * nowItme.length);
//Dividir las coordenadas x, y
nowOption = nowItme.splice(_option,1)[0].split("-");
this.allNum[nowOption[0]][nowOption[1]] = '';
}
}
//Copia profunda de los números del Sudoku
this.allNumText = JSON.parse(JSON.stringify(this.allNum));
}
)
</script>
</html>
reset.css y vue.min.js deben descargarse desde github!
5.Resumen
Bueno, esto es todo lo que he escrito sobre el Sudoku que hice con Vue, principalmente es un poco complicado en la lógica, pero estoy seguro de que otros problemas no deberían ser difíciles para todos. Este ejemplo es un poco más complicado que los tres pequeños ejemplos de introducción rápida anteriores, pero también es muy fácil de entender! Creo que con solo mirarlo un poco, debería ser fácil de entender! Finalmente, si creen que el artículo está mal escrito o algo está mal, por favor déjenos sus sugerencias o señalen el camino. Espero intercambiar opiniones con todos ustedes y mejorar juntos!
Eso es todo el contenido de este artículo, espero que el contenido de este artículo tenga cierta valoración de referencia para el aprendizaje o el trabajo de todos, si tienen alguna pregunta, pueden dejar comentarios para intercambiar, gracias por el apoyo a los tutoriales de grito.
Declaración: Este artículo se ha obtenido de la red, los derechos de autor pertenecen al propietario original, el contenido ha sido contribuido y subido por usuarios de Internet, este sitio web no posee los derechos de propiedad, no ha sido editado por humanos y no asume ninguna responsabilidad legal relacionada. Si encuentra contenido sospechoso de violación de derechos de autor, por favor envíe un correo electrónico a: notice#w proporcionando evidencia relevante.3Declaración: El contenido de este artículo se ha obtenido de la red, y los derechos de autor pertenecen al propietario original. El contenido ha sido contribuido y subido por usuarios de Internet, este sitio web no posee los derechos de propiedad, no ha sido editado por humanos y no asume ninguna responsabilidad legal relacionada. Si encuentra contenido sospechoso de violación de derechos de autor, por favor envíe un correo electrónico a: notice#w proporcionando evidencia relevante, y una vez que se verifique, este sitio eliminará inmediatamente el contenido sospechoso de violación de derechos de autor.