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

首先，頁(yè)面結(jié)構(gòu)，左邊是canvas顯示界面，右邊是一些控制按鈕，選擇棋子，開(kāi)始，暫停，重來(lái)

<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，看起來(lái)立體一些，當(dāng)然純屬個(gè)人愛(ài)好，用到鼠標(biāo)經(jīng)過(guò)hover，絕對(duì)定位position:relative等簡(jiǎn)單布局屬性

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%;} 上面寫(xiě)法有些亂，兼容也是簡(jiǎn)單測(cè)試一下，IE9測(cè)試都坑，所以目前支持谷歌，火狐，360，IE9以上瀏覽器。以上基礎(chǔ)結(jié)構(gòu)代碼，相比很多人都懂，但接下來(lái)的javascript部分，我自己都要吐槽了。很糟糕，也很亂，不過(guò)我也是初學(xué)者，文章也是作為筆記用，記錄自己前端學(xué)習(xí)歷程，不喜勿噴！

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

var me=true;//默認(rèn)黑棋 var chessBoard=[];//記錄棋盤(pán)落子情況 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畫(huà)布大小 canvas.width=450; anvas.height=510;
接下來(lái)是radio標(biāo)簽值的獲取，然后給棋子me賦值，達(dá)到選擇顏色效果，返回值是作為開(kāi)始游戲時(shí)候判斷使用，就是一定要選擇一個(gè)顏色。使用到radio的checked屬性，注意取出來(lái)的值是字符串，我把它直接復(fù)制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數(shù)組初始化，起盤(pán)記錄是二維的，也就是根據(jù)xy坐標(biāo)記錄棋盤(pán)上落子情況，使用for循環(huán)遍歷，簡(jiǎn)單好用。

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;//代表為空，可以落子}}
開(kāi)始畫(huà)棋盤(pán)了，使用的是canvas的moveTo和lineTo畫(huà)路徑，為了避免交叉覆蓋，使用beiginPath和closePath閉合，這里說(shuō)一句，慕課網(wǎng)使用棋盤(pán)是450*450的，我為了增加雙方棋子顏色，鬧著玩的，搞成450*510，但后來(lái)的算法上，坑，目前沒(méi)完成測(cè)試，期待今天搞定，畢竟算法什么的都來(lái)自網(wǎng)絡(luò)教程，我只是將它搞完整些。

//畫(huà)棋盤(pán)function drawGrid(){//描邊色context.strokeStyle='#bfbfbf';for(var i=0;i<15;i++){//15條豎線(xiàn)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條橫線(xiàn)if(i==0||i==16){continue;}context.beginPath();context.moveTo(15,15+i*30);context.lineTo(435,15+i*30);context.stroke();context.closePath();}}
唯一需要注意注意的就是一定要先規(guī)定好畫(huà)線(xiàn)顏色，順序不能亂，不然沒(méi)效果。為了留出上下兩個(gè)空白，又搞不清楚間隔，只好增加橫線(xiàn)層數(shù)，但不畫(huà)最上最下兩條線(xiàn)。

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

畫(huà)棋子有三個(gè)參數(shù)，分別為棋盤(pán)坐標(biāo)xy的索引，棋子顏色判斷。

//畫(huà)棋子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();} 想要繪制出來(lái)，就必須規(guī)定顏色，canvas繪圖規(guī)矩，沒(méi)顏料怎么畫(huà)圖，是不？addColorStop有兩個(gè)參數(shù)，第一個(gè)參數(shù)表示選擇哪個(gè)圓，給他一種顏色接下來(lái)的src畫(huà)圓函數(shù)，5個(gè)參數(shù)分別是圓心坐標(biāo)，半徑，弧度，直徑。

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

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

接下來(lái)就是完成右邊幾個(gè)按鈕觸發(fā)，同樣采用onclick事件控制，開(kāi)始游戲按鈕控制，大致功能，點(diǎn)擊判斷是否選擇棋子，然后為雙方棋子顏色賦值，寫(xiě)入chessBoard數(shù)組，因?yàn)閙e布爾值是不斷變化，所以中途暫停會(huì)改變棋子顏色，但雙方顏色是固定的，所以寫(xiě)入數(shù)組是不錯(cuò)選擇。接著就是radio選擇標(biāo)簽隱藏，開(kāi)始按鈕的失效，鼠標(biāo)效果失效，繪制雙方選定棋子顏色。

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('請(qǐng)選擇棋子 黑棋或者白棋',100,180,'20px',true);}}
暫停游戲按鈕，這比較簡(jiǎn)單，暫停到繼續(xù)游戲過(guò)程，就是canvas畫(huà)布清除畫(huà)布，重新繪制過(guò)程，這里說(shuō)明一下，不要想著刪除某一個(gè)圖形，canvas設(shè)定本身就是畫(huà)布，畫(huà)上去的東西，想要?jiǎng)h除？怎么刪，只能全部清除重新繪制。清除分全部和局部刪除，這里采用全部清除，然后根據(jù)之前保存好的落子情況數(shù)組，重新繪制，恢復(fù)現(xiàn)場(chǎng)。

暫停這里，彈出提示，文字也是canvas畫(huà)上去的，要暫停鼠標(biāo)點(diǎn)擊事件，所以用一個(gè)函數(shù)包裹c(diǎn)anvas點(diǎn)擊事件，暫停就停止點(diǎn)擊。

pause.οnclick=function(){if(pause.value=='暫停游戲'){draw_pause(true);pause.value='繼續(xù)游戲';}else{draw_pause(false);pause.value='暫停游戲';}} 重新游戲按鈕，功能，清空canvas，恢復(fù)棋子選擇，開(kāi)始游戲按鈕，隱藏暫停游戲跟重新游戲按鈕，這時(shí)候可以改變棋子顏色，我并沒(méi)有清空radio的checked，之前選好的還保存著。 reStart.οnclick=function(){var width = canvas.width;var height = canvas.height;canvas.width = width;canvas.height = height;//清空chessBoard數(shù)組并初始化值為0,可以落子chessBoard=[];for(var i=0;i<15;i++){chessBoard[i]=[];for(var j=0;j<15;j++){chessBoard[i][j]=0;//代表為空，可以落子}}me=true;//恢復(fù)默認(rèn)顏色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';}} 幾個(gè)分拆出來(lái)的公用函數(shù)，感覺(jué)好差勁，自己封裝的，由于沒(méi)有經(jīng)驗(yàn)，技術(shù)不夠，都是寫(xiě)到哪里，發(fā)現(xiàn)那些特性需要重復(fù)才獨(dú)立封裝出來(lái)，就一個(gè)字，坑。

//游戲初始化function init(){context.clearRect(0,0,canvas.width,canvas.height);//清空canvasdrawGrid();//繪制棋盤(pán)onclick(true);//點(diǎn)擊事件}
//文字繪制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);}

//暫停游戲函數(shù)function draw_pause(s){if(s){fontText('暫停游戲',100,200,'64px',true);onclick(false)//清除點(diǎn)擊事件}else{context.clearRect(0,0,canvas.width,canvas.height);//清空canvas// 重新繪制棋盤(pán)棋子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);//白棋}}}}}

總結(jié)一下，html5和css3都是剛接觸不久，邊工作邊自學(xué)。我以前學(xué)過(guò).net，但僅僅是基礎(chǔ)。canvas感覺(jué)還好，看到自己畫(huà)的東西能夠產(chǎn)生互動(dòng)效果，特別是依靠網(wǎng)絡(luò)教程，抄襲出一個(gè)電腦對(duì)戰(zhàn)，心里特別激動(dòng)。以后，會(huì)慢慢學(xué)習(xí)，摸索其他棋牌類(lèi)或者類(lèi)似打灰機(jī)的小游戲，加油！

效果圖

刪掉以前消極又有些失實(shí)的語(yǔ)言吧，當(dāng)時(shí)為了發(fā)泄情緒用。當(dāng)時(shí)這篇文章時(shí)候，在一個(gè)灰常小的外包公司，技術(shù)要求簡(jiǎn)單，當(dāng)時(shí)也缺乏學(xué)習(xí)方向，就發(fā)表此言，誤導(dǎo)一些人，抱歉！！

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

萬(wàn)事開(kāi)頭難，加油！

時(shí)間：2016-9-17 ?11:59:30

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。