js實現雙人五子棋小遊戲
阿新 • • 發佈:2020-05-29
本文例項為大家分享了js實現雙人五子棋小遊戲的具體程式碼,供大家參考,具體內容如下
這是自己自學js的時候,在網上找的js原始碼,由於是自學,花了數小時才把這個原始碼大致弄明白。
大致演算法 自定義棋盤規格,直接在棋盤建新div就可以,長度寬度用計算就可以了。下棋,在div裡再建class,這裡要給每個class標一個site值,由site值寫出該棋子豎直方向和橫向的座標,由座標可以寫出棋子勝利的條件。而棋子的黑白走是用識別符號,偶的識別符號則是白棋子的class。奇的識別符號則是黑棋子的class。
ps 我遇到的一些問題在程式碼中有註釋
<!DOCTYPE html> <html> <head> <title>五子棋</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/> <style> /* 簡單初始化 */ html,body,section,div,p{ padding: 0; margin: 0; font-size: 12px; } body{ width: 100%; height: 100%; position: fixed; } /* 棋盤 */ #chessboard{ width: 90vmin; min-height: 89vmin; margin: calc(50vh - 46vmin + 2px) auto; background: #f5ca69; border: 2px solid #000; border-radius: 7px; -webkit-box-shadow: .1rem .1rem .05rem rgba(0,.5),-.1rem -.1rem .05rem rgba(0,.5) ; box-shadow: .1rem .1rem .05rem rgba(0,.5) ; } /* after偽元素,載入chessboard後發生 */ #chessboard::after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } #chessboard div{ width: calc(9vmin - 2px); height: calc(9vmin - 2px); float: left; border: 1px solid #000; border-radius: 5px; } #chessboard div p{ width: 97%; height: 97%; margin: 1.5% auto; border-radius: 100%; } /* 白棋子 */ .white{ background: -webkit-radial-gradient(at 35% 35%,#FFF,#CCC,#FFF); background: -o-radial-gradient(at 35% 35%,#FFF); background: -moz-radial-gradient(at 35% 35%,#FFF); background: radial-gradient(at 35% 35%,#FFF); box-shadow: .1rem .1rem .05rem rgba(0,.5); } /* 黑棋子 */ .black{ background: -webkit-radial-gradient(at 30% 30%,#999 -13%,#000 35%,#999 200%); background: -o-radial-gradient(at 30% 30%,#999 200%); background: -moz-radial-gradient(at 30% 30%,#999 200%); background: radial-gradient(at 30% 30%,#999 200%); box-shadow: .1rem .1rem .05rem rgba(0,.5); } #mask{ width: 100%; height: 100vh; position: fixed; top: 0; left: 0; background-color: rgba(0,.7); } .conBox{ display: block; width: 300px; height: 200px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background-color: #fff; border-radius: 3px; box-shadow: .1rem .1rem .05rem rgba(0,.5); } .conBox h1{ width: 100%; float: left; margin: 0; line-height: 45px; text-align: center; } .conBox p{ display: block; width: 40px; height: 40px; float: left; margin-top: 40px; font-size: 32px; text-align: center; line-height: 40px; cursor: pointer; } .conBox p:nth-child(2){ margin-left: 60px; } .conBox p:nth-child(3){ width: 100px; font-size: 20px; cursor: initial; } .conBox button{ width: 80px; float: left; margin-top: 30px; margin-left: 110px; color: #fff; font-size: 14px; text-align: center; line-height: 28px; background-color: #f60; border: none; outline: none; } .clear::after{ content: ""; display: block; height: 0; clear: both; visibility: hidden; } .border,.borderTop,.borderBot { position: relative; } .border:after{ content: " "; width: 200%; height: 200%; position: absolute; top: 0; left: 0; border: 1px solid rgba(0,0.2); -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; box-sizing: border-box; } .borderBot:after{ content: " "; position: absolute; left: 0; bottom: 0; right: 0; height: 1px; border-bottom: 1px solid rgba(0,0.2); -webkit-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } .borderTop:before{ content: " "; position: absolute; left: 0; top: 0; right: 0; height: 1px; border-top: 1px solid rgba(0,0.2); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } </style> <script> // onload為瀏覽器物件中的事件,頁面載入時觸發 window.function(){ var grid; var chessArr = []; var timer = 0; var lineNum = parseInt(gridNum.innerHTML); // 獲取元素 var box = document.getElementById('chessboard'); var chessBox = box.getElementsByTagName('div'); var submitBtn = document.getElementById('submitBtn'); // 減去規格 subBtn.onclick = function(){ if ( lineNum > 8 ) { lineNum--; } // innerHTML為gridNum的全元素 gridNum.innerHTML = lineNum; } // 加上規格 addBtn.onclick = function(){ if ( lineNum < 14 ) { lineNum++; } gridNum.innerHTML = lineNum; } //棋盤初始化 submitBtn.onclick = function(){ var chessMaxNum = lineNum * lineNum; var chessWH = 90/lineNum; for (var i = 0; i < chessMaxNum; i++) { // 設定棋盤裡小格子div元素 grid = document.createElement('div'); grid.style.width = 'calc(' + chessWH + 'vmin - 2px)'; grid.style.height = 'calc(' + chessWH + 'vmin - 2px)'; grid.id=i; box.appendChild(grid); chessArr[i] = 0; grid.onclick = function(x){ // target 事件屬性可返回事件的目標節點(觸發該事件的節點),如生成事件的元素、文件或視窗。 var index = x.target.id||x.target.parentNode.id; return playChess(index); }; }; mask.style.display = 'none'; } //棋子物件 function Chess(){ this.color = 'white'; this.site = 0; // 建立一個class this.chessDom = function(){ // 創造新節點 var dom = document.createElement('p'); // 將這個名字給class dom.setAttribute('class',this.color); return dom; } this.ligature = function(arr){ // map() 方法返回一個新陣列,陣列中的元素為原始陣列元素呼叫函式處理後的值。 //是就返回這個site // 給白棋一個標識號,方便在下列judge中判斷 var whiteChess = arr.map(function(s){ // parseInt() 函式可解析一個字串,並返回一個整數。 return (s.color == 'white')?parseInt(s.site):0; }); var blackChess = arr.map(function(s){ return (s.color == 'black')?parseInt(s.site):0; }); judge(whiteChess,'白子'); judge(blackChess,'黑子'); function judge(che,color){ // length 屬性可返回字串中的字元數目 for (var i = 0;i < che.length;i++) { // 棋子橫座標 var x = che[i]%lineNum; // 棋子豎座標 var y = parseInt(che[i]/lineNum); // \這樣的傾斜判斷 if ( x <= lineNum - 5 && y <= lineNum - 5 && che[i] != 0 ) { if( che[i+1*lineNum+1] != 0 && che[i+2*lineNum+2] != 0 && che[i+3*lineNum+3] != 0 && che[i+4*lineNum+4] != 0 ){ alert(color+'獲勝!'); // 勝利後重新整理頁面 location.replace(location); return true; } }; // |這樣的豎直判斷 if ( y <= lineNum - 5 && che[i] != 0 ) { if( che[i+1*lineNum] != 0 && che[i+2*lineNum] != 0 && che[i+3*lineNum] != 0 && che[i+4*lineNum] != 0 ){ alert(color+'獲勝!'); // Location 物件方法replace() 用新的文件替換當前文件 location.replace(location); return true; } }; // /這樣的傾斜判斷 if ( x >= 4 && y <= lineNum - 5 && che[i] != 0 ) { if( che[i+1*lineNum-1] != 0 && che[i+2*lineNum-2] != 0 && che[i+3*lineNum-3] != 0 && che[i+4*lineNum-4] != 0 ){ alert(color+'獲勝!'); location.replace(location); return true; } }; // ——這樣的平行判斷 if ( x <= lineNum - 5 && che[i] != 0 ) { if( che[i+1] != 0 && che[i+2] != 0 && che[i+3] != 0 && che[i+4] != 0 ){ alert(color+'獲勝!'); location.replace(location); return true; } }; }; } } } function playChess(i){ if(chessArr[i] == 0){ // 識別符號 timer++; // 用new建立新的物件 chessArr[i] = new Chess(); timer%2==0?chessArr[i].color = 'black':chessArr[i].color = 'white'; // 給每個小格子設定一個site值 chessArr[i].site = i; // appendChild() 方法向節點新增最後一個子節點 // 意思就是在小格子div里加上棋子的class chessBox[i].appendChild(chessArr[i].chessDom()); // 給這個class的棋子賦予site值 chessArr[i].ligature(chessArr); }else{ alert('此處有子!'); } } }; </script> </head> <body> <section id="chessboard" class="clear"> </section> <section id="mask"> <aside class="conBox"> <h1 class="borderBot">小依,選擇棋盤規格哇。</h1> <p id="subBtn" class="border">-</p> <p id="gridNum" value="10" class="borderTop borderBot">10</p> <p id="addBtn" class="border">+</p> <button id="submitBtn">確認</button> </aside> </section> <div style="text-align:center;"> </div> </body> </html>
更多有趣的經典小遊戲實現專題,分享給大家:
C++經典小遊戲彙總
python經典小遊戲彙總
python俄羅斯方塊遊戲集合
JavaScript經典遊戲 玩不停
javascript經典小遊戲彙總
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。