canvas:畫布可以被js操作 ，畫板=>圖片(尺寸數據，我們需要修改它的尺寸，不是修改樣式)
繪製環境
如何繪製：
提筆到某個位置
描述繪製環境
開始繪製
提筆
querySelector:document對象上具有的一個辦法，id和class都可以獲取
選擇滿足條件的第一個元素。
getElementsByClassName效率高
製作流程：
1.繪製棋盤
（1）.繪製直線的操作
2.繪製旗子
（1）如何繪製
（2）如何點擊下棋
（3）交換手
（4）落子點的問題(必須下到交叉點),自瞄系統
（5）友軍判斷，下過棋的地方不下,記錄棋盤的狀態
3.遊戲勝負判斷
棋盤狀態
五子棋勝負判斷的核心原理：
當前下下去的棋子參與到勝負判斷中，此時下棋的人要麼贏要麼不贏
一條線上分爲左右顏色連續累加超過5，那麼這個顏色就獲勝了。
4.人工智能機器下棋
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>五子棋</title>
<style type="text/css">
body{
margin: 0;
background-color: #ccc;
}
#canvas{
display: block;
margin:20px auto;
background-color: #fff;
}
</style>
</head>
<body>
<canvas id="canvas" width="450" height="450"></canvas>
</body>
<script type="text/javascript">
var canvas = document.querySelector('#canvas');//獲取元素的操作
var ctx = canvas.getContext('2d');//獲取繪製環境
var chesscolor = ['black','white'];
var step = 0;
var maparr = [];
var mode = [//判斷模式
[1,0],//水平
[0,1],//豎直
[1,1],//右下
[1,-1],//左下
];
for(var i=0;i<14;i++){
maparr[i]=[];
for(var j=0;j<14;j++){
maparr[i][j]=0;
}
}
for(var i=1;i<15;i++){
ctx.moveTo(30*i,30);
ctx.lineTo(30*i,420);//繪製表格操作
ctx.moveTo(30,30*i);
ctx.lineTo(420,30*i);
}
ctx.stroke();//將之前的所有的路徑全部繪製一次,描輪廓畫法
function drawchess(color,x,y){//傳入一個顏色代碼，繪製一個棋子
//開始繪製
ctx.fillStyle=color;//填充顏色的修改
ctx.beginPath();//提筆操作
ctx.arc(x,y,15,0,Math.PI*2,false);//描述畫圓座標,圓心座標軸半徑,起始點，度數
ctx.fill();//填充
ctx.stroke();
}
//點擊有棋子
canvas.addEventListener('click',function(e){
var px = Math.floor((e.offsetX+15)/30)-1;//自瞄系統
var py = Math.floor((e.offsetY+15)/30)-1;
//靠近邊緣的不能下棋
if((px+1)*30==0 || (py+1)*30==0 || (px+1)*30==450 || (py+1)*30==450){
return;
}
//判斷是否下過棋
if(maparr[px][py]==0){
drawchess(chesscolor[step%2],(px+1)*30,(py+1)*30);
maparr[px][py]=chesscolor[step%2];
//下完了算勝負
checkWin(chesscolor[step%2],px,py,mode[0]);
checkWin(chesscolor[step%2],px,py,mode[1]);
checkWin(chesscolor[step%2],px,py,mode[2]);
checkWin(chesscolor[step%2],px,py,mode[3]);
step = step+1;
}
});
function checkWin(color,x,y,mode){//要麼黑，要麼白，要麼沒贏
var count = 0;
for(var i=1;i<5;i++){
if(maparr[x+i*mode[0]]){
if(maparr[x+i*mode[0]][y+i*mode[1]]==color){
count++;
}else{
break;
}
}
}
for( var i=1;i<5;i++){
if(maparr[x-i*mode[0]]){
if(maparr[x-i*mode[0]][y-i*mode[1]]==color){
count++;
}else{
break;
}
}
}
if(count>=4){
alert(color,'win');
}
}
</script>
</html>