原生js简单实现五指棋

原生js简单实现五指棋

浏览器直接打开，简单又不失趣味！
如图:

上代码：

<div id="bigBackground">
	<!-- 棋盘水平线背景板 -->
	<div id="background1"></div>
</div>

<div id="bigBackground">
<!-- 棋盘竖直线背景板 -->
	<div id="background2"></div>
</div>

<div id="bigBackground">
<!-- 棋子背景板 -->
	<div id="black">
		<div id="blackContent">
			<div id="blackContentLog"></div>黑方
		</div>
		<div id="blackMessage"></div>
	</div>
	<div id="background3"></div>
	<div id="blue">
		<div id="blueContent">
			<div id="blueContentLog"></div>白方
		</div>
		<div id="blueMessage"></div>
	</div>
</div>

<script>
	//游戏是否开始
    var started = false;
	
	//游戏是否结束
	var isOver = false;
	
	const message = '请落子<div>！</div>';
	const messageWin = '恭喜<div>，</div>你赢了<div>！</div>';

	document.getElementById('blackMessage').innerHTML = message;
	//上次出棋方
	var lastMover = null; // 0代表黑方，1代表蓝方
	var background1 = document.getElementById('background1');
	var content = '';
	//绘制棋盘竖直线
	for (i = 0; i < 32; i++) {
		content += '<div class="horizon"></div>';
	}
	background1.innerHTML = content;
	
	var background2 = document.getElementById('background2');
	content = '';
	//绘制棋盘竖直线
	for (i = 0; i < 32; i++) {
		content += '<div class="vertical"></div>';
	}
	background2.innerHTML = content;
	
	var background3 = document.getElementById('background3');
	content = '';
	//绘制棋盘竖直线
	for (i = 0; i < 1024; i++) {
		content += '<div id="' + Math.ceil((i+1)/32) + ',' + ((i+1)%32==0?32:(i+1)%32) + '" class="cell" onClick="moves()"></div>';
	}
	background3.innerHTML = content;
	
	//绑定落子事件
	for (i = 0; i < 1024; i++) {
		let id = Math.ceil((i+1)/32) + ',' + ((i+1)%32==0?32:(i+1)%32);
		let cell = document.getElementById(id);
		cell.onclick = function(){
			moves(id);
		}
	}
	
	//落子事件
	function moves (id) {
		if (isOver) {
			return;
		}
	
		let cell = document.getElementById(id);
		if (!started) {
			cell.style.cssText='background-color: black;'
			started = true;
			lastMover = 0;
			document.getElementById('blackMessage').innerHTML = '';
			document.getElementById('blueMessage').innerHTML = message;
			return;
		}
		
		if (lastMover == 0) {
			document.getElementById('blackMessage').innerHTML = message;
			document.getElementById('blueMessage').innerHTML = '';
		} else if (lastMover == 1) {
			document.getElementById('blackMessage').innerHTML = '';
			document.getElementById('blueMessage').innerHTML = message;
		}
		
		if (cell.style.cssText != "") {
			return;
		}
		if (lastMover == 0) {
			cell.style.cssText='background-color: white;'
			lastMover = 1;
		} else {
			cell.style.cssText='background-color: black;'
			lastMover = 0;
		}
		

		var coordinate = id.split(',');
		checkWin(coordinate[0], coordinate[1], cell.style.cssText);
	}
	
	//判定输赢
	function checkWin (x, y, color) {
		x = parseInt(x);
		y = parseInt(y);

		//判断水平线(-)上是否形成五子
		let nearCellIds = [];
		let leftNear = y-4;
		if (leftNear <= 0) {
			leftNear = 1;
		}
		let rightNear = y+5;
		if (rightNear > 33) {
			rightNear = 33;
		} 
		for (i = leftNear; i < rightNear; i++) {
			nearCellIds.push(x + ',' + i);
		}
		if (checkLineFiveCell(nearCellIds, color)) {
			return;
		};
		
		//判断竖直线(|)上是否形成五子
		nearCellIds = [];
		let topNear = x-4;
		if (topNear <= 0) {
			topNear = 1;
		}
		let bottomNear= x+5
		if (bottomNear > 33) {
			bottomNear = 33
		}
		for (i = topNear; i < bottomNear; i++) {
			nearCellIds.push(i + ',' + y);
		}
		if (checkLineFiveCell(nearCellIds, color)) {
			return;
		};
		
		//判断右斜线(\)上是否形成五子
		nearCellIds = [];
		for (i = topNear; i < bottomNear; i++) {
			if (y-(x-i) <= 0) {
				continue;
			}
			if (y-(x-i) > 32) {
				break;
			}
			nearCellIds.push(i + ',' + (y-(x-i)));
		}
		if (checkLineFiveCell(nearCellIds, color)) {
			return;
		};

		//判断左斜线(/)上是否形成五子
		nearCellIds = [];
		for (i = topNear; i < bottomNear; i++) {
			if (y+(x-i) <= 0) {
				break;
			}
			if (y+(x-i) > 32) {
				continue;
			}
			nearCellIds.push(i + ',' + (y+(x-i)));
		}
		checkLineFiveCell(nearCellIds, color);
	}
	
	//判断直线上是否形成连续同色五子
	function checkLineFiveCell (lineCellIds, color) {
		let seriesColorIds = [];
		for (let id of lineCellIds) {
			let nearColor = document.getElementById(id).style.cssText;
			if (nearColor == color) {
				seriesColorIds.push(id);
				if (seriesColorIds.length == 5) {
					changLineFiveCellToWinColor(seriesColorIds);
					let cell = null;
					if ('background-color: black;' == color) {
						cell = document.getElementById('blackMessage');
						document.getElementById('blackContent').style.cssText='color: gold;';
						document.getElementById('blackContentLog').style.cssText='background-color: gold;';
						document.getElementById('blueMessage').innerHTML = '';
					} else {
						cell = document.getElementById('blueMessage');
						document.getElementById('blueContent').style.cssText='color: gold;';
						document.getElementById('blueContentLog').style.cssText='background-color: gold;';
						document.getElementById('blackMessage').innerHTML = '';
					}
					cell.innerHTML = messageWin;
					cell.style.cssText='color: gold;';
					isOver = true;
					return true;
				}
			} else {
				seriesColorIds = [];
			}
		}
		return false;
	}
	
	//改变连续同色五子为胜利色
	function changLineFiveCellToWinColor (lineCellIds) {
		for (let id of lineCellIds) {
			let cell = document.getElementById(id);
			cell.style.cssText='background-color: gold;'
		}
	}
	
	//console.log(cell.getAttribute('id'));
</script>

<style>
body{
	background-color: grey;
}
#bigBackground{
    position: absolute;
    width: 99%;
    height: 694px;
}
#background1{
	width: 692px;
    height: 692px;
    background-color: grey; //#f9f9fa;
    margin: auto;
	border: solid 3px;
}

.horizon{
    width: 693px;
    height: 20px;
    border-bottom: solid 1px;
    margin-left: -1px;
}

#background2{
    width: 692px;
    height: 692px;
    margin: auto;
}

.vertical{
	width: 20px;
    height: 694px;
    border-right: solid 1px;
	display: inline-block;
	margin-top: 1px;
}

#background3{
	width: 672px;
    height: 672px;
    margin: auto;
    margin-top: 10px;
}

.cell{
    width: 20px;
    height: 20px;
	display: inline-block;
	margin-left: 1px;
	margin-top: 1px;
	border-radius: 10px;
}
#black{
	float: left;
    height: 694px;
    width: 400px;
	background-color: #FFFFFF;
}
#blue{
	float: right;
    height: 694px;
    width: 400px;
    position: relative;
    top: -681px;
	background-color: black;
}
#blackContent{
    margin-top: 10px;
	width: 135px;
    margin: auto;
    height: 50px;
    font-size: 40px;
}
#blackContentLog{
	width: 40px;
    height: 40px;
    display: inline-block;
    background-color: black;
    padding-top: -8px;
    position: relative;
    top: 6px;
    border-radius: 20px;
    margin-right: 10px;
}
#blueContent{
    margin-top: 10px;
	width: 135px;
    margin: auto;
    height: 50px;
    font-size: 40px;
	color: #FFFFFF;
}
#blueContentLog{
	width: 40px;
    height: 40px;
    display: inline-block;
    background-color: #FFFFFF;
    padding-top: -8px;
    position: relative;
    top: 6px;
    border-radius: 20px;
    margin-right: 10px;
}
#blackMessage, #blueMessage{
	margin: auto;
    display: block;
    margin-top: 50px;
    width: 25px;
    font-size: 20px;
}
#blueMessage{
	color: #FFFFFF;
}
</style>