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以上浏览器。以上基础结构代码，相比很多人都懂，但接下来的javascr