Flappy Bird总结
这周就正式开始写游戏了，看游戏的实例，一开始听思路好像挺简单的样子，最初很注重理解，没有急着敲，也没有完全照着视频跟着敲，因为那个视频只有几个板块的思路而已，没有讲这个游戏到底该怎么写，所以就算我想copy照着敲都没有这个机会…被坑死了…但是还是有很多收获的，就是能完全理解那个游戏的一些思路，一些效果也都实现了。最后改代码改的头皮发麻..我也不知道自己哪里来的胆子，还敢跑出去跟小伙伴吃火锅，虽然每次跟他们吃东西都没吃到过什么..因为吃的都是我不爱吃的，然后周日上午还敢睡懒觉…恩，熊心豹子胆，后来乖乖的改代码，也难为我师父了，要帮我改.. 毕竟JS水太深了，很多东西我看教程也都没有看到过的，很多概念也不理解的，语法更是丰富多样，很无助…接下来细数我的心路历程…先整理一下这个游戏的思路
FlappyBird这个游戏呢，有几个流程，先是标题的上下浮动，鸟煽动翅膀和草地的滚动移动效果，这是一些动态效果，用定时器配合数组，循环来实现。标题上下浮动，就写一个函数，定义一个变量Y 然后在函数里实现Y*=-1,将它与元素结合，就可以使垂直方向上位置移动，同时需要配合定时器来实现。鸟煽动翅膀，就需要利用数组，将不同状态的图片存于数组。然后下标++，将数组元素赋值于元素的属性src(也相当于直接改变它的值)，放在定时器使用的那个函数里就可以了。再给start按钮添加点击事件，这个点击事件还是有点点重要的，需要把之前隐藏的东西显现（用display : none隐藏）display ：block，将标题部分全部隐藏，清除标题的那个定时器【清除定时器十分重要，不然会卡死】。再将鸟插入界面【插入的那个语法很重要】，调用鸟自由落体的函数，调用它煽动翅膀的函数。
关于鸟的部分主要是自由落体和煽动翅膀，插入界面的时候用到了document.createElement()的用法，有点点复杂，还有this对象，用这个给鸟来设置它的css的属性，在写自由落体的时候遇到了一些问题，一直报null或者not define ，子节点也出现了问题，还有offsettop返回值不是int类型 这都是因为对js语法还没摸熟，这里的思路就是，写一个函数，定义一个下落的速度，但是需要让它慢慢变大（ispeedY+=0.6），然后结合它和鸟的offsetop赋值给元素的top属性改变鸟的位置，但是在鸟在页面顶部和底部的时候要用if语句判断，改变一下这个下落速度，并且要判断当鸟落地的时候，煽动翅膀和自由下落的定时器都要清除。这个时候的煽动就不同于之前的那个煽动，这里的煽动是根据下落速度决定它是如何的一个姿态，但是这个速度的改变需要结合鸟的点击事件来的。鸟的重点就是点击它，它需要飞，这个点击事件放在了start的点击事件里了，这个时候给下落速度赋值的时候一定要注意要“对象.变量名”不然会报错not define 。
碰撞检测，这个主要是计算，比较两个元素的一些参数，此处直接放上函数，
我把碰撞检测放在land草地的那个定时器里了用了，然后调用函数判断鸟怎么样算死了，只设置了三种情况，碰到上面的管子，碰到下面的管子，掉地上了这三种。然后要注意调用函数的时候，bird是没有offsetop之类的属性的，它的div才有，所以要写 bird.div.offsetop才可以，不然检测不到鸟，那么就成了无敌版的了（笑哭。根本撞不上管子…）
很烦人的重点来了，就是管子，其实我的管子写的蛮丑的，感觉是background-repeat的部分没弄好，管子需要写随机数这个部分，随机生成，这样就会做出那个高高低低错落有致的管子了，随机数的函数为
要注意（max-min+1）这个部分，如果没有加一那么可能就随机不到max，随机数也就不完整了。管子这个部分特别纠结，好多都是自己写的，所以弄了很久，就那个定时器就弄了半天，要且要想清楚你是要把管子放到哪里，是body还是背景里，放到body里就可以直接写 document.body.appendChild(guanzi); 但是如果放到背景里，可以使用一种方法：定义一个对象，让它获取背景的id，然后 对象.appendChild()；后续很多地方都应该这样做，在弄管子这个部分也要注意一些小细节，要注意全局变量和局部变量（没想到这个鬼东西也要注意这个…）然后如果在别的文件里使用了变量，需要再定义声明一次，不然not define 。管子的生成和移动还是有点难的，自己定义一个leftdata属性，然后让它减一，但是注意 这个是百分比的数据，这样移动起来才比较自然，然后一根柱子如果移动到了页面外面，记得要移除它，不然就堆积起来卡死了。再配合定时器的使用。
最后也就是死亡之后弹出gameover面板以及ok按钮，给ok按钮点击事件，即点击重新刷新回到页面初始状态重来
这个游戏很多东西没有实现，比如鸟死了之后我的一些定时器没有清除，管子依旧在动，积分面板没能实现，不知道代码有啥问题，因为时间不够就没过多纠结，将它注释掉了，所以这次任务其实是有一些差劲的。
总结百度出来的一些知识点：
1.定时器：js 定时器有以下两个方法：
- setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
- setTimeout() ：在指定的毫秒数后调用函数或计算表达式。
2. => 语法的理解：=>是es6语法中的arrow function
举例：(x) => x + 6
相当于function(x){
return x + 6;
}
3.js的各种位置：
4. document.createElement()的用法：document.createElement()是在对象中创建一个对象，要与appendChild() 或 insertBefore()方法联合使用。其中，appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore()方法在节点的子节点列表任意位置插入新的节点。
5. querySelector 和 querySelectorAll方法 : querySelector返回的是一个对象，querySelectorAll返回的一个集合(NodeList)。
获取页面I属性D为test的元素：
- document.getElementById("test");
- //or
- document.querySelector("#test");
- document.querySelectorAll("#test")[0];
获取页面class属性为”red”的元素:
- document.getElementsByClassName('red')
- //or
- document.querySelector('.red')
- //or
- document.querySelectorAll('.red')
6.this对象 ：在JavaScript中this表示函数运行的时候自动生成的一个内部对象，只能在函数内部使用。http://blog.csdn.net/woshinannan741/article/details/51146889 这个帖子写的蛮好的，蛮容易理解的。时间不太够…就不详细写自己的理解了…
7.js冒号的用法 : 主要是 switch语句分支 ?:三元表达式的false 声明对象直接量的成员 声明标签 感觉冒号加逗号 跟等号加分号是差不多的，其实我基本都是根据字体的颜色来判断这样的语法正确不正确…
8.帧动画：帧动画就是在连续的关键帧中分解动画动作，也就是在时间轴上的每帧上逐帧绘制不同的内容，使其连续播放成动画。常见的帧动画方式有GIF，CSS3 animation和js。使用GIF和CSS3 animation的不足是不能灵活地控制动画的暂停和播放(比如点击暂停)，也不能灵活地捕捉到动画完成的事件，另外在动画扩展性上js更好。 js实现帧动画的有几种方法。一是用一个img标签去承载图片，定时改变img的src属性，这样显然不好。第二种是把所有动画关键帧绘制在一张图片里，把图片作为元素的background-image，定时改变元素的background-position(雪碧图)。对于只是位移的动画，可以通过js直接改变元素的left或者top值 第二种用的多一些
9. console.log()调试用法
下周任务是学习bootstrap框架，跟之前的响应式差不多…然后就不禁想起之前响应式的噩梦…差点没弄死我那个鬼东西，还没看到什么比较好的文本的教程，在慕课上看到了视频，不知道讲的怎么样，想先看看再说。然后准备先看教程，然后跟着敲一下代码，看到了几个H5和CSS3结合的动态效果很好看，打算看那个视频学一下，跟着敲一下，因为好久没写网页了，手有点生了都。这周想要多放一点时间在常规的学习上面，感觉高数被我荒废掉了上课的时候做了一下题目，完全没有把握，所以打算先把书好好看一下，再把买的题目做一下。再就是英语，把quiz一口气做完，不要再拖延。把书上的题目做一个单元的，因为考试都是原题，所以背一下单词，做一下那个填词和翻译，定个小目标，先搞完一个单元的。除此之外，计算机基础已经写完了一页了，回去早了一点点，然后做了半个小时，感觉也学到了一些东西，一些关于计算机的概念的东西，听起来没啥用，可以用来跟同学ob… 显得比较厉害，哈哈哈。
关于生活上的事情..多吃几次食堂..穷到不敢买衣服买鞋子过冬了..收到了亲爱的灿灿的信，想起来之前给闺蜜写的信都没有整理好寄出去，所以不要再拖延，赶快寄出去~~耶耶 听起来很完美的样子
Flappy Bird总结
这周就正式开始写游戏了，看游戏的实例，一开始听思路好像挺简单的样子，最初很注重理解，没有急着敲，也没有完全照着视频跟着敲，因为那个视频只有几个板块的思路而已，没有讲这个游戏到底该怎么写，所以就算我想copy照着敲都没有这个机会…被坑死了…但是还是有很多收获的，就是能完全理解那个游戏的一些思路，一些效果也都实现了。最后改代码改的头皮发麻..我也不知道自己哪里来的胆子，还敢跑出去跟小伙伴吃火锅，虽然每次跟他们吃东西都没吃到过什么..因为吃的都是我不爱吃的，然后周日上午还敢睡懒觉…恩，熊心豹子胆，后来乖乖的改代码，也难为我师父了，要帮我改.. 毕竟JS水太深了，很多东西我看教程也都没有看到过的，很多概念也不理解的，语法更是丰富多样，很无助…接下来细数我的心路历程…先整理一下这个游戏的思路
FlappyBird这个游戏呢，有几个流程，先是标题的上下浮动，鸟煽动翅膀和草地的滚动移动效果，这是一些动态效果，用定时器配合数组，循环来实现。标题上下浮动，就写一个函数，定义一个变量Y 然后在函数里实现Y*=-1,将它与元素结合，就可以使垂直方向上位置移动，同时需要配合定时器来实现。鸟煽动翅膀，就需要利用数组，将不同状态的图片存于数组。然后下标++，将数组元素赋值于元素的属性src(也相当于直接改变它的值)，放在定时器使用的那个函数里就可以了。再给start按钮添加点击事件，这个点击事件还是有点点重要的，需要把之前隐藏的东西显现（用display : none隐藏）display ：block，将标题部分全部隐藏，清除标题的那个定时器【清除定时器十分重要，不然会卡死】。再将鸟插入界面【插入的那个语法很重要】，调用鸟自由落体的函数，调用它煽动翅膀的函数。
关于鸟的部分主要是自由落体和煽动翅膀，插入界面的时候用到了document.createElement()的用法，有点点复杂，还有this对象，用这个给鸟来设置它的css的属性，在写自由落体的时候遇到了一些问题，一直报null或者not define ，子节点也出现了问题，还有offsettop返回值不是int类型 这都是因为对js语法还没摸熟，这里的思路就是，写一个函数，定义一个下落的速度，但是需要让它慢慢变大（ispeedY+=0.6），然后结合它和鸟的offsetop赋值给元素的top属性改变鸟的位置，但是在鸟在页面顶部和底部的时候要用if语句判断，改变一下这个下落速度，并且要判断当鸟落地的时候，煽动翅膀和自由下落的定时器都要清除。这个时候的煽动就不同于之前的那个煽动，这里的煽动是根据下落速度决定它是如何的一个姿态，但是这个速度的改变需要结合鸟的点击事件来的。鸟的重点就是点击它，它需要飞，这个点击事件放在了start的点击事件里了，这个时候给下落速度赋值的时候一定要注意要“对象.变量名”不然会报错not define 。
碰撞检测，这个主要是计算，比较两个元素的一些参数，此处直接放上函数，
我把碰撞检测放在land草地的那个定时器里了用了，然后调用函数判断鸟怎么样算死了，只设置了三种情况，碰到上面的管子，碰到下面的管子，掉地上了这三种。然后要注意调用函数的时候，bird是没有offsetop之类的属性的，它的div才有，所以要写 bird.div.offsetop才可以，不然检测不到鸟，那么就成了无敌版的了（笑哭。根本撞不上管子…）
很烦人的重点来了，就是管子，其实我的管子写的蛮丑的，感觉是background-repeat的部分没弄好，管子需要写随机数这个部分，随机生成，这样就会做出那个高高低低错落有致的管子了，随机数的函数为
要注意（max-min+1）这个部分，如果没有加一那么可能就随机不到max，随机数也就不完整了。管子这个部分特别纠结，好多都是自己写的，所以弄了很久，就那个定时器就弄了半天，要且要想清楚你是要把管子放到哪里，是body还是背景里，放到body里就可以直接写 document.body.appendChild(guanzi); 但是如果放到背景里，可以使用一种方法：定义一个对象，让它获取背景的id，然后 对象.appendChild()；后续很多地方都应该这样做，在弄管子这个部分也要注意一些小细节，要注意全局变量和局部变量（没想到这个鬼东西也要注意这个…）然后如果在别的文件里使用了变量，需要再定义声明一次，不然not define 。管子的生成和移动还是有点难的，自己定义一个leftdata属性，然后让它减一，但是注意 这个是百分比的数据，这样移动起来才比较自然，然后一根柱子如果移动到了页面外面，记得要移除它，不然就堆积起来卡死了。再配合定时器的使用。
最后也就是死亡之后弹出gameover面板以及ok按钮，给ok按钮点击事件，即点击重新刷新回到页面初始状态重来
这个游戏很多东西没有实现，比如鸟死了之后我的一些定时器没有清除，管子依旧在动，积分面板没能实现，不知道代码有啥问题，因为时间不够就没过多纠结，将它注释掉了，所以这次任务其实是有一些差劲的。
总结百度出来的一些知识点：
1.定时器：js 定时器有以下两个方法：
- setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
- setTimeout() ：在指定的毫秒数后调用函数或计算表达式。
2. => 语法的理解：=>是es6语法中的arrow function
举例：(x) => x + 6
相当于function(x){
return x + 6;
}
3.js的各种位置：
4. document.createElement()的用法：document.createElement()是在对象中创建一个对象，要与appendChild() 或 insertBefore()方法联合使用。其中，appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore()方法在节点的子节点列表任意位置插入新的节点。
5. querySelector 和 querySelectorAll方法 : querySelector返回的是一个对象，querySelectorAll返回的一个集合(NodeList)。
获取页面I属性D为test的元素：
- document.getElementById("test");
- //or
- document.querySelector("#test");
- document.querySelectorAll("#test")[0];
获取页面class属性为”red”的元素:
- document.getElementsByClassName('red')
- //or
- document.querySelector('.red')
- //or
- document.querySelectorAll('.red')
6.this对象 ：在JavaScript中this表示函数运行的时候自动生成的一个内部对象，只能在函数内部使用。http://blog.csdn.net/woshinannan741/article/details/51146889 这个帖子写的蛮好的，蛮容易理解的。时间不太够…就不详细写自己的理解了…
7.js冒号的用法 : 主要是 switch语句分支 ?:三元表达式的false 声明对象直接量的成员 声明标签 感觉冒号加逗号 跟等号加分号是差不多的，其实我基本都是根据字体的颜色来判断这样的语法正确不正确…
8.帧动画：帧动画就是在连续的关键帧中分解动画动作，也就是在时间轴上的每帧上逐帧绘制不同的内容，使其连续播放成动画。常见的帧动画方式有GIF，CSS3 animation和js。使用GIF和CSS3 animation的不足是不能灵活地控制动画的暂停和播放(比如点击暂停)，也不能灵活地捕捉到动画完成的事件，另外在动画扩展性上js更好。 js实现帧动画的有几种方法。一是用一个img标签去承载图片，定时改变img的src属性，这样显然不好。第二种是把所有动画关键帧绘制在一张图片里，把图片作为元素的background-image，定时改变元素的background-position(雪碧图)。对于只是位移的动画，可以通过js直接改变元素的left或者top值 第二种用的多一些
9. console.log()调试用法
下周任务是学习bootstrap框架，跟之前的响应式差不多…然后就不禁想起之前响应式的噩梦…差点没弄死我那个鬼东西，还没看到什么比较好的文本的教程，在慕课上看到了视频，不知道讲的怎么样，想先看看再说。然后准备先看教程，然后跟着敲一下代码，看到了几个H5和CSS3结合的动态效果很好看，打算看那个视频学一下，跟着敲一下，因为好久没写网页了，手有点生了都。这周想要多放一点时间在常规的学习上面，感觉高数被我荒废掉了上课的时候做了一下题目，完全没有把握，所以打算先把书好好看一下，再把买的题目做一下。再就是英语，把quiz一口气做完，不要再拖延。把书上的题目做一个单元的，因为考试都是原题，所以背一下单词，做一下那个填词和翻译，定个小目标，先搞完一个单元的。除此之外，计算机基础已经写完了一页了，回去早了一点点，然后做了半个小时，感觉也学到了一些东西，一些关于计算机的概念的东西，听起来没啥用，可以用来跟同学ob… 显得比较厉害，哈哈哈。
关于生活上的事情..多吃几次食堂..穷到不敢买衣服买鞋子过冬了..收到了亲爱的灿灿的信，想起来之前给闺蜜写的信都没有整理好寄出去，所以不要再拖延，赶快寄出去~~耶耶 听起来很完美的样子
（发现插图插不上来...所以一些地方就没有了...）