Using React, the mini-game "Color Junction" that was playable on iGoogle which ended in 2013, was revived in 2022.
When two or more pieces of the same color are connected, they stick together to form a clump. When you click on a clump, it disappears.
The game is completed when there are no pieces left.
Simple, right?
You may paste an iframe of this URL into your website so that you can play the game on your website, but the URL is subject to change without notice.
For example, I have embedded this game in the sidebar of my blog using the following iframe tag.
<iframe src="https://fugamaru.com/projects/ColorJunction/" height="264" width="244" frameborder="0" />
You can change the grid size by specifying the URL parameter.
If the grid size is too small, the layout may be corrupted; conversely, if it is too large, it may take longer to process.
Parameters
| Property | Default |
|---|---|
| height | 15 |
| width | 15 |
Example: https://fugamaru.com/projects/ColorJunction/?height=10&width=20
If you want to host this project on your own server, etc., please do the build yourself (generate static files).
- Install the libraries
# If yarn is not installed -> npm i -g yarn
yarn install- Customize
basenameattribute
If you will put static files in the server's root directory, you do not need to do this.
Open src/index.tsx and enter the path to the subdirectory in the basename attribute of the BrowserRouter component.
Example of URL: https://fugamaru.com/projects/ColorJunction/
Example: <BrowserRouter basename="/projects/ColorJunction/">
- Execute build
yarn buildWhen the build is complete, a build directory is created in the project root, then copy these files to the server.
This project is released under the MIT License, see LICENSE file.