Hand-Pong--AI-powered Hand-tracking Pong game!

Control a real-time game of Pong via your hand or play against a friend (or yourself) feat. 3 difficulty levels!

🛠️ Tech Stack Deployment: Wrangler CLI

• Backend: Cloudflare Workers
• Handtracking: MediaPipe
• Dynamic AI names for AI player and 2 players w/ Cloudflare Workers AI (Llama 4 Scout)
• SQL Database for leaderboard: Cloudflare D1
• Frontend: Vanilla JavaScript with Canvas API

Prerequisites

• Node.js 16+
• Cloudflare account
• Wrangler CLI

1. Clone & Install

git clone https://github.com/elizabethsiegle/hand-pong-worker-d1.git
cd hand-pong-worker-d1
npm install

2. Cloudflare Setup

a. Login via Wrangler

wrangler login

b. Create D1 Database

wrangler d1 create hand-pong-leaderboard

(and paste the output into your wrangler.jsonc or wrangler.toml) c. Create the leaderboard table in D1

wrangler d1 execute hand-pong-leaderboard --command "CREATE TABLE hand_pong_leaderboard (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    username TEXT NOT NULL,
    score INTEGER NOT NULL,
    time INTEGER NOT NULL,
    difficulty TEXT DEFAULT 'normal',
    date TEXT NOT NULL
);"

d. Add the AI binding to your wrangler file.

3. Development bash

# Start local development server
wrangler dev
# Access your game at http://localhost:8787

4. Deploy! 🚀🚢

# Deploy to Cloudflare Workers
wrangler deploy
# Your game will be live at https://your-worker-name.your-subdomain.workers.dev

🔧 Configuration

No environment variables needed!

Database Schema

CREATE TABLE hand_pong_leaderboard (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    username TEXT NOT NULL,
    score INTEGER NOT NULL,
    time INTEGER NOT NULL,
    difficulty TEXT DEFAULT 'normal',
    date TEXT NOT NULL
);

🌐 API Endpoints

• GET / - Game interface
• GET /styles/main.css - Game styles
• POST /api/generate-names - Generate AI/player names
• POST /api/save-score - Save player score
• GET /api/leaderboard - Get top scores