用Javascript编写数独程序

最近一直在玩数独。比如下面这个。当点击右下的8时，所有的8会被框起来。但还是觉得不够智能。

所以我还是想改进一下，增加一点功能：这样更加直观，界面大概是这样的。先写个PC版的，然后在写个小程序或者APP。

我们安装下面的步骤来完成这个项目。

1、界面完成（Javascript)

2、开始按钮（先自动创建下面的新局）

3、点击格的事件（若空格就弹出数字选择，若有数字就框选同数字

4、最后一个格子校验正确。每次填数字均就这个格进行校验。

最后这个是我们模仿的结果图。来自于微信小程序 数独

构想的加强版

第一步：先构建棋盘。

<!-- head,css -->
<style type="text/css">	
	html,body,ul,li div{margin: 0;padding:0;}
	.clearfix:after{content:"";display:block;clear:both;}
	.clearfix{zoom:1;}
	.box_bg  {width: 400px;height:396px;background-color: #e1c285;margin: 0 auto;padding-top: 10px; }
	.box_bg ul {width: 380px;margin: 0 auto;border:2px solid #ab8d17;background-color: #fff;}
	.box_bg ul li {display: block;float: left;width: 40px;height: 40px;border:1px solid #d6c079;line-height: 40px;text-align: center;font-size:26px;color:#383838;font-weight: bold;}
	.box_bg ul li.border_right{border-right:2px solid #c19502;}
	.box_bg ul li.border_bottom{border-bottom:2px solid #c19502;}
</style> 
<script type="text/javascript" src="/assets/libs/jquery/dist/jquery.min.js"></script>  
<!-- body -->
<div id="shudubox" class="box_bg"></div>

<!-- js -->
<script type="text/javascript">
	var data = []; 
	for (var i = 0; i < 9; i++) {
		for (var j = 0; j < 9; j++) {
			data[i*9+j]=j+1;
		}
	} 
	console.log(data); //初始化数据

	var str_box = "" ;
	$(function(argument) { 
		str_box += "<ul class='clearfix'>";
		for (var i = 0; i < 9; i++) { 
			for (var j = 0; j < 9; j++) { 
				str_box += "<li class='"+ (( i==2 || i==5  )?"border_bottom":"") + (((j+1)%3==0 && j!=8)?" border_right":"")  +"'>"  +"</li>";
			} 
		}
		str_box += "</ul>"; 
		$("#shudubox").html(str_box);   //画盘子
	}); 
 
</script>

第二步。增加数独题目：

var startdata ="400179008003800000000300090300000741700000002924000003040008000000007100100253009"; //一道中级题目
	data = startdata.split("");
	console.log(data);  
	$(function(argument) { 
		var shuduboxli = $("#shudubox li") ;
		for (var i = 0; i < shuduboxli.length; i++) {
			$(shuduboxli[i]).html((data[i]=="0")?"":data[i]);
		}
	});

第三步，编写相关事件：

单元格点击事件。如果有数字就显示相同数字。如是可填区域就显示数字盘。可填区域的判断是根据原题数组。

$("#shudubox li").click(function(argument) {
			var li = this; 
			var lin =   parseInt($(li).html());
			if(lin >0 ){
				light_select(lin);  //如果有数字 ，就高亮同数字
			}

			var liindex =  parseInt(data[($(li).index())]);
			if( liindex==0 ){
				showselectbox($(li).index());  //如果原题中为空就运行填或修改数字
			}			 
		});

	function light_select(n) {
		console.log(n);//将数据里的相同数字设置为on
		var shuduboxli = $("#shudubox li") ;
		$("#shudubox .on").removeClass("on");
		for (var i = 0; i < shuduboxli.length; i++) {
			var lin =  parseInt($(shuduboxli[i]).html());
			if(lin==n){
				$(shuduboxli[i]).addClass("on");
			} 
		}
		$("#selectbox").css("display","none");
	}

 

	function showselectbox(index) {
		console.log(index); //显示选择数字盘
		$("#selectbox").attr("targetid",index);
		$("#selectbox").css("display","block");
		var shuduboxlix = $("#shudubox li").eq(index) ;
		$("#selectbox").offset({left: $(shuduboxlix).offset().left,top:  $(shuduboxlix).offset().top}) 
	}

表盘点击事件：

	$("#selectbox li").click(function(argument) {
			var li = this;  
			var lin =  parseInt($(li).html());
			if(lin >0 ){
				//点击的格子填充这个数字 fill(lin)
				$("#shudubox li").eq($("#selectbox").attr("targetid")).html(lin);   
			}else{ 
				if($(li).html()=="清除" || $(li).html()=="" ){  
						$("#shudubox li").eq($("#selectbox").attr("targetid")).html(""); 
					} 
			}
			$("#selectbox").css("display","none");
	});

由于增加了选择数字表盘：head区域完整代码为

<!-- head,css -->
<style type="text/css">	
	html,body,ul,li div{margin: 0;padding:0;}
	.clearfix:after{content:"";display:block;clear:both;}
	.clearfix{zoom:1;}
	.box_bg  {width: 400px;height: 396px;background-color: #7f5a0f;margin: 0 auto;padding-top: 20px;padding-bottom: 20px;  }
	.box_bg ul {width: 380px;margin: 0 auto;border:2px solid #ab8d17;background-color: #fff;}
	.box_bg ul li {display: block;float: left;width: 40px;height: 40px;border:1px solid #d6c079;line-height: 40px;text-align: center;font-size:26px;color:#383838;font-weight: bold;}
	.box_bg ul li.border_right{border-right:2px solid #c19502;}
	.box_bg ul li.border_bottom{border-bottom:2px solid #c19502;}
	.box_bg .on{background-color: #ffe000;}
	 
	#selectbox {width: 115px;height: 152px;background-color: #deecfd;margin: 0 auto;     position: absolute; display: none;  }
	 
	#selectbox ul {width: 112px;margin: 0 auto;border:2px solid #deecfd;}
	#selectbox ul li {display: block;float: left;width: 35px;height: 35px;border:1px solid #d6c079;line-height: 35px;text-align: center;font-size:20px;color:#383838;font-weight: bold;}
	#selectbox ul li.border_right{border-right:2px solid #c19502;}
	#selectbox ul li.border_bottom{border-bottom:2px solid #c19502;}
</style> 
<script type="text/javascript" src="/assets/libs/jquery/dist/jquery.min.js"></script>

body区域代码：

<div id="shudubox" class="box_bg"></div>
<div id="selectbox" targetid="" >
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<li>9</li>
		<li style="    font-size: 17px;">清除</li><li></li><li style="    font-size: 17px;">关闭</li>
	</ul>
</div>

第几步：编写检查程序

	//检查
	function check_rule(targetid,n) { 

		var current_H = parseInt(targetid/9) ; //行
		var current_L = parseInt(targetid%9) ;  //列
		var current_B = parseInt(current_H/3) *3 + parseInt(current_L/3);//块
		console.log(current_H + "," +current_L + "," +current_B + " "  );


		//先检查同行是否有相等的
		var samei = -1;
		for (var i = 0; i < data.length; i++) {
			if(parseInt(i/9) ==  current_H){
				if (data[i] == n){
					samei=i;
				}
			}
			if(parseInt(i%9) ==  current_L){
				if (data[i] == n){
					samei=i;
				}
			}
			if(parseInt(parseInt(i/9)/3) *3 + parseInt(parseInt(i%9)/3) ==  current_B){
				if (data[i] == n){
					samei=i;
				}
			} 
		}

		if(samei>-1){
				//检查是否通过red1
			var shuduboxli = $("#shudubox li") ;
			$(shuduboxli[samei]).addClass("red1"); 
			// for (var i = 0; i < shuduboxli.length; i++) {
			// 	var lin =  parseInt($(shuduboxli[i]).html());
			// 	if(lin==n){
			// 		$(shuduboxli[i]).addClass("red1"); 
			// 	} 
			// }
			setTimeout(function(argument) {
						$(shuduboxli).removeClass("red1");
					},2000);
			return false;
		}
		console.log(samei);
		return true;

		
	}