diff --git a/Gobang/Gobang.css b/Gobang/Gobang.css new file mode 100644 index 0000000000000000000000000000000000000000..d09cc9837cf8d0716504862bd409508d4841f980 --- /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 0000000000000000000000000000000000000000..1e91e585517721345047487a946294ae9e9f2144 --- /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 0000000000000000000000000000000000000000..292d928323552cdc572e1ed20ff70133448c87ac --- /dev/null +++ b/Gobang/scripts/Chess.js @@ -0,0 +1,9 @@ +function Chess() { + this.color = 1; //1为黑 2为白 + this.Location = new Location(); +} + +function Location(x, y) { + this.X = x; + this.Y = y; +} \ No newline at end of file diff --git a/Gobang/scripts/Chessboard.js b/Gobang/scripts/Chessboard.js new file mode 100644 index 0000000000000000000000000000000000000000..171fe0d360cde73c8ad822b4f06029123e7f22e3 --- /dev/null +++ b/Gobang/scripts/Chessboard.js @@ -0,0 +1,181 @@ +// 棋盘类 +// 实现绘制棋盘 双人对弈 胜负判断 +function Chessboard() { + // 画棋盘格 + this.init = function () { + this.prevChesses.length = 0; + this.nextChesses.length = 0; + for (var i = 0; i < 15; i++) { + this.chessData[i] = []; + for (var j = 0; j < 15; j++) { + this.chessData[i][j] = 0; + } + } + } + this.drawLine = function (canvas) { + var context = canvas.getContext("2d"); + var str = "ABCDEFGHIJKLMNO"; + for (var i = 0; i < this.lattice; i++) { + context.moveTo(30, 30 + i * 40); + context.lineTo(590, 30 + i * 40); + context.stroke(); + //画横线 + context.moveTo(30 + i * 40, 30); + context.lineTo(30 + i * 40, 590); + context.stroke(); + //画竖线 + context.font = "25px 黑体"; + context.textAlign = "center"; + context.fillText((this.lattice - i).toString(), 10, 35 + i * 40); + context.fillText(str[i], 30 + i * 40, 628); + } + // 画五个点 + var points = [ + [30 + 40 * 3, 30 + 40 * 3], + [30 + 40 * 11, 30 + 40 * 3], + [30 + 40 * 3, 30 + 40 * 11], + [30 + 40 * 11, 30 + 40 * 11], + [30 + 40 * 7, 30 + 40 * 7] + ] + context.fillStyle = "black"; + for (var i = 0; i < 5; i++) { + context.beginPath(); + context.arc(points[i][0], points[i][1], 6, 0, Math.PI * 2, true); + context.closePath(); + context.fill(); + } + } + // 下棋 + this.putChess = function (canvas, chess) { + this.prevChesses.push(chess); //当前棋子入档 + this.drawChess(canvas, chess); + } + //悔棋 上一步 + this.prevChess = function (canvas) { + this.nextChesses.push(this.prevChesses[this.prevChesses.length - 1]); + this.clearChess(canvas, this.prevChesses[this.prevChesses.length - 1]); + this.prevChesses.pop(); + + } + //下一步 + this.nextChess = function (canvas) { + this.drawChess(canvas, this.nextChesses[this.nextChesses.length - 1]); + this.chessData[this.nextChesses[this.nextChesses.length - 1].Location.X][this.nextChesses[this.nextChesses.length - 1].Location.Y] = 1; + this.nextChesses.pop(); + } + //画棋 + this.drawChess = function (canvas, chess) { + context = canvas.getContext("2d"); + context.beginPath(); + context.arc(30 + chess.Location.X * 40, 30 + chess.Location.Y * 40, 15, 0, Math.PI * 2); + context.closePath(); + if (chess.color == 1) { + context.fillStyle = "black"; + this.chessData[chess.Location.X][chess.Location.Y] = 1; + } else { + context.fillStyle = "white"; + this.chessData[chess.Location.X][chess.Location.Y] = 2; + } + context.fill(); + } + //悔棋时，拿掉一颗棋子 + this.clearChess = function (canvas, chess) { + context = canvas.getContext("2d"); + context.clearRect(30 + chess.Location.X * 40 - 15, 30 + chess.Location.Y * 40 - 15, 30, 30); + //去除棋子大小像素块并重新绘制 + //alert("清除像素块"); + this.chessData[chess.Location.X][chess.Location.Y] = 0; + context.beginPath(); + context.moveTo(30 + chess.Location.X * 40, 30 + chess.Location.Y * 40 - 15); + context.lineTo(30 + chess.Location.X * 40, 30 + chess.Location.Y * 40 + 15); + context.strokeStyle = "#000000"; + context.stroke(); + context.closePath(); + //alert("绘制竖线"); + context.beginPath(); + context.moveTo(30 + chess.Location.X * 40 - 15, 30 + chess.Location.Y * 40); + context.lineTo(30 + chess.Location.X * 40 + 15, 30 + chess.Location.Y * 40); + context.strokeStyle = "#000000"; + context.stroke(); + context.closePath(); + //alert("绘制横线"); + } + this.judge = function (chess) { + var count1 = 0, + count2 = 0, + count3 = 0, + count4 = 0; + var x = chess.Location.X; + var y = chess.Location.Y; + var i, j; + //该棋子所在位置的水平 竖直 左斜 右斜方向上的棋子数 + //1.竖直方向 + i = x; + j = x + 1; + while (i >= 0 && this.chessData[i][y] == chess.color) { + console.log(this.chessData[i][y]); + i--; //i最终停留在左边第一个非同色的棋子位置 + } + + while (j < 15 && this.chessData[j][y] == chess.color) { + console.log(this.chessData[j][y]); + j++; //j最终停留在右边第一个非同色的棋子位置 + } + count1 = j - i - 1; + //2.水平方向 + i = y; + j = y + 1; + while (i >= 0 && this.chessData[x][i] == chess.color) { + console.log(this.chessData[x][i]); + i--; + } + while (j < 15 && this.chessData[x][j] == chess.color) { + console.log(this.chessData[x][j]); + j++; + } + count2 = j - i - 1; + //3.左上到右下方向 + //右下 + for (i = x + 1, j = y + 1; i < 15 && j < 15; i++, j++) { + if (this.chessData[i][j] == chess.color) + count3++; + else break; //遇到第一个非同色棋子就要停下 + } + for (i = x, j = y; i >= 0 && j >= 0; i--, j--) { + if (this.chessData[i][j] == chess.color) + count3++; + else break; + } + for (i = x + 1, j = y - 1; i < 15 && j >= 0; i++, j--) { + if (this.chessData[i][j] == chess.color) + count4++; + else break; + } + for (i = x, j = y; j < 15 && i >= 0; j++, i--) { + if (this.chessData[i][j] == chess.color) + count4++; + else break; + } + + if (count1 >= 5 || count2 >= 5 || count3 >= 5 || count4 >= 5) { + if (chess.color == 1) { + alert("黑棋赢了"); + } else { + alert("白棋赢了"); + } + return true; + } else + return false; + } + this.lattice = 15; + //棋盘格子数 + this.chessData = []; + //棋盘上棋子布局状况 + this.prevChesses = []; + //上一步棋子的记录 + this.nextChesses = []; + //实现上一步后之后棋子的记录 + this.lastChess = new Chess(); + //上一颗棋子 + +} \ No newline at end of file diff --git a/Gobang/scripts/Control.js b/Gobang/scripts/Control.js new file mode 100644 index 0000000000000000000000000000000000000000..6db76a476730f94b5946b16a1bb4ba4c05c1d1d6 --- /dev/null +++ b/Gobang/scripts/Control.js @@ -0,0 +1,68 @@ +window.onload = function () { + var isBlack = true; + var isWin = false; + var newGame = document.getElementById("newGame"); + var canvas = document.getElementById("canvas"); + var prev = document.getElementById("prev"); + var next = document.getElementById("next"); + var chessboard = new Chessboard(); + chessboard.init(); + chessboard.drawLine(canvas); + btnSwitch(chessboard); + newGame.onclick = function () { + alert("点击新游戏"); + isBlack = true; + isWin = false; + canvas.height = canvas.height; //每次重设高度 都清空画布 + chessboard.init(); + chessboard.drawLine(canvas); + canvas.onclick = function (e) { + if (isWin) return; + var x = Math.round((e.offsetX - 30) / 40); + var y = Math.round((e.offsetY - 30) / 40); + var location = new Location(); + location.X = x; + location.Y = y; + // console.log(x, y); + if (x < 15 && y < 15 && x >= 0 && y >= 0 && !chessboard.chessData[x][y]) { + var chess = new Chess(); + if (isBlack) { //轮到黑棋 + isBlack = false; + chess.color = 1; + // console.log(chess.Location.X); + } else { //轮到白棋 + isBlack = true; + chess.color = 2; + } + chess.Location = location; + chessboard.putChess(canvas, chess); + isWin = chessboard.judge(chess); + } + btnSwitch(chessboard); + } + btnSwitch(chessboard); + } + //悔棋 + prev.onclick = function () { + chessboard.prevChess(canvas); + btnSwitch(chessboard); + } + next.onclick = function () { + chessboard.nextChess(canvas); + btnSwitch(chessboard); + } + + function btnSwitch(chessboard) { + if (chessboard.prevChesses.length) { + prev.style.display = "inline"; + } else { + prev.style.display = "none"; + } + if (chessboard.nextChesses.length) { + next.style.display = "inline"; + } else { + next.style.display = "none"; + } + } + +} \ No newline at end of file