詳解js如何實(shí)現(xiàn)雙人五子棋小游戲

發(fā)布時(shí)間：2020-07-21 10:41:13 來源：億速云閱讀：220 作者：小豬欄目：web開發(fā)

小編這次要給大家分享的是詳解js如何實(shí)現(xiàn)雙人五子棋小游戲，文章內(nèi)容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。

大致算法自定義棋盤規(guī)格，直接在棋盤建新div就可以，長度寬度用計(jì)算就可以了。下棋，在div里再建class，這里要給每個(gè)class標(biāo)一個(gè)site值，由site值寫出該棋子豎直方向和橫向的坐標(biāo)，由坐標(biāo)可以寫出棋子勝利的條件。而棋子的黑白走是用標(biāo)識(shí)符，偶的標(biāo)識(shí)符則是白棋子的class。奇的標(biāo)識(shí)符則是黑棋子的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,0,0,.5), 
       -.1rem -.1rem .05rem rgba(0,0,0,.5) ; 
  box-shadow: .1rem .1rem .05rem rgba(0,0,0,.5), 
       -.1rem -.1rem .05rem rgba(0,0,0,.5) ; 
 }
 /* after偽元素,載入chessboard后發(fā)生 */
 #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,#CCC,#FFF); 
  background: -moz-radial-gradient(at 35% 35%,#FFF,#CCC,#FFF); 
  background: radial-gradient(at 35% 35%,#FFF,#CCC,#FFF); 
 box-shadow: .1rem .1rem .05rem rgba(0,0,0,.5);
 }
 /* 黑棋子 */
 .black{
 background: -webkit-radial-gradient(at 30% 30%,#999 -13%,#000 35%,#999 200%);
  background: -o-radial-gradient(at 30% 30%,#999 -13%,#000 35%,#999 200%); 
  background: -moz-radial-gradient(at 30% 30%,#999 -13%,#000 35%,#999 200%); 
  background: radial-gradient(at 30% 30%,#999 -13%,#000 35%,#999 200%); 
 box-shadow: .1rem .1rem .05rem rgba(0,0,0,.5);
 }
 #mask{
 width: 100%;
 height: 100vh;
 position: fixed;
 top: 0;
 left: 0;
 background-color: rgba(0,0,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,0,0,.5);
 }
 .conBox h2{
 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, 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, 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, 0, 0.2);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
 }
 </style>
 <script>
 // onload為瀏覽器對(duì)象中的事件,頁面載入時(shí)觸發(fā)
 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');
 // 減去規(guī)格
 subBtn.onclick = function(){
 if ( lineNum > 8 ) {
  lineNum--;
 }
 // innerHTML為gridNum的全元素
 gridNum.innerHTML = lineNum;
 }
 // 加上規(guī)格
 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++) {
  // 設(shè)置棋盤里小格子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 事件屬性可返回事件的目標(biāo)節(jié)點(diǎn)（觸發(fā)該事件的節(jié)點(diǎn)），如生成事件的元素、文檔或窗口。
  var index = x.target.id||x.target.parentNode.id;
  return playChess(index);
  };
  
 };
 mask.style.display = 'none';
 }

 //棋子對(duì)象
 function Chess(){
 this.color = 'white';
 this.site = 0;
 // 創(chuàng)建一個(gè)class
 this.chessDom = function(){
  // 創(chuàng)造新節(jié)點(diǎn)
  var dom = document.createElement('p');
  // 將這個(gè)名字給class
  dom.setAttribute('class',this.color);
  return dom;
 }
 
 this.ligature = function(arr){
  // map() 方法返回一個(gè)新數(shù)組，數(shù)組中的元素為原始數(shù)組元素調(diào)用函數(shù)處理后的值。
  //是就返回這個(gè)site
  
  // 給白棋一個(gè)標(biāo)識(shí)號(hào),方便在下列judge中判斷
  var whiteChess = arr.map(function(s){
  // parseInt() 函數(shù)可解析一個(gè)字符串，并返回一個(gè)整數(shù)。
  return (s.color == 'white')&#63;parseInt(s.site):0;
  });
  
  var blackChess = arr.map(function(s){
  return (s.color == 'black')&#63;parseInt(s.site):0;
  });

  judge(whiteChess,'白子');
  judge(blackChess,'黑子');

  function judge(che,color){
  // length 屬性可返回字符串中的字符數(shù)目
  for (var i = 0;i < che.length;i++) {
  // 棋子橫坐標(biāo)
  var x = che[i]%lineNum;
  // 棋子豎坐標(biāo)
  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 對(duì)象方法replace() 用新的文檔替換當(dāng)前文檔
   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){
  // 標(biāo)識(shí)符
  timer++;
  // 用new創(chuàng)建新的對(duì)象
  chessArr[i] = new Chess();
  timer%2==0&#63;chessArr[i].color = 'black':chessArr[i].color = 'white';
  // 給每個(gè)小格子設(shè)置一個(gè)site值
  chessArr[i].site = i;
  // appendChild() 方法向節(jié)點(diǎn)添加最后一個(gè)子節(jié)點(diǎn)
  // 意思就是在小格子div里加上棋子的class
  chessBox[i].appendChild(chessArr[i].chessDom());
  // 給這個(gè)class的棋子賦予site值
  chessArr[i].ligature(chessArr);
 }else{
  alert('此處有子!');
 }
 }
 
 };
 </script>
</head>
<body>
 <section id="chessboard" class="clear">
 </section>
 <section id="mask">
 <aside class="conBox">
 <h2 class="borderBot">小依，選擇棋盤規(guī)格哇。</h2>
 <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">確認(rèn)</button>
 </aside>
 </section>
 <div >
</div>
</body>
</html>

看完這篇關(guān)于詳解js如何實(shí)現(xiàn)雙人五子棋小游戲的文章，如果覺得文章內(nèi)容寫得不錯(cuò)的話，可以把它分享出去給更多人看到。

向AI問一下細(xì)節(jié)

詳解js如何實(shí)現(xiàn)雙人五子棋小游戲

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽