Chrome恐龙跑酷类游戏弹窗失效及数据无法存储问题求助

一、弹窗提交与游戏启动修复 #

核心修复方案 #

• 事件绑定失效处理：确保提交按钮正确关联逻辑，避免语法错误或未绑定事件

  // 获取弹窗核心元素
  const usernameModal = document.getElementById('username-modal');
  const submitBtn = document.getElementById('submit-username');
  const usernameInput = document.getElementById('username-input');
  
  // 绑定点击事件
  submitBtn.addEventListener('click', () => {
    const username = usernameInput.value.trim();
    if (!username) {
      alert('请输入有效用户名');
      return;
    }
    // 关闭弹窗
    usernameModal.style.display = 'none';
    // 全局存储用户名，用于后续分数提交
    window.currentPlayer = username;
    // 启动游戏逻辑
    initGame();
  });
  

• 按钮遮挡问题修复：调整CSS层级，确保按钮在弹窗上层可点击

  #submit-username {
    position: relative;
    z-index: 1001; /* 需高于弹窗容器的z-index值 */
  }
  

• 游戏启动函数校验：确认initGame()（或你的游戏启动函数）无语法错误，未被弹窗的preventDefault()错误拦截

二、SQLite3数据存储与排行榜展示修复 #

1. 后端数据处理逻辑（Node.js示例） #

const sqlite3 = require('sqlite3').verbose();
const express = require('express');
const app = express();
app.use(express.json());

// 初始化数据库连接
const db = new sqlite3.Database('./game_scores.db', (err) => {
  if (err) console.error('数据库连接失败:', err);
});

// 自动创建分数表（首次运行生效）
db.run(`CREATE TABLE IF NOT EXISTS player_scores (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  username TEXT NOT NULL,
  score INTEGER NOT NULL,
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP
)`);

// 接收前端分数提交接口
app.post('/save-score', (req, res) => {
  const { username, score } = req.body;
  if (!username || typeof score !== 'number') {
    return res.status(400).json({ success: false, msg: '参数错误' });
  }
  db.run(`INSERT INTO player_scores (username, score) VALUES (?, ?)`, [username, score], (err) => {
    if (err) {
      return res.status(500).json({ success: false, msg: err.message });
    }
    res.json({ success: true });
  });
});

// 获取排行榜数据接口
app.get('/get-leaderboard', (req, res) => {
  db.all(`SELECT username, score FROM player_scores ORDER BY score DESC LIMIT 10`, (err, rows) => {
    res.json(err ? [] : rows);
  });
});

app.listen(3000, () => console.log('服务启动在3000端口'));

2. 前端提交与排行榜渲染 #

// 游戏结束时提交分数
function gameOver(finalScore) {
  fetch('http://localhost:3000/save-score', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ username: window.currentPlayer, score: finalScore })
  })
  .then(res => res.json())
  .then(data => {
    if (data.success) loadLeaderboard();
  })
  .catch(err => console.error('分数提交失败:', err));
}

// 加载并渲染排行榜
function loadLeaderboard() {
  fetch('http://localhost:3000/get-leaderboard')
  .then(res => res.json())
  .then(scores => {
    const leaderboardEl = document.getElementById('leaderboard');
    leaderboardEl.innerHTML = scores.map(item => `<div>${item.username}: ${item.score}</div>`).join('');
  });
}

排查要点 #

• 检查数据库文件路径是否正确，确保程序有读写权限
• 查看浏览器控制台的网络请求日志，确认参数是否正确传递
• 查看后端终端日志，排查SQL语法错误或数据库连接问题

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