Interactive Media Midterm Documentation
My Concept: When assigned the midterm project I immediately knew that I wanted to create a game that resonated with Formula 1. My initial focus was on creating a game that was simple and accessible to play. I got some inspiration from familiar computer games such as Tetris and Flappy Bird and I aimed to incorporate similar functions and elements through straightforward controls, such as the use of arrow keys. This idea initially inspired me to create a game where you avoid hitting any competitor cars and try to achieve a new time highscore each time. However, I later thought that this idea was too generic and decided to correlate to myself more strongly.
Therefore, I came up with the idea of basing my game off of the Abu Dhabi grand prix in Yas Marina Circuit. The Abu Dhabi GP is famous for starting in the daylight and finishing at night which is a feeling that I wanted to recreate in the game. Therefore the whole race happens as the track slowly transforms from daylight to nightline in the span of 60 seconds.
Therefore, this inspired me to move away from the idea of only focusing on survival, and instead revolve it around the time span between day and night. Therefore before each race, the player gives a random number of gold tokens to collect between 10 and 20 and the aim is to collect them all before the sun sets. However, if you crash into another car before collecting the needed amount of tokens you immediately lose. This differentiates my game to others as not only is it based in Abu Dhabi, but also challenges the player as they have to decide between going for a token or remaining safe from competitor cars.
How the game works:
I decided to split the game into several screens such as the start screen, goal screen, race screen, game over screen, and win screen. In order to keep track of which screen the game is supposed to be on, I created a variable called gameState. Whereas the draw function makes sure to check it in every frame to show the right screen. Using the mousePressed function I was able to create the “start” and “play again” buttons which work by checking if the mouse is clicked within the boundaries of the button’s rectangle (ensuring to only start the game when the player intends to do so).
One of the most complicated parts of the code was creating the motion of the road whilst ensuring that it was switching from day to night. To do this I used a top-down track image that I drew onto the canvas twice, one on top of the other. The two images therefore slide down every frame allowing one to go off the screen whilst the other enters. This creates an endless effect that allows the road to look like it is continuously moving and changing. To create the transformation from day to night I used a progress value from 0 to 1 based on the timer. This progress value ensures to split the time equally between day to night. I then remembered using the map function in one of my previous weekly assignments and therefore thought that It would be suitable to implement into the game. Therefore the map() turns the progress into a transparency level, so the sunset image fades in over the day image in the first half of the game and the night image fades in over the sunset image in the second half of the game. The tint function is also used to make each of the next images lined up see through, working with the progress function to know when an image should disappear. ُthis all takes place while the images scroll in order to keep the track moving.
// changing sky from daylight to sunset to nightime
let progress = constrain(survivalTime / raceLength, 0, 1);
if (progress < 0.5) {
drawScene(dayImg);
tint(255, map(progress, 0, 0.5, 0, 255));
drawScene(sunsetImg);
} else {
// sunset to night
drawScene(sunsetImg);
tint(255, map(progress, 0.5, 1, 0, 255));
drawScene(nightImg);
}
The competitor cars and tokens were made using classes called “Obstacle” and “Token”. Each class keeps its own position and speed and has its own move() and show() implemented into the code. They are stored into arrays, allowing the game to add a new obstacle/token over time and as the game proceeds.
// Setting up the race and game page
function startRace() {
enemies = [];
tokens = [];
tokenCount = 0;
nextCar = 60;
// Doubling the tokens needed to ensure that its always possible to win
tokenGap = (raceLength - 5) / (tokenGoal * 2);
nextTokenAt = 1;
Code that I am proud of:
The part of the game that I am honestly proudest of is how the game is kept fair. I ensured to keep the game fair through the use of certain elements such as releasing double the amount of tokens needed that are spread evenly across the race rather than being saturated over one area of the track. This therefore allows every goal introduced in the goal page to be achievable. I am also proud of the function that I created called spotIsFree which checks to see that nothing is on the track before adding a new token or competitor car. I also ensured that the competitor cars and tokens drive at the same speed so that they can never drive into each other, therefore ensuring fairness across all ends.
// release a new token when it's time
if (survivalTime >= nextTokenAt && survivalTime < raceLength - 5) {
let x = random(roadX + carW / 2, roadX + roadW - carW / 2);
if (spotIsFree(x, -40)) {
tokens.push(new Token(x));
nextTokenAt = nextTokenAt + tokenGap;
}
}
Problems and areas for improvements:
Overall, I am really satisfied with the final outcome of the game. However, I did run into several issues throughout the process of creating it. Most of the issues included small bugs such as typos like capital letters in variable names, using = instead of ===, or a : instead of a ;. This therefore taught me to go back and read my code carefully, as well as use the console errors to guide my mistakes as I tend to avoid reading these especially when they’re too long. Some of the other issues that I ran into included images failing to load when uploading files, cars overlapping with one another when I tried to implement random speeds, and the game slowing down when I added the tint function and custom font.
Therefore, if I was given the opportunity to work on this assignment again, I’d make the game run more smoothly on every computer by looking back at the issue that was slowing the game down and creating unsmooth transitions between frames. I would also find a way to randomize the speeds of the cars without facing the troubles of them overlapping on top of one another. It would also be really cool to add more F1 features such as DRS boosts, pit stops, and real team competitors.
References
Use of AI:
Throughout the project, whenever I encountered difficulties or was unsure of what functions are available for use to code a particular element, I used AI to explore potential functions and techniques that could help me achieve my intentions. For example, this helped me learn about the progress reference, which divided the game into equal sections, the tint function, which made images transparent, the floor math function, which rounded the number of tokens down to a whole number, and the constrain function, which helped keep the cars within the track boundaries. This guidance allowed me to investigate these functions further using other resources such as the coding train videos, understand how they worked, and apply them to my code to achieve my intended effects. I also used AI to generate background images for the game and create the sound effect of a car collision.
Other references:
https://www.dreamstime.com/illustration/formula-top-view.html
( this is the competitor car image reference used throughout the code)
https://www.youtube.com/watch?v=1Osb_iGDdjk
(This is the coding train video I watched on conditional statements to remind me of them when creating my game)
https://www.youtube.com/watch?v=cnRD9o6odjk
(I also watched this video on while and for loops for a refresher when creating my game)
https://www.youtube.com/watch?v=tA_ZgruFF9k
(This video on removing objects from arrays helped me when trying to get rid of the coins that were touched and/or passed and not collected)
https://www.youtube.com/watch?v=nicMAoW6u1g
(This video taught me more about masking which helped me when trying to transform one image into another using transparency features)
(This is the font I used throughout my game)
Works Cited
Ostroukhova, Alena. “Black Silhouette of a Formula One Car With White Outlines. Racing Car Side View. Wheels, Spoilers and Halo. Form High-Speed Transport. Isolated on White Background. Illustration..” Vecteezy, www.vecteezy.com/free-vector/formula-1-car-isolated. Accessed 14 Oct. 2026.
“Pixabay.” Pixabay.Com, 2024, pixabay.com/sound-effects/search/coin/. Accessed 14 Oct. 2026.
The Coding Train. “2.5: The Map() Function – P5.Js Tutorial.” Www.Youtube.Com, 4 Sept. 2014, www.youtube.com/watch?v=nicMAoW6u1g. Accessed 14 Oct. 2026.
—. 3.1: Introduction to Conditional Statements – P5.Js Tutorial. YouTube, 10 Sept. 2015.
—. 4.1: While and for Loops – P5.Js Tutorial. YouTube, 11 Sept. 2015.
—. 7.5: Removing Objects From Arrays – P5.Js Tutorial. YouTube, 17 Oct. 2017.