vudを使用していわゆるSudokuメソッドのインスタンスを開発する

1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...

1.はじめに

私は最近の仕事で問題に遭遇しました。バックグラウンド管理システムのページ機能に対する新しい要求はないので、ホームページに何かを載せたいと思っています。最近、私は、ルールが異なるため、いわゆる数独をなぜ考えていますか?標準的な数独では、各列の数だけが異なります。 この例はvueにも基づいており、コードはすべての人と共有されています。 誰のコードでも、誰もがコードを直接コピーするのではなく、誰もがそれを実践的なプロジェクトと考えるようにしたり、知識を学ぶことができます。 誰もが私がよく書かれていないと思ったら、私は間違っています。みんながアイデアを交換して一緒に進歩できるように歓迎します。

コードはgithubにアップロードされています。必要に応じてスターを付けることができます! Vueデモ

2.操作効果

3.実装手順

実装の手順、私は少し周りを感じる、私はあなたが記事を書くことをお勧めしますので、恥ずかしいことはありません。 または直接ソースコード(sudoku)に行き、ソースコードを理解してください! このプロジェクトも複雑ではありません!

3-1。データの準備と組版

私は、書体html + cssコードについてはあまり言及していません。タイプセットはとてもシンプルです。 ちょっと複雑なのはデータのやりとりです!
最初のステップを始めましょう、まずは数独のデータを準備してください。誰もが知っているデータは何ですか、それは次のようなデータです!

組版の効果は次のとおりです。

HTMLコードは次のとおりです


<div class="num-table" @mouseleave="hoverCol=''" :class="{'shake':isShake}">
<!-遍历每一行->
<div v-for="row,index in allNum" class="num-row chearfix">
<!-遍历行里面的每一列->
<div v-for="num1,indexSub in row" class="num-col">
{{allNumText[index][indexSub]}}
</div>
</div>
</div>

コードは次のように非常に簡単です


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++) {
row = Object.assign([], arr1);
this.allNum.push(row);
//删除第一个数字并记录下来
rowCol = arr1.splice(0, 1)[0];
//在最后面插入数字
arr1.push(rowCol)
}
}

このデータの各行と列の数は同じではありません。

3-2。回線の混乱

その後、それはランダムな障害であり、障害の順序は、各列の数字が異なることを保証することが保証される。 この場合、私は単純で失礼な方法を使用しました – 行または列単位で、混乱させます。 例えば、第1行と第3行は位置的相互作用を行い、第1列と第5列は位置を交換する。 行動の単位の無秩序な順序について話しましょう!

行の中断は非常に単純です、つまり、ランダムに配列を乱す! それを取得するコードの1行!


this.allNum.sort((n1, n2) => Math.random() - 0.5);

3-3。列のスクランブル

行が動揺し、次は列の内訳ですが、もう少し複雑です。

たとえば、2番目の列が5番目の列交換の値、つまり各行の2番目のグリッドの値が5番目の格子の値と交換されたとしたら、各行を移動する必要があります。 交換するには、上記の第2列と第5列の列の数については、関数を使用して達成することができます!

下のコードを見てください!


//随机获取两列的索引
function randomText() {
let rondomIndex = 0, rondomIndexAfter = 0;
//获取第一列的索引
rondomIndex = Math.floor(Math.random() * 9);
function randomDo() {
rondomIndexAfter = Math.floor(Math.random() * 9);
//如果第一列和第二列索引一样,第二列的索引再次重新随机获取
if (rondomIndexAfter === rondomIndex) {
randomDo();
}
}
randomDo();
//返回两列的索引
return [rondomIndex, rondomIndexAfter]
}
//打乱列
let randomArr = [], nowValue = 0;
//同样遍历9次
for (let i = 0; i < 9; i++) {
randomArr = Object.assign([], randomText());
//遍历每一行,给每一行的随机两列交换值
for (let j = 0, len = this.allNum.length; j < len; j++) {
//随机两列交换值
nowValue = this.allNum[j][randomArr[0]];
this.allNum[j][randomArr[0]] = this.allNum[j][randomArr[1]];
this.allNum[j][randomArr[1]] = nowValue;
}
}

3-3。ランダムショートセル

短いセルは、いくつかのグリッドをランダムに設定してから、数独をプレイする人に聞かせることです。 これらの細胞を埋める!

ここでは、最初に各グリッドの座標を記録し、得られた座標を使用してレコードの座標から座標をランダムに取得する方法です。 、空気を設定してください!

まず、すべての点の座標を取得する


//记录所有坐标
let rowText = '', arrText = []
for (let i = 0; i < 9; i++) {
rowText = ''
for (let j = 0; j < 9; j++) {
rowText += i + '-' + j + ',';
}
arrText.push(rowText.substr(0, rowText.length - 1))
}
console.log(arrText);

この座標を見ると、配列の1つの要素が最初の行で、 '0-0'が最初の行の最初の行であることが分かります。 配列の最後の要素は最後の行で、最後の行は「8-8」です。

下にランダムに空洞があり、コードも非常に簡単です!


//随机掏空
let nowItme = [], _option, nowOption = [];
for (let i = 0; i < 9; i++) {
//抽取当前行的所有坐标
nowItme = arrText[i].split(',');
nowOption = [];
//当前行的随机两个坐标掏空
for (let j = 0; j < 2; j++) {
//抽取当前行的随机一个坐标
_option = Math.floor(Math.random() * nowItme.length);
//分割坐标的x,y
nowOption = nowItme.splice(_option,1)[0].split("-");
this.allNum[nowOption[0]][nowOption[1]] = '';
}
}

私は誰もが奇妙に感じると信じています、次の文章のスタイルは、空のグリッドのスタイルを変更することです! このクラスのスタイルは、私がCSSで書いたスタイルに対応しています。誰もが注意を払っています。


<!-遍历每一行->
<div v-for="row,index in allNum" class="num-row chearfix">
<!-遍历行里面的每一列->
<!-
no:被掏空数组的样式
->
<div v-for="num1,indexSub in row" :class="{'no':num1===''}" class="num-col">
{{allNumText[index][indexSub]}}
</div>
</div>

3-4。テンキーを表示する

まず第一に、私は次のように論理を言うために単にフローチャートを使用します

次に、テンキーパッドの位置について、次の図を参照してください(テンキーパッドのスタイル、すなわち相対的な位置付け、絶対的な位置付けの設定についてはあまり言及していません)

上に示したように、最初の行の3番目のグリッドをクリックしました。まず、グリッドのスタイルをクリックして変更することができます。これは分かりやすいので、難しいことではありません。コードでは、スタイルを制御するために.curクラスを使用します。 もう1人は、テンキーパッドが2番目の行、4番目のグリッドに表示されることを期待しています。 この場合、テンキーパッドの位置がどのように配置されているかは誰もが知っています! テンキーパッドの上端は、クリックされたグリッドが位置する行のインデックスです(60はグリッドの幅と高さです)。leftは、クリックされたグリッドが位置する列のインデックスです(60はグリッドの幅と高さです)。 たとえば、上の図では、最初の行の3番目のグリッド、top =(0 + 1)* 60 + 'px'、left =(2 + 1)* 60 + 'px'です。

コードは以下の通りです


<!-遍历每一行->
<div v-for="row,index in allNum" class="num-row chearfix">
<!-遍历行里面的每一列->
<!-
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>
<!-数字键盘->
<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 显示数字键盘
* @param i1
* @param i2
*/
showCheck(i1, i2){
//点击的格子是否是被掏空的格子
if (this.allNum[i1][i2] !== '') {
return
}
//点击的格子如果是上一次点击的格子(当前格子)
if (i1 === this.curRow && i2 === this.curCol) {
//隐藏数字键盘,curRow和curCol设空
this.checkShow = false;
this.curRow = '';
this.curCol = '';
}
else {
//隐藏数字键盘,curRow和curCol分别设置成当前的点
this.checkShow = true;
this.curRow = i1;
this.curCol = i2;
}
},

操作効果

3-5。同じ列を強調表示する

このステップは非常に簡単です。最初に、ラインを強調表示し、誰もがそれを行う方法を知っています。つまり、対応するdivを設定します:ホバーし、セルスタイルを設定します。 これはあまり言うことではありません!

そして、列を強調表示するのはもう少し複雑ですが、非常に簡単です。マウスがグリッドに入ると、データ内で、変数を使用して列のインデックスをグリッドに格納してから、グリッドの列のインデックスが着信グリッドの列のインデックスと等しいかどうかを判定します。 クラスを追加するだけで、ここでは.cur-colを使用します。

コードは以下の通りです


<!-遍历每一行->
<div v-for="row,index in allNum" class="num-row clear">
<!-遍历行里面的每一列->
<!-
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。操作とエラーメッセージを入力してください

この操作関数のステップは、私は直接コードを送信し、コードは私が言ったよりも明確になる参照してくださいすべての後、少し周りに言う


<!-遍历每一行->
<div v-for="row,index in allNum" class="num-row clear">
<!-遍历行里面的每一列->
<!-
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){
//*****************************检查前的初始化
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: '',
}
//*****************************检查行
//根据当前格子进行赋值
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++) {
//如果值一样,但是坐标不一样,就是填写错误
if (_text === rowCheck[i] && _col !== i) {
this.isErr = true;
this.isShake = true;
//记录当前格子的信息
this.optionNow = {
x: _row,
y: _col,
}
//记录和当前格子同一行,以及同一个值的格子的坐标
this.optionNowInRow = {
x: _row,
y: i,
}
}
}
//*****************************检查列
let colCheck = [];
//首先把每一行的那一列的数值保存起来
for (let i = 0, len = this.allNumText.length; i < len; i++) {
colCheck.push(this.allNumText[i][_col]);
}
//遍历检查
for (let i = 0, len = colCheck.length; i < len; i++) {
//如果值一样,但是坐标不一样,就是填写错误
if (_text === colCheck[i] && _row !== i) {
this.isErr = true;
this.isShake = true;
//记录和当前格子同一列,以及同一个值的格子的坐标
this.optionNowInCol = {
x: i,
y: _col,
}
}
}
//如果发现的同样的
if (this.isErr) {
setTimeout(() => {
this.isShake = false;
}, 1000)
return;
}
//如果数组去重后,长度小于9,就是行没完成
rowCheck = rowCheck.filter(item => item !== '');
if (rowCheck.length !== 9) {
//console.log('行没完成')
return;
}
let coloCheck = [];
//如果数组去重后,长度小于9,就是列没完成
for (let i = 0, len = this.allNumText.length; i < len; i++) {
coloCheck = [...new Set(this.allNumText[i])];
coloCheck = coloCheck.filter(item => item !== '');
if (coloCheck.length !== 9) {
//console.log('没完成')
return;
}
}
alert('挑战成功,但是没奖品');
this.numShow = false;
}

上記のコードロジックは、単純に

1..errこのクラスは赤いフォントを設定するために使用されます。判定はinputText関数にあり、optionNowとoptionNowInRowとoptionNowInColがあります。 グリッドの座標が3つのうちの1つに等しい限り、クラスが追加され、赤に変わります。

2..isShakeこのクラスは、コントロールとジッタのアニメーションです。追加した後、1秒後にクラスを削除する必要があります。それ以外の場合は、アニメーション効果はありません。

3. inputText関数では、前述のallNumではなく、Sudokuリストを操作しますが、allNumを使用して生成されたallNumText、ディープコピー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>所谓的数独:规则</p>
<p>1.每一行数字不重复</p>
<p>2.每一列数字不重复</p>
</div>
<div class="num-table" @mouseleave="hoverCol=''" :class="{'shake':isShake}">
<!-遍历每一行->
<div v-for="row,index in allNum" class="num-row clear">
<!-遍历行里面的每一列->
<!-
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>
<!-数字键盘->
<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: '欢迎来到',
nowIndex: 0,
allNum: [],//数字排列
answer: [],//所有答案的坐标点
allNumText: [],//数字,包括输入后的数字
curRow: '',//当前格子所在的行的索引
curCol: '',//当前格子所在的列的索引
checkShow: false,//数字键盘的显示
hoverCol: '',//鼠标进去的当前列
hoverRow: 0,//鼠标进入的当前行
numShow: true,//数独的显示
optionNow: {},//输入后的格子的坐标
optionNowInRow: {},//和输入后的格子在同一行,并且同样值的格子的坐标
optionNowInCol: {},//和输入后的格子在同一列,并且同样值的格子的坐标
isErr: false,//是否输入错误后
isShake: false//是否显示震动的样式
},
methods: {
/**
* @description 显示数字键盘
* @param i1
* @param i2
*/
showCheck(i1, i2){
//点击的格子是否是被掏空的格子
if (this.allNum[i1][i2] !== '') {
return
}
//点击的格子如果是上一次点击的格子(当前格子)
if (i1 === this.curRow && i2 === this.curCol) {
//隐藏数字键盘,curRow和curCol设空
this.checkShow = false;
this.curRow = '';
this.curCol = '';
}
else {
//隐藏数字键盘,curRow和curCol分别设置成当前的点
this.checkShow = true;
this.curRow = i1;
this.curCol = i2;
}
},
inputText(_text){
//*****************************检查前的初始化
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: '',
}
//*****************************检查行
//保存当前格子的值
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++) {
//如果值一样,但是坐标不一样,就是填写错误
if (_text === rowCheck[i] && _col !== i) {
this.isErr = true;
this.isShake = true;
//记录当前格子的信息
this.optionNow = {
x: _row,
y: _col
}
//记录和当前格子同一行,以及同一个值的格子的坐标
this.optionNowInRow = {
x: _row,
y: i
}
}
}
//*****************************检查列
let colCheck = [];
//首先把每一行的那一列的数值保存起来
for (let i = 0, len = this.allNumText.length; i < len; i++) {
colCheck.push(this.allNumText[i][_col]);
}
//遍历检查
for (let i = 0, len = colCheck.length; i < len; i++) {
//如果值一样,但是坐标不一样,就是填写错误
if (_text === colCheck[i] && _row !== i) {
this.isErr = true;
this.isShake = true;
//记录和当前格子同一列,以及同一个值的格子的坐标
this.optionNowInCol = {
x: i,
y: _col
}
}
}
//如果发现的同样的
if (this.isErr) {
setTimeout(() => {
this.isShake = false;
}, 1000)
return;
}
//如果数组去重后,长度小于9,就是行没完成
rowCheck = rowCheck.filter(item => item !== '');
if (rowCheck.length !== 9) {
console.log('行没完成')
return;
}
let coloCheck = [];
//如果数组去重后,长度小于9,就是列没完成
for (let i = 0, len = this.allNumText.length; i < len; i++) {
coloCheck = [...new Set(this.allNumText[i])];
coloCheck = coloCheck.filter(item => item !== '');
if (coloCheck.length !== 9) {
console.log('没完成')
return;
}
}
alert('挑战成功,但是没奖品');
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++) {
row = Object.assign([], arr1);
this.allNum.push(row);
rowCol = arr1.splice(0, 1)[0];
arr1.push(rowCol)
}
//打乱行
this.allNum.sort((n1, n2) => Math.random() - 0.5);
//随机获取两列的索引
function randomText() {
let rondomIndex = 0, rondomIndexAfter = 0;
//获取第一列的索引
rondomIndex = Math.floor(Math.random() * 9);
function randomDo() {
rondomIndexAfter = Math.floor(Math.random() * 9);
//如果第一列和第二列索引一样,第二列的索引再次重新获取
if (rondomIndexAfter === rondomIndex) {
randomDo();
}
}
randomDo();
//返回两列的索引
return [rondomIndex, rondomIndexAfter]
}
//打乱列
let randomArr = [], nowValue = 0;
//同样遍历9次
for (let i = 0; i < 9; i++) {
randomArr = Object.assign([], randomText());
//遍历每一行,给每一行的随机两列交换值
for (let j = 0, len = this.allNum.length; j < len; j++) {
//随机两列交换值
nowValue = this.allNum[j][randomArr[0]];
this.allNum[j][randomArr[0]] = this.allNum[j][randomArr[1]];
this.allNum[j][randomArr[1]] = nowValue;
}
}
//记录所有坐标
let rowText = '', arrText = []
for (let i = 0; i < 9; i++) {
rowText = ''
for (let j = 0; j < 9; j++) {
rowText += i + '-' + j + ',';
}
arrText.push(rowText.substr(0, rowText.length - 1))
}
console.log(arrText);
//随机掏空
let nowItme = [], _option, nowOption = [];
for (let i = 0; i < 9; i++) {
//抽取当前行的所有坐标
nowItme = arrText[i].split(',');
nowOption = [];
//当前行的随机两个坐标掏空
for (let j = 0; j < 2; j++) {
//抽取当前行的随机一个坐标
_option = Math.floor(Math.random() * nowItme.length);
//分割坐标的x,y
nowOption = nowItme.splice(_option,1)[0].split("-");
this.allNum[nowOption[0]][nowOption[1]] = '';
}
}
//深度拷贝数独的数字
this.allNumText = JSON.parse(JSON.stringify(this.allNum));
}
})
</script>
</html>

Reset.cssとvue.min.jsみんながgithubにダウンロード!

5.要約

さて、論理がビットワインディングであり、他の問題が皆を打つのが難しいため、vueで作られたいわゆる数独がここに書かれています。 この例は、クイックスタートの3つの小さな例よりも少し面倒ですが、それも非常によく理解されています! 誰もが見積もりを少しだけ見る必要があることを理解することは難しくありません! 最後に、記事がうまく書かれておらず、間違いを犯したと感じる場合は、助言や指摘を歓迎します。 私はあなたと意見を共有し、一緒に進歩を楽しみにしています!

上記の内容はすべてこの記事の内容ですが、この記事の内容には皆さんの研究や仕事の参考となる価値があることを願っております。ご不明な点がございましたら、メッセージを残してください。


1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...
      この投稿は審査処理中  | 元のサイトへ