Concept
My project is a simple car game. I decided on a game as I wanted to create something that will be fully user controlled to ensure that I engage people into my work.
The game simple to learn and play. The player is tasked to navigate a car along a three lane road with incoming traffic. The player uses the arrow keys to move the car left and right from one lane to another and the space key to “zap” over the middle lane. The zapping basically means that if the player is not on the middle lane i.e in the furthest right or left lane, they can move the car to the furthest end lane jumping over the middle lane. This feature is important when playing the hard level.
Traffic cars move in opposite direction of the player car in random intervals and lanes. The player can choose the level of difficulty between the easy, medium and hard. The levels of difficulty have traffic of different speeds with easy having traffic of less speed and hard with high speeds. Traffic is more frequent in hard level and less frequent in the easy level. To ensure that the game is endless I limited the distance of play to 1500 so that the game ends when a player has driven for 1500. I am proud how I was able to make my game more complex by including different difficulty levels .These conditions ensures that while the player enjoys the game they also feel the challenge and push themselves.
Below are some of the images of the game showing the start screen, game mode and how game ends.
Sketch
Code highlight
I was proud of how I executed my collisions in the game as in the code below
let playerLeft = player.x + shrinkFactor;
let playerRight = player.x + player.w - shrinkFactor;
let playerTop = player.y + shrinkFactor;
let playerBottom = player.y + player.h - shrinkFactor;
let trafficLeft = this.x + shrinkFactor;
let trafficRight = this.x + this.w - shrinkFactor;
let trafficTop = this.y + shrinkFactor;
let trafficBottom = this.y + this.h - shrinkFactor;
// Check if the bounding boxes of the player and traffic car overlap
playerRight > trafficLeft &&
playerLeft < trafficRight &&
playerBottom > trafficTop &&
playerTop < trafficBottom
return true; // Collision detected
return false; // No collision
//collision handling
checkCollision(player) {
let shrinkFactor = 20;
let playerLeft = player.x + shrinkFactor;
let playerRight = player.x + player.w - shrinkFactor;
let playerTop = player.y + shrinkFactor;
let playerBottom = player.y + player.h - shrinkFactor;
let trafficLeft = this.x + shrinkFactor;
let trafficRight = this.x + this.w - shrinkFactor;
let trafficTop = this.y + shrinkFactor;
let trafficBottom = this.y + this.h - shrinkFactor;
// Check if the bounding boxes of the player and traffic car overlap
if (
playerRight > trafficLeft &&
playerLeft < trafficRight &&
playerBottom > trafficTop &&
playerTop < trafficBottom
) {
return true; // Collision detected
}
return false; // No collision
}
//collision handling
checkCollision(player) {
let shrinkFactor = 20;
let playerLeft = player.x + shrinkFactor;
let playerRight = player.x + player.w - shrinkFactor;
let playerTop = player.y + shrinkFactor;
let playerBottom = player.y + player.h - shrinkFactor;
let trafficLeft = this.x + shrinkFactor;
let trafficRight = this.x + this.w - shrinkFactor;
let trafficTop = this.y + shrinkFactor;
let trafficBottom = this.y + this.h - shrinkFactor;
// Check if the bounding boxes of the player and traffic car overlap
if (
playerRight > trafficLeft &&
playerLeft < trafficRight &&
playerBottom > trafficTop &&
playerTop < trafficBottom
) {
return true; // Collision detected
}
return false; // No collision
}
To handle collision between the cars I used a logic of the images being a rectangle or a box with their bounds. The algorithm checks if these boxes overlap and shows that a collision has occurred. I use a shrink factor to make the boxes smaller that the actual object size to avoid wrong collision detection when objects are close but not touching.
Challenges and future improvements
I still have a lot to do to improve my work and make it better. For example, I would like to have different types cars for the traffic and have animation for coins collected. I also wanted to add power up such as indestructibility for some period of time after picking a token. My game start and game end page are also not that visually appealing, I would like to make them more interesting and fun. Lastly I would like to have a crash effect after the player hits the traffic.
I had a couple of challenges while implementing. One challenge was balancing the background movement to the movement of the traffic cars. Since both images were moving at different speeds in opposite directions it created an effect which made the traffic look like it’s not moving. I was able to partially resolve this by making the traffic speed bigger than the background speed but it still doesn’t work well for the hard level.
Another challenge was switching game difficulty. While the player switches difficulty after losing I have scenarios of cars from the previous round still appearing . I resolved this by clearing my traffic array once a player loses and game ends.
Another issue was handling collision which I luckily resolved after a lot of code errors.
Overall the game can be made much better by incorporating some of the ideas that I mentioned above. However, I am still proud of what I was able to come up with.
