Back to projects

Project case study

Slingshot

Canvas bubble shooter with touch/mouse aiming, wall ricochet, and local shot suggestions.

My roleDeveloper
Technologies used
  • JavaScript
  • HTML5
  • Canvas
  • CSS
  • Hammer.js
View repository (opens in a new tab)Open video
Slingshot cover
Project cover

Problem

Deliver precise aiming for mouse and touch.

Enable advanced shots with wall ricochet.

Solution

Architecture at a glance
  • Mouse and touch input for aim and firing.
  • Hex grid and bubble colors for cluster detection.
  • Collision and wall reflection calculations.
Technical decisions
  1. HTML5 Canvas render loop with continuous updates.
  2. Responsive aiming system for mouse and touch via Hammer.js.
  3. Local calculation of shot hints based on visible clusters.

Result

Delivered a smooth bubble shooter with local tactical hints.

  • Game loop and simple physics in HTML5 Canvas.
  • Touch gesture support with Hammer.js.
  • Cluster logic and ricochet for a bubble shooter.
  • Responsive UI with performance focus.

More about the project

Full case details, collapsed for optional reading.

Full description

The goal was to build a lightweight browser bubble shooter with smooth controls on desktop and mobile.

JavaScript game on HTML5 Canvas with Hammer.js for gestures and CSS for responsive UI.

Implemented touch/mouse controls with consistent ricochet.

Left a base ready for new levels and mechanics.

Problem

  • Suggest strategic shots without relying on a backend.
  • Keep Canvas performance stable.
Features and highlights
  • Smooth aim with touch or mouse control.
  • Side-wall ricochet for advanced shots.
  • Locally computed tactical hints.
  • Hex clusters with consistent color system.
  • High score saved in the browser.
  • Responsive, minimalist interface.
  • Instant gameplay without installation or backend.
  • Strategic suggestions in real time.
  • Solid base for levels, power-ups, and new modes.
  • Consistent experience across desktop and mobile.
Technical architecture and data
  • High-score persistence via local storage.

Technical architecture

How the case was designed as a product

Canvas bubble shooter with touch/mouse aiming, wall ricochet, and local shot suggestions.

JavaScriptLanguageHTML5Web platformCanvasWeb platformCSSWeb platformHammer.jsFramework

Data used

  • Mouse and touch input for aim and firing.
  • Hex grid and bubble colors for cluster detection.
  • Collision and wall reflection calculations.
  • Local high score stored in the browser.

Core components

  • Smooth aim with touch or mouse control.
  • Side-wall ricochet for advanced shots.
  • Locally computed tactical hints.
  • Hex clusters with consistent color system.
  • High score saved in the browser.
  • Responsive, minimalist interface.

Technical decisions

  • Game loop and simple physics in HTML5 Canvas.
  • Touch gesture support with Hammer.js.
  • Cluster logic and ricochet for a bubble shooter.
  • Responsive UI with performance focus.
How to run
  1. Clone the repository.
  2. Open index.html in a browser.
  3. Optional: serve with python -m http.server 8000.
  4. Open http://localhost:8000 and play.
Additional media
Touch aim, ricochet shots, and real-time tactical hints.
Credits

Developed by Matheus Siqueira.

Next projectAd Performance Intelligence

Next.js BI dashboard comparing Google Ads and Meta Ads on simulated data: KPIs, funnel and ROAS.

View full case