今天完成的事情：在老师的指导下制作了一个消除字母的游戏

明天计划的事情：今天没怎么做任务，明天要抓紧进度做任务15

遇到的问题：

说一下这个游戏的思路和一些关键点：

游戏的效果：按下开始游戏后，页面会有写着字母的方块一直向下掉落。按下键盘上相应的键，字母会被消除。

按下暂停按钮，游戏暂停。

开始按钮触发定义的beginGame()函数，暂停按钮触发pauseGame()函数。

beginGame()的构成： 

1. 生成字母块，利用setInterval() 以合适的周期，一直调用生成字母块的函数。

2. 字母块位移，利用setInterval() 以合适的周期，一直调用字母块位移的函数。

3.添加监听事件，利用addEventListener，点击键盘时，调用消除字母块的函数。

pauseGame()的构成：

1.利用clearInterval()取消beginGame()中的两个setInterval()，达到暂停效果。

2.利用removeEvenListener,取消监听。这样能避免在暂停时：点击键盘，也能触发消除字母块的函数。

//声明一个数组，装自动生成的字母块
var letters = [];
//准备两个定时器
var timer1 = null;
var timer2 = null;

function beginGame() {
  if (timer1)clearInterval(timer1);
    if (timer2)clearInterval(timer2);

    timer1 = setInterval(createRandomLetter, 700); //生产字母的速度
    timer2 = setInterval(moveLetter, 120); //移动的速度
    //添加相应的方法
    window.addEventListener("keydown", bitLetter);
}
//暂停游戏
function pauseGame() {
    if (timer1)clearInterval(timer1);
    if (timer2)clearInterval(timer2);
    //移除一相应的方法
    window.removeEventListener("keydown", bitLetter);
}

各个函数的具体实现：

1.生成字母块   createRandomLetter()

function createRandomLetter() {
    //随机生成A-Z
    var randomNum = parseInt(Math.random() * 26 + 65);
    var randomLetter = String.fromCharCode(randomNum);
    //创建出来一个字母块
    var letterDiv = document.createElement("div");
    //给这个字母块加上样式
    letterDiv.className = "letterDiv";
    //给字母块加上字母
    letterDiv.innerHTML = randomLetter;
    //字母块出现的位置随机
    //左边与右边各留200px
    var clientWidth = document.documentElement.clientWidth - 400;
    letterDiv.style.left = (200 + Math.random() * clientWidth) + "px";
    letterDiv.style.top = "0px";
    //将字母块放到body里面
    document.body.appendChild(letterDiv);
    //将字母块放到数组中
    letters.push(letterDiv);
}

2.移动字母块 

function moveLetter() {
    //遍历每个字母
    for (var i = 0; i < letters.length; i++) {
        var letterDiv = letters[i];
        //拿到当前字母距离上部的位置
        var oldTop = letterDiv.style.top;
        //继续向下走后的一个位置
        var nowTop = parseInt(oldTop) + 10;  //每次移动的距离
        /*在这里做一个判断，当字母块走到底部的时候，就自动消失
         *  1.拿到窗口的高度
         *  2.判断窗口的高度与现在的高度
         *  3.如果高度超过，就把当前的这个字母给移除了
         */
        var clientHeight = document.documentElement.clientHeight - 50;
        if (clientHeight < nowTop) {
            //从数组中删除
            letters.splice(i, 1);
            //从页面中删除
            letterDiv.parentNode.removeChild(letterDiv);
        }
        //在当前的位置继续向下走
        letterDiv.style.top = nowTop + "px";
    }
}

3.敲击字母

function bitLetter(e) {
    //拿到我们输入的字母
    var letter = String.fromCharCode(e.keyCode);
    //比对我们的字母数组中有没有这个字母，如果有这个字母，就把它删除掉
    for (var i = 0; i < letters.length; i++) {
        //拿到字母块(div元素)
        var letterDiv = letters[i];
        //拿到元素中的字母
      var letterHtml = letterDiv.innerHTML;
        //比如我按的字母 与页面上的字母是否相等
      if (letterHtml == letter) {
            //从数组中删除字母块
            letters.splice(i, 1);
            //从页面中删除字母块
            letterDiv.parentNode.removeChild(letterDiv);
            return;
        }
    }
}

收获：虽然是参照老师的代码写的，但是把它重新实现一遍，还是学习了很多东西的，尤其是js中的各种方法。