Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Rover (Game)
ID	6053666578055168
Created	5 years ago, 1594642984420
Updated	4 years ago, 1624577841323
Code	/* ROVER (Game) Gray Wolf, July 2020 Let me know if you enjoyed the game :) Want to be notified when I create a new program? Sub here: https://www.khanacademy.org/computer-programming/gray-wolf/4876588413698048 To see my other games, graphics, animations, etc. https://www.khanacademy.org/profile/grantjenkins/projects My timezone is AEST so may not respond straight away ----------------------------------------------------------- You will need to put your score in the tips & thanks to get on the leaderboard - only the top 10 scores added ----------------------------------------------------------- Leaderboard 1 - austonmatthews34 - 1118 2 - swensaar - 1015 3 - Kiana-Novey - 1013 4 - Big D - 956 5 - VerySmall猫 - 701 6 - Designer - 670 7 - Brady - 634 8 - Leafers1234 - 613 9 - 𝕬𝖞𝖊𝖊𝖙 - 601 10 - Daksh Sangar - 590 ----------------------------------------------------------- / / jshint ignore: start / { //Key\|Button stuff var clicked = false; var hover = false; var keys = []; keyPressed = function () { keys[keyCode] = true; }; keyReleased = function () { keys[keyCode] = false; }; mouseClicked = function () { clicked = true; }; } //Keys/Mouse //used for the game object var game; //fonts (default and title) textFont(createFont("Verdana")); //default font var titleFont = createFont("Arial Black"); //title font //apparently helps with Firefox smooth(); //Buttons var Button = function (config) { this.x = config.x; this.y = config.y; this.size = config.size \|\| 100; this.content = config.content \|\| "Home"; this.page = config.page \|\| "home"; this.textSize = config.textSize \|\| this.size / 5; this.borderColor = color(12, 31, 3, 20); this.backColor = color(46, 154, 154); this.textColor = color(245, 242, 242, 150); this.backColorHover = color(46, 154, 154, 200); this.textColorHover = color(245, 242, 242, 200); this.growth = 0; //draw the buttons and perform the button logic this.draw = function () { pushStyle(); textAlign(CENTER, CENTER); textSize(this.textSize + (this.growth 0.1)); noStroke(); //circles if (dist(mouseX, mouseY, this.x, this.y) <= this.size / 2) { //hover this.growth = constrain(this.growth + 0.5, 0, 10); if (clicked) { game.scene = this.page; if(game.scene === "how") { game.viewed = true; } else if(game.scene === "play" \|\| game.scene === "replay") { game.reset(); } if(game.scene === "how" \|\| game.scene === "home") { game.transitionActive = true; } } stroke(this.borderColor); image(game.planetImages[1], this.x - (this.size + this.growth) / 2, this.y - (this.size + this.growth) / 2, this.size + this.growth, this.size + this.growth); fill(this.textColorHover); switch(this.content) { case "Play": triangle(this.x + this.size0.25, this.y, this.x - this.size0.15, this.y - this.size0.25, this.x - this.size0.15, this.y + this.size0.25); break; case "How": pushStyle(); textSize(this.size0.6); text("?", this.x, this.y); popStyle(); break; case "Home": pushStyle(); beginShape(); vertex(this.x+this.size0.25, this.y); //1 vertex(this.x+this.size0.25, this.y+this.size0.25); //2 vertex(this.x+this.size0.07, this.y+this.size0.25); //3 vertex(this.x+this.size0.07, this.y+this.size0.12); //4 vertex(this.x-this.size0.07, this.y+this.size0.12); //5 vertex(this.x-this.size0.07, this.y+this.size0.25); //6 vertex(this.x-this.size0.25, this.y+this.size0.25); //7 vertex(this.x-this.size0.25, this.y); //8 vertex(this.x, this.y-this.size0.2); //9 vertex(this.x+this.size0.25, this.y); //10 endShape(); noFill(); stroke(this.textColorHover); strokeWeight(this.size0.05); line(this.x-this.size0.27, this.y-this.size0.05, this.x, this.y-this.size0.27); line(this.x+this.size0.27, this.y-this.size0.05, this.x, this.y-this.size0.27); line(this.x+this.size0.15, this.y-this.size0.19, this.x+this.size0.15, this.y-this.size0.25); popStyle(); break; case "Replay": pushStyle(); noFill(); stroke(this.textColorHover); strokeWeight(5); pushMatrix(); translate(this.x, this.y); rotate(frameCount 5); arc(0, 0, this.size * 0.6, this.size * 0.6, 1, 275); noStroke(); fill(this.textColorHover); translate(this.size * 0.30, -this.size * 0.18); rotate(-70); triangle(0, -this.size * 0.1, -this.size * 0.14, -this.size * 0.3, this.size * 0.14, -this.size * 0.3); popMatrix(); popStyle(); break; default: text(this.content, this.x, this.y); } } else { //not hover this.growth = constrain(this.growth - 0.5, 0, 10); noStroke(); image(game.planetImages[1], this.x - (this.size + this.growth) / 2, this.y - (this.size + this.growth) / 2, this.size + this.growth, this.size + this.growth); fill(this.textColor); switch(this.content) { case "Play": triangle(this.x + this.size0.25, this.y, this.x - this.size0.15, this.y - this.size0.25, this.x - this.size0.15, this.y + this.size0.25); break; case "How": pushStyle(); textSize(this.size0.6); text("?", this.x, this.y); popStyle(); break; case "Home": pushStyle(); beginShape(); vertex(this.x+this.size0.25, this.y); //1 vertex(this.x+this.size0.25, this.y+this.size0.25); //2 vertex(this.x+this.size0.07, this.y+this.size0.25); //3 vertex(this.x+this.size0.07, this.y+this.size0.12); //4 vertex(this.x-this.size0.07, this.y+this.size0.12); //5 vertex(this.x-this.size0.07, this.y+this.size0.25); //6 vertex(this.x-this.size0.25, this.y+this.size0.25); //7 vertex(this.x-this.size0.25, this.y); //8 vertex(this.x, this.y-this.size0.2); //9 vertex(this.x+this.size0.25, this.y); //10 endShape(); noFill(); stroke(this.textColor); strokeWeight(this.size0.05); line(this.x-this.size0.27, this.y-this.size0.05, this.x, this.y-this.size0.27); line(this.x+this.size0.27, this.y-this.size0.05, this.x, this.y-this.size0.27); line(this.x+this.size0.15, this.y-this.size0.19, this.x+this.size0.15, this.y-this.size0.25); popStyle(); break; case "Replay": pushStyle(); noFill(); stroke(this.textColor); strokeWeight(5); pushMatrix(); translate(this.x, this.y); rotate(sin(frameCount 5) * 20); arc(0, 0, this.size * 0.6, this.size * 0.6, 1, 275); noStroke(); fill(this.textColor); translate(this.size * 0.30, -this.size * 0.18); rotate(-70); triangle(0, -this.size * 0.1, -this.size * 0.14, -this.size * 0.3, this.size * 0.14, -this.size * 0.3); popMatrix(); popStyle(); break; default: text(this.content, this.x, this.y); } } popStyle(); }; }; //Planets (used to generate the planet images) var Planet = function(config) { this.r = red(config.color); this.g = green(config.color); this.b = blue(config.color); this.x = config.x; this.y = config.y; this.w = config.w; this.h = config.h; this.seed = random(1000); randomSeed(this.seed); //draw the planet using the provided properties this.draw = function() { var xoff = 0.0; for (var x = this.x; x < this.x + this.w; x++) { var yoff = 0.0; for (var y = this.y; y < this.y + this.h; y++) { var bright = map(noise(xoff, yoff), 0, 1, 0, 100); stroke(bright + this.r, bright + this.g, bright + this.b, 10); point(x, y); yoff += 0.07; } xoff += 0.01; } }; }; //Range segments var Segment = function(config) { //initialize the segment with the provided properties this.init = function(config) { this.x = config.x; this.y = config.y; this.w = config.w; this.h = config.h; this.noise = config.noise; this.color = config.color \|\| color(random(100)); this.red = red(this.color); this.green = green(this.color); this.blue = blue(this.color); this.color = color( map(this.noise, 0, 1, this.red - 40, this.red + 40), map(this.noise, 0, 1, this.green - 40, this.green + 40), map(this.noise, 0, 1, this.blue - 40, this.blue + 40)); this.index = ~~random(6); }; this.init(config); }; //Range (ground) var Range = function(config) { this.color = config.color; this.height = config.height; this.noise = config.noise; this.incAmount = config.incAmount \|\| 0.03; this.segments = []; this.speed = config.speed \|\| -5; this.type = config.type \|\| "ground"; //initialize all the required segments (will be reused for better performance) for(var x = 0; x < width + 30; x+=10) { var n = noise(this.noise); var y = map(n, 0, 1, 350, this.height); this.noise+= this.incAmount; this.segments.push(new Segment({ x: x, y: y, noise: n, w: 10, h: y, color: this.color })); } //updates the range position this.update = function() { //gets the current number of segments var length = this.segments.length; //iterates through each of the segments for(var i = 0; i < length; i++) { //adds the horizontal speed this.segments[i].x+= this.speed; //if the segment goes off the screen we reset it and move it to the end of the array if(this.segments[i].x <= -10) { //calculate next noise increment var n = noise(this.noise); var y = map(n, 0, 1, 350, this.height); this.noise+= this.incAmount; //reset (reuse) the segment with the next properties this.segments[i].init({ x: i === 0 ? this.segments[this.segments.length - 1].x + 10 + this.speed : this.segments[i-1].x + 10, y: y, noise: n, w: 10, h: y, color: this.color }); //this takes the segment at the current index and moves it to the end of the array this.segments.push(this.segments.splice(i, 1)[0]); length--; i--; } } }; //displays the range this.display = function() { //slightly different display for front and back range //displays random ground images plus a line for the top of the ground switch(this.type) { case "ground": noFill(); strokeWeight(8); stroke(31, 30, 31); for(var i = 0; i < this.segments.length; i++) { var segment = this.segments[i]; image(game.imgs[segment.index], segment.x, segment.y); if(i > 0 && abs(segment.x - this.segments[i-1].x <= 15)) { line(segment.x, segment.y + 4, this.segments[i-1].x, this.segments[i-1].y + 4); } } break; case "back": noFill(); strokeWeight(5); stroke(31, 30, 31); for(var i = 0; i < this.segments.length; i++) { var segment = this.segments[i]; image(game.imgs[segment.index], segment.x, segment.y); if(i > 0 && abs(segment.x - this.segments[i-1].x <= 15)) { line(segment.x, segment.y + 2, this.segments[i-1].x, this.segments[i-1].y + 2); } } break; } strokeWeight(1); }; //runs the methods above this.run = function() { this.update(); this.display(); }; }; //Rover (Player) var Rover = function(config) { this.x = config.x; this.y = config.y; this.w = config.w; this.h = config.h; this.radius = config.radius \|\| this.height / 2; this.wheelBack = { x: this.x, y: this.y + this.h, radius: this.radius, base: 600 }; this.wheelFront = { x: this.x + this.w, y: this.y + this.h, radius: this.radius, base: 600 }; this.center = { x: 0, y: 0, radius: this.radius }; this.vx = 0; this.vy = 0; this.vamount = 1; this.vmax = 4; this.friction = 10; this.gravity = 0.5; this.dir = 0; this.jump = true; this.canMove = true; this.momentum = 0; this.angle = 0; //handles the movement of the rover this.move = function() { //if A or LEFT pressed adjust the horizontal movement and set direction to -1 (left) if((keys[LEFT] \|\| keys[65]) && this.canMove) { //Left arrow or A this.vx -= this.vamount; this.dir = -1; } //if D or RIGHT pressed adjust the horizontal movement and set direction to 1 (right) else if((keys[RIGHT] \|\| keys[68]) && this.canMove) { //Right arrow or D this.vx += this.vamount; this.dir = 1; } //else (none of those keys pressed) move to the left or right depending on the current direction (dir) else if(this.dir === 1) { this.vx = constrain(this.vx - this.vamount * this.dir, 0, this.friction); } else if(this.dir === -1) { this.vx = constrain(this.vx - this.vamount * this.dir, -this.friction, 0); } //if W or UP pressed and can jump (both wheels on the ground): //- add vertical lift, set jump and canMove to false and add horizontal momentum if((keys[UP] \|\| keys[87]) && this.jump) { //Up arrow or W this.vy = -11; this.jump = false; this.canMove = false; this.momentum = this.vx; } //if none of the above... else { //if still in the air keep jump as false if(this.vy > 0.15) { this.jump = false; } //if both wheels on the ground then set jump/canMove to true and remove the momentum if(this.wheelBack.y + this.h >= this.wheelBack.base && this.wheelFront.y + this.h >= this.wheelFront.base) { this.jump = true; this.canMove = true; this.momentum = 0; } } }; //updates the rovers position this.update = function() { //add gravity this.vy += this.gravity; //add horizontal speed plus any momentum this.vx = constrain(this.vx + this.momentum, -this.vmax, this.vmax); //add horizontal/vertical speed to the wheels this.wheelBack.x = constrain(this.wheelBack.x + this.vx, 0, width - this.w); this.wheelFront.x = constrain(this.wheelFront.x + this.vx, this.w, width); this.wheelBack.y = constrain(this.wheelBack.y + this.vy, 0, this.wheelBack.base - this.h); this.wheelFront.y = constrain(this.wheelFront.y + this.vy, 0, this.wheelFront.base - this.h); //add rotation based on the ground speed plus horizontal speed/direction of the rover //if at the edge of the screen then take away the rover horizontal speed if(this.wheelBack.x <= 0 \|\| this.wheelFront.x >= width) { this.angle-= game.groundSpeed/(2 * PI * this.radius/2) * 360; } else { this.angle-= (game.groundSpeed-this.vx)/(2 * PI * this.radius/2) * 360; } }; //draws the rover this.draw = function() { //calculates the point between the two wheels taking in the current angle var x = bezierPoint(this.wheelBack.x, this.wheelBack.x, this.wheelFront.x, this.wheelFront.x, 0.5); var y = bezierPoint(this.wheelBack.y, this.wheelBack.y, this.wheelFront.y, this.wheelFront.y, 0.5); var angle = atan2(this.wheelFront.y - this.wheelBack.y, this.wheelFront.x - this.wheelBack.x); //sets the center of the rover this.center.x = x; this.center.y = y; //draw a line between the two wheels noFill(); stroke(0, 200); strokeWeight(4); line(this.wheelBack.x, this.wheelBack.y, this.wheelFront.x, this.wheelFront.y); //draws the rover image (better performance) pushMatrix(); translate(x, y); rotate(angle); translate(-this.w * 0.75, -this.h * 1.56); image(game.images.rover, 0, 0); popMatrix(); //display the wheels (including rotation) pushMatrix(); translate(this.wheelBack.x, this.wheelBack.y); rotate(this.angle); noStroke(); fill(66, 65, 66); ellipse(0, 0, this.radius, this.radius); fill(50, 40, 48); ellipse(0, 0, this.radius * 0.6, this.radius * 0.6); strokeWeight(1); stroke(196, 194, 196); line(-this.radius/4, 0, this.radius/4, 0); line(0, -this.radius/4, 0, this.radius/4); noStroke(); fill(150, 147, 150); ellipse(0, 0, this.radius * 0.2, this.radius * 0.2); popMatrix(); pushMatrix(); translate(this.wheelFront.x, this.wheelFront.y); rotate(this.angle); noStroke(); fill(66, 65, 66); ellipse(0, 0, this.radius, this.radius); fill(50, 40, 48); ellipse(0, 0, this.radius * 0.6, this.radius * 0.6); strokeWeight(1); stroke(196, 194, 196); line(-this.radius/4, 0, this.radius/4, 0); line(0, -this.radius/4, 0, this.radius/4); noStroke(); fill(150, 147, 150); ellipse(0, 0, this.radius * 0.2, this.radius * 0.2); popMatrix(); }; //runs the methods above this.run = function() { this.draw(); this.move(); this.update(); }; }; //Game (management of the game) var Game = function(config) { this.scene = "home"; this.score = 0; this.scoreTimer = 0; this.bestScore = 0; this.viewed = false; this.gameOver = false; this.health = config.health \|\| 100; this.shake = 0; this.SHAKEDOWN = 0.1; this.endTimer = 0; this.END_DURATION = 60; this.transition = 255; this.TRANSITION_COLOR = color(40, 40, 40); this.TRANSITION_SPEED = 10; this.transitionActive = false; this.groundSpeed = -3; this.GROUND_SPEED_MAX = -10; this.range = new Range({ color: color(54, 41, 4), height: 600, noise: 80, type: "ground", speed: this.groundSpeed }); this.rangeBack = new Range({ color: color(66, 26, 24), height: 500, noise: 50, type: "back", speed: this.groundSpeed * 0.6 }); this.rover = new Rover({ x: 275, y: 200, w: 60, h: 30, radius: 30 }); this.imgs = []; this.planetImages = []; this.planets = []; this.stars = []; this.ellipses = []; this.meteors = []; this.meteorsRepository = []; this.mines = []; this.minesRepository = []; this.trailsRepository = []; this.trails = []; this.meteorFrequency = 360; this.mineFrequency = 300; this.buttons = { playButton: new Button({ x: 230, y: 530, content: "Play", page: "play" }), replayButton: new Button({ x: 300, y: 350, content: "Replay", page: "play" }), howButton: new Button({ x: 370, y: 530, content: "How", page: "how" }), homeButton: new Button({ x: 300, y: 530, content: "Home", page: "home" }) }; //initial setup of the game this.init = function() { //preload meteors into the repository for(var i = 0; i < 10; i++) { this.meteorsRepository.push({ x: 0, y: 0, radius: 50, angle: 0, vx: 0, vy: 0, speed: 0, used: false }); } //preload mines into the repository for(var i = 0; i < 10; i++) { this.minesRepository.push({ x: 0, y: 0, radius: 22, angle: 0, used: false }); } for(var j = 0; j < 80; j++) { this.trailsRepository.push( { timeToLive: 200, x: 0, y: 0, radius: 10, color: color(0), vx: 0, vy: 0 } ); } //preload stars for(var i = 0; i < 100; i++) { this.stars.push({ x: random(width), y: random(450), radius: random(0.8, 3), opacity: random(30, 100), vx: random(0.1, 0.5) }); } //preload ellipses for(var i = 0; i < 10; i++) { this.ellipses.push({ x: random(width), y: random(450), radius: random(10, 60), opacity: random(3, 5), vx: random(0.1, 0.5) }); } //pattern for noise ground background(77, 67, 8); fill(255); rect(0, 0, 61, 300); var s1 = get(0, 0, 11, 300); var s2 = get(10, 0, 11, 300); var s3 = get(20, 0, 11, 300); var s4 = get(30, 0, 11, 300); var s5 = get(40, 0, 11, 300); var s6 = get(50, 0, 11, 300); background(66, 34, 5); pushStyle(); for(var i = 0; i < 70; i++) { strokeWeight(random(1, 3)); stroke(~~random(0, 150), ~~random(0, 50), ~~random(0, 50), ~~random(100, 250)); point(random(1, 64), random(1, 299)); } for(var i = 0; i < 30; i++) { strokeWeight(random(1, 2.5)); stroke(~~random(150, 200), ~~random(150, 200), ~~random(150, 200), ~~random(50, 150)); point(random(1, 64), random(1, 299)); } popStyle(); //gets six images from the patter above this.imgs.push(get(0, 0, 11, 300)); this.imgs.push(get(10, 0, 11, 300)); this.imgs.push(get(20, 0, 11, 300)); this.imgs.push(get(30, 0, 11, 300)); this.imgs.push(get(40, 0, 11, 300)); this.imgs.push(get(50, 0, 11, 300)); //masks the six images for use in the game this.imgs[0].mask(s1); this.imgs[1].mask(s2); this.imgs[2].mask(s3); this.imgs[3].mask(s4); this.imgs[4].mask(s5); this.imgs[5].mask(s6); //Planets strokeWeight(1); stroke(0); background(0, 0, 0); fill(255); //circles for each of the planets ellipse(100, 100, 200, 200); ellipse(100, 300, 200, 200); ellipse(300, 100, 200, 200); ellipse(300, 300, 200, 200); //images of each planet (circle) to be used later when masking var planet1Image = get(0, 0, 200, 200); var planet2Image = get(0, 200, 200, 200); var planet3Image = get(200, 0, 200, 200); var planet4Image = get(200, 200, 200, 200); //draw the planets using noise background(0, 0, 0, 0); var planet1 = new Planet({ color: color(161, 57, 9), x: 0, y: 0, w: 200, h: 200 }); var planet2 = new Planet({ color: color(35, 38, 33), x: 0, y: 200, w: 200, h: 200 }); var planet3 = new Planet({ color: color(61, 9, 41), x: 200, y: 0, w: 200, h: 200 }); var planet4 = new Planet({ color: color(60, 66, 23), x: 200, y: 200, w: 200, h: 200 }); planet1.draw(); planet2.draw(); planet3.draw(); planet4.draw(); //add some random dots for a slightly random effect noStroke(); var radius = 0; for(var i = 0; i < 300; i++) { radius = random(2, 6); fill(random(0, 255), random(10, 20)); rect(random(width), random(height), radius, radius); } //adds planet images this.planetImages.push(get(0, 0, 200, 200)); this.planetImages.push(get(0, 200, 200, 200)); this.planetImages.push(get(200, 0, 200, 200)); this.planetImages.push(get(200, 200, 200, 200)); //masks the planet images for use in the game this.planetImages[0].mask(planet1Image); this.planetImages[1].mask(planet2Image); this.planetImages[2].mask(planet3Image); this.planetImages[3].mask(planet4Image); //load remaining images - back (gradient) and rover this.images = { back: function() { background(0, 0, 0, 0); noStroke(); for(var i = 0; i <= height; i++) { fill(lerpColor(color(131, 43, 23), color(242, 182, 94), i/height)); rect(0, i, width, i); } for(var i = 0; i < 70; i++) { fill(random() < 0.4 ? color(217, 214, 20, 5) : color(201, 63, 24, 10)); ellipse(random(width), random(500), random(50, 100), random(50, 100)); } filter(BLUR, 14); return get(0, 0, width, height); }, rover: function() { background(0, 0, 0, 0); var w = 60; pushMatrix(); translate(45, 45); pushStyle(); rectMode(CENTER); fill(50, 50, 50); beginShape(); vertex(-w * 0.2, 0); vertex(-w * 0.25, -w * 0.2); vertex(w * 0.25, -w * 0.2); vertex(w * 0.2, 0); endShape(CLOSE); fill(40, 40, 40); strokeWeight(1); stroke(92, 90, 92, 200); beginShape(); vertex(-w * 0.7, -w * 0.2); vertex(w * 0.7, -w * 0.2); vertex(w * 0.8, -w * 0.3); vertex(w * 0.5, -w * 0.6); vertex(-w * 0.1, -w * 0.6); vertex(-w * 0.15, -w * 0.65); vertex(-w * 0.65, -w * 0.65); vertex(-w * 0.7, -w * 0.4); vertex(-w * 0.7, -w * 0.2); endShape(CLOSE); //windscreen noStroke(); fill(65, 115, 156, 150); beginShape(); vertex(w * 0.35, -w * 0.3); vertex(w * 0.73, -w * 0.3); vertex(w * 0.48, -w * 0.55); vertex(w * 0.35, -w * 0.55); vertex(w * 0.35, -w * 0.3); endShape(CLOSE); beginShape(); vertex(-w * 0.25, -w * 0.65); vertex(-w * 0.3, -w * 0.7); vertex(-w * 0.55, -w * 0.7); vertex(-w * 0.6, -w * 0.65); endShape(CLOSE); noFill(); strokeWeight(1); stroke(255, 30); line(-w * 0.55, -w * 0.55, -w * 0.35, -w * 0.55); line(-w * 0.55, -w * 0.45, -w * 0.35, -w * 0.45); line(-w * 0.55, -w * 0.35, -w * 0.35, -w * 0.35); ellipse(0, -w * 0.4, w * 0.3, w * 0.3); popStyle(); popMatrix(); return get(0, 0, 94, 46); } }; //preload images for (var i in this.images) { if (typeof this.images[i] !== 'object') { background(0, 0, 0, 0); noStroke(); this.images[i] = this.images[i](); } } //add two planets into the game this.planets.push({ x: ~~random(100, 150), y: ~~random(50, 200), radius: ~~random(80, 200), vx: this.groundSpeed * random(0.02, 0.1), planet: this.planetImages[~~random(this.planetImages.length)] }); this.planets.push({ x: ~~random(400, 350), y: ~~random(150, 250), radius: ~~random(80, 200), vx: this.groundSpeed * random(0.02, 0.1), planet: this.planetImages[~~random(this.planetImages.length)] }); }; //call the init method this.init(); //reset on game over this.reset = function() { //reset relevant game variables for new game this.health = 100; this.score = 0; this.scoreTimer = 0; this.gameOver = false; this.shake = 0; this.endTimer = 0; this.transition = 255; this.transitionActive = false; this.groundSpeed = -3; this.meteorFrequency = 360; this.mineFrequency = 300; this.range.speed = this.groundSpeed; this.rangeBack.speed = this.groundSpeed * 0.6; //efficent way to clear existing arrays this.meteors.length = 0; this.mines.length = 0; //reset object (scene) arrays for(var i = 0; i < this.stars.length; i++) { this.stars[i].vx = random(0.1, 0.5); } for(var i = 0; i < this.ellipses.length; i++) { this.ellipses[i].vx = random(0.1, 0.5); } for(var i = 0; i < this.planets.length; i++) { this.planets[i].vx = this.groundSpeed * random(0.02, 0.1); } //reset the meteors repository so that they can all be used for(var i = 0; i < this.meteorsRepository.length; i++) { this.meteorsRepository[i].used = false; } //reset the mines repository so that they can all be used for(var i = 0; i < this.minesRepository.length; i++) { this.minesRepository[i].used = false; } //reset the trails repository so that they can all be used for(var i = 0; i < this.trailsRepository.length; i++) { this.trailsRepository[i].used = false; } }; //handles general circle collisions this.collision = function(obj1, obj2) { //checks if two circles collide and returns the result if (dist(obj1.x, obj1.y, obj2.x, obj2.y) <= (obj1.radius + obj2.radius) / 2) { return true; } return false; }; //handles collisions with the rover wheels and the ground this.collisionWheel = function(wheel, obj2) { //checks if the wheel collides with the ground - with dampning added if (dist(wheel.x, wheel.y, obj2.x + obj2.w / 2, obj2.y + obj2.w / 2) <= (this.rover.w / 2 + 5) / 2 + 10) { return true; } return false; }; //handles collisions with the rover and meteors this.collisionMeteor = function(meteor, obj2) { //checks if a meteor hits the rover - with added padding if (dist(meteor.x, meteor.y, obj2.x + obj2.w / 2, obj2.y + obj2.w / 2) <= meteor.radius) { return true; } return false; }; //handles the transition between scenes this.runTransition = function() { //manages the transition effect between scenes if(this.transitionActive) { this.transition = constrain(this.transition - this.TRANSITION_SPEED, 0, 255); fill(this.TRANSITION_COLOR, this.transition); rect(0, 0, width, height); if(this.transition === 0) { this.transitionActive = false; this.transition = 255; } } }; //calculates and displays the health bar this.healthBar = function() { //displays the healthbar on the play screen noStroke(); fill(40, 40, 40, 150); rect(490, 10, 100, 30); fill(36, 122, 71, 100); rect(490 + 100 - map(this.health, 0, 100, 0, 100), 10, map(this.health, 0, 100, 0, 100), 30); }; //sets the current health bar amount this.setHealth = function(n) { //updates the health percentage this.health = constrain(this.health + n, 0, 100); }; //displays the stats including score/health this.stats = function() { //displays the stats including score and health bar pushStyle(); //score textAlign(LEFT); textFont(titleFont); textSize(22); fill(255, 100); text("SCORE: " + this.score, 10, 30); popStyle(); this.healthBar(); }; //checks the base for the rover this.checkRoverBase = function(wheel) { var hit = false; //checks if the rover wheel hit the ground - with some dampening if(this.collisionWheel(wheel, this.range.segments[~~(wheel.x/10)])) { wheel.base = this.range.segments[~~(wheel.x/10)].y + this.range.segments[~~(wheel.x/10)].w * 1.1; this.hit = true; } //if it didn't hit then add a bit of a gravity boost if(!hit) { wheel.base+= 4; } }; //runs the planets this.runPlanets = function() { //loop through each of the planets for(var i = 0; i < this.planets.length; i++) { //add the horizontal velocity this.planets[i].x+= this.planets[i].vx; //display the planet image image(this.planets[i].planet, this.planets[i].x, this.planets[i].y, this.planets[i].radius, this.planets[i].radius); //if the planet goes off the screen then reset it with new properties and repeat if(this.planets[i].x + this.planets[i].radius < 0) { this.planets[i].radius = ~~random(80, 200); this.planets[i].x = width + this.planets[i].radius / 2; this.planets[i].y = ~~random(50, 350); this.planets[i].vx = random(this.planets[i].vx * 0.9, this.planets[i].vx * 1.1); //this.groundSpeed * random(0.05, 0.1); this.planets[i].planet = this.planetImages[~~random(this.planetImages.length)]; } } }; //runs the stars this.runStars = function() { noStroke(); //loop through each of the stars for(var i = 0; i < this.stars.length; i++) { fill(255, 255, 255, this.stars[i].opacity); //add the horizontal velocity this.stars[i].x-= this.stars[i].vx; //display the star ellipse(this.stars[i].x, this.stars[i].y, this.stars[i].radius, this.stars[i].radius); //if the star goes off the screen position it back at the start to repeat the animation if(this.stars[i].x + this.stars[i].radius < 0) { this.stars[i].x = width + this.stars[i].radius; } } }; //runs the ellipses (transparent circles) this.runEllipses = function() { noStroke(); //loop through each of the ellipses for(var i = 0; i < this.ellipses.length; i++) { //set the color with opacity fill(255, 255, 255, this.ellipses[i].opacity); //add the horizontal velocity this.ellipses[i].x-= this.ellipses[i].vx; //display the ellipse ellipse(this.ellipses[i].x, this.ellipses[i].y, this.ellipses[i].radius, this.ellipses[i].radius); //if the star goes off the screen position it back at the start to repeat the animation if(this.ellipses[i].x + this.ellipses[i].radius < 0) { this.ellipses[i].x = width + this.ellipses[i].radius; } } }; //handles getting meteors from the repository this.getMeteor = function(config) { //looks through the repository and finds the first available unused meteor for(var i = 0; i < this.meteorsRepository.length; i++) { //if it finds one then reset properties and return it if(this.meteorsRepository[i].used === false) { this.meteorsRepository[i].x = config.x; this.meteorsRepository[i].y = config.y; this.meteorsRepository[i].radius = config.radius \|\| 50; this.meteorsRepository[i].angle = config.angle \|\| 0; this.meteorsRepository[i].speed = config.speed \|\| 3; this.meteorsRepository[i].vx = config.vx \|\| 0; this.meteorsRepository[i].vy = config.vy \|\| 0; this.meteorsRepository[i].used = true; return this.meteorsRepository[i]; } } //if no meteor found in the repository then return a new meteor object var meteor = { used: true, x: config.x, y: config.y, radius: config.radius \|\| 50, angle: config.angle \|\| 0, speed: config.speed \|\| 3, vx: config.vx \|\| 0, vy: config.vy \|\| 0 }; //add the new meteor to the repository for resue this.meteorsRepository.push(meteor); //return the new meteor return meteor; }; //handles getting mines from the repository this.getMine = function(config) { //looks through the repository and finds the first available unused mine for(var i = 0; i < this.minesRepository.length; i++) { //if it finds one then reset properties and return it if(this.minesRepository[i].used === false) { this.minesRepository[i].x = config.x; this.minesRepository[i].y = config.y; this.minesRepository[i].radius = config.radius \|\| 50; this.minesRepository[i].angle = config.angle \|\| 0; this.minesRepository[i].used = true; return this.minesRepository[i]; } } //if no mine found in the repository then return a new mine object var mine = { used: true, x: config.x, y: config.y, radius: config.radius \|\| 40, angle: config.angle \|\| 0 }; //add the new mine to the repository for resue this.minesRepository.push(mine); //return the new mine return mine; }; //handles getting mines from the repository this.getTrail = function(config) { //looks through the repository and finds the first available unused trail for(var i = 0; i < this.trailsRepository.length; i++) { //if it finds one then reset properties and return it if(this.trailsRepository[i].used === false) { this.trailsRepository[i].x = config.x; this.trailsRepository[i].y = config.y; this.trailsRepository[i].radius = config.radius \|\| 10; this.trailsRepository[i].timeToLive = config.timeToLive \|\| ~~random(180, 220); this.trailsRepository[i].color = config.color \|\| color(0); this.trailsRepository[i].vx = config.vx \|\| 0; this.trailsRepository[i].vy = config.vy \|\| 0; this.trailsRepository[i].used = true; return this.trailsRepository[i]; } } //if no trail found in the repository then return a new trail object var trail = { used: true, x: config.x, y: config.y, radius: config.radius \|\| 10, timeToLive: config.timeToLive \|\| ~~random(180, 220), color: config.color \|\| color(0), vx: config.vx \|\| 0, vy: config.vy \|\| 0, }; //add the new trail to the repository for resue this.trailsRepository.push(trail); //return the new trail return trail; }; //runs the meteors this.runMeteors = function() { //add slight delay before send off the initial meteor and check for frequency if(this.score > 3 && frameCount % this.meteorFrequency === 0) { //set initial properties var radius = random(10, 15); var x = random(width); var y = -radius; var speed = random(6, 10); //angle is towards random, front wheel or back wheel var angle = random() < 0.2 ? atan2(height - y, random(width) - x) : random() < 0.5 ? atan2(this.rover.wheelBack.y - y, this.rover.wheelBack.x - x) : atan2(this.rover.wheelFront.y - y, this.rover.wheelFront.x - x); //add a new (existing) meteor this.meteors.push(this.getMeteor({ x: x, y: y, radius: radius, angle: angle, speed: random(6, 10), vx: speed * cos(angle), vy: speed * sin(angle) })); } //increase the frequency of the meteors if(frameCount % 600 === 0) { this.meteorFrequency = constrain(this.meteorFrequency - 10, 180, 360); } noStroke(); fill(56, 47, 45, 200); //iterate through each meteor for(var i = this.meteors.length - 1; i >= 0; i--) { //add the direction of the meteor this.meteors[i].x+= this.meteors[i].vx; this.meteors[i].y+= this.meteors[i].vy; //add meteor trails periodically if(frameCount % 3 === 0) { this.trails.push(this.getTrail( { timeToLive: ~~random(180, 220), x: this.meteors[i].x + random(-5, 5), y: this.meteors[i].y, radius: random(this.meteors[i].radius * 0.25, this.meteors[i].radius * 0.5), color: random() < 0.5 ? color(117, 27, 13) : color(74, 15, 6), vx: 0 } )); } //display the meteor ellipse(this.meteors[i].x, this.meteors[i].y, this.meteors[i].radius, this.meteors[i].radius); //if the meteor goes off the screen if(this.meteors[i].y - this.meteors[i].radius / 2 > height \|\| this.meteors[i].x - this.meteors[i].radius / 2 > width \|\| this.meteors[i].x + this.meteors[i].radius / 2 < 0) { //reset the meteor so it can be reused this.meteors[i].used = false; //remove the meteor this.meteors.splice(i, 1); } //else check if the meteor collides with the rover else if( this.collision(this.rover.wheelBack, this.meteors[i]) \|\| this.collision(this.rover.wheelFront, this.meteors[i]) \|\| this.collision(this.rover.center, this.meteors[i])) { //if it does collide, add some meteor explosions (reusing the trails array) for(var j = 0; j < 30; j++) { this.trails.push(this.getTrail( { timeToLive: ~~random(180, 220), x: this.meteors[i].x + random(-25, 25), y: this.meteors[i].y + random(-25, 25), radius: random(this.meteors[i].radius * 0.5, this.meteors[i].radius * 0.5), color: random() < 0.5 ? color(105, 103, 103) : color(51, 49, 49), vx: this.range.speed } )); } //reduce the health this.setHealth(-10); //shake the rover this.shake = 15; //reset the meteor so it can be reused this.meteors[i].used = false; //remove the meteor this.meteors.splice(i, 1); //if no health set game over and break out of the loop if(this.health === 0) { this.gameOver = true; break; } } //else check if the meteor hits the range (ground) else if(this.collisionMeteor(this.meteors[i], this.range.segments[~~(this.meteors[i].x/10)])) { //if it does then add a meteor explosion for(var j = 0; j < 30; j++) { this.trails.push(this.getTrail( { timeToLive: ~~random(180, 220), x: this.meteors[i].x + random(-25, 25), y: this.meteors[i].y + random(-25, 25), radius: random(this.meteors[i].radius * 0.5, this.meteors[i].radius * 0.5), color: random() < 0.5 ? color(117, 27, 13) : color(74, 15, 6), vx: this.range.speed } )); } //reset the meteor so it can be reused this.meteors[i].used = false; //remove the meteor this.meteors.splice(i, 1); } } }; //runs the mines this.runMines = function() { //add slight delay before send off the initial mine and check for frequency if(this.score > 5 && frameCount % this.mineFrequency === 0) { //set initial properties var radius = 22; var x = this.range.segments[this.range.segments.length-1].x; var y = this.range.segments[this.range.segments.length-1].y; //add a new (existing) mine this.mines.push(this.getMine({ x: x, y: y, radius: radius, angle: ~~random(80, 100) })); } //increase the frequency of the mines if(frameCount % 600 === 0) { this.mineFrequency = constrain(this.mineFrequency - 10, 240, 360); } //iterate through each mine for(var i = this.mines.length - 1; i >= 0; i--) { //add the horizontal speed this.mines[i].x+= this.groundSpeed; //display the mine pushStyle(); strokeWeight(1); stroke(107, 105, 105, 200); for(var k = 0; k < 180; k+= 60) { pushMatrix(); translate(this.mines[i].x, this.mines[i].y); rotate(k); line(0, -this.mines[i].radius * 0.65, 0, this.mines[i].radius * 0.65); popMatrix(); } popStyle(); noStroke(); fill(107, 105, 105, 200); ellipse(this.mines[i].x, this.mines[i].y, this.mines[i].radius, this.mines[i].radius); fill(31, 30, 30, 200); ellipse(this.mines[i].x, this.mines[i].y, this.mines[i].radius * 0.8, this.mines[i].radius * 0.8); //check if the mine collides with the rover if( this.collision(this.rover.wheelBack, this.mines[i]) \|\| this.collision(this.rover.wheelFront, this.mines[i]) \|\| this.collision(this.rover.center, this.mines[i])) { //if it does collide, add some mine explosions (reusing the trails array) for(var j = 0; j < 30; j++) { this.trails.push(this.getTrail( { timeToLive: ~~random(180, 220), x: this.mines[i].x + random(-25, 25), y: this.mines[i].y + random(-25, 25), radius: random(this.mines[i].radius * 0.3, this.mines[i].radius * 0.3), color: random() < 0.5 ? color(105, 103, 103) : color(51, 49, 49), vx: this.range.speed } )); } //reduce the health this.setHealth(-10); //shake the rover this.shake = 15; //reset the mine so it can be reused this.mines[i].used = false; //remove the mine this.mines.splice(i, 1); //if no health set game over and break out of the loop if(this.health === 0) { this.gameOver = true; break; } } //else if the mine goes off the screen else if(this.mines[i].x + this.mines[i].radius < 0) { //reset the mine so it can be reused this.mines[i].used = false; //remove the mine this.mines.splice(i, 1); } } }; //runs the trails - explosions this.runTrails = function() { noStroke(); //loop through each of the trails for(var i = this.trails.length - 1; i >= 0; i--) { //reduce time to live (opacity and removal) this.trails[i].timeToLive-= 3; //set the color including the current opacity fill(this.trails[i].color, this.trails[i].timeToLive); //add the horizontal velocity this.trails[i].x+= this.trails[i].vx; //add the vertical velocity this.trails[i].y+= this.trails[i].vy; //display the trail ellipse(this.trails[i].x, this.trails[i].y, this.trails[i].radius, this.trails[i].radius); //if time to live is zero then remove the trail if(this.trails[i].timeToLive <= 0) { //reset trail so it can be reused this.trails[i].used = false; //remove the trail this.trails.splice(i, 1); } } }; //shakes the screen this.shakeScreen = function() { //if there is a shake if(this.shake > 0) { //slowly reduce the shaking this.shake = lerp(this.shake, 0, this.SHAKEDOWN); //perform a random translate horizontal and vertically translate(round(random(-this.shake, this.shake)), round(random(-this.shake, this.shake))); } }; //plays the actual game this.play = function() { //if the game is paused then display the pause screen //and don't continue with the rest of the play method if(this.paused) { pushStyle(); noStroke(); image(this.pausedScreen, 0, 0, width, height); rectMode(CENTER); fill(30, 35, 60, 150); fill(255, 100); rect(width/2, height/2, 300, 150); textAlign(CENTER, CENTER); fill(240, 240, 240); fill(0, 150); pushStyle(); textFont(titleFont); textSize(40); text("PAUSED", width/2, height0.47); popStyle(); textSize(20); text("Press P to resume", width/2, height0.55); popStyle(); return; } //display the main game background image(game.images.back, 0, 0); //display the stats this.stats(); //check if the rover is on the ground this.checkRoverBase(this.rover.wheelBack); this.checkRoverBase(this.rover.wheelFront); //run the background scene objects this.runPlanets(); this.runStars(); this.runEllipses(); //run the back range (ground in the background) this.rangeBack.run(); pushMatrix(); //shake the screen if it's set this.shakeScreen(); //run the rover (in here so that only the rover shakes) this.rover.run(); popMatrix(); //run the main range (ground) in the front this.range.run(); //run any meteor trails or explosions this.runTrails(); //every ~6 seconds make the game slightly quicker (harder) if(frameCount % 360 === 0) { //increase the ground speed and all other components based on it's speed this.groundSpeed = constrain(this.groundSpeed - 0.2, this.GROUND_SPEED_MAX, 0); this.range.speed = this.groundSpeed; this.rangeBack.speed = this.range.speed * 0.8; if(this.groundSpeed > this.GROUND_SPEED_MAX) { for(var i = 0; i < this.stars.length; i++) { this.stars[i].vx= 1.1; } for(var i = 0; i < this.ellipses.length; i++) { this.ellipses[i].vx= 1.1; } for(var i = 0; i < this.planets.length; i++) { this.planets[i].vx= 1.1; } } } //if the game isn't over... if(!this.gameOver) { //we only want to run the meteors and mines if the game is in play this.runMeteors(); this.runMines(); //resets the scoreTimer to 0 every second this.scoreTimer = (this.scoreTimer + 1) % 60; if(this.scoreTimer === 0) { //add one to the score this.score+= 1; //add some health for each 20 seconds passed if(this.score % 20 === 0) { this.setHealth(10); } } } //if game is over and delay finished then show replay screen if(this.gameOver && this.endTimer++ > this.END_DURATION) { this.bestScore = max(this.bestScore, this.score); this.scene = "replay"; this.endTimer = 0; } }; //home screen this.home = function() { //display the main background image(game.images.back, 0, 0); //run some of the game components in the background this.checkRoverBase(this.rover.wheelBack); this.checkRoverBase(this.rover.wheelFront); this.runPlanets(); this.runStars(); this.runEllipses(); this.rangeBack.run(); this.rover.run(); this.range.run(); //display the title pushMatrix(); translate(300, 270); pushStyle(); textFont(titleFont); textSize(70); textAlign(CENTER); fill(0, 0, 0, 50); text("ROVER", 0, 0); popStyle(); popMatrix(); //display the sub title pushMatrix(); translate(300, 350); pushStyle(); textFont(titleFont); textSize(20); textAlign(CENTER); fill(0, 0, 0, 50); text("A game by Gray Wolf", 0, 0); popStyle(); popMatrix(); //only show the indicator if the user hasn't already viewed how if(!this.viewed) { pushMatrix(); noStroke(); translate(width 0.72 + sin(frameCount * 10) * 2, height* 0.88); fill(255, 255, 255, 150); triangle(0, 0, 30, -20, 30, 20); fill(0, 0, 0, 20); triangle(0, 0, 30, -20, 30, 0); popMatrix(); } //display the buttons this.buttons.playButton.draw(); this.buttons.howButton.draw(); //run any current transition this.runTransition(); }; //how screen this.how = function() { //display the main background image(game.images.back, 0, 0); //run some of the game components in the background this.checkRoverBase(this.rover.wheelBack); this.checkRoverBase(this.rover.wheelFront); this.runPlanets(); this.runStars(); this.runEllipses(); this.rangeBack.run(); this.rover.run(); this.range.run(); //display the how text pushStyle(); textAlign(CENTER); rectMode(CENTER); noStroke(); fill(255, 150); rect(300, 260, 500, 380); fill(0); textSize(14); text("You are in a rover stuck on exoplanet Gliese 458k.\n\nYour mission is to last as long as you can.\n\n\n\nA/LEFT and D/RIGHT keys to move left and right.\nW or UP keys to jump.\n\nYou need to jump over the mines and avoid the meteors.\n\nYour score is based on how long you can keep going.\n\nGet hit by a meteor or hit a mine and you lose some health, but you get some back for every 20 seconds that you last.\n\n\n\nPress P at anytime in the game to pause.", 75, 90, 450, 600); popStyle(); //display the home button this.buttons.homeButton.draw(); //run any current transition this.runTransition(); }; //replay screen this.replay = function() { //display the main background image(game.images.back, 0, 0); //run some of the game components in the background this.checkRoverBase(this.rover.wheelBack); this.checkRoverBase(this.rover.wheelFront); this.runPlanets(); this.runStars(); this.runEllipses(); this.rangeBack.run(); //show smoke from the rover since it's been hit too many times if(frameCount % 2 === 0) { this.trails.push(this.getTrail( { timeToLive: ~~random(180, 220), x: this.rover.center.x, y: this.rover.center.y - this.rover.radius * 0.2, radius: random(this.rover.radius * 0.4, this.rover.radius * 0.4), color: random() < 0.5 ? color(105, 103, 103) : color(51, 49, 49), vx: this.range.speed, vy: random(-2, -1) } )); } //run the trails so the smoke appears this.runTrails(); this.rover.run(); this.range.run(); //display the title and game stats pushStyle(); textAlign(CENTER); rectMode(CENTER); noStroke(); fill(255, 100); rect(300, 260, 500, 380); fill(0, 150); pushStyle(); textFont(titleFont); textSize(35); text("Game Over", 300, 130); popStyle(); textSize(24); text("Score: " + this.score + "\n\nBest Score: " + this.bestScore, 300, 200); popStyle(); //display the buttons this.buttons.replayButton.draw(); this.buttons.homeButton.draw(); }; //handles the pausing of the game during play this.checkPaused = function() { //if the user presses the P key and the game is in progress if (keyPressed && keyCode === 80) { //P - Pause if(this.scene === "play" \|\| this.scene === "replay") { //toggle the paused state this.paused = !this.paused; //get an image of the current game scene this.pausedScreen = get(); } keyCode = 0; } }; }; //instantiate a new game object game = new Game({}); draw = function() { //check if the game is paused game.checkPaused(); background(0, 0, 0); //run the appropriate scene switch(game.scene) { case "home": game.home(); break; case "how": game.how(); break; case "play": game.play(); break; case "replay": game.replay(); break; } clicked = false; };
Folds	34,48,61,217,219,243,245,264,266,361,363,527,529,1663
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgOWv8bjgCgw
Votes	312
Spin-Offs	7
Type	PJS
Width	600
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Gray Wolf 🐺
Author Name	grantjenkins
Author ID	kaid_639291037700385781852565
Author Profile Access	COACH

Archive Data

Added	6 months ago, 1739453009403
Updated	4 months ago, 1744844810394
Source Deleted	unknown