如何在Phaser网页游戏中追踪用户点击？无数据库实现咨询

1. 配置Google Sheets与Apps Script中间层 #

• 新建Google表格，在第一行A列输入time_stamp、B列输入event作为表头。
• 点击顶部菜单栏「扩展」→「Apps Script」，清空默认代码，替换为以下脚本：

function doPost(e) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const data = JSON.parse(e.postData.contents);
  sheet.appendRow([data.time_stamp, data.event]);
  return ContentService.createTextOutput(JSON.stringify({status: "success"}))
    .setMimeType(ContentService.MimeType.JSON);
}

• 点击「部署」→「新部署」，选择「类型」为「Web应用」：
  • 执行权限选「我自己」
  • 谁可以访问选「任何人，甚至匿名」
  • 点击部署，复制生成的Web应用URL（后续代码要用到）

2. 在Phaser.js中实现事件提交 #

按照你的需求，补全playGame和submitEvent函数：

// 事件提交函数
function submitEvent(timestamp, event) {
  // 替换成你复制的Apps Script部署URL
  const SHEET_API_URL = "你的Web应用URL";
  
  fetch(SHEET_API_URL, {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      time_stamp: timestamp,
      event: event
    })
  })
  .then(res => res.json())
  .catch(err => console.error("事件提交失败:", err));
}

// Play按钮点击函数
function playGame(scene) {  
  // 进入游戏场景  
  scene.start('Gameplay');
  // 生成ISO格式时间戳
  const timestamp = new Date().toISOString();
  // 提交事件
  submitEvent(timestamp, "click the 'Play' button");
}

说明：这种方式不需要玩家登录授权，因为Apps Script以你的身份执行表格写入操作，只要Web应用权限设置为匿名访问即可。

如果觉得Google Sheets配置繁琐，以下两个免费服务更适合前端直接操作：

1. Firebase Realtime Database #

• 免费额度足够中小型游戏使用，无需自建后端。
• 步骤：在Firebase控制台创建项目，启用Realtime Database，设置规则允许匿名写入（测试阶段可设为{ "rules": { ".read": true, ".write": true } }，正式环境建议限制权限）。
• 代码示例：

// 先在HTML中引入Firebase SDK
// <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js"></script>
// <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-database.js"></script>

// 初始化Firebase
const firebaseConfig = {
  apiKey: "你的API密钥",
  authDomain: "你的项目域名",
  databaseURL: "你的数据库URL",
  projectId: "你的项目ID",
  storageBucket: "你的存储桶",
  messagingSenderId: "你的Sender ID",
  appId: "你的App ID"
};
firebase.initializeApp(firebaseConfig);
const database = firebase.database();

// 事件提交函数
function submitEvent(timestamp, event) {
  database.ref('game_events').push({
    time_stamp: timestamp,
    event: event
  });
}

2. Supabase #

• 提供免费PostgreSQL数据库，支持REST API和JS SDK。
• 步骤：注册Supabase账号创建项目，在「Authentication」中启用匿名认证，在「SQL Editor」创建表：

CREATE TABLE game_events (
  id SERIAL PRIMARY KEY,
  time_stamp TEXT NOT NULL,
  event TEXT NOT NULL
);

• 前端代码示例：

// 引入Supabase SDK
// <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>

const supabase = createClient('你的Supabase URL', '你的匿名公钥');

async function submitEvent(timestamp, event) {
  await supabase.from('game_events').insert([{
    time_stamp: timestamp,
    event: event
  }]);
}

内容的提问来源于stack exchange，提问作者Andika Fathin Azfar