アンチグラビティ・ピクセルゲーム (antigravtiy-pixel-game)

Web
アンチグラビティ・ピクセルゲーム (antigravtiy-pixel-game)

アンチグラビティ・ピクセルゲーム (antigravtiy-pixel-game)

React + Vite で作られたレトロ風ピクセルアートのクイズゲーム。フロントエンドは環境変数で問題数や通過条件を設定でき、DiceBear API を使ったピクセル風アバターを表示。バックエンドは Google Sheets と Google Apps Script（GAS）を用いた軽量構成で、問題のランダム抽出、スコア計算、結果の保存を無料で実現します。手軽にデプロイして試せる学習・デモ用途に適したプロジェクトです。

https://github.com/BarackChen/antigravtiy-pixel-game

概要

このリポジトリは「PIXEL QUEST」と銘打たれた、2000年代風のアーケード感を再現したピクセルアート・クイズゲームのフロントエンド実装と、Google Sheets＋Apps Script を使ったサーバレスなバックエンド設計を紹介するサンプルプロジェクトです。フロントは React と Vite を用いたシングルページアプリで、問題や合格ラインは環境変数で簡単に調整可能。カード型の「関主」アバターは DiceBear API を利用して動的に生成します。バックエンドは完全に無料の Google サービス上で動き、問題抽出や成績保存を行うため、手軽に試せる学習用プロジェクトとして有用です。

GitHub

リポジトリの統計情報

  • スター数: 5
  • フォーク数: 2
  • ウォッチャー数: 5
  • コミット数: 2
  • ファイル数: 11
  • メインの言語: JavaScript

主な特徴

  • レトロなピクセルアート風 UI と DiceBear による動的アバター生成
  • フロントは React + Vite の軽量構成で高速に起動・開発可能
  • バックエンドは Google Sheets + Google Apps Script（GAS）で完全サーバレス
  • 環境変数で問題数や合格ラインを調整できる柔軟な設計

技術的なポイント

このプロジェクトの最大の技術的特徴は「フロントはモダンな JavaScript ツールチェーンを使い、バックエンドは無料の Google プラットフォームで完結させる」点です。具体的には、フロントエンドは React（コンポーネントベース）と Vite（超高速ビルド・開発サーバ）を採用しており、ローカルでの開発やホットリロードが容易です。ゲームのビジュアルはピクセルアート調の CSS/画像表現と、DiceBear API によるランダムなピクセルアバターで演出しており、プレイヤーやボスキャラクターの見た目を動的に生成できます。

バックエンドは Node サーバやクラウドDBを使わず、Google Sheets をデータベースの代替として利用する点がユニークです。Apps Script を使ってスプレッドシート上の「题目（問題）」や「回答」を操作し、問題のランダム抽出、採点ロジック、結果の保存・取得を HTTP エンドポイント経由で実現します。これによりインフラコストをゼロに抑えつつ、シンプルな API を整備できます。フロント側は環境変数で GAS のエンドポイントや問題数、クリア条件を変更できるため、同じコードベースで異なる難易度や運用フローを試せます。

また、プロジェクトの設計は学習用・プロトタイプ向けに最適化されており、Google Sheets をデータ管理に使うことで非エンジニアでも問題の追加・編集が可能です。注意点としては、GAS と公開スプレッドシートを組み合わせる際の認証／可視性設定、同時アクセス時のレース条件、およびスケーリングに関する制約です。大規模な商用アプリケーションには別途認証や専用 DB を検討するべきですが、小規模なゲームやワークショップ、教材用途には非常に有用なアプローチです。

プロジェクトの構成

主要なファイルとディレクトリ：

  • .env.example: file
  • .github: dir
  • .gitignore: file
  • README.md: file
  • eslint.config.js: file

…他 6 ファイル

（実際のソースや GAS スクリプト、フロントエンドのエントリ等はリポジトリ内に含まれており、README にセットアップ手順が記載されています）

まとめ

手軽に試せるサーバレスなピクセルクイズの良いサンプルです。

リポジトリ情報：

READMEの抜粋：

PIXEL QUEST - 像素风闯关问答游戏

专案简介

本专案是一个基于 React + Vite 开发的怀旧 2000 年代街机像素风问答游戏。前端透过环境变数设定题目与通关门槛，游戏内预设使用 DiceBear API 作为关卡“关主”的像素头像。 后端伺服器完全采用免费轻量的 Google Sheets + Google Apps Script (GAS) ，达成题库随机抽取、成绩即时计算与远端资料库留存的功能。

后端资料库设定教学 (Google Sheets & Apps Script)

步骤一：建立 Google Sheets 资料库

  1. 登入 Google 帐号，建立一个全新的空白 Google 试算表 (Google Sheets)。
  2. 将底部的第一个工作表改名为 题目。
  3. 在第一列（A1 到 G1）分别填入以下确切的栏位名称（表头）： 题号 | 题目 | A | B | C | D | 解答
  4. 添加一个新的工作表，命名为 回答。
  5. 在回答的第一列…