Category: Spring 2023 – Mang

Final Project:

Idea Refinement:

Since my Midterm Progress report, these were the things I mentioned I still had to do

• Create the food items and their specific data
• I have to animate Luffy’s movements
• I have to work on collision detection with Luffy and the Food objects and the Platform objects.
• Add a time countdown
• Create an ending screen (depending on whether the user wins/loses)
• Allow the user to restart or go back to the Main Menu.

Initially, my game idea was to have a 1 min timer and you had to feed Luffy by keeping his hunger bar above 0. If you fail to do so within that 1 min, you lose, if you can, then you win. However, I did not like this idea so much because it felt like you could easily defeat every difficulty of the game easily and then that’s it, you’re officially done with the game. No need to play anymore.

Hence, I decided to change the structure of my game from this idea to a High-score type game. So essentially in my new idea, there is no more time countdown. There’s still a depleting hunger bar and the goal is to keep feeding luffy by jumping around and eating different kinds of food. Depending on the food item, the more points you get and you gotta try and get the highest possible score you can. The same difficulty settings apply, the greater the difficulty, the faster the hunger bar depletes.

I thought this new idea for the game was so much better because then it brings that addictive nature of “I want to beat my high-score” and allows the user to actually feel rewarded after getting a better score, rather than simply feeding Luffy for 1 min.

Project Structure:

For my code, I decided to implement a screen state system. So, I would have variables for different screen states whether it was for the Main Menu, Instruction Screen, Difficulty Screen, Game Screen or End Screen. Depending on what the user clicks on, it will direct them to that particular screen. This way, my draw function is very simple to understand as it just calls one function depending on the screen state.

For my project structure, I organized all of my coding files in a very specific way. For instance, I have a .js file for:

• The main skecth.js = contains the setup() and draw() functions
• A screens.js = contains the functions to display all the types of screens depending on the screen state.
• A game.js = contains all the necessary functions related to the actual game (game settings)
• A classes.js = contains all the classes that are used in my code. This includes the Luffy class, Food class, Platform class.

Sections i’m proud of:

I would say i’m particularly very proud of Luffy’s animations because that was the part I worked the hardest on and looks the cleanest in my opinion.

So for Luffy’s movements, I had to get a sprite sheet from the internet, and I found one that I really liked:

However the challenge with this sprite sheet was that it wasn’t evenly divided, so I had to manually divide the sheet myself into four and load those into the code as 4 seperate sprite sheets. Then since they have different widths, I had to divide them equally depending on their width to which some of them weren’t, hence I had to resplit the frames and resize the sprites several times which was quite annoying but at the end I got it to work.

Eventually, I managed to create a test code which works based on the arrow keys. So if you were to press RIGHT_ARROW, then the Running Right sprites would start cycling and so on depending on the directions. Additionally, if no keys were pressed, I would cycle through Luffy’s standing movements which make it seem more realistic.

I also had to animate the jump feature which was quite tricky to think of. After watching certain videos, I realized I would have to incorporate a sort of “gravity”, hence:

jump_settings() {
    this.velocity += this.gravity;
    this.y += this.velocity;
    
    //This ensures that Luffy is always above this.platform (including the ground which is what it is initialized to). Depending on what he's standing on, this.platform will change. 
    if(this.y > this.level) {
      this.velocity = 0;
      this.y = this.level;

      if(keyIsDown(LEFT_ARROW) && keyIsDown(UP_ARROW)) {
        this.velocity += this.boost;
        Jump_Sound.play();
      }

      else if(keyIsDown(UP_ARROW) && keyIsDown(RIGHT_ARROW)) {
        this.velocity += this.boost;
        Jump_Sound.play();
      }

      else if(keyIsDown(UP_ARROW)) {
        this.velocity += this.boost;
        Jump_Sound.play();
      }
    }
  }

This is specifically a function taken from Luffy’s jump class which monitors his jump settings. To essentially I have gravity set to some value (0.3). This will keep adding onto Luffy’s y coordinate to keep him grounded. If he goes beyond a certain y level (aka the ground), that will push him up.

Essentially, if any of the up arrow combinations are pressed, it would give Luffy a jump boost which is some value (10) and this is like how high luffy jumps. We add that to Luffy’s velocity which is essentially like the speed at which he is jumping and then at a certain peak point, since gravity is constantly pulling Luffy down, it will overcome the velocity value and drag him back down.

So overall, in my test code I was able to create this (controllable with the arrow keys):

Overall, i’m very happy with how Luffy’s animations turned out. It honestly feels like a real game which is so cool.

Other additions (Interactivity):

For the food class, I essentially added different 5 different foods, each of which having different “hunger points”:

• Bone Meat = 200hp (Luffy’s Favourite)
• Fried Rice = 150hp
• Cake = 100hp
• Vegetables = 50hp
• Devil Fruit = -50hp.

I thought it would be cool to add a food item that would deplete his hunger even further to make it more challenging. Plus it adds to the theme of the show because Devil Fruits make you weaker in the water.

So the food items would spawn only on platforms so I had to make sure that they interact with the Platform class by retrieving its coordinates and spawning them on it. I would spawn them at different rates depending on the difficulty, so if it’s harder, more food should spawn quickly to keep up with the depleting hunger bar.

For the platform class, this was the most challenging because I had to make sure the collision detection for all platforms worked for Luffy and honestly this was the most challenging part.

Challenging Bits and Improvements:

So for the Platform class, I added several platforms onto the screen and I also decided to add a moving platform to make it more interesting. Some of the problems I ran into were with regards to Luffy landing on the platform or his head hiting the platform. It was tricky because as Luffy moved, his coordinates did not exactly match with the coordinates of the platform. Since the platform coordinates are in integers and Luffy’s are in floating points, it never equaled each other.

This was quite challenging, so to fix this, I added a range. So, if Luffy’s coordinates were somewhere in the very small range of the platforms coordinates, then he should be able to stand on it.

It was also difficult to know which platform Luffy was standing on because although Luffy would be in the specific range of being above a platform, it’s difficult to know which platform exactly because the for loop is cycling through all platforms. Hence, to fix this, I saved the x coordinate of the platform Luffy is currently standing on and kept checking, if he left that platform, then make gravity act on him to the Ground.

The moving platform was the most annoying to deal with because its x coordinates constantly moved, so I had to create another if statement for that independently to check if Luffy was on it or not.

Here’s the collision function for that:

//This function checks the collision of Luffy with all of the platforms. It checks if his head hits the platforms that he stays under it. If his feet touch the platform, he will stay on it.
platform_collide(platform, moving_p) {    
  //Checks if Luffy's head hits a platform.
  if(this.y-this.height/2 >= platform.y && this.y-this.height/2 <= platform.y+platform.h && this.x >= platform.x && this.x <= platform.x+platform.w) {
    this.y = (platform.y+platform.h) + this.height/2;
  }
  
  //Checks if Luffy's feet are on the platform.
  if(this.x >= platform.x && this.x <= platform.x+platform.w && this.y+this.height/2 >= platform.y && this.y+this.height/2 <= platform.y+platform.h) {
    this.level = platform.y - this.height/2; //this makes platform y coordinate the new ground
    this.platform_x = platform.x;
    this.platform_w = platform.w;
  }
  
  //This gets the saved platform that Luffy is currently on's x coordinate and width and checks if he is outside the range of the width of the platform. If so, then he will fall to the ground.
  else if(this.x <= this.platform_x || this.x >= this.platform_x+this.platform_w) {
    this.level = Ground;
  }
  
  //This is specifically for the moving platform, since it has constantly changing x coordinates, it has a seperate if statement check. If Luffy is outside the range of its level, he will fall.    
  if((this.x <= moving_p.x || this.x >= moving_p.x+moving_p.w) && this.y+this.height/2 == moving_p.y){
    this.level = Ground;
  }
}

I honestly think there is much room for improvement in this function. Because although it works, it doesn’t seem very elegant to me. Additionally, I haven’t included any collision in terms of Luffy’s sides with any of the platforms, only his head and feet because they were the main ones. Hence, this can definitely be an improvement.

Overall Thoughts:

This was a very long blog post but honestly it’s because I had so much to say. To be honest I don’t even feel like i’ve said everything because there are so many fine details with every single function and class in this game. I felt like I was proud of so many aspects of my code but I only put a few because this would be extremely long then XD.

I think that’s enough to say that I genuinely enjoyed making this code. Gaming has always been a passion of mine and game development is a field i’d love to get in so this entire project was amazing. It’s also why I put so much effort into every little tiny component.

I think the execution of everything is really well organized and the game is very fun and addictive (trust me i’ve played it several times) so I would say that i’m very happy with my midterm project.

Concept

I am creating a game that I have named “Save the Ocean”. This game is inspired by the snakes game that I grew up playing. While I wanted to recreate that experience, I also wanted to add my own concept and content to the game. Therefore, I am using this game to create awareness about plastic pollution and how it affects our oceans and its wildlife.

In the game, the player will move from the start screen to the main screen after reading some instructions. When playing, the user will use arrow keys to move a character that cleans up plastic waste (just like a snake collects coins in the snake game). The more you clean, the more points you get.

To make it challenging, I have these ideas:

1. Time limit: user has to collect all the garbage within a given time.
2. Obstacles: user has to avoid obstacles

Depending on how challenging the concept is to implement, I will add more layers as needed to the project.

Game

Code

let segWidth = 30;
let step = 3;
let direction = 'start'
let gameState = 'start';
let begin = 'stop'
let startPlaying = false;
let img;
let song;
let cnv; 
function preload() {
  img = loadImage('images/1.png');
  song = loadSound('music.mp3');
}
class Segment {
  constructor(x, y){
    this.x = x;
    this.y = y;
    noStroke();
    fill('pink')
    ellipse(this.x, this.y, segWidth)
  }
  
   moveRight(){
    if (this.x > width){
       this.x = 0;
     }else {
    this.x += step;
     }
    ellipse(this.x, this.y,segWidth)
  }
   moveLeft(){
     if (this.x < 0){
       this.x = width;
     }
     else
    {
      this.x -= step;
    }
    ellipse(this.x, this.y,segWidth)
  }
   moveUp(){
     if (this.y < 0){
       this.y = height;
     }
     else{
       this.y -= step;
     }
    ellipse(this.x, this.y,segWidth);
  }
   moveDown(){
     if (this.y > height){
       this.y = 0;
     }
     else {
       this.y += step;
     }
    ellipse(this.x, this.y,segWidth)
  }
  updatePosition()
  {
    if (direction === 'right')
    {
     this.moveRight();
    }
  if (direction === 'left')
    {
      this.moveLeft();    
    }
  if (direction === 'up')
    {
      this.moveUp();
    }
  if (direction === 'down')
    {
      this.moveDown();
    }
  }
}

let segments = [];

function setup() {
  cnv = createCanvas(600, 600);
  song.play();
  append(segments,
  new Segment(width/2, height/2)
  )
}

function startPage(){
  image(img, 0, 0);
  noFill();
  if (mouseX< 580 && mouseX > 20 && mouseY < 580 && mouseY > 20) 
     {
      fill('lightblue');
      ellipse(width*4/5, height*5/6, 150,100);
      fill('rgb(246,237,237)');
      textFont('Helvetica');
      textSize(38);
      text('Start',440, 513);
      print("play option appears")
     } 
    if (mouseX < width*4/5+75 && mouseX > width*4/5-75 && mouseY < height*5/6 + 50 && mouseY > height*5/6-50)
    {
      fill('lightblue');
      ellipse(width*4/5, height*5/6, 150,100);
      if (mouseIsPressed)
          {
            gameState = 'play'
          }
    
    }
  fill(255, 60, 100);
  //text("(" + mouseX + ", " + mouseY + ")", mouseX, mouseY);
}

let currX = 300;
let currY = 300;

function draw() {
  
  if (gameState === 'start'){
    print('start');
    startPage();
  }
  else if (gameState === 'play'){
    print('play game')
    playGame();
  }

  
}

function keyPressed() {
  if (keyCode === RIGHT_ARROW) {
    direction = 'right';
    print('right')
  } else if (keyCode === LEFT_ARROW) {
    direction = 'left';
    print('left');
  } else if (keyCode === UP_ARROW) {
    direction = 'up';
    print('up')
  }
  else if (keyCode === DOWN_ARROW) {
    direction = 'down';
    print('down')
  }
}

function playGame(){
  smooth();
  background(220);
  showInstructions();
if (startPlaying === true){
    startPlayingGame();
  }

}
function showInstructions(){
  fill('lightblue')
  square(100,100,400);
  textSize(20);
  fill(0);
  text('This is where the instructions will go:', width/5, 200);
  text ('Up, down, left, and right arrows to move', width/5, 300);

  ellipse(width/2, height*2/3, 80);
  fill(255);
  text('GO', width/2-15,height*2/3+8)
  if (mouseIsPressed && mouseX > width/2-40  && mouseX < width/2+40)
    {
      print('start playing now')
      startPlaying = true;
    }
}

function startPlayingGame()
{
  background(220);
  text('Use arrow keys to start moving', width/4, height/3);
  fill('rgb(221,37,69)')
  ellipse(width/2, height/2, segWidth);
  if (direction === 'up' || direction === 'down' || direction === 'left' || direction === 'right' )
  {
   background(220);
   for (i = 0; i < segments.length; i++){
    segments[i].updatePosition(); 
  }
 }
}
function addSegment(){
  append(segments,new Segment(currX+step,currY+step))
}

I will be using object oriented programming structure and functions to design and organize the code. Text, shapes, and other elements used in class will be used.

Challenging Parts

What I find challenging at the moment is how to randomly generate obstacles and detect collisions. This is what I am figuring out now and then I will work on the design and aesthetics. Moreover, I want to check how to add video to the background or make the background move.

Introduction: Inspiration
For this project, I wanted to build something simple but, at the same time, attractive to create. As children, my sister and I used to play this game called “Barbie bike stylin ride” so much that it was our favorite. So along with creating a game for my midterm project, I wanted to live those cute childhood memories and enjoy making this game.

Concept
This is a simple rescue game. So the game is called Romeo and Juliet. As the game suggestes the main character our Romeo has to pass through all the obstacles and reach his Julliet. The obstacle course is mainly a bike ride but I’m also thinking of implementing a flying mode as well.

Future implementations
For now the project is just in the initial phase and I have to implement the buttons for playing the game, and for the instructions. I am thinking of either having different levels or increasing the speed of the game as the time increases. So the score for the game will according to the highest time the player is able to stay in game.

Most Frightening part
The collision detection is the most difficult part so far according to me.

Idea:

Thinking of what to make for my mid-term project I decided on the memory card game which I used to play a lot as a child.

The game consists of picture cards in pairs shuffled randomly and the player clicks to flip one card at a time trying to find all the pairs in as few clicks as possible. The game will continue as long as the player finds all the pairs. I will include a timer alongside and use it as a way to give ranks to the player in the end and also keep a record of the highest score in an array which would compare the time to other times the game was played and a record time would be marked as the highest score. The game will constitute 2 levels. The beginner level will have 6 pairs while the intermediate level will have 10 pairs of cards to match.

For sound I will implement the card flip sound and a light background music to get the player in a cheery mood during the game. Moreover, I will also include a glow or light shake when the mouse hovers over the card yet to be chosen. The theme of my card is animated dinosaurs and these are a few card images I’ll be using for my game.

I am still working on my code, specifically on the card class which includes variables like, position of the card on the canvas, isFlipped boolean value, isMatched, the width and height of each image and the image variable to store the card image.

 

For the midterm project, I was inspired by a famous game that appears in all arcades – “Hit the Beaver”.

For this project, a user would be shown a window where they can start the game. When they start the game, they can pick two levels of difficulty. Once they pick their preferred level of difficulty, they are redirected to a new page. On this page, there are nine ellipses and periodically, beavers appear from the ellipses and the user has to click on the as soon as possible before they disappear. There will be a certain amount of beavers that will appear in the short period of time and if the user is able to catch all of them during the given time, they win. However, if they are not, they lose the game. Then they are given a chance to restart the game. The reason why there is two levels of difficulty is twofold: if the user picks a more difficult level, more beavers will appear in the same span of time AND they will be appearing and disappearing at a higher speed. 

Concept:

For my final project in “Introduction to Computer Science,” I spent nearly two weeks brainstorming ideas before deciding between two games: “Crack the Egg” (a new game) and “BrickBreaker,” which I used to play on my father’s BlackBerry phone. I ultimately chose to make “BrickBreaker,” but promised myself that I would someday create “Crack the Egg” as well. When I learned about the opportunity to make a game for “Introduction to Interactive Media,” I knew immediately that I wanted to create “Crack the Egg.” The inspiration for this game came from another childhood game I used to play called Piano Tiles.

In “Crack the Egg,” the player takes on the role of a worker in a factory that heavily relies on eggs for production. The worker’s job is to stand next to three conveyor belts and manually inspect the eggs to ensure quality. There are three types of eggs in the game: “normal,” “somewhat bad,” and “rotten.” The player must avoid cracking the “normal” eggs while single tapping to crack the “somewhat bad” eggs and double tapping to crack the “rotten” eggs. As the game progresses, the conveyor belts will increase in speed, making it increasingly difficult for the player to inspect the eggs. Every “normal” egg that passes through uncracked adds to the player’s score. However, if the player cracks a “normal” egg or fails to crack a “bad” or “rotten” egg, they will lose one of their three lives. The player will tap the eggs using their mouse.

Code & Progress:

Once I had determined the game I wanted to create and the functionalities it required, I established a task sequence. First, I had to design a start page for the game, then develop a “Game” class and integrate the start page. I, then planned on adding interactive buttons and verifying their functionality. Next, I wanted to progress to the conveyer belt and the “Egg” class, and finally incorporating them into the “Game” class. Currently, I have constructed the background, launched the game class, and implemented a few initial features for user interactivity. While I have created placeholders for some items, such as buttons, I have verified that they all operate correctly. The progress looks somewhat like this as of now:

//game class will contain everything from user interactivity to the score keeping and life lost etc. Will (probably) be the super class to the egg class
class Game
{
  constructor()
  {
    //canvas dimensions 
    this.canvas_width = 300;
    this.canvas_height = 600;
    
    //start button on menu - coordinates
    this.start_button_x = this.canvas_width/6;
    this.start_button_y = 4.5 * (this.canvas_height/6);
    
    //instruction button on menu - coordinates
    this.instruction_button_x = this.canvas_width/6;
    this.instruction_button_y = 5* (this.canvas_height/6);
    
    //dimensions for the start and instruction buttons to be used for mouseClicked interactivity
    this.button_width = 2*300/3;
    this.button_height = 30;
    this.button_arc = 20;
    
    
    this.score = 0; //will keep the score of all the good eggs that have successfully passed
    this.player_lives = 3; //will keep track of the lives for the player and will be displayes as well
    this.speed = 10; //will control the speed with which 
    this.egg_array = []; //this array will contains objects of egg class using new Egg() and the .push method
    
    //controls what is shown to the user at a given time
    this.menu_screen = true;
    this.start_screen = false;
    this.instruction_screen = false;
    
    //will be removed for the start window but will stay for instructions window
    this.back_button_x = 10;
    this.back_button_y = 10;
    this.back_button_width = 75;
    this.back_button_height = 50;
    
  }
  
  //displays different types of screens to the user
  screenDisplay()
  {
    if (this.menu_screen == true)
    {
      image(startmenu_display_picture, 0,0);
      fill("#541675");
      noStroke();
      //boxes for the start and instruction buttons
      rect(this.start_button_x, this.start_button_y, this.button_width, this.button_height, this.button_arc);
      rect(this.instruction_button_x, this.instruction_button_y, this.button_width, this.button_height, this.button_arc);
      //if the mouse hovers over the start button
      if (mouseX >= this.start_button_x && mouseX <= this.start_button_x + this.button_width && mouseY >= this.start_button_y && mouseY <= this.start_button_y + this.button_height)
      {
        fill("green"); //turn the text green
      }
      else
      {
        fill("gold"); //otherwise the text will be gold
      }
      //write START in the button
      textSize(20);
      text("START", this.start_button_x + ((this.button_width)/3), this.start_button_y + (this.button_height/1.3));
      //mouse hovering feature for the instruction button
    if (mouseX >= this.instruction_button_x && mouseX <= this.instruction_button_x + this.button_width && mouseY >= this.instruction_button_y && mouseY <= this.instruction_button_y + this.button_height)
    {
      fill("green");
    }
    else
    {
      fill("gold");
    }
      text("INSTRUCTIONS", this.instruction_button_x + ((this.button_width)/8), this.instruction_button_y + (this.button_height/1.3));
   }
    //if the start button is clicked
    else if (this.start_screen == true)
    {
      //change the background and show under construction text but will call other functions when game is implemented
        background("gold");
        textSize(18);
        fill(255, 255, 255);
        text("UNDER CONSTRUCTION", this.canvas_width/6.5, this.canvas_height/2);
      
      //place holder for the back button that will be used to come back to the menu screen but will probably be removed in the start screen
      back_button.resize(this.back_button_width, this.back_button_height); //resize image to fit the screen size
      image(back_button, this.back_button_x, this.back_button_y);
    }
    //if the instruction button is clicked then this if statement would run to show the instruction screen
    else if (this.instruction_screen == true)
    {
      //changes background for now but is basically a placeholder for an image with all the instructions
      background("gold");
      textSize(18);
      fill(255, 255, 255);
      text("UNDER CONSTRUCTION", this.canvas_width/6.5, this.canvas_height/2);
      
      //placeholder for back button. Image is resized to fit the desired dimensions. the picture will change for a better/formal picture of the back button
      back_button.resize(this.back_button_width, this.back_button_height);
      image(back_button, this.back_button_x, this.back_button_y);
    }
  }
}

This is all that I could have done without first creating an “Egg” class. Creating an “Egg” class will ensure that the eggs move from bottom of the canvas to the top on the three conveyer belts, change color/get cracked when tapped, and respawn at the bottom of the canvas. Apart from this, the restart button after game ends and the audios for game background and egg cracking will also be added.

Challenging Parts:

Incorporating the “Egg” class into the “Game” class is proving to be a significant challenge for me. While I am aware that I must use an array in the “Game” class to store the objects of the “Egg” class, I am struggling with egg positioning. I am uncertain how to create a loop for the eggs to appear one after the other without overlapping each other. I aim to ensure that the distance between each egg is identical. Additionally, I am unclear on how the eggs that move beyond the canvas will return to their starting position behind the canvas and at what y-coordinate. Similarly, my concerns apply to the dividers I wish to employ between the conveyer belts, as they will also loop around. I am hopeful that if I can solve one problem, the solution may help me with the other. At present, I am narrowing my focus to resolving the issue with the eggs alone. Instead of three conveyer belts, I will use one conveyer belt (one array) and see if I can find a solution for one belt first. Finding it for one belt will help solve it for the other two belts and the dividers. I plan to devote two days to this issue, and if I cannot find a solution, I will turn to Youtube tutorials for guidance and inspiration.

For my midterm game, I have decided to make the Starship Shooters game in p5 js!

It was a clicker shooter where you control a spaceship with your mouse allowing you to move and shoot the oncoming enemy attach. Your goal is to shoot them all and not let them get into your backline.

Here is the so far basic sketch of what I’ll be expanding upon:

Ill be designing classes for the ship, bullets, and enemies while defining functions for shooting and such. The game will track how many enemies you shoot essentially being the score for the player.

The most frightening thing I can imagine right now is accurately coding the collisions for the enemies and the bullets with respect to their individual hitboxes. I plan on using sprite so coding in their hitboxes may prove to be tricky. I will try utilizing the console.log or basically print debugging in order to test hitboxes and make sure collision works fine.

If all goes to plan, I’ll be able to make a retro-arcade styled shooter clicker game with a way to keep score!

 

Concept

I wanted to create a game that represented my childhood and so I could share it with my sibling to create a feeling of nostalgia and hopefully play it when we meet. So, I decided to create Snakes and Ladders which was my go-to board game.

The code defines the size and spacing of the board, the layout of the board using an array, and the position of the ladders and snakes. It also defines the current player and their position on the board. The code draws the board, ladders, snakes, players, and dice roll. The drawBoard() function creates a grid of rectangles that represent the cells on the board, with each cell numbered from 1 to the total number of cells. The drawLadders() and drawSnakes() functions draw lines connecting the start and end points of each ladder and snake on the board. The drawPlayers() function draws a circle for each player at their current position on the board. The drawDice() function draws a rectangle to represent the dice and displays the result of the roll. The checkForWin() function checks if the current player has reached the last cell on the board, in which case it displays a message indicating the winner.

Future Improvements

I have the basic implementation for the game, I just have to make it more user friendly and add animations such as a dice showing the number which the player is moving. I also have to add a sound element for the game to make it more engaging e.g., a sound when u climb the ladder and a sound of the snake when the snake bites you. There is still a lot to do but the basic game is this which will be evolved into a much a better visually appealing game. I am also still designing the cover for the game, which will also have the instructions as well as the play button and have a nice background sound that goes with the theme.

The most frightening part

The problem I ran into was that I created functions for everything and did not use OOP which is why I will have to convert my code to fix this issue. This is stressful for me as I do not know object-oriented programming as such. I will have to work on this and figure it out. As a result, I must refactor my code to incorporate OOP and resolve this issue. However, this task is daunting for me as I am not well-versed in OOP, and it is causing me some stress. Nonetheless, I hope it will work out in the end.

For this midterm project, I decided to create a computer modification of a Ping Pong game. In this game, the two players control the two paddles on either side of the game window. They move the paddles up or down to hit the moving ball. The score of a player increases when he/she hits the ball.

Game features:

• Player must bounce the ball in order to score points
• Each player will have a paddle and an individual score counter
• Players can move the paddle only vertically (along the initially specified y-axis)
• Paddles will be in rectangular shape, the disc will be in circular shape
• The control key for the player 1 will be “W” and “S” keys, for the player 2 – “UP” and “DOWN” keys

 

The Most Complex Part:

The most complex  and time-consuming part of this project was writing the code for checking the collision the paddle with the disk and making it bounce off as in the real life. In order to achieve this goal, I decided to rely on the physic’s law of collision: when the disk hits the surface, it will bounce with the same speed as before in the opposite direction(conservation of impulse) and it will also bounce off with the same angle (angle of incidence = angle of reflection). After a few trials and error , I succeeded in implementing this collision check and bouncing correctly.

The below code is where I implemented this logical check:

//Code for managing Disk movement               
Disk_movement(){ 
    this.disk_xc = this.disk_xc + this.disk_speed_x
    this.disk_yc = this.disk_yc + this.disk_speed_y
}

//Code for managing Disk bouncing when it touches boundaries 
 Disk_bouncing(){

  
    //Code for bouncing off if disk hits the boundaries
    //this if statement will be executed if the disk touches right-side boundaries of the table
    if(this.disk_xc + this.disk_w/2 > RES_W){
      
      this.disk_speed_x = - this.disk_speed_x
    }
            
     //this if statement will be executed if the disk touches left-side boundaries of the table       
    else if(this.disk_xc - this.disk_w/2 < 0){
      
      this.disk_speed_x = - this.disk_speed_x
                 
    }
   
    //this if statement will be executed if the disk touches upper or lower boundaries of the table
    if(this.disk_yc + this.disk_h/2 > RES_H || this.disk_yc - this.disk_h/2 < 0){
        if(RES_H/2 + 100 < this.disk_yc  || this.disk_yc < RES_H/2 - 100){
            this.disk_speed_y = - this.disk_speed_y
        }
      
    }
 
    this.disk_xc = this.disk_xc + this.disk_speed_x
    this.disk_yc = this.disk_yc + this.disk_speed_y            
 }
                    

 

Future Improvements:

I still don’t have images and sounds, so I will work on integrating them to this game. Apart from the background music, I also want to add a collision sound for when the disk hits the paddle.  In addition, I’m still working on adding the restart feature to the game, and I also want to make this game consist of several rounds.

 

 

Concept:

For my midterm project, I was inspired by some of the mini-games in Five Nights at Freddys: https://www.youtube.com/watch?v=HB8iVkfWlBU.

Especially the balloon-boy mini-game or Chica mini-game where essentially as the main character, you’re in a platform style game and you’re supposed to go around collecting balloons to give to the children throughout the game. I found it a pretty simple concept but very fun to play around with:

I obviously wanted my own design of the game but I had trouble thinking of what to do. But, I was watching one of my favourite animes One Piece and I thought why not just make a game about that! It’s a pretty cool idea and it’s pretty motivational for me so I went along with it!

My Game Idea:

The game idea is pretty cool. Essentially the main character of the series is a guy called Luffy, and he is known for always being hungry and eating everything he can possibly find. So, I decided to make a similar platform style game where Luffy would jump around eating as much food as possible.

To make it into a game, I thought of implementing a depleting hunger bar, and the goal is to keep feeding Luffy by jumping around and eating food before that hunger bar runs out and the only way to refill that hunger bar is to eat food. If you manage to satisfy Luffy’s hunger bar before time runs out, you win! Else you lose!

Progress:

With regards to my process, i’ve so far, made the main menu screen. This main menu screen has some music playing in the background, I added a slider so the user can control the volume. I added an instructions tab so the user knows how to play. I also added a difficulty system, where the user can select between Easy, Medium and Hard mode. The idea is, the greater the difficulty, the faster Luffy’s Hunger bar depletes, hence the more challenging it gets to satisfy Luffy’s hunger.

I’ve also set the stage for the platforms of the game and i’ve added an animation for the hunger bar depletion when the game starts. If the hunger bar reaches 0, for now it just says “Game Over”:

Game:

Things still left to do:

• I have to create the food items and their specific data (this includes their spawn point, spawn rate and food value)
• I have to animate Luffy’s movements (using a sprite sheet i’ve found on the internet)
• I have to work on collision detection with Luffy and the Food objects and the Platform objects.
• I have to ensure that when a collision is detected between Luffy and Food, it should refill the Hunger Bar
• Add a time countdown
• Create an ending screen (depending on whether the user wins/loses)
• Allow the user to restart or go back to the Main Menu.

Terrifying parts of the code:

In my opinion, I think the most terrifying bit is going to be two things, animating Luffy’s movements, being both left and right and especially the jumping animation. The issue with this is, if you press both the LEFT and UP arrow keys together, they don’t move the object diagonally because it registers as one key pressed at a time, so to handle smooth movement is going to be tricky. I’m thinking to avoid this I might have to ensure the platforms are close enough for the user to maneuver across the game.

Also animating Luffy’s jump is going to be extremely tricky. For this, I am thinking of creating a sort of gravity variable, which will allow Luffy to move up a maximum distance when pressed the UP Arrow key and then after that, he would move down in the opposite direction. Still need to do some thinking for that.

Finally, another tricky thing would be collision detection. I’m wondering how to ensure that Luffy can stand on the platforms. For now, i’ve set up a class for Platforms and a class for Luffy and if their x and y coordinates are the same, then Luffy can stand on the platforms. Still need to do some more thinking of that.

Overall:

Overall, I feel like this can be a really cool game. The easy bit is kinda done but the challenging bits are here and I’ll work hard to ensure the game is great!