js+html實現(xiàn)網(wǎng)頁五子棋

更新時間：2022年05月06日 12:13:22 作者：CTGctgct

這篇文章主要為大家詳細介紹了js+html實現(xiàn)網(wǎng)頁五子棋，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js+html實現(xiàn)網(wǎng)頁五子棋的具體代碼，供大家參考，具體內(nèi)容如下

最終效果圖：

廢話不多說，上源碼：

<!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;//當前執(zhí)棋方，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() {
? ? ? ? //如果表格此處已經(jīng)下了棋，則返回 不作操作
? ? ? ? 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;//記錄連子個數(shù)
?
? ? ? ? //判斷豎直方向
? ? ? ? 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">執(zhí)子方：<label id="msg" name="msg">白棋</label></div>
</div>
<br>
?
<!--下部-->
<div>
? ? <div style="float:left; width:120px">
?
? ? </div>
? ? <div style="margin:0 auto; width:500px ">
? ? ? ? <!--表格構(gòu)成棋盤-->
? ? ? ? <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張圖片，開始按鈕圖，重新開始按鈕圖，白棋子圖，黑棋子圖。