Hướng dẫn làm game sudoku

 - 
Mở đầu

Xin chào những bạn, dạo trước đây thì dự án của bản thân khá rảnh, cùng chị QA chẳng có việc gì tạo ra sự ngồi chơi Sudoku. Rồi bản thân tự hỏi mặc dù sao đang dần rảnh, tại sao không từ bỏ viết riêng cho bạn một vận dụng chơi Sudoku mang đến riêng bản thân nhỉ. Bài viết này sẽ thực hiện Vue.js để xây cất một game Sudoku đối chọi giản.

Bạn đang xem: Hướng dẫn làm game sudoku

Mình sẽ ra mắt với chúng ta trong khuôn khổ bài viết những đồ vật sau:

Biểu diễn ma trận trò đùa với tài liệu độngThuật toán để tạo ma trận đến trò chơiCách để xác nhận lời giải đến trò chơiBước đầu

Trước hết, hãy tạo một trong những file new sau:

index.htmlapp.jsstyle.css

Thêm vào file index.html đường truyền tới file đồ họa style.css, file JavaScript app.js, và tất nhiên là đến mức file Vue.js nữa, vào ứng dụng đơn giản mình sử dụng Vue.js trải qua CDN:

head> script src="https://unpkg.com/vue/dist/vue.js">script> links href="style.css" rel="stylesheet" />head>body> script src="https://fordassured.vn/app.js">script>body>Game của họ sẽ gồm giao diện nháp như sau:

*

*

Như chúng ta có thể thấy, nó sẽ gồm một số trang bị sau:

Màn chọn độ khó, để giúp người nghịch lựa chọn cấp độ cân xứng với mìnhMàn thiết yếu của game tất cả 2 nút: New trò chơi (sẽ thoát khỏi màn chơi về màn chọn độ khó) và nút Veriry (sẽ có công dụng kiểm tra màn chơi của doanh nghiệp đã đúng tốt chưa)Một màn Sudoku 9x9 cơ bản với một vài ba ô trống hoàn toàn có thể điền vào. Từng ô là 1 trong những input type=”text”

Chúng ta sẽ thêm một số trong những thứ để triển khai trò đùa này thêm thú vị. Nếu bạn thua hoặc thắng, sẽ sở hữu được một GIF mở ra để báo cho bạn biết điều đó:

*

*

Ma trận

Ok chúng ta đã bước đầu tưởng tượng ra vận dụng của chúng ta sẽ gồm hình thù núm nào, hãy bắt đầu bước thứ nhất để xuất bản trò nghịch này.Thứ đầu tiên các bạn sẽ cần là một ma trận số thỏa mãn nhu cầu những yêu cầu sau đây:

Tất cả sản phẩm ngang có toàn bộ số từ 1-9 ko trùng nhauTất cả hàng dọc có tất cả số tự 1-9 ko trùng nhauTất cả các ô 3x3 được phân tách sẵn có tất cả số tự 1-9 ko trùng nhau

Ở trên đây mình sẽ áp dụng một thuật toán vét cạn tìm được trên mạng với sửa thay đổi một chút:


Thuật toán này sẽ tạo nên ma trận ban sơ 9x9 phần lớn là 0, tiếp nối điền random số vào lần lượt từng vị trí cùng vét cạn đến bao giờ tạo ra được một ma trận hoàn chỉnh với phần đa yêu cầu bên trên.

Chúng ta sẽ khởi tạo ra 1 array of object để lưu trữ tin tức ma trận, array của bọn họ sẽ có dạng như sau:

var defaultSudokuMatrix = < , , , , , , , , ,>;Mỗi object sẽ sở hữu dạng:

num: 5, readOnly: truenum: dùng để lưu quý giá của ôreadOnly: dùng để ghi lại những ô được gen bởi hệ thống, cho nên vì thế những ô này không thể bị sửa, nằm trong tính này sẽ dùng mặt htmlBên cạnh đó, lý do họ phải tạo thành một array of object vì họ sẽ lặp qua array này trong Vue.js cùng với v-for, với bind số kia vào ô input="text" trải qua v-bind, và Vue không muốn khi bọn họ sử dụng biến chuyển lặp nhằm binding, bởi vì thế họ phải cần sử dụng thông qua một object.

Điều tiếp theo cần có tác dụng là họ sẽ loại bỏ một số thành phần trong array bên trên để chế tạo thành một màn đùa - Tức là bọn họ sẽ sa thải random một số thành phần object.num.

Xem thêm: Baseball Là Gì Trong Tiếng Anh? Baseball In Vietnamese

Như sẽ nêu làm việc trên thì trò đùa của họ sẽ bao gồm nhiều level từ dễ đến cực khó, cách dễ dàng để mình tạo ra các lever khó khác biệt là: độ cạnh tranh càng cao, số phần tử bị nockout bỏ sẽ càng nhiều.

for (var i = 0; i defaultSudokuMatrix.length; ++i) var k = 0; while (k level) var randomColumnIndex = Math.floor(Math.random() * defaultSudokuMatrix.length); if (defaultSudokuMatrix.num != "") k++; defaultSudokuMatrix.num = ""; defaultSudokuMatrix.readOnly = false; this.sudokuMatrix = defaultSudokuMatrix;Sau đó bọn họ sẽ bao gồm sudokuMatrix là 1 trong những array cùng với các thành phần đã bị loại bỏ bỏ, cùng sẽ được dùng làm binding thanh lịch html.

Cuối cùng, bọn họ cần một function để chất vấn xem trò nghịch đã giải chính xác hay chưa. Đơn giản chỉ cần so sánh sudokuMatrix cùng với array nguyên bạn dạng của bọn họ đã được tạo thành trong tệp tin sudoku.js ở đây mình để là sudoku:

var result = sudoku.map((x, i) => sudoku.map(y => parseInt(y.num)));var maxtrixCheck = this.sudokuMatrix.map((x, i) => this.sudokuMatrix.map(y => parseInt(y.num)));if (JSON.stringify(result) == JSON.stringify(maxtrixCheck)) this.answerImage = "success.gif"; this.showAnswer = true; this.isGameStarted = false; this.isNewGame = false; setTimeout(() => this.showAnswer = false; this.isGameStarted = true; this.isNewGame = false; , 2000);else this.answerImage = "fail.gif"; this.showAnswer = true; this.isGameStarted = false; this.isNewGame = false; setTimeout(() => this.showAnswer = false; this.isGameStarted = true; this.isNewGame = false; , 2000);Sau đó bọn họ cần thêm 1 chút tác dụng ngoài lề để triển khai xong trò chơi, lấy ví dụ như:

Restart game:

restart() this.isGameStarted = false; this.showAnswer = false; this.isNewGame = true;,Khi người dùng nhập vào 1 ô đã có giá trị, xóa giá trị cũ đi và điền vào giá trị mới:formatCell(row, cell) if (this.sudokuMatrix.num.length > 1) this.sudokuMatrix.num = this.sudokuMatrix.num<1>; ,Chỉ cho phép người sử dụng nhập số:onlyNumber($event) keyCode > 57) $event.preventDefault(); app.js của chúng ta cuối cùng sẽ bao gồm những trang bị này:


Grid của bọn họ sẽ là một array of object, do vậy họ sẽ show data bởi 2 v-for lồng nhau:

v-for="(row, indexRow) in sudokuMatrix biểu diễn những hàng của Gridv-for="(cell, indexCell) in row biểu diễn các ô của GridVà sau cuối là đầu vào type=”text” chứa data được bind

Hola, vậy là chúng ta đã trả thành.

Xem thêm: Vị Trí Đau Bụng Dưới Là Hiện Tượng Gì Và Có Nguy Hiểm Không?

Bạn có thể xem tổng thể source code của bản thân tại repo này và nghịch thử game hoàn hảo tại trang http://sudokuuu.herokuapp.com/

Tổng kết

Trên đấy là game Sudoku đơn giản và dễ dàng mình làm trong lúc nhàn nhã để đỡ lụt nghề về Vue.js cung cấp đó tìm hiểu cách lập trình sống một nghành nghề dịch vụ khác. Ở nội dung bài viết chủ yếu hèn mình giới thiệu cho chúng ta sơ qua luồng của code, trường hợp có sự việc gì thắc mắc, hãy comment bên dưới để mình lời giải nhé

*
.