Midterm Project Progress – Rocket Rendezvous

The concept

The concept of this game is basically have a rocket fly up in the sky and eventually leave the earth’s atmosphere and go to other planets. There will be several horizontal bars on the rocket, and a line moving across the rocket. Whenever the line reaches the green bar, the user must click quickly. Based on how close the line is to the green bar and how well the user timed their click, the rocket will get a velocity boost.

The Current Implementation

I have tried several implementation by now, and faced several dead ends. In the beginning, I tried to make the rocket fly across the background, or keep the rocket stagnant and make the background move “downwards”.  But going to other planets and showing the whole game space would be difficult. Eventually, I ended up with the approach that I will draw the whole game space out first. I am doing this by making my canvas really long (500,5000). This means my rocket itself will be very tiny compared to the rest of the drawing. Then, I will play around with the Camera function available in p5js. The camera will be focused into the rocket at launch, and as it flies up, the camera will slowly zoom out. This way all the gamespace is already loaded into the game, and the camera will show different parts of it to the user.

Here is the initial game space that I have created till now.

function setup() {
  createCanvas(500, 5000);
  frameRate(10)
}

function draw() {
  background(0, 0, 30); // Set the background color to a dark blue

  // Draw shiny stars randomly across the canvas
  for (let i = 0; i < 1000; i++) {
    fill(255, 255, 255, random(100, 255)); // Set the fill to a slightly transparent white
    noStroke();
    ellipse(random(width), random(height), random(1, 5)); // Draw a small ellipse at a random location with a random size
  }

  // Draw a semicircle at the bottom of the canvas and a light blue glow
  noStroke();
  fill(0, 200, 255)
  arc(width/2, height, 200, 200, PI, TWO_PI); // Draw a semi-circle at the bottom of the canvas
  stroke(0, 200, 255, 50); // Set the stroke color to a light blue with low opacity
  noFill();
  strokeWeight(5);
  arc(width/2, height, 215, 215, PI, TWO_PI); // Draw a slightly larger semi-circle on top to create a glow effect
}

Possible Challenges

This is the first time I will use the camera feature in p5js and thus making sure the game play is smooth while using the camera will definitely pose some challenges. I might face more issues when implementing the line moving into the green bar on the rocket feature, as I am still not sure what will be the best way to approach this, such as should the rocket and the green bar be separate object or not, or how will I move a line across a moving rocket which is in a moving frame. All these different moving parts will be difficult to manage for sure.

Leave a Reply