五子棋小遊戲學習——
有一個問題是，棋盤線的顏色，在canvas中，明明設置了灰色，但在我的預覽中還是黑色的，很重的顏色。
以下是復刻的源碼：
1
2
3
4
5
6五子棋遊戲
7
8
47
48
49
50--五子棋遊戲--
51
52
53
54 重新開始
55
56
57 悔棋
58
59
60
61 撤銷悔棋
62
63
64
65
66
67 412
413
以下是對源碼的分析與學習筆記：
五子棋小遊戲代碼詳解：
結構上：
一個h3用來放標題，給了個id同時為了後期就可以更改提示信息放進去。
放一塊畫布
放三個按鈕，分別是重來，悔棋，放棄悔棋。
樣式中：
一：box-shadow
Box-shadow值得注意：一個box同時用了兩個box-shadow;如下：
box-shadow: -2px -2px 2px #efefef, 5px 5px 5px #b9b9b9;
做一個案例徹底分析下：
box-shadow: -2px -2px 2px #f00, 5px 5px 5px #164A84;
為了看著明白，特地弄了對比明顯的顏色。
色值說明：#f00【紅色】, #164A84【藍色】
X，y值得說明：-2px -2px, 5px 5px；【這麼寫,陰影是在是坐上和右下】
角度和x,y取值的關係表：
x,y的取值
陰影所在的角度
有陰影的兩條邊是
總結：
+x,+y
右下角
右邊和下邊
從左上角開始想象：
+x,-y
右上角
右邊和上邊
X負責左右，正右負左；
-x,+y
左下角
左邊和下邊
Y負責上下，正下負上；
-x,-y
左上角
左邊和上邊
二、display：flex；
Flex瀏覽器支持情況很差，僅火狐和谷歌通用。Ie10還不支持，手機上的瀏覽器全軍覆沒。
兼容寫法：
display：-webkit-flex；
display： -moz-flex；
一個flexbox佈局是有一個伸縮容器（flex containers）和這個容器裡的伸縮內容（flex items）組成。
伸縮容器（flex containers）是一個HTML標籤元素，並且“display”屬性顯式的設置了“flex”屬性值。在伸縮容器中的所有子元素都會自動變成伸縮項目（flex items）。
三、Flex-direction：row（默認值）；
四、Justify-content： center；
注：
本代碼純屬學習與練習之用
源代碼及博文見掘金地址：https://juejin.im/post/594669d461ff4b006cf132ff
git地址：https://github.com/wj704/wj704.github.io/blob/master/five_game.html
關注何天，只發乾貨
閱讀更多 豌豆米米丨何天 的文章
