第一次寫筆記，不知道帶有別的網站是否違規，為了尊重別人果實，這次筆記就是基于慕課網五子棋教程，大家有興趣可以去看一下。我自己增加了開始，暫停，繼續，重新開始的按鈕，由于是新手，最大目的在于實現功能，其它的以后再改，不喜勿噴！

首先，頁面結構，左邊是canvas顯示界面，右邊是一些控制按鈕，選擇棋子，開始，暫停，重來

<div id="main"> </span><canvas id="canvas"></canvas> </span><div id="mRight"> <input type="radio" id="radio1" name="radio" value="true"><label class='lb1' for="radio1">黑棋</label> <input type="radio" id="radio2" name="radio" value="false"><label class='lb2' for="radio2">白棋</label> <input type="button" id="pause" value="暫停游戲"> <input type="button" id="reStart" value="重新游戲"> </div> </div> css部分，用到css3部分功能，盒子陰影box-shadow，看起來立體一些，當然純屬個人愛好，用到鼠標經過hover，絕對定位position:relative等簡單布局屬性

body,input{padding:0;margin: 0;}input{background: none;border: 0;box-shadow: 3px 3px 5px 3px #eee;position: absolute;font-size: 14px;border-radius: 10px;-webkit-border-radius: 10px;-moz-border-radius: 10px;outline: none;border:none;}#main{width: 500px;height: 500px;position: relative;top:80px;left:50%;margin-left: -300px;}#canvas{box-shadow: 2px 2px 4px 8px #eee;}#mRight{width: 100px;height: 510px;box-shadow: 2px 2px 4px 8px #eee;position: absolute;top: 0;right: -100px;}#start,#pause,#reStart{width: 70px;height: 30px;line-height: 30px;}#start{top:25%;left: 15%;}.start_hover:hover{box-shadow: 3px 3px 5px 3px yellow;color: #fff;background: #000;cursor: pointer;}#pause{top:40%;left: 15%;cursor: pointer;display: none;}#pause:hover{box-shadow: 3px 3px 5px 3px yellow;color: #fff;background: #000;}#reStart{top:55%;left: 15%;cursor: pointer;display: none;}#reStart:hover{box-shadow: 3px 3px 5px 3px yellow;color: #fff;background: #000;}#radio1,#radio2{width: 12px;height: 12px;position: absolute;left: 10%;top:15%;}#radio2{left:50%;}label{font-size: 12px;position: absolute;left: 25%;top:14.8%;}.lb2{left:65%;} 上面寫法有些亂，兼容也是簡單測試一下，IE9測試都坑，所以目前支持谷歌，火狐，360，IE9以上瀏覽器。以上基礎結構代碼，相比很多人都懂，但接下來的javascript部分，我自己都要吐槽了。很糟糕，也很亂，不過我也是初學者，文章也是作為筆記用，記錄自己前端學習歷程，不喜勿噴！

首先就是前面變量的定義獲取

var me=true;//默認黑棋 var chessBoard=[];//記錄棋盤落子情況 var start=document.getElementById('start'); var pause=document.getElementById('pause'); var reStart=document.getElementById('reStart'); var radio=document.getElementsByName('radio'); var canvas=document.getElementById('canvas'); var context=canvas.getContext('2d'); //canvas畫布大小 canvas.width=450; anvas.height=510;
接下來是radio標簽值的獲取，然后給棋子me賦值，達到選擇顏色效果，返回值是作為開始游戲時候判斷使用，就是一定要選擇一個顏色。使用到radio的checked屬性，注意取出來的值是字符串，我把它直接復制me，悲劇。

function rd(){for(var i=0;i<radio.length;i++){ if(radio[i].checked){if(radio[i].value=='false'){me=false;}return 1;}}} 然后就是chessBoard數組初始化，起盤記錄是二維的，也就是根據xy坐標記錄棋盤上落子情況，使用for循環遍歷，簡單好用。

for(var i=0;i<15;i++){chessBoard[i]=[];for(var j=0;j<18;j++){<span style="white-space:pre"> </span>chessBoard[i][j]=0;//代表為空，可以落子}}
開始畫棋盤了，使用的是canvas的moveTo和lineTo畫路徑，為了避免交叉覆蓋，使用beiginPath和closePath閉合，這里說一句，慕課網使用棋盤是450*450的，我為了增加雙方棋子顏色，鬧著玩的，搞成450*510，但后來的算法上，坑，目前沒完成測試，期待今天搞定，畢竟算法什么的都來自網絡教程，我只是將它搞完整些。

//畫棋盤function drawGrid(){//描邊色context.strokeStyle='#bfbfbf';for(var i=0;i<15;i++){//15條豎線context.beginPath();context.moveTo(15+i*30,45);context.lineTo(15+i*30,465);context.stroke();context.closePath();}for(var i=0;i<18;i++){//17條橫線if(i==0||i==16){continue;}context.beginPath();context.moveTo(15,15+i*30);context.lineTo(435,15+i*30);context.stroke();context.closePath();}}
唯一需要注意注意的就是一定要先規定好畫線顏色，順序不能亂，不然沒效果。為了留出上下兩個空白，又搞不清楚間隔，只好增加橫線層數，但不畫最上最下兩條線。

花完棋盤就到了棋子的繪制，棋子為了有立體感，使用到漸變函數createRadialGradient有6個參數，分別是第一個圓圓心和半徑，第二個圓心和半徑，注意下圓心位置，半徑大小就可以了。

畫棋子有三個參數，分別為棋盤坐標xy的索引，棋子顏色判斷。

//畫棋子function drawChess(i,j,me){//me為黑白棋判斷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.beginPath();context.arc(15+i*30,15+j*30,13,0,2*Math.PI);context.closePath();context.fillStyle=gradient;context.fill();} 想要繪制出來，就必須規定顏色，canvas繪圖規矩，沒顏料怎么畫圖，是不？addColorStop有兩個參數，第一個參數表示選擇哪個圓，給他一種顏色接下來的src畫圓函數，5個參數分別是圓心坐標，半徑，弧度，直徑。

//鼠標點擊事件function onclick(t){canvas.οnclick=function(event){if(t){event=event||window.event;var x=event.offsetX;var y=event.offsetY;//為方便操作，轉換為棋盤索引 格子30*30var i=Math.floor(x/30);var j=Math.floor(y/30);//如果棋盤點為空,可以落子if(j==0||j==16){return;}else{if(chessBoard[i][j]==0){console.log(j);drawChess(i, j, me);//畫棋子chessBoard[i][j] = 1; //黑棋存儲為1if(me){chessBoard[i][j]=1;//黑棋存儲為{1,1}}else{chessBoard[i][j]=2//黑棋存儲為{2,2}}me=!me; }}}else{return;}}}

canvas支持javascript鼠標事件，但canvas本身作用是畫布，他是一個整體，為了達到控制canvas中內容，我們要對canvas畫布進行位置判斷，使用了offsetX和offsetY捕捉畫布坐標，然后為了方便前面索引，當然也是轉換整數，提高落點精確度。使用Math.floor向下取整，畫棋子之前，首先要判斷目標位置是否是空的，chessBoard[i][j]==0為空，chessBoard[i][j]==1，黑棋子chessBoard[i][j]==2，白棋子，記錄棋盤狀態，方便落子。

接下來就是完成右邊幾個按鈕觸發，同樣采用onclick事件控制，開始游戲按鈕控制，大致功能，點擊判斷是否選擇棋子，然后為雙方棋子顏色賦值，寫入chessBoard數組，因為me布爾值是不斷變化，所以中途暫停會改變棋子顏色，但雙方顏色是固定的，所以寫入數組是不錯選擇。接著就是radio選擇標簽隱藏，開始按鈕的失效，鼠標效果失效，繪制雙方選定棋子顏色。

start.οnclick=function(){if(rd()==1){for(var i=0;i<chessBoard.length;i++){var arr=chessBoard[i];for(var j=0;j<arr.length;j++){if(me){chessBoard[6][16]=1;chessBoard[6][0]=2;}else{chessBoard[6][16]=2;chessBoard[6][0]=1;}}}var lb=document.getElementsByTagName('label');for(var i=0;i<lb.length;i++){radio[i].style.display='none';lb[i].style.display='none';}play();drawChess(6, 16, me);//自己棋子drawChess(6, 0, !me);//電腦棋子pause.style.display='block';reStart.style.display='block';this.disabled='true';this.className='';}else{fontText('===>>',300,30,'50px',true);fontText('請選擇棋子 黑棋或者白棋',100,180,'20px',true);}}
暫停游戲按鈕，這比較簡單，暫停到繼續游戲過程，就是canvas畫布清除畫布，重新繪制過程，這里說明一下，不要想著刪除某一個圖形，canvas設定本身就是畫布，畫上去的東西，想要刪除？怎么刪，只能全部清除重新繪制。清除分全部和局部刪除，這里采用全部清除，然后根據之前保存好的落子情況數組，重新繪制，恢復現場。

暫停這里，彈出提示，文字也是canvas畫上去的，要暫停鼠標點擊事件，所以用一個函數包裹canvas點擊事件，暫停就停止點擊。

pause.οnclick=function(){if(pause.value=='暫停游戲'){draw_pause(true);pause.value='繼續游戲';}else{draw_pause(false);pause.value='暫停游戲';}} 重新游戲按鈕，功能，清空canvas，恢復棋子選擇，開始游戲按鈕，隱藏暫停游戲跟重新游戲按鈕，這時候可以改變棋子顏色，我并沒有清空radio的checked，之前選好的還保存著。 reStart.οnclick=function(){var width = canvas.width;var height = canvas.height;canvas.width = width;canvas.height = height;//清空chessBoard數組并初始化值為0,可以落子chessBoard=[];for(var i=0;i<15;i++){chessBoard[i]=[];for(var j=0;j<15;j++){chessBoard[i][j]=0;//代表為空，可以落子}}me=true;//恢復默認顏色pause.style.display='none';reStart.style.display='none';start.disabled='';start.className='start_hover'var lb=document.getElementsByTagName('label');for(var i=0;i<lb.length;i++){radio[i].style.display='block';lb[i].style.display='block';}} 幾個分拆出來的公用函數，感覺好差勁，自己封裝的，由于沒有經驗，技術不夠，都是寫到哪里，發現那些特性需要重復才獨立封裝出來，就一個字，坑。

//游戲初始化function init(){context.clearRect(0,0,canvas.width,canvas.height);//清空canvasdrawGrid();//繪制棋盤onclick(true);//點擊事件}
//文字繪制function fontText(f,x,y,p,t){if(t){context.fillStyle='rgba(252,249,249,0.8)';context.fillRect(0,0,450,510);}context.font = 'bold '+p+' consolas'; context.textAlign = 'left'; context.textBaseline = 'top'; context.strokeStyle = '#DF5326'; context.strokeText(f, x, y);}

//暫停游戲函數function draw_pause(s){if(s){fontText('暫停游戲',100,200,'64px',true);onclick(false)//清除點擊事件}else{context.clearRect(0,0,canvas.width,canvas.height);//清空canvas// 重新繪制棋盤棋子play();for(var i=0;i<chessBoard.length;i++){var arr=[];arr=chessBoard[i];for(var j=0;j<18;j++){if(arr[j]==1){drawChess(i, j, true);//黑棋}else if(arr[j]==2){drawChess(i, j, false);//白棋}}}}}

總結一下，html5和css3都是剛接觸不久，邊工作邊自學。我以前學過.net，但僅僅是基礎。canvas感覺還好，看到自己畫的東西能夠產生互動效果，特別是依靠網絡教程，抄襲出一個電腦對戰，心里特別激動。以后，會慢慢學習，摸索其他棋牌類或者類似打灰機的小游戲，加油！

效果圖

刪掉以前消極又有些失實的語言吧，當時為了發泄情緒用。當時這篇文章時候，在一個灰常小的外包公司，技術要求簡單，當時也缺乏學習方向，就發表此言，誤導一些人，抱歉！！

最后，祝大家能夠找到自己想要的工作，暫時找不到也不要灰心，每天堅持看教程，敲代碼，進步還是很大，貴在堅持！試想一下，如果你自己都無法堅持，努力上進，憑什么得到工作，憑什么要被人同情。

萬事開頭難，加油！

時間：2016-9-17 ?11:59:30

總結

以上是生活随笔為你收集整理的html5 css js前端开发五子棋UI篇--基于慕课网五子棋视频教程的随笔的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。