Wed Apr 12 02:40:00 UTC 2023 inscode

b14e335a · 622eda98dfef6c4fdb84ccca · 63b5a6c5 · b14e335a
显示空白变更内容
内联并排

Showing with 173 addition and 11 deletion

index.html index.html +173 -11

未找到文件。
--- a/index.html
+++ b/index.html
 <!DOCTYPE html>
-<html lang="en">
+<html>
 <head>
 	<meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link href="style.css" rel="stylesheet" type="text/css" />
-    <title>InsCode</title>
+	<title>五子棋</title>
+	<style type="text/css">
+		#chessboard {
+			width: 600px;
+			height: 600px;
+			margin: 0 auto;
+			border: 1px solid #000;
+			position: relative;
+		}
+		.piece {
+			width: 40px;
+			height: 40px;
+			border-radius: 50%;
+			position: absolute;
+			left: 50%;
+			top: 50%;
+			transform: translate(-50%, -50%);
+			box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
+		}
+		.black {
+			background-color: #000;
+		}
+		.white {
+			background-color: #fff;
+		}
+	</style>
 </head>
 <body>
-    <div class="container">
-        <img src="src/assets/logo.svg" alt="InsCode">
-        <div>欢迎来到 InsCode</div>
-    </div>
-    <script src="script.js"></script>
+	<canvas id="chessboard"></canvas>
+	<script type="text/javascript">
+		var chessboard = document.getElementById('chessboard');
+		var context = chessboard.getContext('2d');
+		var me = true;
+		var over = false;
+		var chess = [];
+
+		// 初始化棋盘
+		for (var i = 0; i < 15; i++) {
+			chess[i] = [];
+			for (var j = 0; j < 15; j++) {
+				chess[i][j] = 0;
+			}
+		}
+
+		// 绘制棋盘
+		context.strokeStyle = '#BFBFBF';
+		for (var i = 0; i < 15; i++) {
+			context.moveTo(20 + i * 40, 20);
+			context.lineTo(20 + i * 40, 580);
+			context.stroke();
+			context.moveTo(20, 20 + i * 40);
+			context.lineTo(580, 20 + i * 40);
+			context.stroke();
+		}
+
+		// 下棋
+		var oneStep = function(i, j, me) {
+			context.beginPath();
+			context.arc(20 + i * 40, 20 + j * 40, 18, 0, 2 * Math.PI);
+			context.closePath();
+			var gradient = context.createRadialGradient(20 + i * 40 + 2, 20 + j * 40 - 2, 18, 20 + i * 40 + 2, 20 + j * 40 - 2, 0);
+			if (me) {
+				gradient.addColorStop(0, '#0A0A0A');
+				gradient.addColorStop(1, '#636766');
+				chess[i][j] = 1;
+			} else {
+				gradient.addColorStop(0, '#D1D1D1');
+				gradient.addColorStop(1, '#F9F9F9');
+				chess[i][j] = 2;
+			}
+			context.fillStyle = gradient;
+			context.fill();
+		}
+
+		chessboard.onclick = function(e) {
+			if (over || !me) {
+				return;
+			}
+			var x = e.offsetX;
+			var y = e.offsetY;
+			var i = Math.floor(x / 40);
+			var j = Math.floor(y / 40);
+			if (chess[i][j] == 0) {
+				oneStep(i, j, me);
+				if (checkWin(i, j, me)) {
+					over = true;
+					alert(me ? '黑棋赢了' : '白棋赢了');
+				}
+				me = !me;
+			}
+		}
+
+		// 判断胜负
+		var checkWin = function(i, j, me) {
+			var count = 0;
+			for (var k = 0; k < 5; k++) {
+				if (chess[i][j + k] == (me ? 1 : 2)) {
+					count++;
+				} else {
+					break;
+				}
+			}
+			for (var k = 1; k < 5; k++) {
+				if (j - k < 0 || chess[i][j - k] != (me ? 1 : 2)) {
+					break;
+				} else {
+					count++;
+				}
+			}
+			if (count >= 5) {
+				return true;
+			}
+
+			count = 0;
+			for (var k = 0; k < 5; k++) {
+				if (chess[i + k][j] == (me ? 1 : 2)) {
+					count++;
+				} else {
+					break;
+				}
+			}
+			for (var k = 1; k < 5; k++) {
+				if (i - k < 0 || chess[i - k][j] != (me ? 1 : 2)) {
+					break;
+				} else {
+					count++;
+				}
+			}
+			if (count >= 5) {
+				return true;
+			}
+
+			count = 0;
+			for (var k = 0; k < 5; k++) {
+				if (chess[i + k][j + k] == (me ? 1 : 2)) {
+					count++;
+				} else {
+					break;
+				}
+			}
+			for (var k = 1; k < 5; k++) {
+				if (i - k < 0 || j - k < 0 || chess[i - k][j - k] != (me ? 1 : 2)) {
+					break;
+				} else {
+					count++;
+				}
+			}
+			if (count >= 5) {
+				return true;
+			}
+
+			count = 0;
+			for (var k = 0; k < 5; k++) {
+				if (chess[i + k][j - k] == (me ? 1 : 2)) {
+					count++;
+				} else {
+					break;
+				}
+			}
+			for (var k = 1; k < 5; k++) {
+				if (i - k < 0 || j + k > 14 || chess[i - k][j + k] != (me ? 1 : 2)) {
+					break;
+				} else {
+					count++;
+				}
+			}
+			if (count >= 5) {
+				return true;
+			}
+
+			return false;
+		}
+	</script>
 </body>
 </html>
\ No newline at end of file