Preamble

Hello everyone, in the past, my project was quite free, and QA had nothing to do so she sat and played Sudoku. Then I wondered if it was free anyway, why not write my own Sudoku app for me. This article will use Vue.js to build a simple Sudoku game.

I will introduce to you in the framework of the article the following:

• Perform game matrix with dynamic data
• Algorithm for creating matrices for games
• How to confirm the solution to the game

First step

First of all, create the following new files:

• index.html
• app.js
• style.css

Add the index.html file to the style.css interface file, the app.js JavaScript file, and, of course, the Vue.js file, in a simple application I use Vue.js via the CDN:

Our game will have the following draft interface:

As you can see, it will include some of the following:

• Difficulty level selection screen, to help players choose the level that suits them
• The main screen of the game has 2 buttons: New game (will exit the screen to select the difficulty level) and the Veriry button (will work to check if your game screen is correct or not)
• A basic 9×9 Sudoku with a few empty fields to fill out. Each cell is an input type=”text”

We will add some things to make this game more interesting. If you lose or win, a GIF will appear to let you know that:

Matrix

Ok, you have initially figured out what our application will look like, let’s start the first step to build this game. The first thing you will need is a digital matrix that meets the following requirements:

• All horizontal rows have all numbers from 1-9 that do not overlap
• All vertical rows have all numbers 1-9 that do not overlap
• All 3×3 divided cells available with all numbers 1-9 do not overlap

Here I will use a shallow algorithm found on the net and modify a bit:

https://www.emanueleferonato.com/2015/06/23/pure-javascript-sudoku-generatorsolver/

This algorithm will initialize the original matrix of 9×9, which is 0, then fill in the numbers one by one and turn it out until it creates a complete matrix with the above requirements.

We will create an array of objects to store matrix information, our array will look like this:

Each object will look like:

• num : used to save the value of the cell
• readOnly : used to mark cells that are genetically assigned by the system, so these cells cannot be edited, this attribute will be used inside html.

Besides, the reason we have to create an array of objects is because we are going to loop through this array in Vue.js with v-for , and bind that number to the input="text" via v-bind , and Vue. do not want when we use the loop to bind, so we have to use through an object.

The next thing we need to do is we will remove some elements from the array to make a game screen – That is, we will remove some random object.num elements.

As mentioned above, our game will include many levels from easy to extremely difficult, the simple way for me to create different levels of difficulty is: the higher the difficulty, the more removed elements will be. much.

We will then have sudokuMatrix is an array with removed elements, and will be used to bind to html.

Finally, we need a function to check if the game solved correctly. Simply compare the sudokuMatrix with our original array created in the sudoku.js file here, we set it to sudoku :

We then need to add a bit of extra functionality to complete the game, such as:

• Restart game:

• When the user enters a valid cell, delete the old value and fill in the new value: