js五子棋

效果展示

1. js代码

let hang = 17;
let lie = 23;
let count; //==5游戏获胜
let c = 0;
let qis = new Array();

function init() {
   
	$("#qipan").css({
   
		'width': lie * 40,
		'height': hang * 40
	});
	for(var i = 1; i <= hang; i++) {
   
		for(var j = 1; j <= lie; j++) {
   
			let ge = $("<div></div>");
			ge.attr({
   
				'x': j,
				'y': i
			})
			ge.addClass("ge");
			ge.css({
   
				'left': j * 40,
				'top': i * 40
			});
			let cvs = $("<canvas></canvas>");
			cvs.attr({
   
				"width": "40",
				"height": "40"
			});
			//获取画布
			let ctx = cvs[0].getContext('2d');
			ctx.beginPath();
			ctx.moveTo(0, 20);
			ctx.lineTo(40, 20);
			ctx.moveTo(20, 0);
			ctx.lineTo(20, 40);
			ctx.closePath();
			//调用 写死
			ctx.stroke();
			ge.append(cvs);
			$("#qipan").append(ge);
		}
	}
}
$("body").on("click", '.ge', function() {
   
	if($(this).children("span").length != 0) {
   
		return;
	}
	c++;
	let $qi = $("<span></span>");
	if(c % 2 == 0) {
   
		$qi.addClass("bai");
	} else {
   
		$qi.addClass("hei");
	}
	qis.push($qi);
	$(this).append($qi);
	x = $(this).attr('x');
	y = $(this).attr('y');
	win(x, y);
});
$("body").on("click"