js+html实现网页五子棋
本文实例为大家分享了js+html实现网页五子棋的具体代码,供大家参考,具体内容如下
最终效果图:
废话不多说,上源码:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>五子棋</title> <!-- <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"/>--> </head> <!--css--> <style> body { width: 800px; } #beginGameBtn { background: url(startImg.png); width: 80px; height: 25px; background-size: cover; float: left; } #restartGameBtn { background: url(restartImg.png); width: 80px; height: 25px; background-size: cover; float: right; } td { width: 50px; height: 50px; margin: 0px; padding: 0px } </style> <!--js--> <script type="text/javascript"> var presentChess = 1;//当前执棋方,1代表白旗,0代表黑棋 var beginFlag = 0;//0代表未开始游戏,1代表已开始游戏 var msg; var chessboard = new Array(10);//记录下棋情况 for (var i = 0; i < 10; i++) { chessboard[i] = new Array(10); //初始化下棋情况,全为0 for (var j = 0; j < 10; j++) { chessboard[i][j] = -1; } } window.onload = function () { msg = document.getElementById('msg') } //返回三者最小值 function min(x, y, z) { return (x > y ? y : x) > z ? z : (x > y ? y : x) } function beginGame() { // beginFlag = 1; //绑定棋盘下棋事件 for (var i = 0; i < 100; i++) { document.getElementsByTagName('td')[i].onclick = palyChess; } } function restartGame() { for (var i = 0; i < 100; i++) { //document.getElementsByTagName('td')[i].onclick = ''; document.getElementsByTagName('td')[i].innerHTML = '';//清空棋子 } for (var i = 0; i < 10; i++) {//清空棋盘记录 for (var j = 0; j < 10; j++) { chessboard[i][j] = -1; } } } //下棋 function palyChess() { //如果表格此处已经下了棋,则返回 不作操作 text = this.innerHTML if (text != '') return; //放置棋子图片得字符串 var bqiStr = "<img src=\"bqiImg.jpg\" width=\"100%\" height=\"90%\" alt=\"\"/>" var hqiStr = "<img src=\"hqiImg.jpg\" width=\"100%\" height=\"90%\" alt=\"\"/>" // console.log('1') if (presentChess == 1) { this.innerHTML = bqiStr; chessboard[this.parentNode.rowIndex][this.cellIndex] = 1; // setTimeout('', 3000); if (ifWin(this.parentNode.rowIndex, this.cellIndex)) if (presentChess == 1) alert('白棋方获胜'); else alert('黑棋方获胜'); presentChess = 0; msg.innerHTML = "黑棋"; } else { this.innerHTML = hqiStr; chessboard[this.parentNode.rowIndex][this.cellIndex] = 0; setTimeout('', 3000); if (ifWin(this.parentNode.rowIndex, this.cellIndex)) if (presentChess == 1) alert('白棋方获胜'); else alert('黑棋方获胜'); presentChess = 1; msg.innerHTML = "白棋"; } } //判断是否胜利,h行,l列 function ifWin(h, l) { // var x = this.parentNode.rowIndex; // var y = this.cellIndex - 1; var s = 1;//记录连子个数 //判断竖直方向 for (var i = 1; i <= (h > 4 ? 4 : h); i++) { if (chessboard[h - i][l] == presentChess) { s++; } else break; } for (var i = 1; i <= ((9 - h) > 4 ? 4 : (9 - h)); i++) { if (chessboard[h + i][l] == presentChess) { s++; } else break; } if (s >= 5) { return 1; } s = 1; //判断水平方向 for (var i = 1; i <= (l > 4 ? 4 : l); i++) { if (chessboard[h][l - i] == presentChess) { s++; } else break; } for (var i = 1; i <= ((9 - l) > 4 ? 4 : (9 - l)); i++) { if (chessboard[h][l + i] == presentChess) { s++; } else break; } if (s >= 5) { return 1; } s = 1; // var min=(h > 4 ? 4 : h) > l ? l : (h > 4 ? 4 : h); //判断左上、右下斜线方向 for (var i = 1; i <= min(4, l, h); i++) {//取较小值作为移动半径 if (chessboard[h - i][l - i] == presentChess) { s++; } else break; } for (var i = 1; i <= min(4, 9 - l, 9 - h); i++) { if (chessboard[h + i][l + i] == presentChess) { s++; } else break; } if (s >= 5) { return 1; } s = 1; //判断右上、左下斜线方向 for (var i = 1; i <= min(4, 9 - l, h); i++) {//取较小值作为移动半径 if (chessboard[h - i][l + i] == presentChess) { s++; } else break; } for (var i = 1; i <= min(4, l, 9 - h); i++) { if (chessboard[h + i][l - i] == presentChess) { s++; } else break; } if (s >= 5) { return 1; } return 0; } </script> <body> <!--顶部--> <div> <div style="margin:0 auto; width:165px"> <!--开始游戏按钮--> <button id="beginGameBtn" name="beginGameBtn" onclick="beginGame()"></button> <!--重新开始游戏按钮--> <button id="restartGameBtn" name="restartGameBtn" onclick="restartGame()"></button> </div> <div style="margin:0 auto; width:150px">执子方:<label id="msg" name="msg">白棋</label></div> </div> <br> <!--下部--> <div> <div style="float:left; width:120px"> </div> <div style="margin:0 auto; width:500px "> <!--表格构成棋盘--> <table border="5" style="width:500px; height:500px; border-collapse:collapse; "> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </div> </div> </body> </html>
里面用到了4张图片,开始按钮图,重新开始按钮图,白棋子图,黑棋子图。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)