原生JS+Canvas五子棋游戲_javascript技巧

一、功能模塊

先看下現(xiàn)在做完的效果：

線上體驗：https://wj704.github.io/five_game.html

主要功能模塊為：

1.人機對戰(zhàn)功能
2.悔棋功能
3.撤銷悔棋功能

二、代碼詳解

2.1 人機對戰(zhàn)功能實現(xiàn)

從效果圖可以看到，棋盤的橫豎可以放的位置為15*15，通過canvas畫棋盤：

知道格子數(shù)后，我們先看五子棋有多少種贏法：

根據(jù)贏法總數(shù)定義分別保存計算機和人贏法的數(shù)組：

然后就是人開始下棋：

oneStep() 方法為落子，要在棋盤上畫一個棋子：

 //畫棋子
 var oneStep = function(i,j,me){
 // debugger;
 context.beginPath();
 context.arc(15 + i * 30, 15 + j * 30, 13, 0, 2 * Math.PI);//畫圓
 context.closePath();
 //漸變
 var gradient = context.createRadialGradient(15 + i * 30 + 2, 15 + j * 30 - 2, 13, 15 + i * 30 + 2, 15 + j * 30 - 2, 0);

 if(me){
 gradient.addColorStop(0,'#0a0a0a');
 gradient.addColorStop(1,'#636766');
 }else{
 gradient.addColorStop(0,'#d1d1d1');
 gradient.addColorStop(1,'#f9f9f9');
 }
 context.fillStyle = gradient;
 context.fill();
 }

接著看計算機怎么下棋，具體看computerAI()方法：

根據(jù)相應(yīng)的權(quán)重，計算出計算機應(yīng)該落子的位置。

2.2 悔棋功能

要提的是，這里暫時只能悔一步棋。悔棋功能主要關(guān)鍵點是：1、銷毀剛剛下的棋子；2、將之前不可能贏的狀態(tài)還原；看下具體的代碼：

minusStep()為銷毀棋子的方法，我們看下是怎么銷毀的。

首先通過clearRect()擦掉該圓，然后再重新畫該圓周圍的格子，注意相應(yīng)的位置，這里花了些時間折騰。

2.3 撤銷悔棋功能

悔棋過后，再撤銷，相當于還原悔棋之前的狀態(tài)。代碼比較簡單：

至此，比較簡單的完成了這三個功能。

三、總結(jié)

五子棋游戲的核心關(guān)鍵點是：1、弄清楚有多少種贏法；2、怎么判斷是否已經(jīng)贏了；3、計算機下棋算法。這里巧妙地運用數(shù)組存儲贏法，判斷是否贏了，通過權(quán)重比較，計算出計算機該下棋的位置。

過程中用到canvas，之前有學(xué)習過，雖然很久沒用，查了些資料，復(fù)習了怎么畫線，畫圓，學(xué)會了怎么如何清除一個圓等。
然后要注意的是，用原生Js怎么為元素添加、刪除class。

最后代碼放到github上了，地址：https://github.com/wj704/wj704.github.io/blob/master/five_game.html

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com