Introduction

Pong is a classic two-player game that simulates table tennis. The players use paddles to hit a ball back and forth across the screen. The objective of the game is to score points by getting the ball past the opponent’s paddle.

Project Concept and Design

The goal of this project is to create a basic Pong game that can be played by two players. The game will have two paddles, one for each player, and a ball that bounces around the screen. The players will use their paddles to hit the ball back and forth, with the objective of getting the ball past the opponent’s paddle. The game will have a scoring system that keeps track of each player’s score, and the first player to reach a certain number of points (e.g., 10) will be declared the winner. The game will also have sound effects to enhance the gameplay experience.

The Most Frightening Part (Implemented)

Initially, the most frightening part of this project was not knowing how the game would pan out with the collisions and movement of the ball and paddles. It was essential to get that part of the game right to ensure that the game could be implemented. To reduce this risk, I decided not to leave the implementation of the game to the end but started implementing the project slowly with one feature at a time. This approach allowed me to test each feature as I implemented it and make adjustments as needed to ensure that the game was working as expected. There sure are more improvements that can be added to this system, but a decent amount of work has already been done.

The paddles now move with the UP and DOWN arrows, and the “W” and “S” keys.

Future Enhancements

• Adding a picture background in the play area.
• Adding an instruction screen(with text) in the beginning.
• Adding sound effects.
• Adding a game termination check and a “Game Over” screen.
• Adding a restart button in the “Game Over” screen that restarts the game.

Link: https://editor.p5js.org/swostikpati/full/ShPga9v6_

For my midterm project, I want to create a philosophical experience disguised as a dungeon crawler game. I am taking inspiration from The Legend of Zelda, to the point that I plan to use their assets. The experience will consist of two parts:

1. Start of the game, which looks like something you’d find in old retro games from the 90s. You’re shown that you can move around and attack, and there are monsters aroud, so you conclude that you should attack and kill them.
2. Eventually, you have to be killed by the monsters (a scripted death). Then the tone (and possibly artwork, art style) completely changes. You’re presented with a ‘path’ to the afterlive and by walking the path you have to confront all the lives you took. I essentially want to subvert the expectations of what it means to be a character in a retro video game killing other live in the game.

From the start, I realized that one of the most difficult parts would be creating a good and efficient animation system, where I would be able to animate entities in the game using sprites/spritesheets. Therefore this is the first major thing I implemented. This actually consisted of two major things: 1) a mechanism for loading assets (images, sounds, etc.), and 2) a way to animate game entities.

Loading assets

I wanted to make my mechanism for loading assets easily configurable, so that I could easily change and configure images, spritesheets, and animations without going through several places in the code. I came up with the concept of having a file, such as assets.txt, which contains all my assets. Each line in the file would look like one of the following:

Texture [TextureName] [FilePath]
Animation [AnimationName] [TextureName] [FrameCount] [Speed]

(Note: I plan to add a way to define sounds too. And I will explain how animations work in a bit.)

I am essentially giving a name to all assets so I can reuse and easily find them later when creating the game entities. At the same place I am configuring them.

In practice, the concept of having a file that tells you which other files to load (i.e. images) seems difficult to implement in p5, even using the preload function. Therefore I had to define the ‘assets’ file as a list of strings, which is functionally the same, although looks a bit uglier. Still, it accomplished what I wanted.

Moving on. I created an Assets class which handles the loading of all asset files and creating all animations, and I do these things in the preload function of p5. In the assets class, I have two maps, which I populate using information from the file:

1. textureName (a string) –> p5.Image (the thing created when using loadImage)
2. animationName (a string) –> Animation (a class I created and will describe soon)

When loading assets, I had to make sure that all textures are loaded before all animations, because every animation object has a texture which is passed to its constructor and whose properties are used immediately. To accomplish this order of loading, I had to use callback functions, but everything turned out alright in the end.

Animations

I created an Animation class which contains its name, its spritesheet (texture, i.e. a p5.Image), how many frames the animation should have before ending or repeating, and its speed (how often it should update). For example, a texture I used is the following:

Then I create an animation that uses this texture (i.e. this texture is the animation’s spritesheet). The animation has a frameCount of 2 and a speed of 15, which means that it should change its state every 15 frames.

To draw animations I used p5’s feature to only draw sections of its spritesheet. I also store at which ‘cell’ I currently am in the animation in order to speed things up a bit.

Switching between animations based on state

I wanted my player character to use a different animation depending on whether they are standing, running, attacking, etc. To implement this I also store a state component in the player, which is just a string with one of these values: “stand”, “run”, or “attack”. I also store the direction the player is facing along each axis, which changes when they move. For example, if they are currently facing down, the facing would be a vector (0, 1). Facing up: (0, -1). Facing right: (1, 0). Facing left: (-1, 0). Using this, every frame, I update the animation to display.

The sketch

Future plans

With the asset and animation systems done, it is now very easy to add and use new textures and animations. I can now focus on creating the level, adding sounds/music, and most importantly creating the second component of the game.

Concept:

My concept this week is to continue building on the “SURVIVE” game I made in week 3. It is an interactive video game in which the player is a triangle located at the cursor and the objective is to avoid incoming projectiles RGB colored projectiles.I have removed the “MISSION ACCOMPLISHED” page as I have opted to make the game Tetris style. That means the game is an endless mode in which the goal is to survive for as long as possible and get a highscore. Instead of counting down the timer counts up and speed of  the projectiles get faster based off of the time elapsed. I have also added different menus to help navigate the game. This includes a main menu and game over menu.

Embedded:

Code:

function resetGame() {
  rain = [];
  range = 400;
  size = 30;
  health = 3;
  ctr = 0;
  count = 0;
  lost = 0;
  win = 0;
  speedinc = 0;
  starttime = 2;
  timer = 0;
  for (let i = 0; i < 120; i++) {
    rain.push(new raindrop());
  }
}

 

The main change between this new iteration is the ability to reset the game back to its original state without rerunning theb sketch. This is made possible using the resetGame() function. The purpose of this function is to reinitialize all the games attributes back to its baseline.

if (level == 0) {
    noCursor();
    background(0);
    print("lvl 0");

    fill(200, 200, 100);
    triangle(
      mouseX - 10,
      mouseY + 5,
      mouseX + 10,
      mouseY + 5,
      mouseX,
      mouseY - 10
    );
    if (frameCount % (5 * 60) == 0) {
      print("fdnsjgds");
      speedinc = speedinc + 1.25;
    }
    if (frameCount % 60 == 0) {
      timer++;
    }

    if (timer <= starttime) {
      fill(255);
      textSize(24);
      textAlign(CENTER, CENTER);
      text("OBJECTIVE: SURVIVE", width / 2, height / 2);
    } else if (timer > starttime) {
      displayTimer();

      for (let i = 0; i < 120; i++) {
        noStroke();
        rain[i].draw();
        rain[i].move();
        rain[i].checkForCollisions();
        ctr++;
        if (ctr > 2) {
          ctr = 0;
        }
      }

      if (win == 1) {
        background(0);
        fill(255);
        textSize(24);
        textAlign(CENTER, CENTER);
        text("MISSION ACCOMPLISED", width / 2, height / 2);
        win = 1;
        resetGame();
      } else if (health <= 0) {
        resetGame();
        level = 2;
      }
    }
  }
  if (level == 1) {
    background(0);
    fill(255);
    textSize(24);
    textAlign(CENTER, CENTER);
    text("Main Menu", width / 2, height / 2 - 36);
    text("Play", width / 2, height / 2 + 36);
    text("Highscores", width / 2, height / 2 + 80);
    resetGame();
    // push();
    fill(0,0,0,1);
        rect(width / 2 - 75 ,
        height / 2 - 15 + 36 ,
        75*2 ,
        30)
    stroke(0);
    // pop();
    // stroke(255);
    print("lvl 1");
     // if (mouseIsPressed) {
      if (
        mouseX > width / 2 - 75 &&
        mouseX < width / 2 + 75 &&
        mouseY > height / 2 - 10 + 36 &&
        mouseY < height / 2 + 25 + 36
      ) {
        // push();
        stroke(255);
        // pop();
        if (mouseIsPressed){
          level = 0;
        }
      }

  }
  if (level == 2) {
    cursor(CROSS);
    background(0);
    fill(255);
    textSize(24);
    textAlign(CENTER, CENTER);
    text("GAME OVER", width / 2, height / 2 - 36);
    text("Retry", width / 2, height / 2 + 36);
    text("Return to main menu", width / 2, height / 2 + 80);
    print("lvl 2");

     if (mouseIsPressed) {
      if (
        mouseX > width / 2 - 75 &&
        mouseX < width / 2 + 75 &&
        mouseY > height / 2 - 25 + 36 &&
        mouseY < height / 2 + 25 + 36
      ) {
        level = 0;
      }
      if (
        mouseX > width / 2 - 75 &&
        mouseX < width / 2 + 75 &&
        mouseY > height / 2 - 25 + 80 &&
        mouseY < height / 2 + 25 + 80
      ) {
        resetGame();
        level = 1;
      }
    }
   } 
  
  if(level == 3){
     
   }
}

 

Another aspect is navigating between the different menus. The structure that this is done with determines how clean or messy the code would be. I opted to have each menu in a different if statement which checks the current “level”. There are 4 different levels currently. These consist of the game itself, main  menu, game over screen, and high scores. Using this structure, the program is only able to access which is made available to the current level variable. This makes developing features in the game much simpler and easier.

Challenges:

I had an issue where when I return to main menu after the Game over screen the buttons would not work, the issue was fixed by temporarily commenting out the level 3 line as it has not been implemented which caused the program to completely halt as it entered level 3 (highscores).

Future Improvements:

The project is halfway completed. The next features to be developed: Add a points system which increases based on the timer, Add a background image and sound effects, Add various power ups and interactable items, complete the Highscore page and make it so that you can enter your name and score into the leaderboard, and finally to add different fonts and sprites. My hope is that the game ends up being a fun and engaging game in which friends can compete in achieving highscores.

 

 

 

 

Concept

For my midterm project, I decided to make a game based on one of my favorite fables, The Boy Who Cried Wolf! The story goes that the boy, a shepherd, gave a false alarm to a village about a wolf coming to attack their sheep. Having done it two times, the third time, when a wolf was actually coming, the villagers did not believe him, leaving the sheep dead. There is a valuable lesson in this story, but as a child, I always wished they had saved the sheep. Why not believe the third time, you know, just in case? So, I decided to create a game in which a shepherd needs to collect his sheep into a pen before the wolf arrives to eat them.

Progress

For now, I have created the sheep and shepherd graphics and shapes which are underneath the images. The shepherd moves the sheep as he gets close to them and the sheep move around each other if they get too close. What is left is the sheep pen and the interactions concerning it. As for the graphics that are left, I intend on making the wolf, start and end screens, all pixelated as that is what I aim for the game to look like. I have also created the tree graphics which I will place around the screen.

Challenge

The most challenging part as of now is the sheep and pen interactions. Since the sheep move by 15 pixels as the shepherd approaches, it will take some thinking and logic to stop them from moving through the fence. I have experimented a bit and some solutions worked to a certain extent while others failed miserably. Since that is the last part of the game that needs to be implemented, I will put in some work to make it as smooth as possible. I have imported a library that makes shape interactions easier to handle.

The game might not be extremely complex at its core, but I have limited myself to only one or two libraries. The rest I wish to finish using pure JS. If possible, I also wish to create a second phase of the game where the shepherd and the wolf fight if the sheep are placed in the pen on time. If I have time left, I will try and make this possible or simplify the fight in order to incorporate it into the final version.

 

For the midterm, I decided to recreate one of my favorite childhood games, Doodle Jump. The user will be able to play the game using either WASD or arrows. The goal of the game is to score as many points as possible. The higher you get, the harder it will be to survive.

As you can see on the sketch, the game already has the intro page, the user selects which doodler he wants to use; the main page, the game itself with platforms, boosters, and hazards; and the game over the page, a meme about how you lost.

The hardest part of this project is the animation of a doodler. There are so many cases such as trampoline, jetpack, hat, shooting and etc. For each one of them, there is a different doodler. Hence, I had to upload more than 20 images and use each one of them accordingly. I already implemented this part, which makes my life much easier.

However, there are a few things that do not work right now. The sounds get collapsed. Only one platform is shown. The Jetpack is shown instead of the appropriate booster. These are the bugs I have to fix before spring break.