Opening words:

#This time I will talk about the development of the Sudoku game. The Sudoku game is a number-filling game. In a 9x9 square grid, this 9x9 large grid can be divided into nine 3x3 small nine-square grids. Fill in the numbers from 1 to 9 in these grids, so that each row, each column, and each small nine-square grid The numbers in the game are not repeated, the gameplay is simple, and the number combinations are ever-changing, so it is very interesting to play.

The Sudoku game does not seem to be that popular in China, but it is very popular in Japan. On the commuting train, you can often see some people holding it in one hand. A book of Sudoku games, and a pencil in the other hand, just calculating along the way. Now I use the lufylegend.js engine to move this game to the browser. The game interface is as shown below.

figure 1

The game is divided into two stages. The first stage is a relatively simple gameplay, which only requires horizontal and vertical numbers without repeated numbers. The other advanced stage also needs to ensure that the numbers in each small nine-square grid are not repeated. repeat. Friends who want to challenge themselves can click on the game link below to see how many levels they can pass.

http://lufylegend.com/demo/sudoku

is the same as the previous push box game, there are 6 levels in total, and there are also Ranking system, you can upload your own scores after each level to compete with others.

Production starts

One, first, you need to download lufylegend. js engine

The following is my lufylegend-1.6 post on the blog

http://blog.csdn.net/lufy_legend/article /details/8593968

Let’s get into the development step by step.

2. Game algorithm

In this game, the first thing we have to solve is how to scramble the numbers, because not only do we have to scramble the numbers Make sure that the numbers still comply with the rules of Sudoku after being scrambled, and then hide part of the scrambled numbers, and then you can start the game.

Let’s first look at a set of numbers

Figure 2

As you can see, in this set of numbers, it The numbers on the horizontal and vertical columns are not repeated. How do we disrupt its order? It is not difficult to see that if we only disrupt each line of it, its integrity will not be affected. Similarly, if we only scramble each column, it will not be affected. Therefore, to disrupt it, you only need to disrupt it in units of rows and columns. The algorithm is as follows.

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?-1:1;});
	var rand = new Array(0,1,2,3,4,5,6,7,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;
}

Copy after login

In the above function, I first generated a set of regular numbers, then scrambled them according to rows and columns, and finally, randomly removed some numbers.

Let’s look at another set of numbers.

Figure 3

In this case, we also need to ensure the integrity of the numbers in each small nine-square grid. What should we do? Here I have a lazy algorithm, see Figure 4 below.

Figure 4

We disrupt every 3 rows and columns as a unit, and the goal is easily achieved. Of course, this is just a lazy algorithm. If you have a better algorithm, please feel free to discuss it together. My algorithm is as follows.

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?-1:1;}).concat(
			new Array(3,4,5).sort(function(a,b){return Math.random()>.5?-1:1;}),
			new Array(6,7,8).sort(function(a,b){return Math.random()>.5?-1:1;})
		);
	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?-1:1;}).concat(
			new Array(3,4,5).sort(function(a,b){return Math.random()>.5?-1:1;}),
			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;
}

Copy after login

Three, judge the correctness of the numbers

When the player restores all the taken numbers After that, it is necessary to judge whether the numbers they filled in are correct and whether they comply with the rules of Sudoku. The method is very simple, which is to verify whether the numbers in each row, each column, and each nine-square grid in the advanced stage are not repeated. , the following is the code

function checkWin(){
	var check01,check02;
	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[stageIndex];
	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;
}

Copy after login

This game is very simple, above, the core algorithm of the entire game has been solved.

Four, create a start screen

as follows.

图4

上次我也说了，使用lufylegend.js引擎做个界面，可以说毫无难度，代码如下。

function GameLogo(){
	base(this,LSprite,[]);
	var self = this;
	
	var logolist = [[1,1,1,1],[1,2,4,1],[1,4,2,1],[1,1,1,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行書体";
	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行書体";
	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);
};

Copy after login

这一次我用了一张图片做界面，代码就更简单了，文字显示依然是LTextField对象，使用方法请参考官方API文档。

五，建一个选择画面

如下。

图5

代码如下。

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行書体";
	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.open){
		labelText = new LTextField();
		labelText.color = "#ffffff";
		labelText.font = "HG行書体";
		labelText.size = 20;
		labelText.x = 50;
		labelText.y = 90;
		menuButton.addChild(labelText)
		labelText.text = "第"+(obj.index+1)+"关";
		
		labelText = new LTextField();
		labelText.color = "#ffffff";
		labelText.font = "HG行書体";
		labelText.size = 12;
		labelText.x = 30;
		labelText.y = 30;
		menuButton.addChild(labelText)
		labelText.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行書体";
		labelText.size = 20;
		labelText.x = 60;
		labelText.y = 40;
		menuButton.addChild(labelText)
		labelText.text = "???";
	};
}

Copy after login

好了，游戏基本的代码已经都贴出来了。