Concept
For this project, I created an interactive animation where the player controls Superman in his mission to save people. The gameplay is simple: Superman must avoid clouds (which act as obstacles) while rescuing a person from the bottom of the screen and flying them to the top. Players use the arrow keys to control Superman’s movement, and the background color changes dynamically when the mouse is clicked. The score updates every time Superman successfully saves a person, adding a sense of progress.
Code
The program begins by creating a 400×600 canvas and setting Superman’s initial position near the bottom of the screen. The person to be saved is randomly placed at the bottom of the screen. The background features a dynamic gradient that shifts colors when the player clicks the mouse, with animated stars moving across the sky to enhance the visual appeal.
For managing the positions of clouds, I used individual variables for each cloud’s position, speed, and size. However, managing stars in the same way proved to be challenging because I wanted to include a large number of them. Using individual variables for each star would have been cumbersome. Therefore, I used arrays to store the stars’ positions, sizes, and speeds, making it easier to manage and update their movement throughout the animation. This approach works well for handling many stars while still keeping the code organized.
Highlight
One part of the code that I’m particularly proud of is the interaction between Superman and the clouds. The clouds move across the screen, and Superman has to avoid them while rescuing the person. If he hits a cloud, his position resets, adding a challenge to the game. Here’s the code that handles cloud movement and collision detection:
//function to draw cloud and check collision
function drawCloud(x, y) {
fill(255); // Cloud color (white)
ellipse(x, y, 60, 40); // Draw cloud as an ellipse
// Check if Superman collides with a cloud
if (dist(supermanX, supermanY, x, y) < 50) {
supermanX = width / 2;
supermanY = height - 100; // Reset Superman's position
}
}
Embedded Sketch
.
USE THE ARROW KEYS ON THE KEYBOARD TO CONTROL THE MOVEMENT OF SUPERMAN
Reflection and Ideas for Future Work
Overall, I’m satisfied with how the interactive elements of the animation came together, particularly the moving clouds and the dynamic background. These features make the scene feel more alive and add a layer of interest. However, I think I can improve the visual design of the characters. Adding more details to Superman and the person being saved would enhance the overall look.
One challenge I faced was managing multiple objects, particularly the stars. However, using arrays made it much easier to handle their positions and behaviors. This approach allowed for smoother animations and better organization of the code, simplifying the process of managing multiple stars at once.
In the future, I’d like to focus on refining the visuals, especially Superman’s appearance, and possibly add more animation to make the scene more engaging. For example, animating Superman’s cape or adding small interactions when he saves the person would be nice improvements.
