Midterm Project: Runner Game

Introduction and Concept:

For my midterm project, I decided to create an endless runner game, drawing inspiration from the classic “dinosaur game” featured in Google Chrome when there’s no internet connection.

The core objective of the game is to navigate a player-controlled square through various obstacles, aiming to achieve the highest score possible. The design aesthetic is inspired from interplanetary and retro themes, with background music carefully selected to complement the game’s dynamic pace.

Full screen: https://editor.p5js.org/hazieloli/full/D7t8p9wFx

Failed Attempts:

Initially, I drew inspiration from the movie “Rio” and envisioned developing a game reminiscent of “Angry Birds,” incorporating characters and music from the film. Despite following tutorials and exploring libraries for implementing physics, my attempts led to a demo showcasing the initial stage of the game without the desired physics effects.

Subsequently, as I progressed with implementing physics into the game, I encountered complexities in defining game conditions, such as winning and losing.

Finally, I changed my idea towards developing my current endless runner game for a more manageable project.

Sound and Music:

For the music, I used the instrumental version of the song “Mas que nada”:

https://youtu.be/aLR5DikAvUc?si=6J-CDS4vQdfAavDE

For the sound effects, both the jump and gameover sound, I downloaded from Pixabay:

https://pixabay.com/sound-effects/search/jump/

https://pixabay.com/sound-effects/search/game-over/

Design:

 

For the background images, I used Canva to create the start page:

And the second background image was downloaded from Freepik:
https://www.freepik.com/free-vector/night-ocean-landscape-full-moon-stars-shine_17740155.htm#query=game%20background&position=1&from_view=keyword&track=ais&uuid=0b2c3375-e893-4fd3-961d-793b1389a916

Code:


A part of the code that I’m particularly proud of, even though it is simple, is the draw function:

function draw() {
    if (!gameStarted) {
        // Don't run the game if it hasn't started yet
        return;
    }

    // Draw background image
    image(backgroundImage, 0, 0, width, height);

    score += 0.05;
    fill(255);
    textSize(30);
    text(round(score), 10, 32);

    player.show();
    player.move();

    if (random(1) < 0.03) {
        if (score > minScore) {
            blobs.push(new Blob());
            minScore = score + 2 + random(1);
        }
    }

    for (let i = blobs.length - 1; i >= 0; i--) {
        blobs[i].setSpeed(8 + sqrt(score) / 5);
        blobs[i].move();
        blobs[i].show();

        if (player.hits(blobs[i])) {
            print("GAME OVER");
            gameOverSound.play();
            noLoop();
            // blobs.x = width;
            // startGame();
        }

        if (blobs[i].getX() < -50) {
            blobs.splice(i, 1);
            print("Removed");
        }
    }
}

Challenges faced:


I believe one of the most challenging parts of building this project was to think of something new in such a limited time, after spending days working on my failed attempts. Also, it was quite difficult for me to implement the restart function on the game in order to reset the position of everything when it’s game over.

Areas of Improvement:

Reflecting on the project’s development, I acknowledge areas with potential for enhancement:

  1. Design: Addressing glitches on the starting page and creating an additional background image and message for the game-over screen to ensure a seamless and visually engaging user experience. Also, work on the alignment of the pages.
  2. Level of Complexity: Introducing different levels of difficulty to offer players varying challenges and experiences. For example, gradually increasing obstacle speed as the player achieves specific score milestones to heighten the game’s intensity and replay value.

Tutorials: https://youtu.be/TDQzoe9nslY?si=w9yKP0toDZrD_I3t & https://www.youtube.com/live/FHXDywq69v4?si=sFEaLB8_rZKxWNyq

Leave a Reply