gracechin / gizmo-the-cat

Find Gizmo the cat 🐱

Gizmo the Cat

This random Gizmo the Cat website was inspired by a cat called Gizmo, and Find the Invisible Cow. It was made just for fun.

To Develop on VS

Open index.html with a live server.

To Deploy

Deployed using Netlify.

Implementation Notes

• Background: id=canvas div in index.html is used to place Gizmo
• Gizmo: Gizmo is placed randomly on the canvas using index.js
• Torch: id=mask div in index.html is what makes the screen dark (or coloured black). The torch is styled in main.css and it's position is defined by --pointer-x-percent and --pointer-y-percent CSS variables. index.js updates the CSS position variables using mouse/pointer events.
• Scores: class=score div in index.html is for the counting how many times Gizmo is found. index.js updates the score.