JavaScript实战游戏逻辑

● 在做猜游戏之前，我们肯定要随机生成一个数字。那就跟之前掷色子的游戏一样

const number = Math.trunc(Math.random() * 20) + 1;
//生成一个1-20的随机数字
1
2

● 之后，在输入正确的时候我们肯定需要在问号上面显示出来

● 在测试阶段，我们可以直接把number的值赋给他

const number = Math.trunc(Math.random() * 20) + 1;
document.querySelector('.number').textContent = number;
1
2

● 根据之前我们写的代码，如果我们输入的是正确的话，我们就提示输入正确（因代码有变动，下面为全部代码）

const secretnumber = Math.trunc(Math.random() * 20) + 1;
document.querySelector('.number').textContent = secretnumber;

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';
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13

● 除此之外，如果数字太高或者太低，我们也要去提示太高了或者太低了

const secretnumber = Math.trunc(Math.random() * 20) + 1;
document.querySelector('.number').textContent = secretnumber;

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';
  } else if (guess > secretnumber) {
    document.querySelector('.message').textContent = '📈Too high';
  } else if (guess < secretnumber) {
    document.querySelector('.message').textContent = '📉Too low';
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

● 除此之外，还有分数那一块，如果我们输错数字（高了或低了），这个分数就会减1，最好的方式是我们可以增加一个变量，初始值为20，如果高了或者低了，就减1，然后再将这个值付给score的文本中

const secretnumber = Math.trunc(Math.random() * 20) + 1;

let score = 20;
document.querySelector('.number').textContent = secretnumber;

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';
  } else if (guess > secretnumber) {
    document.querySelector('.message').textContent = '📈Too high';
    score--;
    document.querySelector('.score').textContent = score;
  } else if (guess < secretnumber) {
    document.querySelector('.message').textContent = '📉Too low';
    score--;
    document.querySelector('.score').textContent = score;
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

● 但是如果Score分数为0的话，会提示我们输掉了比赛

const secretnumber = Math.trunc(Math.random() * 20) + 1;

let score = 20;
document.querySelector('.number').textContent = secretnumber;

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';
  } 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!';
    }
  } 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';
    }
  }
});
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

● 目前，游戏的大体已经完成，还缺少一个重置游戏，和高分计数的功能