基於Blazor寫一個簡單的五子棋遊戲
阿新 • • 發佈:2020-03-03
寫這個五子棋遊戲,其實主要目的是想嘗試一下微軟新作Blazor。Blazor對於那些搞.NET的程式設計師,又想做一些前端工作,真的挺友好,不用一句JS就可搞定前端互動,美哉。現在已經有很流行的前端框架,如vue、react、angular等,微軟出這個blazor框架,目前觀測下來,在國外還滿火的,國內就沒什麼聲響了,一方面.net在國內影響本來也不大,另一方面搞.net的也怕被微軟又給坑了,所以都是一種觀望狀態。
扯遠了,回到正題,五子棋遊戲,本質上還是個二維陣列,值0表示空位,1表示黑子,2表示白子。
int[,] chess = new int[19,19]; chess[1,1] = 1;//黑子 chess[1,1] = 2;//白子
所有操作也是對這個二維陣列進行搜尋或賦值。實踐起來差不多有四步。
畫棋盤棋子
棋盤棋子由純CSS編寫,棋盤由 19x19個 div 組成。每個div的:after :before 構成橫豎兩條線條居中。棋子就是一個圓,加點徑向漸變、陰影,看起來也差不多了。
如何判贏
當用戶在棋盤落子後,其實就是 int[x,y] = 1
。基於此座標,在橫豎撇揦4個方向上,找是否有五個及以上的連子。如果找到就判贏,此局結束。下邊以橫向為例。
//橫方向 var i = 1;//向兩邊搜尋次數 var score = 1;//搜到的連子 var rightValid = true;//是否還能往右搜尋 var leftValid = true;//是否還能往左搜尋 while (i <= 5) { var right = cell + i;//往右 var left = cell - i;//往左 if (rightValid && right < 19)//如果還能往右且沒超出邊界 { if (chess[row, right] == chesspiece)//如果是連子 { score++;//加1 if (score >= 5) //如果已經超過4個了,就判贏 return true; } else //碰到空位或敵方棋子,中斷搜尋 rightValid = false; } if (leftValid && left >= 0) //如果還能往左且沒超出邊界 { if (chess[row, left] == chesspiece) { score++; //加1 if (score >= 5) return true; } else //碰到空位或敵方棋子,中斷搜尋 leftValid = false; } i++; }
如何實現電腦走棋
走棋採用了遍歷計分方式,即計算每一個空位的分數,計算規則如下,分數由高到底。
- 能走死對方
- 能走出活4連子(左右無檔子)
- 能走出33
- 能走出死4連子(其中一邊被檔住)
- 能走出活3連子
- 能走出死3連子(其中一邊被檔住)
- 能走出2連子
策略
- 斜線分數權重會高於直線。
- 計算空位分數時,也會計算一個敵方在此位置的分數,如果敵方分數高於己方,會優先搶佔該位置
這裡對分數的計算,還需繼續調優。策略部分還應該加上跳子等情況。有時間再弄吧。
其他處理,
如戰場清理、誰先手等細節,這些都較為簡單。
chess = new int[19,19];//重新例項化一下,即可清除棋盤所有棋子。
演示地址及原始碼
演示地址 : http://chess.ut32.com/
Github庫 : https://github.com/ut32/chess/