No internet t rex game version 1

var PLAY = 1;
var END = 0;
var gameState = PLAY;

var trex, trex_running, trex_collided;
var ground, invisibleGround, groundImage;

var cloud, cloudsGroup, cloudImage;
var obstaclesGroup, obstacle1, obstacle2, obstacle3, obstacle4, obstacle5, obstacle6;

var score;


function preload(){
  trex_running = loadAnimation("trex1.png","trex3.png","trex4.png");
  trex_collided = loadAnimation("trex_collided.png");
  
  groundImage = loadImage("ground2.png");
  
  cloudImage = loadImage("cloud.png");
  
  obstacle1 = loadImage("obstacle1.png");
  obstacle2 = loadImage("obstacle2.png");
  obstacle3 = loadImage("obstacle3.png");
  obstacle4 = loadImage("obstacle4.png");
  obstacle5 = loadImage("obstacle5.png");
  obstacle6 = loadImage("obstacle6.png");
  
}

function setup() {
  createCanvas(600, 200);
  
  trex = createSprite(50,180,20,50);
  trex.addAnimation("running", trex_running);
  trex.addAnimation("collided" , trex_collided);
  trex.scale = 0.5;
  
  ground = createSprite(200,180,400,20);
  ground.addImage("ground",groundImage);
  ground.x = ground.width /2;
  ground.velocityX = -4;
  
  invisibleGround = createSprite(200,190,400,10);
  invisibleGround.visible = false;
  
  // create Obstacles and Cloud groups
  obstaclesGroup = createGroup();
  cloudsGroup = createGroup();
  
  score = 0;
}

function draw() {
  background(150);
  text("Score: "+ score, 500,50);
  
  if(gameState === PLAY){
    ground.velocityX = -4;
    
    score = score + Math.round(frameCount/60);
    
  if(keyDown("space")&& trex.y >= 100) {
    trex.velocityY = -13;
  }
  
  trex.velocityY = trex.velocityY + 0.8;
  
  if (ground.x < 0){
    ground.x = ground.width/2;
  }
  
  spawnClouds();
  spawnObstacles();
    
  if (obstaclesGroup.isTouching(trex)) {
     gameState = END;
    
  obstaclesGroup.setVelocityXEach(0); 
  cloudsGroup.setVelocityXEach(0);  
  }  
    
  }
  else if(gameState === END){
    ground.velocityX = 0;
  
  }
  
  trex.collide(invisibleGround);
  
  drawSprites();
}

function spawnObstacles(){
 if (frameCount % 60 === 0){
   var obstacle = createSprite(400,165,10,40);
   obstacle.velocityX = -6;

   
    // //generate random obstacles
    var rand = Math.round(random(1,6));
    switch(rand) {
      case 1: obstacle.addImage(obstacle1);
              break;
      case 2: obstacle.addImage(obstacle2);
              break;
      case 3: obstacle.addImage(obstacle3);
              break;
      case 4: obstacle.addImage(obstacle4);
              break;
      case 5: obstacle.addImage(obstacle5);
              break;
      case 6: obstacle.addImage(obstacle6);
              break;
      default: break;
    }
   
    //assign scale and lifetime to the obstacle           
    obstacle.scale = 0.5;
    obstacle.lifetime = 300;
   
   //adding obstacles to the group
   obstaclesGroup.add(obstacle);
 }
}

function spawnClouds() {
  //write code here to spawn the clouds
  if (frameCount % 60 === 0) {
     cloud = createSprite(600,100,40,10);
    cloud.y = Math.round(random(10,60));
    cloud.addImage(cloudImage);
    cloud.scale = 0.5;
    cloud.velocityX = -3;
    
     //assign lifetime to the variable
    cloud.lifetime = 134;
    
    //adjust the depth
    cloud.depth = trex.depth;
    trex.depth = trex.depth + 1;
    
    //adding cloud to the group
   cloudsGroup.add(cloud);
  }
  
}

You have to run it in https://editor.p5js.org/

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.1/p5.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.play/1.3.1/p5-play.js"></script> <script> var PLAY = 1; var END = 0; var gameState = PLAY;

var trex, trex_running, trex_collided;
var ground, invisibleGround, groundImage;
var cloud, cloudsGroup, cloudImage;
var obstaclesGroup, obstacle1, obstacle2, obstacle3, obstacle4, obstacle5, obstacle6;
var score;

function preload(){
trex_running = loadAnimation("trex1.png","trex3.png","trex4.png");
trex_collided = loadAnimation("trex_collided.png");
groundImage = loadImage("ground2.png");
cloudImage = loadImage("cloud.png");
obstacle1 = loadImage("obstacle1.png");
obstacle2 = loadImage("obstacle2.png");
obstacle3 = loadImage("obstacle3.png");
obstacle4 = loadImage("obstacle4.png");
obstacle5 = loadImage("obstacle5.png");
obstacle6 = loadImage("obstacle6.png");
}

function setup() {
createCanvas(600, 200);

trex = createSprite(50,180,20,50);
trex.addAnimation("running", trex_running);
trex.addAnimation("collided", trex_collided);
trex.scale = 0.5;

ground = createSprite(200,180,400,20);
ground.addImage("ground",groundImage);
ground.x = ground.width/2;
ground.velocityX = -4;

invisibleGround = createSprite(200,190,400,10);
invisibleGround.visible = false;

obstaclesGroup = new Group();
cloudsGroup = new Group();

score = 0;
}

function draw() {
background(150);
text("Score: "+ score, 500,50);

if(gameState === PLAY){
ground.velocityX = -4;
score = score + Math.round(frameCount/60);

if(keyDown("space") && trex.y >= 100) {
  trex.velocityY = -13;
}

trex.velocityY += 0.8;

if (ground.x < 0) ground.x = ground.width/2;

spawnClouds();
spawnObstacles();

if (obstaclesGroup.collide(trex)) {
  gameState = END;
  trex.changeAnimation("collided");
  obstaclesGroup.setVelocityXEach(0);
  cloudsGroup.setVelocityXEach(0);
}

}
else if(gameState === END){
ground.velocityX = 0;
}

trex.collide(invisibleGround);
drawSprites();
}

function spawnObstacles(){
if (frameCount % 60 === 0){
let obstacle = createSprite(400,165,10,40);
obstacle.velocityX = -6;

let rand = Math.round(random(1,6));
switch(rand) {
  case 1: obstacle.addImage(obstacle1); break;
  case 2: obstacle.addImage(obstacle2); break;
  case 3: obstacle.addImage(obstacle3); break;
  case 4: obstacle.addImage(obstacle4); break;
  case 5: obstacle.addImage(obstacle5); break;
  case 6: obstacle.addImage(obstacle6); break;
}

obstacle.scale = 0.5;
obstacle.lifetime = 300;
obstaclesGroup.add(obstacle);

}
}

function spawnClouds() {
if (frameCount % 60 === 0) {
cloud = createSprite(600,100,40,10);
cloud.y = Math.round(random(10,60));
cloud.addImage(cloudImage);
cloud.scale = 0.5;
cloud.velocityX = -3;
cloud.lifetime = 134;
cloud.depth = trex.depth;
trex.depth++;
cloudsGroup.add(cloud);
}
}
</script>