今天完成的事情：

1.给昨天的游戏添加了一些功能（记分；重置游戏；字母块：竖直方给了个加速度，水平方向添加随机初速度和加速度）  

2.完成了响应式导航栏

明天计划的事情：加快速度做任务15

遇到的问题：

看了赵灵杰同学的响应式导航栏的实现，只兼容chrome，这样不好。所以觉得还是应该用js来实现。

导航栏的效果：

屏幕宽度大于等于768px时：导航栏在右侧显示。

屏幕宽度小于768px时：导航栏隐藏，导航栏按钮显现。点击按钮，下拉栏展开。再次点击，下拉栏隐藏。

具体思路：

通过媒体查询 {

屏幕宽度大于大于768px时，导航栏一个class的样式。导航栏按钮 display: none;

屏幕宽度小于768px时，另一个class的样式(同时加上display: none;)。同时，导航栏按钮 display: inline-block;

}

点击按钮触发js函数 ：

var clickListFlag = false; //记录点击次数，用于标识导航栏下拉列表展开或者折叠
var nav = document.getElementById("nav");
//点击导航栏按钮触发该函数
function spreadList() {
    clickListFlag = !clickListFlag;
    if (clickListFlag) {
        nav.className = "list-appear"; //添加display: inline-block;
    } 
    else {
        nav.className = "list-hidden"; //添加display: none;
    }
}
//监听事件，监听屏幕宽度变化。
// 否则屏幕宽度改变时，导航栏的样式还是之前spreadList();给的类，样式不会随宽度变化而改变
window.addEventListener("resize", NavRecovery);

function NavRecovery() {
    //屏幕宽度大于768px时，恢复导航栏;
    if (window.screen.width >= 768)
        nav.className = "list-appear";
    //小于768px时，根据之前的状态让下来菜单展开或折叠，就如同官网那样
    else if (clickListFlag)  nav.className = "list-appear";
    else nav.className = "list-hidden";
}

收获：如上