当前位置：首页 > 行业动态 > 正文

html简单小游戏

admin
行业动态
2025-04-28
1

HTML小游戏基于HTML/CSS/JS，利用Canvas或DOM实现图形交互，通过事件监听完成

游戏类型选择

本示例选择猜数字游戏，玩家需要在1-100范围内猜测系统生成的随机数，系统会提示“大了”或“小了”,直到猜中为止。

游戏结构设计

部分	说明
HTML	创建输入框、按钮、结果显示区
CSS	设置界面样式（如居中、颜色、字体）
JavaScript	实现随机数生成、输入验证、逻辑判断

代码实现（核心部分）

HTML结构

<div class="game-container">
  <h2>猜数字游戏</h2>
  <input type="number" id="guessInput" placeholder="输入1-100的数字">
  <button id="guessButton">猜测</button>
  <div id="result"></div>
</div>

CSS样式

.game-container {
  width: 300px;
  margin: 100px auto;
  text-align: center;
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 10px;
}
input, button {
  margin: 10px;
  padding: 8px;
  width: 80%;
}
#result {
  margin-top: 20px;
  font-weight: bold;
  color: green;
}

JavaScript逻辑

let randomNumber = Math.floor(Math.random()  100) + 1; // 生成1-100的随机数
const guessButton = document.getElementById('guessButton');
const resultDiv = document.getElementById('result');
guessButton.addEventListener('click', function() {
  const guess = parseInt(document.getElementById('guessInput').value);
  if (isNaN(guess) || guess < 1 || guess > 100) {
    resultDiv.style.color = 'red';
    resultDiv.textContent = '请输入1-100的有效数字！';
    return;
  }
  if (guess === randomNumber) {
    resultDiv.style.color = 'blue';
    resultDiv.textContent = `恭喜！正确答案是${randomNumber}`;
  } else if (guess > randomNumber) {
    resultDiv.style.color = 'red';
    resultDiv.textContent = '大了！';
  } else {
    resultDiv.style.color = 'red';
    resultDiv.textContent = '小了！';
  }
});

功能扩展建议

功能	实现方式
限制猜测次数	添加计数器，超过次数后显示失败提示
重置游戏	添加“重新开始”按钮，重新生成随机数并清空输入
动态调整数字范围	增加输入框让用户自定义范围（如1-1000）

相关问题与解答

问题1：如何限制玩家的猜测次数？

解答：
在JavaScript中添加一个计数器变量（如let attempts = 0;），每次点击按钮时递增，当attempts超过设定值（如5次）时,禁用按钮并显示失败提示。

let attempts = 0;
guessButton.addEventListener('click', function() {
  attempts++;
  if (attempts > 5) {
    resultDiv.style.color = 'gray';
    resultDiv.textContent = '次数用尽！正确答案是' + randomNumber;
    guessButton.disabled = true;
    return;
  }
  // 原有逻辑...
});

问题2：如何让游戏支持键盘按键提交？

解答：
监听input元素的keydown事件，当用户按下Enter键时触发按钮的点击事件。

const guessInput = document.getElementById('guessInput');
guessInput.addEventListener('keydown', function(event) {
  if (event.key === 'Enter') {
    guessButton.click(); // 触发按钮的点击事件
  }
});

小游戏