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.ο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篇--基于慕课网五子棋视频教程的随笔相关推荐

HTML5,CSS,JS前端常见知识面试题
css中单位px,em,rem的区别 (1)px 是长度单位,它是相对于显示器屏幕分辨率而言的.比较稳定和精确,但在浏览器中放大或缩放浏览器页面时会出现页面混乱的情况. (2)em 是相对长度单位.e ...
Html css是前端吗,HTML5 CSS3 Web前端开发
HTML5 CSS3 Web前端开发语音编辑锁定讨论上传视频 <HTML5+CSS3 Web前端开发>是2018年5月清华大学出版社出版的图书,作者是唐四薪[1] . 书中的图片 ...
熟悉html css,编写HTML和CSS的前端开发中不一定熟悉JavaScript
原标题:编写HTML和CSS的前端开发中不一定熟悉JavaScript 作为前端开发人员,HTML.css.Java是必备的知识技能,但是现实工作工作中并非所有的前端都知道Java,根据外国一个网站的 ...
陈本峰：HTML5跨屏前端框架Amaze UI的开源之道
编者按 \\ 对陈本峰的采访,源于技术圈内的一个饭局,虽然大家对他的云适配创业经历很感兴趣,但是他却在自我介绍中反复提到了"开源"和"Amaze UI",言谈举 ...
html框架有什么作用,使用HTML5+CSS+JS框架有那些好处
使用HTML5+CSS+JS框架有那些好处 2017-12-08 相信很多程序猿朋友都用过框架,不过你是否知道你用的是HTML框架.CSS框架还是JS框架,其实这都不重要,重要的是使用框架的目的是什么 ...
#3使用html+css+js制作网页番外篇使用python flask 框架 (I)
#3使用html+css+js制作网页番外篇使用python flask 框架(I 第一部) 0. 本系列教程 1. 准备 a.python b. flask c. flask 环境安装 d. f ...
html5web前段页面,HTML5+CSS3 Web前端开发
HTML5+CSS3 Web前端开发编辑锁定讨论上传视频 <HTML5+CSS3 Web前端开发>是2018年5月清华大学出版社出版的图书,作者是唐四薪.ISBN为97873024 ...
js前端开发案例教程之DOM购物车（动手实践：购物车）
js前端开发案例教程之 DOM购物车(动手实践:购物车) html和css <!DOCTYPE html> <html><head><meta charse ...
《HTML5+CSS3+JavaScript前端开发从零开始学（视频教学版）》简介
#好书推荐##好书奇遇季#<HTML5+CSS3+JavaScript前端开发从零开始学(视频教学版)>,京东当当天猫都有发售.定价69元.本书配套本书配套示例源代码.PPT课件与同步教学 ...

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

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

最新文章

热门文章