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

html游戏源码

HTML游戏源码通常由HTML、CSS和JavaScript组成，用于创建可在浏览器中运行的简单互动游戏，具有轻量级和易

HTML游戏源码解析

本案例为经典“打地鼠”小游戏，玩家需在限定时间内点击随机出现的地鼠获取分数,游戏结束后显示最终得分。

核心结构

部分 说明
index.html 定义游戏区域、按钮及基础布局
style.css 设置地鼠样式、背景及动画效果
script.js 实现地鼠生成逻辑、点击交互及计时功能

HTML结构

<div class="game-container">
  <div id="score">0</div>
  <div class="mole-grid">
    <!-9个格子，id为mole-1~mole-9 -->
  </div>
  <button id="start-btn">开始游戏</button>
</div>

CSS样式

选择器 作用
.mole 地鼠默认隐藏，背景为红色圆形
.active 地鼠出现时添加动画效果
#score 分数显示为30px绿色字体

JavaScript逻辑

数据初始化

const moles = document.querySelectorAll('.mole'); // 所有地鼠格子
let score = 0; // 初始分数
let timer; // 游戏计时器

核心函数

函数名 功能
startGame() 初始化分数、启动计时器、随机显示地鼠
randomMole() 随机选择一个地鼠格子并显示
hitMole(event) 处理点击事件，判断是否击中地鼠
endGame() 清除计时器，禁用地鼠点击

事件绑定

document.getElementById('start-btn').addEventListener('click', startGame);
moles.forEach(mole => {
  mole.addEventListener('click', hitMole);
});

功能模块详解

地鼠随机生成

html游戏源码 第1张

function randomMole() {
  moles.forEach(mole => mole.classList.remove('active')); // 清除所有地鼠
  const randomIndex = Math.floor(Math.random()  moles.length); // 随机索引
  moles[randomIndex].classList.add('active'); // 显示地鼠
}

点击判定与计分

function hitMole(event) {
  if (event.target.classList.contains('active')) { // 击中活跃地鼠
    score += 10;
    document.getElementById('score').textContent = score;
  }
}

游戏计时与结束

function startGame() {
  score = 0;
  document.getElementById('score').textContent = score;
  timer = setInterval(randomMole, 500); // 每0.5秒生成地鼠
  setTimeout(endGame, 10000); // 10秒后结束游戏
}

优化建议

优化点 方案
性能提升 使用requestAnimationFrame替代setInterval
用户体验 添加音效（击中/游戏结束）
扩展功能 增加难度选择（调整地鼠出现频率）

相关问题与解答

问题1：如何增加游戏难度？
解答：可通过缩短地鼠生成间隔（如从500ms改为300ms），或限制单次地鼠显示时间（如添加setTimeout自动隐藏）。 

clearInterval(timer);
timer = setInterval(randomMole, 300); // 加快生成速度

问题2：如何添加击中音效？
解答：在HTML中引入音频文件，并在hitMole函数中调用play()方法。 

<audio id="hit-sound" src="hit.mp3"></audio>
function hitMole(event) {
  if (event.target.classList.contains('active')) {
    score += 10;
    document.getElementById('score').textContent = score;
    document.getElementById('hit-sound').play(); // 播放音效
  }
}
0

相关文章