Some months ago I tried reproducing a small puzzle game I used to do when I was in school.
How it works
The game needs a 10x10 square, but you can choose any size. Every cell is filled with a number between 1 and 100 (or it depends on your custom size).
Filling the square is the hardest part, you need to follow one simple rule:
From the current filled square, you can move in any direction
- Horizontally and Vertically by 2 spaces (example: 1 x x 2)
- Diagonally by 1 space
You can start from any square, the goal, as I said, is to fill everyone of them.
The 10x10 is pretty difficult, I found a solution prefilling half of the square, then I created a script that tried to find a solution, and I know it exists.
Links
The website is live on the js.org domain here: https://fill100.js.org
The project is open source on GitHub here: https://github.com/matteobruni/fill100
Leave a star if you liked it
matteobruni
/
fill100
Fill 100 squares game, made in JavaScript
Fill 100 Game
Fill 100 squares game, made in JavaScript
How it works
The game needs a 10x10 square, but you can choose any size. Every cell is filled with a number between 1 and 100 (or it depends on your custom size).
Filling the square is the hardest part, you need to follow one simple rule:
From the current filled square, you can move in any direction
- Horizontally and Vertically by 2 spaces (example: 1 x x 2)
- Diagonally by 1 space
You can start from any square, the goal, as I said, is to fill everyone of them.
The 10x10 is pretty difficult, I found a solution prefilling half of the square, then I created a script that tried to find a solution, and I know it exists.
PS: The wallpaper was made using tsParticles, and if you reach 100 a lot of confetti (still tsParticles) are waiting to explode.
matteobruni
/
tsparticles
tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.
tsParticles - TypeScript Particles
A lightweight TypeScript library for creating particles. Dependency free (*), browser ready and compatible with React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.js, Solid.js, and Web Components
Table of Contents
-
tsParticles - TypeScript Particles
- Table of Contents
- Do you want to use it on your website?
- Library installation
- Official components for some of the most used frameworks
- Presets
- Templates and Resources
- Demo / Generator
- Video Tutorials
- …
Top comments (1)
Which browser? What problem?