Sudoku is a mathematical game originated from Switzerland in the 18th century. It is a logic game that uses paper and pen to perform calculations. The following article mainly introduces you to the relevant information about using vue to develop a so-called Sudoku. The article introduces it in detail through sample code. Friends in need can refer to it.
1. Preface
I recently encountered a problem at work, because there is no new demand for the background management system page function, so I was thinking What should I put on the homepage? Recently, what I have been thinking about is to put a so-called Sudoku. Why is it a so-called Sudoku? Because the rules are different from the standard Sudoku. It only requires that the numbers in each row and column are different! This example is also based on vue, and the code is shared with everyone. The purpose of giving you the code is not to let you copy the code directly, but to treat it as a practice project or to learn knowledge. If you feel that I have written something poorly or wrongly, please point it out so that everyone can exchange opinions and make progress together.
The code has been uploaded to github: you can star it if you need it! vue-demos
2. Running effect
3. Implementation steps
The implementation steps feel a bit convoluted. I suggest you read the article while writing so that you will not be confused. Or go directly to the source code (sudoku) and understand the source code! This project isn’t complicated either!
3-1. Preparing data and typesetting
I won’t go into details about the html css code for typesetting. Typesetting is very simple. I believe this will not be difficult for everyone. What’s a little more complicated is the interaction of data! Let’s start with the first step. Prepare the Sudoku data first. Everyone knows what the data is, it is data like the following!
The layout effect is as follows.
The html code is as follows
{{allNumText[index][indexSub]}}
Copy after login
The code is also very simple, as follows
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)
}
}
Copy after login
You can also find that in this data, each row and The numbers in each column are different!
3-2. After shuffling the rows
, the order will be randomly shuffled. The shuffling of the order must ensure a premise, which is to ensure that the numbers in each row and column All different. In this case, I used a simple and crude method-disrupt in units of rows or columns. For example, the first row and the third row interact with each other, and the first and fifth columns exchange positions. Let’s talk about the disordered order of behavioral units!
Row shuffling is very simple, just randomly shuffling the array! One line of code and done!
The rows are scrambled. Next, shuffle the columns in units of columns. This one is a little more complicated.
Think about it, for example, if the second column is to exchange the value of the fifth column, that is, the value of the second cell in each row is exchanged with the value of the fifth cell, then each row needs to be traversed. ! To exchange, as for the number of columns in the second and fifth columns mentioned earlier, it can be realized with a function!
Look at the code below!
//随机获取两列的索引
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;
}
}
Copy after login
3-3. Randomly empty cells
To empty cells is to randomly empty some cells, and then Let people play Sudoku. Fill in these cells!
Requirement, what I am realizing now is that each row has two grids empty. My approach here is to record the coordinates of each grid first, and then randomly obtain the coordinates from the recorded coordinates. , use the obtained coordinates to set the null!
First, get the coordinates of all points
//记录所有坐标
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);
Copy after login
Seeing this coordinate, you can easily know that one element of the array is the first row, '0-0' is the first grid in the first row. The last element of the array is the last row, '8-8' is the last row, the last grid, and so on!
The following is a random hollowing out, the code is also very simple!
I believe everyone will find this strange. Now let’s write the style, which is to change the style of the empty grid! I have written the style corresponding to the .no class in css. Please pay attention.
The above is the detailed content of How to develop a Sudoku game using vue. For more information, please follow other related articles on the PHP Chinese website!
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
