项目总结：石头剪刀布小游戏

项目来源：GitHub-Baidu/ife/2015Summer

项目时间：2017.10.27-2017.10.28

项目内容：实现一个简单的网页游戏，玩家可以在网页上通过点击，选择要出的是石头、剪刀或是布，电脑也会随机出一个，然后判断胜负，并记录获胜总次数。

项目代码：GitHub : Game_RPS

项目成果：石头剪刀布网页小游戏

项目中遇到的问题：

问题一、在实现玩家选择的三张图片一排显示的时候，图片之间有孔隙。

采取的解决方案：在引入三个<img/>标签时，html中不添加回车，接连排列（最简单的取巧）。

<img class="choices"  id="shiTou" src="images/shitou.gif" alt="石头" /><img id="jiandao" class="choices"  src="images/jiandao.gif" /><img id="bu" class="choices"  src="images/bu.gif" />

搜索方案：如何消除img间的默认间隙? 

(1) 为什么img标签上下会有间隙？。

      根本原因在于img标签为inline元素，该元素默认垂直对齐方式为以父元素的baseline，但是展示时又是以bottomline为对齐方式，因此造成了上下两个img标签之间的间隙。
(2) 如何解决？
    ①img{ display:block};
       将其改变为block元素，但是该方法太过粗暴，相当于从根本上改变了img。
    ②img{vertical-align:top;}
       改变其垂直对齐方式
    ③div{font-size:0};
      把父元素的文字大小设置为0
   ④div{ margin-bottom:-3px };
        这个方法不推荐-->

问题二、JS-----for循环嵌套不同图片（0，1，2）的onclick事件，图片响应不正确。

参考链接：js初学者常遇到的一个for循环中onclick问题

解决方案：利用闭包把每个function里的i都变成不同的i。

问题三、最初进行布局时，希望用onclick事件绑定剪刀石头布选择图片的隐藏---display:none，发现无法使用setAttribute（“display”,"none"）。

解决方案：使用.style.display=none.原因是display是css属性，无法用setAttribute定义。此属性不继承。

    getAttribute()是HTML DOM的一个方法，用以获取HTML元素的属性（如id，name，type以及其他自定义属性）。

    style是HTML DOM的一个关于样式的对象，style对象的属性（如background，color，border等等）用以设置元素的样式。

扩展：参考链接：CSS中可以继承和不可以继承的属性

一、无法继承的属性有：

    display：规定元素应该生成的框的类型

    文本属性：

    vertical-align：垂直文本对齐

    text-decoration：规定添加到文本的装饰

    text-shadow：文本阴影效果

    white-space：空白符的处理

    unicode-bidi：设置文本的方向

    盒子模型的属性：width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left

    背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment

    定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

    生成内容属性：content、counter-reset、counter-increment

    轮廓样式属性：outline-style、outline-width、outline-color、outline

    页面样式属性：size、page-break-before、page-break-after

    声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

二、有继承性的属性

    1、字体系列属性

        font：组合字体

        font-family：规定元素的字体系列

        font-weight：设置字体的粗细

        font-size：设置字体的尺寸

        font-style：定义字体的风格

        font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。

        font-stretch：对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。

        font-size-adjust：为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。

     2、文本系列属性

        text-indent：文本缩进

        text-align：文本水平对齐

        line-height：行高

        word-spacing：增加或减少单词间的空白（即字间隔）

        letter-spacing：增加或减少字符间的空白（字符间距）

        text-transform：控制文本大小写

        direction：规定文本的书写方向

        color：文本颜色

    3、元素可见性：visibility

    4、表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout

    5、列表布局属性：list-style-type、list-style-image、list-style-position、list-style

    6、生成内容属性：quotes

    7、光标属性：cursor

    8、页面样式属性：page、page-break-inside、windows、orphans

    9、声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation

三、所有元素可以继承的属性

    元素可见性：visibility
    光标属性：cursor

四、内联元素可以继承的属性

    字体系列属性
    除text-indent、text-align之外的文本系列属性

五、块级元素可以继承的属性

    text-indent、text-align

扩展：setAttribute与setParameter

    Attribute就是dom节点自带的属性，例如html中常用的id、class、title、align等；
    Property是隶属于某个特定对象的变量//这个DOM元素作为对象，其附加的内容，例如childNodes、firstChild等

    用“.”获取的是style属性Property，我们可以给属性Property赋任何类型的值；
    而用getAttribute()获取的是特性Attribute，特性Attribute中只能存贮字符串。两者的数据结构不一致，导致返回的结果不一致。

问题四、margin属性的top，bottom，left，right可以用在哪一类的CSS元素上面？偏移的参照对象是什么？

参考链接：由浅入深漫谈margin属性

何谓参考线？参考线就是 margin 移动的基准点，此基准点相对于 box 是静止的。而 margin 的数值，就是 box 相对于参考线的位移量。

在 margin 中 top、right、bottom、left 的参考线并不一致为一类，而是分为了两类参考线

    top 以 containing block 的 content 上边或者垂直上方相连元素 margin 的下边为参考线垂直向下位移；
    left 以 containing block 的 content 左边或者水平左方相连元素 margin 的右边为参考线水平向右位移。
    right 以元素本身的 border 右边为参考线水平向右位移；
    bottom 以元素本身的border 下边为参考线垂直向下位移。
    top 和 left 都是以外元素为参考，而 right 和 bottom 以本元素为参考

问题五、line-height与height

line-height作用对象是一“行”元素，line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。
可以包含这些内容的最小框就是行框。

height是指块元素的高度。

问题六、剪刀石头布算法的优化

方法一：建立两层for循环，比较玩家与电脑的选择，然而这种方法循环嵌套次数多，不是最佳性能，并且代码量多。

方法二：做一个3*3数组
R[3，3]={{"平","你赢了","电脑赢"},{"电脑赢","平","你赢了"},{"你赢了","电脑赢","平"}};
然后直接输出Console.WriteLine(N[PC,player]); //c是电脑出手的数值,u是人出手的数值

方法三： 
x=(c-u+3)%3;
switch (x) {
case 0: Console.WriteLine("平"); break;
case 1: Console.WriteLine("电脑赢了"); break;
case 2: Console.WriteLine("你赢了"); break;
} 

项目心得：

1.将基础知识掌握扎实，理解原理，运用起来才能得心应手。

比如从正常流中脱离的position有哪些（absolute,fixed），会造成什么效果。比如使用float将内联块定位时，有哪些注意事项（宽度设置，是否需要clear）。

2.流程设置很重要

 开始布局的时候，只是简单在脑子里想了一个草图，没有进行分块规划。实现css样式的时候，在遇到内联元素block显示，块元素inline显示时，界面混乱，脑子也没有条理，无从下手。后来画好布局图，每块的内容与位置规划好，再进行css样式的设置，非常顺畅清晰。