Skip to content

cauesmelo/canvas-retro-arcade

Repository files navigation

Project logo

Basically a (very) small collection of retro arcades made with HTML Canvas and JavaScript without external libraries, not too much to say about it.

⚡ Quickstart

You can access this link or clone this repository to run locally.

  1. Clone the project
git clone https://github.com/cauesmelo/canvas-retro-arcade
  1. Open the project
cd canvas-retro-arcade
  1. Run in development mode
make dev

You can see all the available commands here.

🎮 Game screens

breakout-small corona-small snake-small tictactoe-small

📖 Commands

Running locally

# Run as development
make dev

Linting and formating

# Run all linters
make lint

# Format all files
make format

# Run all linters and format all files
make tidy

Build

# Generate build
make build

Deploying

You can deploy the project to a Google Cloud Bucket. For this, you need to have the gcloud CLI with proper authentication set. You also need to configure the GCP_BUCKET and GCP_PROJECT variables at Makefile localized in the root folder. After everything set you can deploy with the command bellow.

# Deploy to Google Cloud Bucket configured on Makefile
make deploy

⚠️ To do

  • Isolate draw methods into gameScreen class.
  • Minify bundle size.
  • Create flag to display FPS.
  • Enable full screen mode.
  • In TicTacToe, replace X and O sprites to native drawing methods.
  • In TicTacToe, force AI to make mistakes so that the human can win sometimes.
  • Create more powerful writing methods in gameScreen.
  • Rework Breakout hitbox.
  • Add delay after death on Corona Invaders.
  • Add support for mobile.