https://github.com/realabdurrehman/shape-escape

You play as a square that must avoid other falling shapes to survive! How many shapes can you survive?
https://github.com/realabdurrehman/shape-escape

2d 2d-game api canvas-api game-dev html html-canvas javascript javascript-game tailwind-css vanilla-javascript vanilla-javascript-game

Last synced: about 2 months ago
JSON representation

You play as a square that must avoid other falling shapes to survive! How many shapes can you survive?

• Host: GitHub
• URL: https://github.com/realabdurrehman/shape-escape
• Owner: RealAbdurRehman
• Created: 2024-12-07T18:09:27.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-12-07T18:10:30.000Z (5 months ago)
• Last Synced: 2025-02-03T09:47:56.532Z (4 months ago)
• Topics: 2d, 2d-game, api, canvas-api, game-dev, html, html-canvas, javascript, javascript-game, tailwind-css, vanilla-javascript, vanilla-javascript-game
• Language: JavaScript
• Homepage: https://shape-escape.netlify.app
• Size: 3.41 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Shape Escape Game

## Overview

Shape Escape is a browser-based game where you control a square that must avoid falling shapes to survive. The objective is to survive for as long as possible while avoiding obstacles. The game uses simple keyboard controls and provides a score based on how long you survive and how many shapes you manage to escape.

## Features

- Playable character (square) that you control.

- Falling shapes (enemies) that the player must avoid.

- Keyboard controls for movement (W to jump, A and D to move left and right).

- Dynamic scoring system.

- Game over screen with options to restart.

## Controls

- **W**: Jump

- **A**: Move Left

- **D**: Move Right

## How to Play

1. When the game starts, click on the **Start Game** button.

2. Use the **W**, **A**, and **D** keys to move the square.

3. Avoid falling shapes (enemies).

4. Your score will increase over time.

5. If a shape collides with the square, the game is over. You can restart the game from the **Game Over** screen.

## Technologies Used

- **HTML**: Structure and layout of the game.

- **CSS**: Styling (Tailwind CSS and custom styles).

- **JavaScript**: Game logic, animation, and interactions.

- **Audio**: Background music and sound effects.

## Game Flow

1. The game starts with a start screen and a **Start Game** button.

2. When clicked, the game initializes, and the player controls a square using the keyboard.

3. Falling shapes are spawned at random intervals and move down the screen.

4. The player's score increases over time and as shapes are avoided.

5. The game ends when the player collides with a falling shape.

6. After the game ends, the **Game Over** screen is shown with the option to restart.

## Screenshots

### Gameplay

![Demo](https://cloud-lqdgmle88-hack-club-bot.vercel.app/0screenshot_from_2024-12-07_22-59-15.png)

--- 

### How many shapes can you escape?