Tram Ho

# 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:

• Only allow users to enter numbers:

Our app.js will eventually include these:

# HTML

Our grid will be an array of object, so we’ll show data with 2 nested `v-for` :

• `row, indexRow) in sudokuMatrix` represents the rows of the Grid
• `v-for="(cell, indexCell) in row` represents Grid cells
• And finally, the `input type=”text”` contains the data to be bound

Hola, so we have finished.

You can view all your source code at this repo and play the complete game at http://sudokuuu.herokuapp.com/

# summary

Above is a simple Sudoku game I made in my spare time to save the floods about Vue.js in addition to learn how to program in another field. In the main content of the article I introduce to you briefly through the flow of the code, if there are any questions, please comment below for your answers. .

Share the news now

Source : Viblo