js實(shí)現(xiàn)網(wǎng)頁五子棋進(jìn)階版
更新時(shí)間：2022年05月06日 12:12:32 作者：CTGctgct
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)網(wǎng)頁五子棋進(jìn)階版，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)網(wǎng)頁五子棋進(jìn)階版的具體代碼，供大家參考，具體內(nèi)容如下
對(duì)比上一版本增加了音效和計(jì)時(shí)器兩個(gè)模塊。
代碼如下
<!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
? ? }
?
? ? #timer {
? ? ? ? background:#000;
? ? ? ? float:left;
? ? ? ? width:150px;
? ? ? ? margin:30px;
? ? ? ? color: #00ff00;
? ? ? ? font-weight: bold;
? ? ? ? border-radius: 30px;
? ? ? ? text-align: center;
? ? ? ? font-size: 20px;
?
? ? }
</style>
?
<!--js-->
<script type="text/javascript">
?
? ? var presentChess = 1;//當(dāng)前執(zhí)棋方，1代表白旗，0代表黑棋
? ? var beginFlag = 0;//0代表未開始游戲，1代表已開始游戲
? ? var msg;
? ? var chessboard = new Array(10);//記錄下棋情況
? ? var playChessSound;
? ? var timerM;//計(jì)時(shí)器 分
? ? var timerS;//計(jì)時(shí)器 秒
? ? var interval;
? ? 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')
? ? ? ? playChessSound = document.getElementById("playChessSound")
? ? ? ? timerM = document.getElementById('timerM')
? ? ? ? timerS = document.getElementById('timerS')
? ? ? ? timerS.innerText = 0;
? ? ? ? timerM.innerText = 0;
? ? }
?
? ? //返回三者最小值
? ? function min(x, y, z) {
? ? ? ? return (x > y ? y : x) > z ? z : (x > y ? y : x)
? ? }
?
? ? //計(jì)時(shí)函數(shù)
? ? function setTimer() {
? ? ? ? var m = parseInt(timerM.innerText);
? ? ? ? var s = parseInt(timerS.innerText);
? ? ? ? if (s >= 59) {
? ? ? ? ? ? timerS.innerText = 0;
? ? ? ? ? ? timerM.innerText = m + 1;
? ? ? ? } else timerS.innerText = s + 1;
? ? }
?
? ? function beginGame() {
? ? ? ? // beginFlag = 1;
? ? ? ? //綁定棋盤下棋事件
? ? ? ? for (var i = 0; i < 100; i++) {
? ? ? ? ? ? document.getElementsByTagName('td')[i].onclick = palyChess;
? ? ? ? }
? ? ? ? interval = setInterval(setTimer, 1000);
? ? }
?
? ? function restartGame() {
? ? ? ? for (var i = 0; i < 100; i++) {
? ? ? ? ? ? //document.getElementsByTagName('td')[i].onclick = '';
? ? ? ? ? ? document.getElementsByTagName('td')[i].innerHTML = '';//清空棋子
? ? ? ? ? ? timerS.innerText = 0;
? ? ? ? ? ? timerM.innerText = 0;
? ? ? ? }
?
? ? ? ? for (var i = 0; i < 10; i++) {//清空棋盤記錄
? ? ? ? ? ? for (var j = 0; j < 10; j++) {
? ? ? ? ? ? ? ? chessboard[i][j] = -1;
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? //計(jì)時(shí)器部分
? ? ? ? clearInterval(interval)
? ? ? ? interval = setInterval(setTimer, 1000);
? ? }
?
? ? //下棋
? ? 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('黑棋方獲勝');
? ? ? ? ? ? ? ? clearInterval(interval);
? ? ? ? ? ? }
? ? ? ? ? ? presentChess = 0;
? ? ? ? ? ? msg.innerHTML = "黑棋";
? ? ? ? ? ? playChessSound.play();
?
? ? ? ? } else {
? ? ? ? ? ? this.innerHTML = hqiStr;
?
? ? ? ? ? ? chessboard[this.parentNode.rowIndex][this.cellIndex] = 0;
? ? ? ? ? ? if (ifWin(this.parentNode.rowIndex, this.cellIndex)) {
? ? ? ? ? ? ? ? if (presentChess == 1) alert('白棋方獲勝');
? ? ? ? ? ? ? ? else alert('黑棋方獲勝');
? ? ? ? ? ? ? ? clearInterval(interval);
? ? ? ? ? ? }
? ? ? ? ? ? presentChess = 1;
? ? ? ? ? ? msg.innerHTML = "白棋";
? ? ? ? ? ? playChessSound.play();
? ? ? ? }
?
? ? }
?
? ? //判斷是否勝利,h行，l列
? ? function ifWin(h, l) {
? ? ? ? // var x = this.parentNode.rowIndex;
? ? ? ? // var y = this.cellIndex - 1;
? ? ? ? var s = 1;//記錄連子個(gè)數(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++) {//取較小值作為移動(dòng)半徑
? ? ? ? ? ? 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++) {//取較小值作為移動(dòng)半徑
? ? ? ? ? ? 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>
<!--音效控制-->
<audio id="playChessSound">
? ? <source src="5390.mp3">
</audio>
<!--下部-->
<div>
?
? ? <!--左邊計(jì)時(shí)器-->
? ? <div id="timer" style="">
? ? ? ? 比賽已進(jìn)行<br>
? ? ? ? <span ?>
? ? ? ? ? ? <span id="timerM"></span>分
? ? ? ? ? ? <span id="timerS"></span>秒
? ? ? ? </span>
? ? </div>
?
? ? <div style="float:left; 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>音效請(qǐng)自行找取下載
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
html+css+js實(shí)現(xiàn)簡易版ChatGPT聊天機(jī)器人
OpenAI的一款聊天機(jī)器人模型ChatGPT爆火，本篇文章用一百行html+css+js代碼給大家制作一款簡易的聊天機(jī)器人。2023-02-02
下面小編就為大家?guī)硪黄猨s拼接html字符串的注意事項(xiàng)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
每次在javascript中用加號(hào)合成字符串，真的沒法忍受了，今天終于找到一高手寫的方法，與大家分享。2009-11-11
???????基于el-table和el-pagination實(shí)現(xiàn)數(shù)據(jù)的分頁效果流程詳解
本文主要介紹了???????基于el-table和el-pagination實(shí)現(xiàn)數(shù)據(jù)的分頁效果，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-11-11
JavaScript設(shè)計(jì)模式經(jīng)典之工廠模式
工廠模式定義一個(gè)用于創(chuàng)建對(duì)象的接口，這個(gè)接口由子類決定實(shí)例化哪一個(gè)類。接下來通過本文給大家介紹JavaScript設(shè)計(jì)模式經(jīng)典之工廠模式，感興趣的朋友一起學(xué)習(xí)吧2016-02-02
JavaScript封裝Vue-Router實(shí)現(xiàn)流程詳解
這篇文章主要介紹了JavaScript封裝Vue-Router實(shí)現(xiàn)流程，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09
表格同行中存在元素的相互調(diào)用，如何保證元素能夠被同行不同列的其他方框使用呢？下面通過實(shí)例代碼給大家介紹下，一起看看吧2016-12-12
JS實(shí)現(xiàn)“隱藏與顯示”功能(多種方法)
這篇文章主要介紹了JS實(shí)現(xiàn)“隱藏與顯示”功能的多種方法,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-11-11
拖動(dòng)table標(biāo)題實(shí)現(xiàn)改變td的大小(css+js代碼)
拖動(dòng)列寬的表格table標(biāo)題同時(shí)改變td的大小，本文將以實(shí)例演示為大家呈現(xiàn)，感興趣的朋友可以參考下哈，希望對(duì)你學(xué)習(xí)js或者css有所幫助2013-04-04
JavaScript基于DOM操作實(shí)現(xiàn)簡單的數(shù)學(xué)運(yùn)算功能示例
這篇文章主要介紹了JavaScript基于DOM操作實(shí)現(xiàn)簡單的數(shù)學(xué)運(yùn)算功能,涉及javascript節(jié)點(diǎn)操作、元素遍歷及數(shù)學(xué)運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2017-01-01