• Blog
  • Docs
  • Pricing
  • Weโ€™re hiring!
Log inSign up
wilhelm

wilhelm

qbat

Vibecoded game with ATProto features
Public
Like
qbat
Home
Code
5
frontend
4
.vtignore
README.md
deno.json
H
index.ts
Branches
4
Pull requests
Remixes
History
Environment variables
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data โ€“ all from the browser, and deployed in milliseconds.
Sign up now
Code
/
README.md
Code
/
README.md
Search
9/16/2025
Viewing readonly version of hunger branch: v13
View latest version
README.md

QBAT

QBAT is a 3D isometric puzzle game inspired by Q*BERT, where you jump between pillars of different heights on an ortholinear grid.

๐ŸŽฎ Gameplay

  • Objective: Navigate around an 8x8 grid of pillars using arrow keys
  • Movement: Jump between adjacent pillars using arrow keys (โ†‘โ†“โ†โ†’)
  • Jumping Rules:
    • You can always jump down to lower pillars
    • You can only jump up if the height difference is 1 block or less
  • Visual Feedback: Failed jump attempts show a "trying" animation

๐ŸŽฏ Features

  • 3D Isometric View: Clean isometric perspective with Three.js rendering
  • Height-Based Colors: Pillars are color-coded by height for easy identification
    • Height 1: Dark brown
    • Height 2: Peru color
    • Height 3: Chocolate color
  • Smooth Animations: Arc-based jumping with bounce effects
  • Edge Definition: Dark edge lines on pillars for better 3D clarity
  • Responsive Controls: Arrow keys are captured to prevent page scrolling

๐Ÿ› ๏ธ Technical Implementation

Architecture

  • Backend: Deno with Hono framework
  • Frontend: Vanilla JavaScript with Three.js for 3D rendering
  • Build: No build step required - runs directly with Deno

Key Components

  • 3D Scene: Three.js scene with isometric camera positioning
  • Pillar Generation: Random height generation (1-3 blocks) with color coding
  • Animation System: Custom jump animations with easing and arc trajectories
  • Input Handling: Keyboard event management with preventDefault for arrow keys

File Structure

/
โ”œโ”€โ”€ index.ts              # Deno/Hono server
โ”œโ”€โ”€ deno.json             # Deno configuration
โ””โ”€โ”€ frontend/
    โ”œโ”€โ”€ index.html        # HTML template
    โ”œโ”€โ”€ index.tsx         # Game implementation
    โ”œโ”€โ”€ style.css         # Styling
    โ””โ”€โ”€ favicon.svg       # Game icon

๐Ÿš€ Running the Game

  1. Install Deno (if not already installed):

    curl -fsSL https://deno.land/install.sh | sh
  2. Start the server:

    deno run --allow-net index.ts
  3. Open your browser to http://localhost:8000

  4. Play: Use arrow keys to jump between pillars!

๐ŸŽจ Visual Design

  • Camera: Isometric view positioned at (4, 8, 4) for optimal overview
  • Lighting: Ambient + directional lighting for realistic 3D appearance
  • Player: Red sphere that sits on top of pillars
  • Animations: Smooth arc jumps with bounce effects and failed attempt feedback

๐Ÿ”ง Development

The game is built with modern web technologies and requires no build process. Simply run the Deno server and open in any modern browser. Three.js handles all 3D rendering and animations.

FeaturesVersion controlCode intelligenceCLIMCP
Use cases
TeamsAI agentsSlackGTM
DocsShowcaseTemplatesNewestTrendingAPI examplesNPM packages
PricingNewsletterBlogAboutCareers
Weโ€™re hiring!
Brandhi@val.townStatus
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Open Source Pledge
Terms of usePrivacy policyAbuse contact
ยฉ 2025 Val Town, Inc.