[Html5 Game Development] Sudoku games-complete algorithms-Open Source lectures

Opening statement: This article describes the development of the sudoku game. The sudoku game is a digital-filling game, within a 9x9 square, this 9x9 big lattice can be divided into 9 3x3 Small 9 cells, fill in the numbers 1 to 9 in these cells, so that each row, each column, in addition, the numbers in each small jiugongge are not repeated. The gameplay is simple and the combination of numbers is ever-changing, so it is particularly interesting to play. It seems that Chinese Sudoku games are not so popular, but in Japan this game is very popular. On the commuter tram, we often see some people holding a book on the sudoku game in one hand, the other hand is holding a pencil, and that's how it counts. Now I use the lufylegend. js engine to move the game to a browser, as shown in the game interface. Figure 1 The game is divided into two stages. The first stage is simple gameplay. It only needs to be horizontal, vertical, and there are no repeated numbers. The other is an advanced stage, we also need to ensure that the numbers in each small nine cells are not repeated. If you want to challenge yourself, you can click the following game link to try out how many levels you can pass. Like the previous box-pushing games, there are 6 levels in total, and the game also has a ranking system. Each pass can upload your own scores to compete with everyone. First, you need to download the lufylegend. js engine to go to the development topic step by step. 2. The first thing we need to solve in this game is how numbers are disrupted, because not only do we need to disrupt numbers, but we also need to ensure that these numbers are still consistent with the rule of sudoku after they are disrupted, then you can hide a part of the disrupted number to start the game. Let's first look at a group of numbers. Figure 2 shows that in this group of numbers, the numbers in the horizontal and vertical columns are not repeated. How can we disrupt its order? It is not hard to see that if we only disrupt every line of it, its integrity will not be affected. Similarly, we only disrupt each column of it, and it will not be affected. Therefore, to disrupt it, you only need to disrupt it by row and column. The algorithm is as follows. [Javascript] function randomNum01 (lv) {var I, j, list = new Array (), result = new Array (); for (I = 0; I <9; I ++) {list. push ([1, 2, 3, 4, 5, 6, 7, 8, 9]); for (j = 0; j.5? -;}); Var rand = new Array (, 8 ). sort (function (a, B) {return Math. random ()>. 5? -1:1 ;}); for (I = 0; I <9; I ++) {for (j = 0; j <9; j ++) {result [I]. push (list [I] [rand [j]) ;}} for (I = 0; I <9; I ++) {for (j = 0; j> 0; result [I] [ran1] = 0; ran1 = Math. random () * 9 >>> 0; result [ran1] [I] = 0 ;}} return result ;} the above function, I first generated a set of regular numbers, then disrupted them by line and slack. Finally, I randomly dropped some numbers. Next, let's look at another set of numbers. Figure 3 What should we do if we want to ensure the integrity of the numbers in each small cell? Here I have a lazy algorithm. See figure 4 below. Figure 4 if we disrupt every three rows and columns as a unit, it is easy to achieve the goal. Of course, this is just a lazy algorithm. If you have a better algorithm, welcome to discuss it together. My algorithm is as follows. [Javascript] function randomNum02 (lv) {var I, j, k, list = [], result = [], rand; for (I = 0; I <9; I ++) {list. push ([1, 2, 3, 4, 5, 6, 7, 8, 9]); for (j = 0; j.5? -;}). Concat (new Array (, 5). sort (function (a, B) {return Math. random ()>. 5? -;}), New Array (6, 7, 8). sort (function (a, B) {return Math. random ()>. 5? -;}); For (I = 0; I <9 I = "" result = "" push = "" list = "" rand = "" I = "" list = "result; "rand =" new "array =" "0 =" "1 =" "2 =" "sort =" "function =" "a =" "B =" "return = """ math = "" random = "">. 5? -;}). Concat (new Array (, 5). sort (function (a, B) {return Math. random ()>. 5? -;}), New Array (6, 7, 8). sort (function (a, B) {return Math. random ()>. 5? -1:1 ;}); result = []; for (I = 0; I <9; I ++) {result. push ([]); for (j = 0; j <9; j ++) {result [I]. push (list [I] [rand [j]) ;}} for (I = 0; I <9; I ++) {for (j = 0; j> 0; result [I] [ran1] = 0; ran1 = Math. random () * 9 >>> 0; result [ran1] [I] = 0 ;}} return result ;}3, determine the correctness of the number when the player restores all the removed numbers, it is necessary to determine whether the number they entered is correct, whether it meets the rule of the sudoku game, the method is very simple, it is to verify that the numbers in each row, each column, and each nine cells in the advanced stage are not repeated. The following code is [javascript] function checkWin () {var check01, chec K02; for (var I = 0; I <9; I ++) {check01 = []; check02 = []; for (var j = 0; j <9 j = "" if = "" stagenumlist = "" I = "" j = "" value = ""> 0) check01.push (stageNumList [I] [j]. value); if (stageNumList [j] [I]. value> 0) check02.push (stageNumList [j] [I]. value);} check01 = deleteEleReg (check01); check02 = deleteEleReg (check02); if (check01.length <9) return false; if (check02.length <9) return false ;} var stage = stageMenu [stag EIndex]; if (stage. flag) {return checkWin02 ();} return true;} function checkWin02 () {for (var I = 0; I <3; I ++) {for (var j = 0; j <3; j ++) {if (! Check_mini (I, j) return false;} return true;} function check_mini (i2, j2) {var check_arr = []; for (var I = i2 * 3; I <i2*3 + 3; I ++) {for (var j = j2 * 3; j <j2*3 + 3; j ++) {if (check_arr [stageNumList [I] [j]. value]) return false; check_arr [stageNumList [I] [j]. value] = 1 ;}return true;} the game is very simple. The core algorithms of the game have been solved. 4. Create a start image as follows. Figure 4 as I said last time, using the lufylegend. js engine to create an interface is no difficulty. The Code is as follows. [Javascript] function GameLogo () {base (this, LSprite, []); var self = this; var logolist = [[1, 1, 1], [1, 2, 4, 1], [,], [,]; var bitmap, logoLayer; logoLayer = new LSprite (); bitmap = new LBitmap (new LBitmapData (imglist ["logo"]); bitmap. scaleX = bitmap. scaleY = 2; logoLayer. addChild (bitmap); self. addChild (logoLayer); var social = new Social (); social. x = 60; social. y= 500; self. addChild (social); labelText = new LTextField (); labelText. font = "HG row entity"; labelText. size = 14; labelText. x = 50; labelText. y = 650; labelText. text = "-Html5 Game Engine lufylegend. js "; self. addChild (labelText); labelText = new LTextField (); labelText. color = "#006400"; labelText. font = "HG row entity"; labelText. size = 14; labelText. x = 50; labelText. y = 700; labelText. text =" http://www.lufylegend.com/lufylegend "; Self. addChild (labelText); self. addEventListener (LMouseEvent. MOUSE_UP, menuShow) ;}; this time I used an image as the interface and the code was simpler. The text display is still an LTextField object. For details about how to use it, see the official API documentation. 5. Create a selection screen as follows. Figure 5 code. [Javascript] function GameMenu () {base (this, LSprite, []); var self = this; var menuLayer; menuLayer = new LSprite (); bitmap = new LBitmap (new LBitmapData (imglist ["menu_back"]); bitmap. scaleX = bitmap. scaleY = 2; menuLayer. addChild (bitmap); self. addChild (menuLayer); labelText = new LTextField (); labelText. color = "# B22222"; labelText. font = "HG row entity"; labelText. size = 40; labelText. x = 30; labelText. y = 700; labelText. stroke = true; labelText. lineWidth = 4; labelText. text = "Please select !! "; MenuLayer. addChild (labelText); for (var I = 0; I <stageMenu. length; I ++) {self. stageVsMenu (stageMenu [I]) ;}}; GameMenu. prototype. stageVsMenu = function (obj) {var self = this; var menuButton = new LSprite (); var bitmap = new LBitmap (new LBitmapData (imglist ["menu_stage"]); menuButton. addChild (bitmap); menuButton. x = obj. x * 220 + 30; menuButton. y = obj. y * 200 + 50; self. addChild (menuButton); if (obj. o Pen) {labelText = new LTextField (); labelText. color = "# ffffff"; labelText. font = "HG row entity"; labelText. size = 20; labelText. x = 50; labelText. y = 90; menuButton. addChild (labelText) labelText. text = "nth" + (obj. index + 1) + "off"; labelText = new LTextField (); labelText. color = "# ffffff"; labelText. font = "HG row entity"; labelText. size = 12; labelText. x = 30; labelText. y = 30; menuButton. addChild (labelText) labelTex T. text = "times:" + obj. times; menuButton. obj = obj; menuButton. addEventListener (LMouseEvent. MOUSE_UP, function (event, self) {gameStart (self. obj. index) ;}) ;}else {labelText = new LTextField (); labelText. color = "# ffffff"; labelText. font = "HG row entity"; labelText. size = 20; labelText. x = 60; labelText. y = 40; menuButton. addChild (labelText) labelText. text = "??? ";};}