0

Catbus Game code

I want to add colliders into my game, so that my main character, the catbus, will jump over them. When he hits them, it will show a game over. I want to be able to randomly generate them, as they come from the right side, and move to the left side. Like the Dinosaur game that shows up when the wifi goes out. I'd like to implement a picture to serve as the collider. The collider that I plan to use goes by:

var tinyToto

I have no idea how to make a collider such as that, nor how to create a random generator. Any help is much appreciated, even if it is only a small portion of it.

Code is as follows:

let img; //background
var bgImg; //also the background
var x1 = 0;
var x2;

var scrollSpeed = 4; //how fast background is

let bing; //for music

let cat;

var mode; //determines whether the game has started

let gravity = 0.2; //jumping forces
let velocity = 0.1;
let upForce = 7;

let startY = 730; //where cat bus jumps from
let startX = 70;

var font1; //custom fonts
var font2;

p5.disableFriendlyErrors = true; //avoids errors

function preload() {
  bgImg = loadImage("backgwound.png"); //importing background

  bing = loadSound("catbus theme song.mp3"); //importing music

  font1 = loadFont("Big Font.TTF");

  font2 = loadFont("Smaller Font.ttf");
}

function setup() {
  createCanvas(1000, 1000); //canvas size

  img = loadImage("backgwound.png"); //background in

  x2 = width;

  bing.loop(); //loops the music

  cat = {
    //coordinates for catbus
    x: startX,
    y: startY,
  };

  catGif = createImg("catgif.gif"); //creates catbus
  catGif.position(cat.x, cat.y); //creates position
  catGif.size(270, 100); //creates how big

  mode = 0; //game start
  textSize(50); //text size
}

function draw() {
  let time = frameCount; //start background loop

  image(img, 0 - time, 0);

  image(bgImg, x1, 2, width, height);
  image(bgImg, x2, 2, width, height);

  x1 -= scrollSpeed;
  x2 -= scrollSpeed;

  if (x1 <= -width) {
    x1 = width;
  }
  if (x2 <= -width) {
    x2 = width;
  } //end background loop

  fill(128 + sin(frameCount * 0.05) * 128); //text colour
  if (mode == 0) {
    textSize(20);
    textFont(font1);
    text("press SPACE to start the game!", 240, 500); //what text to type
  }

  fill("white");
  if (mode == 0) {
    textSize(35);
    textFont(font2);
    text("CATBUS BIZZARE ADVENTURE", 90, 450); //what text to type
  }

  cat.y = cat.y + velocity; //code for jumping
  velocity = velocity + gravity;

  if (cat.y > startY) {
    velocity = 0;
     cat.y = startY;
  }

  catGif.position(cat.x, cat.y);
}

function keyPressed() {
  if (keyCode === 32 && velocity == 0) {
    //spacebar code
    mode = 1;
    velocity += -upForce;
  }
}
  • So what is your main question? To create a collider? Or to generate random colliders? – MrDeibl Oct 21 '21 at 17:54
  • To create a collider – Izabella Petersen Oct 21 '21 at 17:54
  • For this i would add a new "dimension" to the game time. For example the user press space after 10 seconds and the obstacle is at the position of the "not" jumped cat the collider misses and the other way around. – MrDeibl Oct 21 '21 at 17:56
  • 1
    Assuming you can consider your catbus and the obstacles to both be un-rotated rectangles then checking if they collide is pretty simple: https://stackoverflow.com/questions/16005136/how-do-i-see-if-two-rectangles-intersect-in-javascript-or-pseudocode/29614525 – Paul Wheeler Oct 21 '21 at 18:00
  • good solution @PaulWheeler – MrDeibl Oct 21 '21 at 18:13
  • 1
    this is a pretty useful extension for p5 that should make things easier https://github.com/bmoren/p5.collide2D – ArcX Oct 25 '21 at 07:27

0 Answers0