五子棋小游戏学习——
有一个问题是,棋盘线的颜色,在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
关注何天,只发干货
