SOURCE

var lexicons = ['空调', '面粉', '口红', '白色', '皮影', '铅笔', '足球', '酱油', '自行车', '大米', '香水', '兰色', '评剧', '橡皮', '篮球', '牛奶', '电视机', '馒头', '雨伞', '红色', '京剧', '书包', '排球', '豆浆', '冰箱', '油条', '餐巾纸', '绿色', '话剧', '眼镜', '乒乓球', '啤酒', '洗衣机', '面条', '超市', '黄色', '小品', '音响', '网球', '象棋', '电风扇', '蛋糕', '电话', '黑色', '相声', '羽毛球', '围棋', '饮水机', '苹果', '围裙', '紫色', '舞蹈', '风筝', '杂技', '军棋', '电脑', '香蕉', '手机', '灰色', '武术', '蜡烛', '魔术', '跳棋', '笔', '书', '牙膏', '牙刷', '剪刀', '毛巾', '肥皂', '淋浴露', '护肤品', '筷子', '碗', '水杯', '鸡犬不宁', '鸡飞狗跳', '三长二短', '一分为二', '虎头蛇尾', '纸上谈兵', '张牙舞爪', '金鸡独立', '嚎嚎大哭', '抓耳挠腮', '挥汗如雨', '手舞足蹈', '眉飞色舞', '五体投地', '心口如一', '牛头马面', '大摇大摆', '一手遮天', '一无所有', '狐狸', '老虎', '大象', '海豚', '恐龙', '蟑螂', '蝴蝶', '北极熊', '熊猫', '长颈鹿', '蝎子', '鸭子', '金鱼', '蜈蚣', '狮子', '孔雀', '猩猩', '大灰狼', '猴子', '小鸡', '老鹰', '白马', '螃蟹', '镜子', '电梯', '台灯', '手套', '灯笼', '火锅', '凳子', '手电筒', '温度计', '熨斗', '雨衣', '菜刀', '灭火器', '床', '香皂', '帽子', '纽扣', '皮鞋', '红领巾', '袜子', '雨鞋', '水笼头', '门', '杯子', '日光灯', '勺子', '茶叶', '围巾', '脸盆', '打印机', '日历', '青蛙', '蜻蜓', '鸵鸟', '山羊', '蜗牛', '萤火虫', '猫', '猫头鹰', '刺猬', '燕子', '虾', '马蜂', '螳螂', '蚕', '蚂蚁', '小白兔', '金钱豹', '蟋蟀', '慢跑', '登山', '跳远', '爬山', '吃饭', '喝茶', '唱歌', '跳舞', '跑步', '游泳', '高瞻远瞩', '拍皮球', '踢毽子', '打乒乓', '踢足球', '去徒步', '看电视', '做饭', '炒菜', '逛街', '读书', '看报纸', '做手工', '走路', '单脚跳', '拥抱', '握手', '穿衣服', '鞋子', '戴帽子', '跳高', '跳绳', '看书', '打蓝球', '打羽毛球', '听歌', '骑自行', '开车', '睡觉', '喝水', '写作业', '听音乐', '洗碗', '洗衣服', '打电话', '说笑话', '画画', '弹琵琶', '骑马', '坐车', '聊天', '放风筝', '敲门', '推门', '矿泉水', '瓜子', '冰淇淋', '玉米', '电冰箱', '吹风机', '电筒', '枕头', '被子', '刷牙', '尿布', '沙发', '拖鞋', '猪', '兔子', '蛇', '蝌蚪', '狗急跳墙', '玫瑰花', '狗熊', '啼笑皆非', '下劈', '东施效颦', '仙人掌', '曹操', '芭蕾舞', '鹤立鸡群', '满天星', '洗脸盆', '东倒西歪', '捶胸顿足', '山盟海誓', '赵飞燕', '圆明园', '鸟巢', '狗屁不通', '电熨斗', '柳树', '海鸥', '回眸一笑', '赵本山', '向日葵', '悬梁刺股', '方便面', '后踢腿', '金针菇', '画蛇添足', '孙悟空', '洗衣粉', '棉花糖', '牛仔裤', '痛哭流涕', '老婆饼', '电饭锅', '愁眉苦脸', '臭美', '淘宝', '坐井观天', '键盘', '蜡笔小新', '龙飞凤舞', '洗衣液', '加湿器', '张艺谋', '戒指', '烤鸭', '守株待兔', '灰太狼', '嬉皮笑脸', '西瓜', '投影仪', '连衣裙', '目不转睛', '大白菜', 'DNA', '狄仁杰', '松鼠', '月亮', '虎背熊腰', '郁金香', '圆珠笔', '茄子', '星座', '如来佛祖', '庆丰包子', '西红柿', '兰博基尼', '泳衣', '红太狼', '庞然大物', '烤地瓜', '大公鸡', '博士', '张无忌', '破涕为笑', '企鹅', '京东商城', '杨树', '东方不败', '葵花宝典', '网购', '闻鸡起舞', '柚子', '儿童节', '天安门', '掩耳盗铃', '一瘸一拐'];
    var store = [];
    var timer = null;
    var TIME = 180;

    window.onload = function () {
      let time = TIME, flag = false;

      const $l = document.getElementById('lex'),
        $t = document.getElementById('time'),
        $i = document.getElementById('ing'),
        $p = document.getElementById('pass');
        
      function getLex(bl) {
        if (!flag) return;
        let _lex = $l.innerText;
        if (_lex && _lex !== '你比划我来猜') {
          let li = document.createElement('li');
          li.innerText = _lex;
          if (bl) li.className = 'true';
          $p.appendChild(li);
        }
        if (!lexicons.length) {
          lexicons = store;
          store = [];
        };
        let len = lexicons.length;
        let num = Math.floor(Math.random() * len);
        let lex = lexicons.splice(num, 1)[0];
        store.push(lex);
        $l.innerText = lex;
      };

      function times(time) {
        let ing = (1 - time / TIME) * 100 + '%';
        $i.style.top = ing;
      }

      function reset() {
        flag = true;
        time = TIME;
        $t.innerText = '计时开始';
        $t.className = 'will';
        $i.style.top = '0%';
        $p.innerHTML = '';
        $l.innerText = '';
        $l.style.backgroundColor = 'red';
        $l.style.color = 'white';
        clearInterval(timer);
        getLex();
      }
      
      function over() {
        clearInterval(timer);
        $l.style.backgroundColor = 'white';
        $l.style.color = 'red';
        $l.innerText = 'Time Over';
        $t.className = '';
      }

      function start() {
        reset();
        timer = setInterval(() => {
          time--;
          $t.innerText = time;
          times(time);
          $t.className = '';
          if (time < 60) $t.className = 'will';
          if (time < 10) $t.className = 'ing';
          if (time < 1) over();
        }, 1000);
      }

      document.onkeypress = e => {
        let k = e.keyCode;
        switch (k) {
          case 13:
            start();
            break;
          case 32:
            getLex();
            break;
          case 98:
            getLex(true);
            break;
          default:
            break;
        }
      };
    }

<div class="box b0">
  <span id="lex">你比划我来猜</span>
  <div id="ing"></div>
  <div id="time"></div>
  <ul id="pass"></ul>
</div>

*{margin:0;padding:0}
    html, body{height:100%;width:100%;overflow:hidden}
    body{background:red url('static/bg.jpeg') center center / 100% 100% no-repeat}
    .box{ display:flex;height:100%;width:100%;align-items:center;justify-content:center;position:relative;color:teal}
    #lex{font-size:84px;padding:0 20px;border-radius:10px;background-color:red;color:white}
    #ing{width:100px;height:100%;position:absolute;top:0%;right:20px;transition:top 0.6s ease-in;background-image:url('static/ing.png');background-repeat:no-repeat}
    #ing::after{content:'';position:absolute;left:0;right:0;top:90px;bottom:0;background-image:url('static/ingBg.png')}
    #time{position:absolute;left:0;right:0;text-align:center;top:10%;color:white;font-size:84px;opacity:0}
    #time.will{opacity:1}
    #time.ing{animation:twinkling 1s infinite ease-in-out}
    @keyframes twinkling{0%{opacity:0.1;transform:scale(1)}50%{opacity:1;transform:scale(2)}100%{opacity:0;transform:scale(10)}}
    #pass{position:absolute;left:0;top:0;display:flex;flex-direction:column;flex-wrap:wrap;height:100%}
    #pass li{list-style:none;height:30px;line-height:30px;text-align:left;font-size:18px;color:white;margin:0 20px;opacity:0.8}
    #pass li.true{color: chartreuse}