《三体》打字游戏，带你征战星际

在正文的第一句加入“我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！”

余幼时家贫，尚不知进取，每日沉迷于声色犬马之间，蹉跎岁月，而今已是而立之年，噫吁嚱，感叹时光飞逝，遂著此文。

游戏逻辑

屏幕中将会随机出现26个字母，点击对应字母消灭星系文明，点击空格暂停宇宙时间，点击enter键可以发射二向箔清空屏幕，初始化hp为5，二向箔数量为3，星系逃逸速度会随着关卡等级提升而加快

游戏界面

游戏界面分为属性展示区以及游戏内容区和控制按钮区，属性包括关卡，生命值，分数，二向箔次数等，

<div class="menu">
    <div class="state">
        <span>关卡</span><span class="statenum">1</span>
    </div>
    <div class="life">
        <span>生命</span><span class="lifenum">5</span>
    </div>
    <div class="score">
        <span>得分</span><span class="scorenum">0</span>
    </div>
    <div class="exb">
        <span>二向箔数量</span><span class="exbnum">3</span>
    </div>
</div>
<div class="control">
    <p>你是黑暗丛林中的猎人 目标是消灭每一个暴露的文明...</p>
    <div class="start btn">开始</div>
    <p>按下对应字母发射光粒<br/>按下空格停止宇宙时间 <br/>按下确定键发射二向箔</p>
</div>
<div class="message">
    <p>共消灭了 <span>0</span>个文明</p>
    <div class="restart btn">重新开始</div>
</div>
<div class="scene"></div>

游戏实现

采用类的方式去实现，首先需要初始化相关的游戏属性，比如生命值，分值，二向箔次数等等，还需要将dom绑定到类的属性上

 class Game {
    constructor() {
     ...初始化相关属性
    }
}
new Game()

• 随机生成字母星系，并添加移动动效和点击事件

// 通过charcode的方式对应字母的keycode，这里通过对象的方式保证生成的字母不重复

 do {
    randomNum=Math.floor(Math.random() * 26) + 65;
    randomLetter=String.fromCharCode(randomNum);
} while (this.obj[randomLetter]);

// 通过seterval添加向左移动的动画，动态改变left的值

for (let i in this.obj) {
                    let left=this.obj[i].randomLeft;
                    left+=this.speed;
                    this.obj[i].randomLeft=left;
                    this.obj[i].el.style.left=left + "px";
                    if (this.obj[i].randomLeft > 1500) {
                        this.scene.removeChild(this.obj[i].el);
                        delete this.obj[i];
                        this.createLetter();
                        this.life--;
                        this.lifenum.innerHTML=this.life;
                        if (this.life === 0) {
                            clearInterval(this.st);
                            this.finalScore.innerHTML=this.score;
                            this.message.classList.add("fadeIn");
                            this.flag=false;
                        }
                    }
                }

// 给body注册onkeydown事件，并判断e.keyCode是否命中生成的字母星系，命中则消除

这样，我们的游戏就完成了。