Let's talk
Cenarth Falls and the old mill on the River Teifi, near Newcastle Emlyn Photo: Alexander Walsh, CC BY 3.0

Fancy a game? AI rock, paper, scissors

Rock, paper, scissors… with AI

A little side project to show what's possible in a web browser: hand tracking, a model that learns from you, live statistics and predictive analytics, all in plain HTML, CSS and JavaScript.

How to play
  1. Enable your camera and allow access when your browser asks.
  2. Hold up rock, paper or scissors inside the on-screen guide.
  3. Press Ready and keep still for the three-second countdown.

No webcam? Use the click-to-throw buttons under the camera instead.
Play full screen

Under the hood

What's going on behind the scenes

The same building blocks power real business tools: reading documents and images, learning from feedback, and keeping data safe.

Computer vision in the browserGoogle's MediaPipe Hands model tracks 21 points on your hand, live, straight from your webcam.
Gesture recognitionCustom geometry rules work out which fingers are extended to tell rock, paper and scissors apart.
A model that learns from youCorrect a wrong read and your example is saved. A nearest-neighbour model then uses your examples to improve future reads.
Live statisticsYour throw mix, win rate and behaviour patterns, such as whether you switch after a loss, update after every round.
Predictive analyticsA Markov model forecasts your next throw from your history and tracks its own accuracy. Switch on the predictive CPU and it plays against your habits.
Your data as JSONTraining examples are stored in the browser and can be exported or imported as JSON files.
Generated sound effectsEvery countdown beep and victory fanfare is synthesised with the Web Audio API. No audio files at all.
Private by designNothing is uploaded. Your camera feed and examples never leave your device.
  • HTML5
  • CSS3
  • JavaScript
  • MediaPipe Hands
  • Web Audio API
  • Markov chains
  • Local storage
  • JSON

Imagine what this could do for your business.

If a browser can read a hand gesture, it can read an invoice, a form or a dashboard. Let's talk about yours.

Explore AI solutions