Concept
The main idea was to create a fun, fast paced game which would be very fun and challenging at the same time. The game is in the “endless runner” genre of games (if you can avoid traffic for that long) where the main objective is to survive as long as possible and collect as many coins as you can therefor raising your score.
The game was inspired by other popular endless runner games such as “Subway Surfers” but with a progressive difficulty curve to make the game more difficult. The game also has some strategizing as sometimes the coins can lead you into a trap with no way out and a quick game over!
What are you waiting for, click here and try to dash through the traffic!
How the game works and code parts I am proud of
The game, of course, starts with an instructions screen where the player is asked to press enter to begin the game. As the game starts the player can see that the left and the right arrows control the movement of the car on the bottom of the screen. After a bit cars start spawning on top of the screen, randomly, but on carefully selected coordinates to ensure they don’t spawn off the screen or off the road (some traffic laws can’t be broken).
The player then sees coins appearing also randomly, but moving slower than the cars to ensure the user can pick them up safely. The user needs to decide if it is safe enough to move left or right to collect the coin and be sure to have enough time to move away from oncoming traffic.
Even though the goal is to collect as many coins as possible, as the game progresses, and the player is collecting coins and making their score higher, the speed of the oncoming traffic increases making the game much more difficult, but also making the distance values move faster which can make the survival more rewarding for the high score. The speed of the traffic is maxed at 25 so the game doesn’t become unplayable.
When the user eventually hits the oncoming traffic, they are met with a game over screen displaying the score they achieved in the last run with the text asking the user to press enter if they want to retry and beat the last score.
I am very proud with the collision detection system, which in the beginning did face some challenges (will talk more about it later in the documentation) but now works perfectly!
//Handling collision detection
function checkCollisions() {
for (let t of trafficCars) {
// print("Collision with traffic!");
car.x < coin.x + coin.w &&
car.x + car.w > coin.x &&
car.y < coin.y + coin.h &&
// print("Coin collected!");
coin_collect.setVolume(0.3);
coin.y = random(-300, 0);
coin.x = random(coin_spawn_points);
//Handling collision detection
function checkCollisions() {
for (let t of trafficCars) {
if (
car.x < t.x + t.w &&
car.x + car.w > t.x &&
car.y < t.y + t.h &&
car.y + car.h > t.y
) {
// print("Collision with traffic!");
crash.play();
game_over = true;
displayGameOverScreen();
noLoop();
}
}
if (
car.x < coin.x + coin.w &&
car.x + car.w > coin.x &&
car.y < coin.y + coin.h &&
car.y + car.h > coin.y
) {
// print("Coin collected!");
coin_collect.setVolume(0.3);
coin_collect.play();
score += 1;
coin.y = random(-300, 0);
coin.x = random(coin_spawn_points);
}
}
//Handling collision detection
function checkCollisions() {
for (let t of trafficCars) {
if (
car.x < t.x + t.w &&
car.x + car.w > t.x &&
car.y < t.y + t.h &&
car.y + car.h > t.y
) {
// print("Collision with traffic!");
crash.play();
game_over = true;
displayGameOverScreen();
noLoop();
}
}
if (
car.x < coin.x + coin.w &&
car.x + car.w > coin.x &&
car.y < coin.y + coin.h &&
car.y + car.h > coin.y
) {
// print("Coin collected!");
coin_collect.setVolume(0.3);
coin_collect.play();
score += 1;
coin.y = random(-300, 0);
coin.x = random(coin_spawn_points);
}
}
I am also very proud of the speed increase with the score increase which also makes the distance value rise faster.
//Making the game faster as the score goes up
function increaseDifficulty() {
let speedIncrease = min(20, 7 + score * 0.5);
for (let t of trafficCars) {
coin.vy = speedIncrease - 0.5;
// Adjust distance increase interval based on speed
distanceUpdateInterval = max(50, 100 - speedIncrease * 50);
//Making the game faster as the score goes up
function increaseDifficulty() {
let speedIncrease = min(20, 7 + score * 0.5);
for (let t of trafficCars) {
t.vy = speedIncrease;
}
coin.vy = speedIncrease - 0.5;
// Adjust distance increase interval based on speed
distanceUpdateInterval = max(50, 100 - speedIncrease * 50);
// print(speedIncrease);
}
//Making the game faster as the score goes up
function increaseDifficulty() {
let speedIncrease = min(20, 7 + score * 0.5);
for (let t of trafficCars) {
t.vy = speedIncrease;
}
coin.vy = speedIncrease - 0.5;
// Adjust distance increase interval based on speed
distanceUpdateInterval = max(50, 100 - speedIncrease * 50);
// print(speedIncrease);
}
This part took some testing, that is why I left the print statement there to show how I tested the code and the logic of the game.
Problems faced along the way
Unfortunately, like every code ever written, it didn’t come without hardship. The beginning was smooth sailing as I started with simple shapes and just implementing simple game logic.
This was a great start and I was happy with the progress I was making.
The first problem, though, arose when I started uploading photos to use for objects in the game.
This is the image that I used for the player object. I used a PNG file to have the transparent background so it only looks like the car is on the screen. Now, at first I thought this would work perfectly and that I wouldn’t have any issues to deal with, but would quickly learn otherwise. The issue was the collision detection which happened even if in theory there was enough distance between cars.
Why is this? Well even though we don’t see the transparent background of the PNG, it is still there and the collision detection algorithm detects it as a part of the car object. To fix this I used a built in image function which cropped the unnecessary parts of the image.
car = new Car(160, 300, 50, 100);
for (let i = 0; i < traffic_number; i++) {
new Traffic(random(traffic_spawn_points), random(-500, 0), 65, 115)
car = new Car(160, 300, 50, 100);
for (let i = 0; i < traffic_number; i++) {
trafficCars.push(
new Traffic(random(traffic_spawn_points), random(-500, 0), 65, 115)
);
}
car = new Car(160, 300, 50, 100);
for (let i = 0; i < traffic_number; i++) {
trafficCars.push(
new Traffic(random(traffic_spawn_points), random(-500, 0), 65, 115)
);
}
(The 3rd and 4th values of the functions)
Other issue I faced was with the file loading system, or specifically, writing in the csv file to make the game keep track of the highest score of a player.
My vision was to collect all the scores of all the players who have every played and display the best, but I later learned that due to security reasons the p5js editor does not allow writing in files and has a read-only access to all the files uploaded. I decided to still keep the file and just display some high score to encourage players to try to beat it. Maybe in the future I could use google docs with their API to help me write in them, but due to the time constraint this will have to do for now.
There is also an issue with the objects sometimes spawning in one another. Fixing this would require changing the whole spawning logic and is unfortunately not possible in the short time span, but is definitely something that can be fixed in the future.
Future improvements and final thoughts
In the future I would love to work on this game even more and polish it to make it perfect. I would like to add some animations for crashes and maybe driving and would love to add power ups to spice up the gameplay. Unfortunately due to time constraints these implementations were not possible for this submission, but I think would be a fun addition to have in the future.
Overall I am happy with how the game turned out. In the beginning the game seemed like a big workload and a heavy task I set upon myself, but as I got to work on it more I got to work with everything we were taught in class and I really started to love the game and the experience of coding it.
This project has not been just a great learning opportunity, but has also inspired me to work on more different projects and become better at creating games. I will definitely be working on this project more and refining it to perfection.
Thank you for reading the documentation!
