<div id="title">X方先手</div>
		<div id="board">
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</div>
		* {
			user-select: none;
			background-color: #62d5ff;
    font-family:Helvetica;
    margin: 0;
    padding: 0;
		}

		#title {
			font-size: 20px;
			text-align: center;
			color: white;
			margin: 20px 0;
		}

		#board {
			width: 150px;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: center;
			font-size: 35px;
			margin: 0 auto;
			border: 0;
		}

		span {
			width: 33%;
			height: 50px;
			line-height: 50px;
			text-align: center;
			border-radius: 50px;
			background: linear-gradient(225deg, #5bc6ff, #4da7db);
			box-shadow: -20px 20px 60px #489dcf,
				20px -20px 60px #62d5ff;
		}

		span:hover {
			border-radius: 50px;
			background: #55b9f3;
			box-shadow: inset -20px 20px 60px #489dcf,
				inset 20px -20px 60px #62d5ff;
		}
var pieces = document.getElementsByTagName("span");
			var title = document.getElementById("title");

			var num = 0;

			function start() {
				for (var i = 0; i < 9; i++) {
					pieces[i].innerHTML = "";
				}
				num = 0;
				title.innerHTML = "X方先手";
			}

			//胜负判断
			function win() {
				var chessArray = new Array();
				var bool = "";

				//得到各个棋格的棋子数组
				for (var i = 0; i < 9; i++) {
					chessArray.push(pieces[i].innerHTML);
				}
				//横竖判断
				for (var i = 0; i < 3; i++) {
					//横向判断
					if (chessArray[3 * i] && chessArray[3 * i + 1] && chessArray[3 * i + 2] && chessArray[3 * i] == chessArray[3 * i +
							1] && chessArray[3 * i + 1] == chessArray[3 * i + 2]) {
						bool = chessArray[3 * i];
					}
					//竖向判断
					if (chessArray[i] && chessArray[i + 3] && chessArray[i + 6] && chessArray[i] == chessArray[i + 3] && chessArray[i +
							3] == chessArray[i + 6]) {
						bool = chessArray[i];
					}
				}
				//交叉判断
				if (chessArray[0] && chessArray[4] && chessArray[8] && chessArray[0] == chessArray[4] && chessArray[4] ==
					chessArray[8]) {
					bool = chessArray[0]

				} else if (chessArray[2] && chessArray[4] && chessArray[6] && chessArray[2] == chessArray[4] && chessArray[4] ==
					chessArray[6]) {
					bool = chessArray[2]
				}
				if (bool) {
					setTimeout(function() {
						alert(bool + "方胜利!");
						start();
					}, 10)
				} else {
					console.log("胜负未分:" + chessArray);
					if (num == 9) {
						setTimeout(function() {
							alert("平局!");
							start();
						}, 10)
					}
				}
			}

			//落子处理
			function chess() {
				if (this.innerHTML == "") {
					this.innerHTML = num % 2 ? "O" : "X";
					num++;
					if (num >= 5) {
						win();
					}
					title.innerHTML = num % 2 ? "O方出手" : "X方出手";
				} else {
					alert("重复落子!");
				}
			}

			//单击事件绑定
			for (var i = 0; i < 9; i++) {
				pieces[i].onclick = chess;
			}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.