Smart Walker

This is a Next.js web application built with TypeScript and Tailwind CSS that allows you to explore an interactive pixelated world. Walk around, jump between platforms, and explore the environment.

Play the game here.

Features

• Mario-Style Centered Camera: The game camera keeps the walker centered inside a horizontal deadzone (35% to 65% of screen width) and scrolls the background and platforms as you move.
• Physics-Based Controls: Smooth horizontal movement with acceleration and friction/deceleration.
• Momentum Jumping: Jump height and forward horizontal speed scale dynamically based on the character's movement speed before launching.
• Retro HTML/CSS Graphics: A stylized 8x16 animated character sprite and textured platform blocks rendered entirely with native CSS backgrounds, gradients, and borders.
• Multi-Device Support: Full desktop keyboard controls combined with an on-screen overlay control pad for mobile touch screens and mouse input.
• Strict Quality Tooling: Formatted using Prettier, linted with ESLint, and compiled under strict TypeScript checks.

Controls

Keyboard (Desktop)

• Move Left: ArrowLeft or A / a
• Move Right: ArrowRight or D / d
• Jump: Spacebar or ArrowUp or W / w

Touch / Mouse (Mobile & Desktop)

• Left Button: Move Left
• Right Button: Move Right
• Up Button: Jump

Setup

In order to run this project, you need to have Node.js and npm installed on your machine. You can download them from nodejs.org.

Install dependencies:

npm install

Running the app

To run the app in development mode, use the following command:

npm run dev

This will start the development server on port 9002 (using Next.js Turbopack) and open the app in your default web browser.

Code Quality & Formatting

To ensure consistent code quality, formatting, and type-safety, use the following commands:

• Linting: npm run lint (runs ESLint configured with Prettier & Next core web vitals)
• Formatting: npm run format (formats the codebase using Prettier)
• TypeScript Check: npm run typecheck (verifies strict types)

Building the app

To build the app for production, use the following command:

npm run build

To start the production server locally:

npm start

Deployment

This app can be deployed on Netlify, Vercel, or any other hosting platform supporting Next.js applications. Connect your repository to Netlify for automatic building and deployment.