https://github.com/jahredhope/tutorial-rock-paper-scissors

A step by step tutorial on creating your own rock paper scissors animation
https://github.com/jahredhope/tutorial-rock-paper-scissors

Last synced: 16 days ago
JSON representation

A step by step tutorial on creating your own rock paper scissors animation

• Host: GitHub
• URL: https://github.com/jahredhope/tutorial-rock-paper-scissors
• Owner: jahredhope
• Created: 2022-10-16T04:34:18.000Z (about 2 years ago)
• Default Branch: master
• Last Pushed: 2022-10-19T22:00:27.000Z (about 2 years ago)
• Last Synced: 2024-10-19T02:00:35.514Z (29 days ago)
• Language: TypeScript
• Size: 84 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Tutorial: Rock 🪨 Paper 📄 Scissors ✂️ Animation

A step-by-step tutorial on creating your own rock paper scissors animation.

This is a fairly easy animation to program, but can be quite fascinating to watch. Each piece, whether it's a rock 🪨, paper 📄 or scissors ✂️ will attempt to take over other pieces. With the piece winning according to the rule: rock smashes scissors, scissors cuts paper, paper wraps rock.

The tutorial will cover three main parts:

- **Render loop:** How to create a render loop using Canvas and `requestAnimationFrame`.

- **Vector logic:** Adding, subtracting and multiplying points in a 2D space.

- **Update behaviour:** Configuring each piece to independently decide how to move.

![Example screenshot](./rock-paper-scissors-example.png)

**No dependencies.** This tutorial is focused on learning how things work under the hood. For production code, I'd recommend considering using stable and well tested libraries.

For a working example, check out [the complete source-code](./example-complete/src/main.ts). Otherwise go to [Chapter One - Setup](./1-Setup.md) to get started.

[Chapter One - Setup](./1-Setup.md)

[Chapter Two - Drawing](./2-Drawing.md)

[Chapter Three - Behaviour](./3-Behaviour.md)

[Chapter Four - Next Steps](./4-Next-Steps.md)

By [@jahredhope](https://jahred.me/)