TRex Game

Just a very simplified version of the TRex game of the Google Chome browser made in p5.js to start playing with more complex concepts.

Here is the code of the sketch.js, player.js, star.js and obstacle.js file that handle the behavior of this example (you can see all the details on the Github repository):

sketch.js

            
  var player;
  var obstacles = [];
  var stars = [];

  function setup() {
    initialize();
  }

  function draw() {
    background(0);

    for(var i = obstacles.length - 1; i >= 0; i--) {
      obstacles[i].show();
      obstacles[i].update();

      if(player.hits(obstacles[i])) {
        initialize();
        return false;
      }

      if(obstacles[i].outOfScreen()) {
        obstacles.splice(i, 1);
        player.score += 10;
      }
    }

    for(var i = stars.length - 1; i >= 0; i--) {
      stars[i].show();
      stars[i].update();

      if(stars[i].outOfScreen()) {
        stars.splice(i, 1);
      }
    }

    player.update();
    player.show();

    if(frameCount % 80 == 0) {
      obstacles.push(new Obstacle());
    }

    if(frameCount % 10 == 0) {
      stars.push(new Star());
    }
  }

  function keyPressed() {
    if(keyCode == 87 && player.onBottom()) {
      player.jump();
    }
  }

  function initialize() {
    obstacles = [];
    stars = [];

    var canvas = createCanvas(720, 400);
    canvas.parent('canvas');

    player = new Player();
    obstacles.push(new Obstacle());
    stars.push(new Star());
  }

player.js

            
  function Player() {
    this.size = 30;
    this.y = height - this.size;
    this.x = 48;

    this.gravity = 0.98;
    this.velocity = 0;
    this.jump_height = 16;
    this.score = 0;

    this.show = function() {
      fill(255);
      rect(this.x, this.y, this.size, this.size);

      textSize(14);
      text("SCORE: " + this.score, 20, 30);
    }

    this.update = function() {
      this.velocity += this.gravity;
      this.y += this.velocity;

      if((this.y + this.size) > height) {
        this.y = height - this.size;
        this.velocity = 0;
      }
    }

    this.onBottom = function() {
      return this.y == (height - this.size);
    }

    this.jump = function() {
      this.velocity -= this.jump_height;
    }

    this.hits = function(obstacle) {
      if((obstacle.x >= this.x) && (obstacle.x <= (this.x + this.size)) &&
         ((this.y + this.size) >= (height - obstacle.height))) {
        return true;
      } else {
        return false;
      }
    }
  }

star.js

            
  function Star() {
    this.x = width;
    this.y = random(300);
    this.speed = 2;

    this.show = function() {
      fill(255);
      ellipse(this.x, this.y, 3, 3);
    }

    this.update = function() {
      this.x -= this.speed;
    }

    this.outOfScreen = function() {
      return (this.x < -this.width ? true : false);
    }
  }

obstacle.js

            
  function Obstacle() {
    this.x = width;
    this.height = random(80) + 20;
    this.width = 30;
    this.speed = 6;

    this.show = function() {
      fill(192);
      rect(this.x, (height - this.height), this.width, this.height);
    }

    this.update = function() {
      this.x -= this.speed;
    }

    this.outOfScreen = function() {
      return (this.x < -this.width ? true : false);
    }
  }

This is the result (press 'W' to jump):

« Go Back