From fbb84dbabc1df51be143d51a49ea9639490dcd5c Mon Sep 17 00:00:00 2001 From: cozy-angel <72742868+cozy-angel@users.noreply.github.com> Date: Sun, 2 Jan 2022 16:04:54 +0800 Subject: [PATCH] practice3:wangjiaxuan-2020302880 --- Gobang/Gobang.css | 59 +++++++++++ Gobang/Gobang.html | 38 +++++++ Gobang/scripts/Chess.js | 7 ++ Gobang/scripts/Chessboard.js | 193 +++++++++++++++++++++++++++++++++++ Gobang/scripts/Control.js | 58 +++++++++++ 5 files changed, 355 insertions(+) create mode 100644 Gobang/Gobang.css create mode 100644 Gobang/Gobang.html create mode 100644 Gobang/scripts/Chess.js create mode 100644 Gobang/scripts/Chessboard.js create mode 100644 Gobang/scripts/Control.js diff --git a/Gobang/Gobang.css b/Gobang/Gobang.css new file mode 100644 index 0000000..d09cc98 --- /dev/null +++ b/Gobang/Gobang.css @@ -0,0 +1,59 @@ +#header { + margin: auto; + width: 1000px; + height: 40px; + background-image: linear-gradient(to right, rgb(6, 165, 255), rgb(215, 2, 251)); + font: italic 700 32px/40px Consolas; + color: white; + text-align: center; +} + +#header .maker { + display: block; + font-size: 14px; + float: right; + line-height: 50px; + position: relative; + right: 250px; +} + +#main { + width: 1000px; + height: 720px; + margin: 0 auto; + padding: 20px; +} + +#canvas { + display: block; + float: left; + background-color: rgb(238, 194, 84); + margin: 0 20px; + box-shadow: -2px -2px 2px #FF0000, + 5px 5px 5px rgb(11, 171, 252); +} + +#main .buttons { + width: 250px; + height: 630px; + float: left; + margin: 0 20px; + background-color: rgb(224, 217, 202); +} + +#main .buttons .marks { + display: block; + width: 100%; + height: 150px; +} + +#main .buttons button { + width: 160px; + height: 50px; + margin: 20px 30px; + font: 700 20px/50px '微软雅黑'; + color: white; + border: none; + border-radius: 25px; + background: linear-gradient(to bottom, rgb(255, 13, 39), rgb(252, 141, 3)); +} \ No newline at end of file diff --git a/Gobang/Gobang.html b/Gobang/Gobang.html new file mode 100644 index 0000000..1e91e58 --- /dev/null +++ b/Gobang/Gobang.html @@ -0,0 +1,38 @@ + + + + + + + + 五子棋 + + + + + + + + + + +
+ + 你的浏览器不支持HTML5 canvas ，请使用 google chrome 浏览器 打开. + + +
+
+ + + + +
+
+ + + + \ No newline at end of file diff --git a/Gobang/scripts/Chess.js b/Gobang/scripts/Chess.js new file mode 100644 index 0000000..a18c3ef --- /dev/null +++ b/Gobang/scripts/Chess.js @@ -0,0 +1,7 @@ +function Chess(Color, X, Y) { + this.color = Color; //1 black ,2 white + this.x = X; + this.y = Y; + this.prev; + this.next; +} \ No newline at end of file diff --git a/Gobang/scripts/Chessboard.js b/Gobang/scripts/Chessboard.js new file mode 100644 index 0000000..c375c36 --- /dev/null +++ b/Gobang/scripts/Chessboard.js @@ -0,0 +1,193 @@ +function Chessboard() { + this.startX = 40; + this.startY = 30; + this.sideLength = 40; + this.blockNumber = 14; + this.existingChesses = []; + this.chessNumber = 0; + this.nowChess = null; + this.initial = function () { + this.chessNumber = 0; + for (var i = 1; i <= this.blockNumber + 1; i++) { + this.existingChesses[i] = []; + for (var j = 1; j <= this.blockNumber + 1; j++) { + this.existingChesses[i][j] = 0; + } + } + } + this.drawChessboard = function (canvas) { + var ctx = canvas.getContext("2d"); + //col + for (var i = 0; i <= this.blockNumber; i++) { + ctx.beginPath(); + ctx.moveTo(this.startX + i * 40, this.startY); + ctx.lineTo(this.startX + i * 40, this.startY + this.blockNumber * 40); + ctx.stroke(); + } + //row + for (var i = 0; i <= this.blockNumber; i++) { + ctx.beginPath(); + ctx.moveTo(this.startX, this.startY + i * 40); + ctx.lineTo(this.startX + this.blockNumber * 40, this.startY + i * 40); + ctx.stroke(); + } + //number on the left + //letter on the bottom + var str = "ABCDEFGHIJKLMNO" + ctx.font = "20px 微软雅黑"; + ctx.fillStyle = 'black'; + for (var i = 0; i <= this.blockNumber; i++) { + ctx.fillText(i, 3, this.startY + (this.blockNumber - i) * 40) + ctx.fillText(str[i], this.startX + i * 40, this.startY + 14 * 40 + 20); + } + } + this.putChess = function (canvas, chess) { + var x = chess.x, + y = chess.y; + if (!this.existingChesses[x][y]) { + if (this.nowChess) { + this.nowChess.next = chess; + chess.prev = this.nowChess; + chess.next = null; + this.nowChess = chess; + } else { + this.nowChess = chess; + chess.next = null; + chess.prev = null; + } + this.drawChess(canvas, chess); + return this.result(chess); + } + } + this.drawChess = function (canvas, chess) { + var realX = this.startX + chess.x * 40, + realY = this.startY + chess.y * 40; + var ctx2 = canvas.getContext("2d"); + ctx2.beginPath(); + ctx2.arc(realX, realY, 15, 0, Math.PI * 2); + if (chess.color == 1) { + ctx2.fillStyle = 'black'; + } else { + ctx2.fillStyle = 'white'; + } + ctx2.fill(); + this.chessNumber++; + this.existingChesses[chess.x][chess.y] = chess.color; + } + this.result = function (chess) { + var x = chess.x, + y = chess.y, + color = chess.color; + var count = 0; + //横 + var i = x, + j = x + 1; + while (true) { + if (this.existingChesses[i][y] == color) { + i--; + count++; + if (count == 5) return color; + } else if (this.existingChesses[j][y] == color) { + j++; + count++; + if (count == 5) return color; + } else break; + } + + //纵 + count = 0; + i = y, j = y + 1; + while (true) { + if (this.existingChesses[x][i] == color) { + i--; + count++; + if (count == 5) return color; + } else if (this.existingChesses[x][j] == color) { + j++; + count++; + if (count == 5) return color; + } else break; + } + //左上到右下 + count = 0; + i = x, j = y; + while (true) { + if (this.existingChesses[i][j] == color) { + i--; + j--; + count++; + if (count == 5) return color; + } else break; + } + i = x + 1, j = y + 1; + while (true) { + if (this.existingChesses[i][j] == color) { + i++; + j++; + count++; + if (count == 5) return color; + } else break; + } + + //左下到右上 + count = 0; + i = x, j = y; + while (true) { + if (this.existingChesses[i][j] == color) { + i--; + j++; + count++; + if (count == 5) return color; + } else break; + } + i = x + 1, j = y - 1; + while (true) { + if (this.existingChesses[i][j] == color) { + i++; + j--; + count++; + if (count == 5) return color; + } else break; + } + return false; + } + this.clearChess = function (canvas, chess) { + var ctx = canvas.getContext("2d"); + var realX = this.startX + chess.x * 40, + realY = this.startY + chess.y * 40; + var x = realX - 20, + y = realY - 20; + ctx.clearRect(x, y, 40, 40); + ctx.beginPath(); + ctx.moveTo(x, realY); + ctx.lineTo(x + 40, realY); + ctx.stroke(); + ctx.closePath(); + ctx.beginPath(); + ctx.moveTo(realX, y); + ctx.lineTo(realX, y + 40); + ctx.stroke(); + ctx.closePath(); + this.existingChesses[chess.x][chess.y] = 0; + this.chessNumber--; + } + this.prevChess = function (canvas) { + this.clearChess(canvas, this.nowChess); + console.log(this.nowChess); + if (this.nowChess.prev) { + this.nowChess = this.nowChess.prev; + } else { + alert("已经是最后一颗棋子啦，不可以再悔棋咯！"); + } + } + this.nextChess = function (canvas) { + if (this.nowChess.next) { + if (this.chessNumber != 0) { + this.nowChess = this.nowChess.next; + } + this.drawChess(canvas, this.nowChess); + } else { + alert("没有下一步了哦！"); + } + } +} \ No newline at end of file diff --git a/Gobang/scripts/Control.js b/Gobang/scripts/Control.js new file mode 100644 index 0000000..f402b28 --- /dev/null +++ b/Gobang/scripts/Control.js @@ -0,0 +1,58 @@ +window.onload = function () { + var chessboard = new Chessboard; + var canvas = document.getElementById("canvas"); + var newGame = document.getElementById("newGame"); + var isBlack = true; + var isWin = false; + var context = canvas.getContext("2d"); + var chess; + chessboard.initial(); + chessboard.drawChessboard(canvas); + newGame.onclick = function () { + context.clearRect(0, 0, 630, 630); + chessboard.initial(); + isBlack = true; + isWin = false; + chessboard.drawChessboard(canvas); + alert("游戏开始！"); + canvas.onclick = function (e) { + if (isWin) return; + var x = Math.round((e.offsetX - chessboard.startX) / 40), + y = Math.round((e.offsetY - chessboard.startY) / 40); + console.log(x, y); + var color; + if (isBlack) { + isBlack = false; + color = 1; //black + } else { + isBlack = true; + color = 2; //white + } + chess = new Chess(color, x, y); + isWin = chessboard.putChess(canvas, chess); + if (isWin) { + showWinner(isWin); + } + } + var prev = document.getElementById("prev"); + var next = document.getElementById("next"); + prev.style.display = "block"; + next.style.display = "block"; + prev.onclick = function () { + chessboard.prevChess(canvas); + } + next.onclick = function () { + chessboard.nextChess(canvas); + } + + function showWinner(winner) { + if (winner == 1) { + alert("黑棋胜！"); + } else { + alert("白棋胜！"); + } + } + + + } +} \ No newline at end of file -- Gitee