你设计一个html猜数字小游戏

设计一个HTML猜数字小游戏的基本步骤如下：

1. **创建HTML结构**：
- 使用`<div>`来包含整个游戏界面，包括提示、输入框和按钮。

   <div id="guess-game">
     <h1>猜数字游戏</h1>
     <p id="game-message"></p>
     <input type="number" id="player-input" placeholder="请输入你的猜测">
     <button onclick="checkGuess()">猜一猜</button>
   </div>

2. **JavaScript编写逻辑**：
- 创建函数`generateRandomNumber()`生成随机数作为目标值。
- `checkGuess()`函数获取玩家输入，检查是否猜对，然后更新消息提示。

function generateRandomNumber(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

var targetNumber = generateRandomNumber(1, 100);
document.getElementById("game-message").innerHTML = "目标数字是1到100之间的整数";

function checkGuess() {
  var guess = parseInt(document.getElementById("player-input").value);
  if (guess === targetNumber) {
    document.getElementById("game-message").innerHTML = "恭喜，你猜对了！";
  } else {
    document.getElementById("game-message").innerHTML = `错误！数字太小，再试试。目标是 ${targetNumber}`;
  }
}