ColorFull About Page

ColorFull is made using the javascript tool, Canvas, which is an HTML element that is used to draw graphics, on the fly, using JavaScript. As for my code editor, I used VS Code, because that's what I'm most confortable with.

I started with an idea I had where a player could explore an area trying to find treasures. Originally, I just had a player that could move around, a treasure spawned randomly on the screen, and a number that would be smaller the closer you got to a treasure.

While creating the game's background, which was really just suppose to be a cool visual, I found it so cool that it became the game's main point. This led me to the idea of background customization, starting with color palettes and object scaling. Each new change made me want to add more.

As most game projects go, I was having a hard time finding a good place to stop. There was still so much I wanted to add and change, but I needed to stop. I decided to add the ability to change the objects movement, and called it good. I'm happy with where it ended, and may or may not add more things in the future.

The movement in ColorFull is somewhat of an ilusion. The player never moves outside the radius of a small cirle on the middle of the game screen. It is the objects in the background that are always movement in the opposing direction of the player.

The treasure is a part of the game that never really changed. It is spawned randomly within a spawnable area that is moved to never be outside the background. There is an invicible circle around it, and when the players distance from the treasure is less then the circles radius, the treasure appears. The code that changes the game shadow depending on the distance from the treasure uses a technique called linear interpolation, or lerp.

The enemies are quite simplistic. They are managed by a class and various spawning functions. They each get a random height, width, and speed, and are spawned every six seconds. Their speed also increases over time. The timer code is done using the SetInterval and SetTimout functions.

The background objects function similar to the enemies, but are a bit more complex. There is an Object class that manages drawing the objects and movement, and all the objects are placed in an array. A function then loops through each object in the array, and spawns them and updates their position. There is also another array that stores each objects original info, so the settings don't always make changes based off the current object info.

The settings are each tied to a different function that affect the objects.