Skip to content

Repository files navigation

HTML Games Collection

A collection of browser-based games built with HTML5, CSS, and JavaScript. This project serves as a playground for experimenting with game development using standard web technologies.

Games Included

1. Flappy Bird

A clone of the popular tapping game. Navigate the bird through the pipes by clicking or tapping the screen.

  • Controls: Click / Tap to fly.

2. Sky Ace (Sonic Wings Clone)

A vertical scrolling shooter inspired by classic arcade games like Sonic Wings / Aero Fighters.

  • Controls:
    • Arrow Keys: Move the ship horizontally.
    • Space: Shoot.
  • Objective: Survive as long as possible while destroying enemy ships and accumulating score.
  • Scoring: Earn points for each enemy destroyed; higher‑level enemies give more points.
  • Power‑ups:
    • EMP Bomb (available after destroying certain enemies): Press the EMP button to clear all enemies on screen.
    • Weapon Upgrades: Collect upgrade drops to increase firepower.
    • Health Packs: Restore ship integrity.

3. Dice Master

A prediction game where you compete against a Markov Chain AI.

  • Controls: Select a number (1-6) and roll the dice.
  • Features:
    • Markov Chain AI: Predicts your next roll based on historical patterns.
    • 3D Dice Animation: CSS-based 3D rolling effect.
    • Statistics: Real-time frequency chart and accuracy comparison.

How to Play

  1. Clone the repository or download the files.
  2. Open index.html in any modern web browser.
  3. Select a game from the main menu to start playing.

Deployment

You can deploy these games for free using Surge.sh, a simple CLI for static web publishing.

Prerequisites

  • Node.js and npm installed.

Steps

  1. Open your terminal in the project directory.
  2. Run the following command:
    npx surge
  3. Follow the prompts:
    • Email/Password: Create an account or log in.
    • Project Path: Press Enter to accept the current directory.
    • Domain: Press Enter to accept the random domain or type your own.
  4. Your game will be live at the displayed URL!

Technology Stack

  • HTML5 Canvas: For high-performance 2D rendering.
  • Vanilla JavaScript: Core game logic without external framework dependencies.
  • Bootstrap 5: For the main menu and responsive UI layout.

Development & Integration

The project uses a modular structure for shared game systems.

File Structure

  • js/: Contains shared JavaScript modules.
    • reward-system.js: Manages XP, levels, and achievements.
    • game-ui.js: Handles UI overlays for rewards and notifications.
    • data-service.js: Manages local storage persistence.
    • particle-system.js: Visual effects for rewards.
  • css/: Contains shared styles.
    • dopamine-ui.css: Styles for the reward system UI.

Integrating into a New Game

To add the reward system to a new HTML game, include the following in your <head> and <body>:

<head>
    <!-- ... other tags ... -->
    <link rel="stylesheet" href="css/dopamine-ui.css">
</head>
<body>
    <!-- Game Canvas/Content -->

    <!-- Shared Scripts -->
    <script src="js/data-service.js"></script>
    <script src="js/reward-system.js"></script>
    <script src="js/particle-system.js"></script>
    <script src="js/game-ui.js"></script>
    
    <script>
        // Initialize
        window.addEventListener('DOMContentLoaded', () => {
            if (window.rewardSystem) {
                rewardSystem.init();
            }
        });
    </script>
</body>

Credits

These games were created using Gemini 3 Pro in the AntiGravity IDE.

License

This project is licensed under the MIT License - see the LICENSE file for details.

About

A set of small mobile-friendly HTML5 games.

Topics

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages