• JavaScript游戏恢复


    let secretnumber = Math.trunc(Math.random() * 20) + 1;
    
    let score = 20;
    
    document.querySelector('.check').addEventListener('click', function () {
      const guess = Number(document.querySelector('.guess').value);
      console.log(guess);
    
      if (!guess) {
        document.querySelector('.message').textContent = '⛔No Number';
      } else if (guess === secretnumber) {
        document.querySelector('.message').textContent = '🎉Correct Number';
    
        document.querySelector('body').style.backgroundColor = '#60b347';
        document.querySelector('.number').style.width = '30rem';
        document.querySelector('.number').textContent = secretnumber;
      } else if (guess > secretnumber) {
        if (score > 1) {
          document.querySelector('.message').textContent = '📈Too high';
          score--;
          document.querySelector('.score').textContent = score;
        } else {
          document.querySelector('.message').textContent = '😭You lost the game!';
          document.querySelector('.score').textContent = 0;
        }
      } else if (guess < secretnumber) {
        if (score > 1) {
          document.querySelector('.message').textContent = '📉Too low';
          score--;
          document.querySelector('.score').textContent = score;
        } else {
          document.querySelector('.message').textContent = '😭You lost the game';
          document.querySelector('.score').textContent = 0;
        }
      }
    });
    
    document.querySelector('.again').addEventListener('click', function () {
      score = 20;
    	document.querySelector('.score').textContent = score;
      document.querySelector('body').style.backgroundColor = '#222';
      document.querySelector('.message').textContent = 'Start guessing...';
      document.querySelector('.number').style.width = '15rem';
      document.querySelector('.number').textContent = '?';
      document.querySelector('.guess').value = '';
      secretnumber = Math.trunc(Math.random() * 20) + 1;
    });
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47

    在这里插入图片描述

  • 相关阅读:
    Vue 3 中的 ref 和 reactive 有什么区别?
    【故障公告】攻击式巨量并发请求再次来袭,引发博客站点故障
    设计模式-结构型-适配器模式-Adapter
    Ceph文件系统
    css基础选择器(详细!全!)
    宝塔部署node项目
    《Fundamantals of Software Architecture》 Q&A Part3
    《人类简史》笔记一——快乐该如何计算
    js读取文件的内置方法之 FileReader
    java中fastJSON解析复合
  • 原文地址:https://blog.csdn.net/weixin_42952508/article/details/133620953