html5 css js前端开发五子棋UI篇--基于慕课网五子棋视频教程的随笔

第一次写笔记，不知道带有别的网站是否违规，为了尊重别人果实，这次笔记就是基于慕课网五子棋教程，大家有兴趣可以去看一下。我自己增加了开始，暂停，继续，重新开始的按钮，由于是新手，最大目的在于实现功能，其它的以后再改，不喜勿喷！

首先，页面结构，左边是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.onclick=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.onclick=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.onclick=function(){if(pause.value=='暂停游戏'){draw_pause(true);pause.value='继续游戏';}else{draw_pause(false);pause.value='暂停游戏';}}

重新游戏按钮，功能，清空canvas，恢复棋子选择，开始游戏按钮，隐藏暂停游戏跟重新游戏按钮，这时候可以改变棋子颜色，我并没有清空radio的checked，之前选好的还保存着。

reStart.onclick=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感觉还好，看到自己画的东西能够产生互动效果，特别是依靠网络教程，抄袭出一个电脑对战，心里特别激动。以后，会慢慢学习，摸索其他棋牌类或者类似打灰机的小游戏，加油！

效果图

PS：本来想找网页前端实习工作，但现实有点残酷，而我又不知道我哪里做得不够，只是笼统的说，自己技术不够好，又没有实际工作经验，pc端网页布局还行，移动端基本不行。两年前，因为找不到.Net工作，转投电子商务，两年后，又想搞技术行业，结果，还是想回到软件开发行业。说实话，心里有些难受，初中开始就开始幻想成为软件工程师，虽然大学没学好，但心里总是放不下。

或许我的软件生涯会终止，我也不清楚下一步是经商还是换个技术岗位或者其它，我只知道，我已经不小了，我要多赚点钱改善父母现在生活，然后留点给自己结婚用。

我不止一次反省自己，想要客服懒散，不修边幅的毛病，但收效甚微。

无论如何，我都要面向显示，昂首前进，去追寻我那充满金钱味道的理想，也终于知道《重头再来》这首歌为何如何耐人寻味的原因了。

时间：2016-9-17  11:59:30