https://github.com/denisecase/rockswap

A learner-friendly match-3 puzzle game built with TypeScript and HTML5 Canvas.
https://github.com/denisecase/rockswap

canvas game html5 typescript

Last synced: 2 months ago
JSON representation

A learner-friendly match-3 puzzle game built with TypeScript and HTML5 Canvas.

• Host: GitHub
• URL: https://github.com/denisecase/rockswap
• Owner: denisecase
• License: mit
• Created: 2025-10-10T20:52:53.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2025-11-24T12:24:45.000Z (9 months ago)
• Last Synced: 2025-11-28T01:42:57.610Z (9 months ago)
• Topics: canvas, game, html5, typescript
• Language: HTML
• Homepage: https://denisecase.github.io/rockswap/
• Size: 12.6 MB
• Stars: 2
• Watchers: 0
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# RockSwap (Match-3 Game)

[![CI](https://github.com/denisecase/rockswap/actions/workflows/ci.yml/badge.svg)](https://github.com/denisecase/rockswap/actions/workflows/ci.yml)

[![Deploy](https://github.com/denisecase/rockswap/actions/workflows/deploy.yml/badge.svg)](https://github.com/denisecase/rockswap/actions/workflows/deploy.yml)

[![CodeQL](https://github.com/denisecase/rockswap/actions/workflows/codeql.yml/badge.svg)](https://github.com/denisecase/rockswap/actions/workflows/codeql.yml)

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)

![Node](https://img.shields.io/badge/node-22.x-339933?logo=node.js)

![typescript dev dep](https://img.shields.io/github/package-json/dependency-version/denisecase/rockswap/dev/typescript)

![vite dev dep](https://img.shields.io/github/package-json/dependency-version/denisecase/rockswap/dev/vite)

![Code Style: Prettier](https://img.shields.io/badge/code_style-Prettier-ff69b4?logo=prettier)

[![GitHub Pages](https://img.shields.io/badge/site-live-brightgreen)](https://denisecase.github.io/rockswap/)

[Lighthouse Scores (out of 100)](https://denisecase.github.io/rockswap/lighthouse.html)

[![Lighthouse Accessibility Badge](./assets/img/scores/lighthouse_accessibility.svg)](https://github.com/denisecase/rockswap)

[![Lighthouse Best Practices Badge](./assets/img/scores/lighthouse_best-practices.svg)](https://github.com/denisecase/rockswap)

[![Lighthouse Performance Badge](./assets/img/scores/lighthouse_performance.svg)](https://github.com/denisecase/rockswap)

[![Lighthouse SEO Badge](./assets/img/scores/lighthouse_seo.svg)](https://github.com/denisecase/rockswap)

A learner-friendly match-3 puzzle game built with TypeScript and HTML5 Canvas.

Installable as a Progressive Web App (PWA).

Initial Features:

- 8x8 board with 6 rock kinds

- Swap adjacent cells if it forms a match

- Find matches, clear, collapse, refill

- Basic scoring and moves

## Controls

- Click a cell and then click an adjacent cell to try a swap.

- Valid swaps that create matches will clear and cascade.

## How the Game Logic is Organized

The main code is in the [`src`](./src/) folder. For an overview, see: [`SRC.md`](./SRC.md)

## Making Changes

To make changes, see: [`CUSTOMIZING.md`](./CUSTOMIZING.md).