如何将Konami风格密码代码与JS障碍游戏代码结合启动游戏

你的核心问题是游戏代码在页面加载时就自动运行了，哪怕游戏容器被隐藏，碰撞检测的定时器还在后台执行，直接把游戏代码塞进密码判断里还会导致变量重复声明、逻辑混乱。下面是最简单的改造方案，核心思路是把游戏逻辑封装成可手动触发的函数，密码匹配后再启动游戏，同时添加开始/重启按钮。

改造步骤 #

1. 调整HTML结构（添加按钮） #

先在游戏容器（#achtergrond）里加一个开始/重启按钮：

<div id="achtergrond" style="visibility: hidden;">
  <!-- 你的原有游戏元素（character、obstacle、resultDiv） -->
  <button id="startBtn" style="display: none;">开始/重启游戏</button>
</div>

2. 修改JavaScript代码 #

把游戏逻辑封装成初始化和启动函数，密码匹配后再激活游戏：

// 密码触发逻辑
const pressed = [];
const secretCode = 'enorm';
const audio = new Audio('nobullshit.mp3');
const gameContainer = document.getElementById('achtergrond');
const startBtn = document.getElementById('startBtn');

window.addEventListener('keyup', e => {
  pressed.push(e.key);
  pressed.splice(0, pressed.length - secretCode.length);
  const word = pressed.join('');

  if (word === secretCode) {
    // 显示游戏容器和按钮
    gameContainer.style.visibility = 'visible';
    startBtn.style.display = 'block';
    audio.play();
    console.log('DIT IS ENORM!');
  } else {
    gameContainer.style.visibility = 'hidden';
    startBtn.style.display = 'none';
    stopGame(); // 隐藏时停止游戏，避免后台消耗
  }
});

// 游戏核心逻辑封装
let character = document.getElementById("character");
let obstacle = document.getElementById("obstacle");
let resultDiv = document.getElementById("result");
let score = 0;
let obstacleScored = false;
let checkDeadInterval = null;

// 初始化游戏状态（重置分数、元素状态）
function initGame() {
  score = 0;
  obstacleScored = false;
  resultDiv.textContent = '';
  // 重置障碍物和角色状态
  obstacle.style.animation = '';
  obstacle.style.display = 'block';
  character.classList.remove('animate');
}

// 启动游戏循环
function startGame() {
  initGame();
  // 先清除旧定时器，避免重复运行
  if (checkDeadInterval) clearInterval(checkDeadInterval);
  
  checkDeadInterval = setInterval(() => {
    const characterTop = parseInt(window.getComputedStyle(character).getPropertyValue("top"));
    const obstacleLeft = parseInt(window.getComputedStyle(obstacle).getPropertyValue("left"));

    if (obstacleLeft < 30 && obstacleLeft >= 0 && characterTop >= 130) {
      // 游戏结束逻辑
      clearInterval(checkDeadInterval);
      obstacle.style.animation = "none";
      obstacle.style.display = "none";
      resultDiv.textContent = "Je bent geraakt! Score: " + score;
    } else if (obstacleLeft <= 5 && !obstacleScored) {
      score++;
      obstacleScored = true;
    }

    if (obstacleLeft < -10) {
      obstacleScored = false;
    }
  }, 30);
}

// 停止游戏（清理定时器）
function stopGame() {
  if (checkDeadInterval) {
    clearInterval(checkDeadInterval);
    checkDeadInterval = null;
  }
}

// 绑定按钮点击事件
startBtn.addEventListener('click', startGame);

// 角色跳跃逻辑保留
function spring() {
  if (!character.classList.contains("animate")) {
    character.classList.add("animate");
    setTimeout(() => {
      character.classList.remove("animate");
    }, 500);
  }
}

关键改动说明 #

• 游戏逻辑延迟启动：碰撞检测定时器改成手动触发，页面加载时不会自动运行，只有点击按钮才启动游戏。
• 状态重置机制：initGame函数负责重置分数、障碍物状态等，确保每次重启都是全新游戏。
• 资源清理：隐藏游戏时调用stopGame清除定时器，避免后台无效运行消耗性能。
• 按钮交互：密码匹配后显示按钮，支持重复点击重启游戏，符合需求。

内容的提问来源于stack exchange，提问作者Shady