每天学一个jquery插件-做一个围棋2

每天一个jquery插件-做一个围棋2

做一个围棋2

基本效果完成了，用递归传递的方式查询一个棋子是否封死，不过没有完善查询规则，例如靠边封杀还有少部分特殊情况会计算错误，不过注释里面很好理解了

效果如下

代码部分

$(document).ready(function(){
     
	var $div = $("#div");
	var $box = $("#box");
	drawgrid();
	var arr = [];//落子缓存
	//显示点被点击，就执行落子效果
	$("#point").click(function(){
     
		var p = {
     
			x:parseInt($(this).attr("data-x")),
			y:parseInt($(this).attr("data-y"))
		}
		arr.push(p);
		var h = $(this).attr("data-h");
		
		if(h=="white"){
     
			$("
白方落子("+p.x+","+p.y+")
黑方落子……
").appendTo($("#msg"))
			$(this).attr("data-h","black")
		}else{
     
			$("
黑方落子("+p.x+","+p.y+")
白方执子……
").appendTo($("#msg"))
			$(this).attr("data-h","white")
		}
		//拉动下拉框
		$("#msg").stop().animate({
     
			'scrollTop':'99999999px'
		},200)
		//
		var $chess = $("
");
		$chess.appendTo($box);
		p.h = h;
		p.v = true;//这个棋子是否有效
		$chess.css(chess(p));//绘制棋子
		//
		checkchess();//判断结局
	})
	function luozi(){
     
		
	}
	function checkchess(){
     
		arr.forEach(item=>{
     
			var arr1 = [];
			var arr2 = [];
			var temp = ccs(item,arr1,arr2);
			var flag = getflag(arr2);
			if(flag){
     
				arr1.forEach(jtem=>{
     
					jtem.v=false;
					$chess(jtem).addClass("single");
				})
			}
		})
	}
	function getflag(arrs){
     
		var flag = true;
		arrs.forEach(item=>{
     
			flag = flag&&item
		})
		return flag;
	}
	//每个棋子遍历周遭的情况，意思就是假如棋子本身周遭被对手棋子围满
	//同时边上也有队友棋子，那么这个棋子算是被围死了，它的生机在相邻的队友棋子上，
	//然后查询的本身这个棋子就返回一个围死的true，就等着看队友棋子返回的是个啥，
	//最后的概念描述就是，遍历一个棋子状态的时候，他如果被围死无论敌友返回一个true
	//但是围死他的棋子里面有友方棋子就把查询规则传到友方棋子上，递归返回一个总值
	function ccs(
	p,//查询的棋子
	arr1,//已经遍历过的历史棋子，避免重复查询
	arr2,//所有棋子的状态
	){
     
		var t = arr.find(n=>n.v==true&&n.x==p.x&&n.y==(p.y-1));//top
		var b = arr.find(n=>n.v==true&&n.x==p.x&&n.y==(p.y+1));//bottom
		var l = arr.find(n=>n.v==true&&n.x==(p.x-1)&&n.y==p.y);//left
		var r = arr.find(n=>n.v==true&&n.x==(p.x+1)&&n.y==p.y);//right
		var f = Boolean(t&&b&&l&&r)
		arr1.push(p);//保存查询记录
		arr2.push(f);//然后保存周遭状态,其实这里还可以改成bool值递归一次就并一次，不过为了方便理解就暂时没改了
		if(t&&t.v&&t.h==p.h){
     
			var temp = arr1.find(n=>n.x==t.x&&n.y==t.y);
			if(!temp){
     ccs(t,arr1,arr2)}
		}
		if(b&&b.v&&b.h==p.h){
     
			var temp = arr1.find(n=>n.x==b.x&&n.y==b.y);
			if(!temp){
     ccs(b,arr1,arr2)}
		}
		if(l&&l.v&&l.h==p.h){
     
			var temp = arr1.find(n=>n.x==l.x&&n.y==l.y);
			if(!temp){
     ccs(l,arr1,arr2)}
		}
		if(r&&r.v&&r.h==p.h){
     
			var temp = arr1.find(n=>n.x==r.x&&n.y==r.y);
			if(!temp){
     ccs(r,arr1,arr2)}
		}
	}
	//棋子落点位置定位
	function chess(p){
     
		return{
     
			left:p.x*30-14,
			top:p.y*30-14
		}
	}
	//鼠标悬浮事件，就是显示点击效果的,对于落子辅助一下
	$(".item").mousemove(function(e){
     
		var x = e.offsetX;
		var y = e.offsetY;
		var p = {
     
			x:parseInt($(this).attr("data-x")),
			y:parseInt($(this).attr("data-y")) 
		}
		//产生坐标
		var p2 = {
     
			x:x<15?p.x:p.x+1,
			y:y<15?p.y:p.y+1
		}
		point(p2);
		$("#point").attr("data-x",p2.x)
		$("#point").attr("data-y",p2.y)
		$("#point").show();
	})
	//移出棋盘就隐藏
	$("#box").mouseleave(function(){
     
		$("#point").hide();
	})
	//绘制格子	
	function drawgrid(){
     
		for(var a = 0;a<18;a++){
     
			for(var b = 0;b<18;b++){
     
				var p = {
     x:a,y:b};
				var $item = $("
");
				$item.appendTo($box)
				$item.css(item(p))
			}
		}
	}
	//给显示点坐标的	
	function point(p){
     
		$("#point").css({
     
			'left':(p.x*30-5)+'px',
			'top':(p.y*30-5)+'px'
		})
	}
	//给格子坐标的
	function item(p){
     //生成坐标位置
		return{
     
			left:p.x*30,
			top:p.y*30
		}
	}
	//返回控制对象
	function $item(p){
     
		return $(".item[data-x='"+p.x+"'].item[data-y='"+p.y+"']");
	}
	function $chess(p){
     
		return $(".chess[data-x='"+p.x+"'].chess[data-y='"+p.y+"']");
	}
})

思路解释

• 一堆没有深入考虑的代码，勉强能跑