Viewing Program

Program Data

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

Title	Space Racer (Game)
ID	5932324282744832
Created	3 years ago, 1644323521832
Updated	3 years ago, 1644632005067
Code	/ Space Racer (Game) Gray Wolf, February 2022 Submission for Clash of Code 2022, Challenge 3 Team: Fire Fist Studios Make sure you read the How screen before you play Post your highscores in the Tips & Thanks (please be honest) @Credits Polygon collision function from Cavan (Loyalty): https://www.khanacademy.org/cs/polygon-collisions/5453936839442432 New object function (KA fix) from KWC: https://www.khanacademy.org/profile/kaid_1018232416454567422505063 @Reference Based off the game Space Chase on iOS @Subscribe Want to be notified when I create a new program? Sub here: https://www.khanacademy.org/cs/gray-wolf/4876588413698048 / / Put your save code here to start from where you last saved. / var saveCode = "[-[s[#[#[#[#[-[#[sT"; //makes items smoother on certain browsers smooth(); //set default font textFont(createFont('Trebuchet MS')); var app; //credit to KWC for the new object function Object.constructor.prototype.new = function() { var obj = Object.create(this.prototype); this.apply(obj, arguments); return obj; }; var clicked = false, hover = false; mouseClicked = function() { clicked = true; }; //Ship object var Player = (function() { var Player = function() { this.x = 100; this.y = 300; this.w = 20; this.h = 20; this.diameter = this.w; this.vx = 0; this.vy = 0; this.angle = 0; this.rot = 2; this.ship = undefined; this.invincible = { active: false, timer: 0, duration: 420, show: true, diameter: this.diameter * 1.75, color: color(255, 50) }; this.trail = { timer: 0, delay: 3, arr: [] }; this.coords = [ { //top x1: this.x, y1: this.y, x2: this.x + this.w, y2: this.y + this.h / 2 }, { //bottom x1: this.x, y1: this.y + this.h, x2: this.x + this.w, y2: this.y + this.h / 2 } ]; this.nodes = [ { x: this.x, y: this.y }, { x: this.x, y: this.y + this.h }, { x: this.x + this.w, y: this.y + this.h / 2 } ]; }; Player.prototype = { updateCoords: function() { //update coordinates for polygon collisions this.coords[0].x1 = this.x; this.coords[0].y1 = this.y; this.coords[0].x2 = this.x + this.w; this.coords[0].y2 = this.y + this.h / 2; this.coords[1].x1 = this.x; this.coords[1].y1 = this.y + this.h; this.coords[1].x2 = this.x + this.w; this.coords[1].y2 = this.y + this.h / 2; }, updateNodes: function() { //update coordinates for line collisions this.nodes[0].x = this.x; this.nodes[0].y = this.y; this.nodes[1].x = this.x; this.nodes[1].y = this.y + this.h; this.nodes[2].x = this.x + this.w; this.nodes[2].y = this.y + this.h / 2; }, move: function() { //move up/down based on the mouse position this.y = lerp(this.y, mouseY - app.cam.y, 0.05); //get the distance between the mouse and the ship var distance = this.y - mouseY + app.cam.y; //calculate the angle based on the distance this.angle = map(distance, -250, 250, 45, -45); //update the coordinates for collisions this.updateCoords(); this.updateNodes(); //add trails behind the ship if(++this.trail.timer % this.trail.delay === 0) { this.trail.arr.push({ x: this.x + this.w * 0.3, y: this.y + this.h * 0.5, diameter: this.w * 0.3, vx: -app.speed * 0.6, vy: random(-0.3, 0.3), opacity: random(230, 250), color: color(255) }); //if invincible add addition trails if(this.invincible.active) { this.trail.arr.push({ x: this.x - this.w * 0.1, y: this.y + random(this.h * 0.2, this.h * 0.8), diameter: this.w * 0.2, vx: -app.speed * 0.6, vy: random(-1, 1), opacity: random(230, 250), color: color(33) }); } } }, draw: function() { //draw the trails behind the ship noStroke(); for(var i = this.trail.arr.length - 1; i >= 0; i--) { var trail = this.trail.arr[i]; fill(trail.color, trail.opacity); ellipse(trail.x, trail.y, trail.diameter, trail.diameter); trail.x+= trail.vx; trail.y+= trail.vy; trail.opacity = constrain(trail.opacity - 15, 0, 255); if(trail.opacity === 0) { this.trail.arr.slice(i, 1); } } //draw the ship pushMatrix(); translate(this.x + this.w / 2, this.y + this.h / 2); rotate(this.angle); image(this.ship, -this.w / 2, -this.h / 2, this.w, this.h); //invincible barrier if(this.invincible.active) { this.invincible.timer++; if(this.invincible.timer > this.invincible.duration * 0.7) { if(this.invincible.timer % 5 === 0) { this.invincible.show = !this.invincible.show; } } //show a circle around the ship if invincible noStroke(); if(this.invincible.show) { fill(this.invincible.color); } else { noFill(); } ellipse(0, 0, this.invincible.diameter, this.invincible.diameter); //manage the duration of invincibility if(this.invincible.timer === this.invincible.duration) { this.invincible.timer = 0; this.invincible.active = false; this.invincible.show = true; } } popMatrix(); }, run: function() { this.move(); this.draw(); } }; return Player; })(); //Meteor object var Meteor = (function() { var Meteor = function(args) { this.x = args.x \|\| 300; this.y = args.y \|\| 300; this.diameter = args.diameter \|\| 200; this.vx = args.vx \|\| 0; this.vy = args.vy \|\| 0; this.color = args.color \|\| color(50, 50, 50); this.rot = args.rot \|\| random(1, 2) * (random() < 0.5 ? 1 : -1); this.nodes = []; this.setup(); }; Meteor.prototype = { setup: function() { //create the ranodm meteor polygon for(var angle = 0; angle < 360; angle+= random(25, 45)) { var radius = random(this.diameter * 0.35, this.diameter * 0.65); var dx = cos(angle) * radius; var dy = sin(angle) * radius; this.nodes.push({ x: this.x + dx, y: this.y + dy, radius: radius, angle: angle }); } var lastNode = this.nodes[this.nodes.length-1]; this.nodes.push({ x: lastNode.x, y: lastNode.y, radius: lastNode.radius, angle: lastNode.angle }); }, update: function() { //move the meteor this.x+= this.vx; this.y+= this.vy; //rotate the meteor using trig so can keep the nodes correct for collisions for(var i = 0; i < this.nodes.length; i++) { var p = this.nodes[i]; p.angle+= this.rot; p.x = this.x + cos(p.angle) * p.radius; p.y = this.y + sin(p.angle) * p.radius; } }, draw: function() { //draw the meteor noStroke(); fill(this.color); beginShape(); for(var i = 0; i < this.nodes.length; i++) { var p = this.nodes[i]; vertex(p.x, p.y); } endShape(); }, run: function() { this.update(); this.draw(); } }; return Meteor; })(); //Button object var Button = (function() { var Button = function(args) { this.x = args.x; this.y = args.y; this.w = args.w \|\| 120; this.h = args.h \|\| 50; this.content = args.content; this.textSize = args.textSize \|\| this.w * 0.11; this.hover = false; this.action = args.action; this.backColor = args.backColor \|\| color(201, 199, 201); this.textColor = args.textColor \|\| color(23, 23, 23); }; Button.prototype = { over: function() { //check if the mouse is over the button return (mouseX > this.x && mouseX < this.x + this.w && mouseY > this.y && mouseY < this.y + this.h); }, draw: function() { //set hover based on mouse over the button this.hover = this.over(); if(this.hover) { hover = true; } //draw the button pushStyle(); noStroke(); fill(this.backColor, this.hover ? 150 : 220); rect(this.x, this.y, this.w, this.h); textAlign(CENTER, CENTER); textSize(this.textSize); fill(this.textColor); textLeading(this.textSize * 1.5); text(this.content, this.x + this.w / 2, this.y + this.h / 2); popStyle(); //if button is clicked then run the function argument if(clicked && this.hover) { this.action(); } } }; return Button; })(); //Ship Button object var ShipButton = (function() { var ShipButton = function(args) { this.x = args.x; this.y = args.y; this.w = args.w \|\| 50; this.h = args.h \|\| 50; this.ship = args.ship; this.hover = false; this.selected = args.selected \|\| false; this.action = args.action; this.backColor = args.backColor \|\| color(255); }; ShipButton.prototype = { over: function() { //check if the mouse is over the button return (mouseX > this.x && mouseX < this.x + this.w && mouseY > this.y && mouseY < this.y + this.h); }, draw: function() { //if the ship buttons are visible (active) then check if mouse over if(app.anim.home.ships.active) { this.hover = this.over(); if(this.hover) { hover = true; } } //draw the ship button pushStyle(); noStroke(); fill(this.backColor, this.hover ? 150 : this.selected ? 200 : 120); rect(this.x, this.y, this.w, this.h); imageMode(CENTER); image(app.ships[this.ship], this.x + this.w / 2, this.y + this.h / 2, this.w * 0.6, this.h * 0.6); imageMode(CORNER); popStyle(); //if active and button clicked run the function argument if(app.anim.home.ships.active && clicked && this.hover) { this.action(); } } }; return ShipButton; })(); //Transition object var Transition = function() { this.h = 0; this.vy = 15; this.active = false; this.scene = "home"; this.reset = function() { //reset the transition ready for the next one this.h = 0; this.vy = 15; }; this.draw = function() { //draw the sliding rectangles pushStyle(); stroke(255, 30); strokeWeight(40); fill(50, 50, 50); rect(-20, -20, width + 40, this.h); rect(-20, height-this.h, width + 40, this.h + 20); strokeWeight(1); popStyle(); }; this.update = function() { //increase the hight of the rectangles this.h+= this.vy; //when the rectangles collide change the scene if(this.h >= height/2) { app.scene = this.scene; if(this.scene === "play") { app.reset(); } else if(this.scene === "home") { app.anim.home.title.value = app.anim.home.title.base; app.anim.home.buttons.value = app.anim.home.buttons.base; } else if(this.scene === "how") { app.anim.how.title.value = app.anim.how.title.base; app.anim.how.buttons.value = app.anim.how.buttons.base; app.anim.how.content.value = app.anim.how.content.base; } else if(this.scene === "leaderboard") { app.anim.leaderboard.title.value = app.anim.leaderboard.title.base; app.anim.leaderboard.buttons.value = app.anim.leaderboard.buttons.base; app.anim.leaderboard.scores.value = app.anim.leaderboard.scores.base; } this.vy= -1; } else if(this.h < 0) { //if rectangles are back at base reset this.reset(); this.active = false; } }; this.run = function() { if(this.active) { this.draw(); this.update(); } }; }; //Lightning object (fractal) var Lightning = (function() { Lightning = function(args) { this.min = args.min \|\| width/6; this.max = args.max \|\| width-width/6; this.y = args.y \|\| 0; this.length = args.length \|\| ~~(height / 11); this.depth = constrain(args.depth \|\| ~~(height / 32), 5, 25); this.weight = constrain(args.weight \|\| 4, 2, 8); this.forkColor = args.forkColor \|\| color(255); this.flashColor = args.flashColor \|\| color(200); this.angleRange = constrain(args.angleRange \|\| 60, 40, 80); this.arr = []; }; Lightning.prototype = { //recursive function generate the random lightning fork: function(length, depth, weight, px, py) { var angle = random(-this.angleRange, this.angleRange); //decrease the depth so can exit the recursive function depth--; //calculate the next x/y coordinate for the fork var x = px + cos(angle - 90) length; var y = py + sin(angle + 90) * length; //add fork to the start of the array this.arr.unshift({ weight: weight, stroke: this.forkColor, px: px, py: py, x: x, y: y, length: length, opacity: 255, angle: angle }); //Only generate more forks for given depth if (depth >= 0) { this.fork(length, depth, weight0.8, x, y); //Randomly add a new fork if(random() < 0.15) { angle = random(-this.angleRange, this.angleRange); this.fork(length0.85, depth, weight0.5, x, y); } } }, draw: function() { //draw the lightning pushStyle(); for(var i = this.arr.length - 1; i >= 0; i--) { strokeWeight(this.arr[i].weight); stroke(this.arr[i].stroke, this.arr[i].opacity); line(this.arr[i].px, this.arr[i].py+this.arr[i].weight, this.arr[i].x, this.arr[i].y); this.arr[i].opacity-=10; if(this.arr[i].opacity <= 0) { this.arr.splice(i, 1); } } popStyle(); }, generate: function() { //initiates a new lightning strike this.fork( this.length, //length of each strike this.depth, //how deep you want to recurse this.weight, //starting weight of the strike random(this.min, this.max), //starting (previous) x pos this.y //starting (previous) y pos ); } }; return Lightning; })(); //Gray Wolf logo var Logo = (function() { Logo = function(args) { this.scale = args.scale \|\| 1.0; this.x = args.x \|\| 600 0.5 * this.scale; this.y = args.y \|\| 600 * 0.4 * this.scale; this.colors = { back: color(50, 50, 50), outline: color(5, 5, 5), from: color(102, 99, 98), to: color(13, 13, 13), text: color(156, 153, 156) }; this.font = args.font \|\| createFont("Trebuchet MS"); this.gray = { words: "G R A Y W O L F", index: 0, timer: 0, delay: 2 }; this.prod = { opacity: 0, y: height * 1.2, }; this.img = undefined; this.imgs = []; this.splits = { left: undefined, right: undefined }; this.timer = 0; this.states = { a: { delay: 30, duration: 120, }, b: { delay: 30 }, c: { delay: 55 }, d: { delay: 45, x: 0 } }; this.state = "a"; this.done = false; this.complete = false; this.hover = false; this.init(); }; Logo.prototype = { init: function() { //generte the wolf graphic var gx = createGraphics(600, 600, P2D); gx.background(0, 0); gx.fill(255); //inner gx.beginShape(); gx.vertex(300, 137); gx.vertex(377, 150); gx.vertex(454, 118); gx.vertex(410, 213); gx.vertex(429, 202); gx.vertex(464, 279); gx.vertex(396, 361); gx.vertex(381, 316); gx.vertex(341, 399); gx.vertex(300, 443); gx.vertex(259, 399); gx.vertex(219, 316); gx.vertex(204, 361); gx.vertex(136, 279); gx.vertex(171, 202); gx.vertex(190, 213); gx.vertex(146, 118); gx.vertex(223, 150); gx.endShape(CLOSE); var shape = gx.get(115, 90, 370, 355); gx.noStroke(); for(var i = 90; i <= 445; i++) { gx.fill(gx.lerpColor(this.colors.to, this.colors.from, i/445)); gx.rect(115, i, 370, 1); } gx.stroke(150, 20); gx.strokeWeight(1); for(var i = 0; i < 200; i++) { gx.line(random(115, 485), random(90, 445), random(115, 485), random(90, 445)); } gx.filter(BLUR, 2.5); var grad = gx.get(115, 90, 370, 355); grad.mask(shape); gx.background(this.colors.back); gx.background(0, 0); gx.noStroke(); gx.fill(this.colors.outline); //outer gx.beginShape(); gx.vertex(300, 126); gx.vertex(376, 138); gx.vertex(480, 92); gx.vertex(437, 187); gx.vertex(482, 283); gx.vertex(396, 364); gx.vertex(383, 344); gx.vertex(354, 404); gx.vertex(300, 444); gx.vertex(246, 404); gx.vertex(217, 344); gx.vertex(204, 364); gx.vertex(118, 283); gx.vertex(163, 187); gx.vertex(120, 92); gx.vertex(224, 138); gx.endShape(CLOSE); gx.image(grad, 115, 90); fill(this.colors.outline); //nose gx.beginShape(); gx.vertex(300, 372); gx.vertex(323, 367); gx.vertex(320, 382); gx.vertex(300, 400); gx.vertex(280, 382); gx.vertex(277, 367); gx.endShape(CLOSE); //left eye gx.beginShape(); gx.vertex(324, 341); gx.vertex(320, 268); gx.vertex(428, 231); gx.vertex(378, 290); gx.vertex(358, 278); gx.vertex(372, 280); gx.vertex(390, 257); gx.vertex(334, 277); gx.endShape(CLOSE); //right eye gx.beginShape(); gx.vertex(276, 341); gx.vertex(280, 268); gx.vertex(172, 231); gx.vertex(222, 290); gx.vertex(244, 278); gx.vertex(228, 280); gx.vertex(210, 257); gx.vertex(266, 277); gx.endShape(CLOSE); this.img = gx.get(115, 90, 370, 355); //generate pieces of image for(var i = 0; i < 10; i++) { for(var j = 0; j < 10; j++) { this.imgs.push({ img: gx.get(115 + 37 * i, 90 + 35.5 * j, 37, 35.5), w: 37, h: 35.5, dx: 115 + 37 * i + 18.5, dy: 90 + 35.5 * j + 17.75, x: random(-width, width * 2), y: random(-height, height * 2), angle: ~~random(3600) }); } } }, draw: function() { if(!this.complete) { pushMatrix(); scale(this.scale); pushStyle(); switch(this.state) { case "a": background(this.colors.back); if(this.timer++ >= this.states.a.delay) { for(var i = 0; i < this.imgs.length; i++) { var item = this.imgs[i]; item.x = lerp(item.x, item.dx, 0.1); item.y = lerp(item.y, item.dy, 0.1); item.angle = lerp(item.angle, 0, 0.1); imageMode(CENTER); pushMatrix(); translate(item.x, item.y - 28); rotate(item.angle); image(item.img, 0, 0, item.w, item.h); popMatrix(); } if(this.timer >= this.states.a.duration) { this.state = "b"; this.timer = 0; } } break; case "b": background(this.colors.back); imageMode(CENTER); image(this.img, this.x / this.scale, this.y / this.scale); if(this.timer++ >= this.states.b.delay) { textFont(this.font); textAlign(CENTER, CENTER); textSize(40); fill(this.colors.text); if(this.gray.index < this.gray.words.length && this.gray.timer++ >= this.gray.delay) { this.gray.index++; this.gray.timer = 0; } text(this.gray.words.substring(0, this.gray.index), this.x / this.scale, this.y * 2 / this.scale); this.prod.opacity = constrain(this.prod.opacity + 7, 0, 255); this.prod.y = ~~lerp(this.prod.y, this.y * 2.1, 0.030); textSize(30); fill(this.colors.text, this.prod.opacity); text("P R E S E N T S", this.x / this.scale, this.prod.y / this.scale); } if(this.gray.index === this.gray.words.length) { this.state = "c"; this.timer = 0; } break; case "c": background(this.colors.back); imageMode(CENTER); image(this.img, this.x / this.scale, this.y / this.scale); textFont(this.font); textAlign(CENTER, CENTER); textSize(40); fill(this.colors.text); text(this.gray.words.substring(0, this.gray.index), this.x / this.scale, this.y * 2 / this.scale); if(this.timer++ >= this.states.c.delay) { this.prod.opacity = constrain(this.prod.opacity - 5, 0, 255); } textSize(30); fill(this.colors.text, this.prod.opacity); this.prod.y = constrain(~~lerp(this.prod.y, this.y * 2.1, 0.035), 530 * this.scale, Infinity); text("P R E S E N T S", this.x / this.scale, this.prod.y / this.scale); if(this.prod.opacity === 0) { //get split image for next state this.splits.left = get(0, 0, width / 2, height); this.splits.right = get(width / 2, 0, width / 2, height); this.state = "d"; this.timer = 0; } break; case "d": scale(1 / this.scale); imageMode(CORNER); if(this.timer++ >= this.states.d.delay) { this.states.d.x = constrain(this.states.d.x + 7, 0, width / 2); } image(this.splits.left, -this.states.d.x, 0); image(this.splits.right, width / 2 + this.states.d.x, 0); if(this.states.d.x >= width / 2) { this.completed = true; } if(this.timer === this.states.d.delay) { this.done = true; } break; } popStyle(); popMatrix(); } } }; return Logo; })(); //App object for controlling the game var App = (function() { var App = function() { this.scene = "load"; this.highscores = [ { name: "Henry", score: 15135 }, { name: "Clara", score: 10123 }, { name: "BrenErso", score: 10242 }, { name: "JaxsonR", score: 6431 }, { name: "Ace", score: 11248 }, { name: "Mcraftisawesome", score: 8293 }, { name: "Crystal", score: 7703 }, { name: "Isaac", score: 6426 }, { name: "Sarth Patil", score: 9133 }, { name: "DakotaS", score: 10901 } ]; this.player = Player.new(); this.transition = Transition.new(); this.lightning = Lightning.new({}); this.logo = new Logo({}); this.cam = { x: 0, y: 0 }; this.images = {}; this.imageIndex = 0; this.loaded = false; this.shake = 0; this.shakedown = 0.1; this.sound = false; this.sounds = { aura: getSound("retro/whistle2"), special: getSound("retro/whistle1"), crash: getSound("retro/boom1"), collide: getSound("retro/hit2"), }; this.cave = { noise: 0, increment: 0.025, arr: [], width: { min: 10, max: 70 } }; this.inventory = { auras: { value: 0, total: 0, best: 0 }, meteors: { value: 0, total: 0, best: 0 }, distance: { value: 0, total: 0, best: 0, timer: 0 }, score: { value: 0, best: 0 }, games: 0 }; this.slide = { value: -600, base: -600 }; this.anim = { bar: { value: 100, base: 100 }, home: { title: { value: -600, base: -600 }, buttons: { value: 600, base: 600 }, ships: { value: 80, base: 80, active: false } }, how: { title: { value: -600, base: -600 }, buttons: { value: 300, base: 300 }, content: { value: width, base: width } }, leaderboard: { title: { value: -600, base: -600 }, buttons: { value: 300, base: 300 }, scores: { value: width, base: width } } }; this.parallax = { stars: { x1: 0, x2: 599, speed: -0.05 }, hillsFront: { x1: 0, x2: 899, speed: 0.08 }, hillsMiddle: { x1: 0, x2: 899, speed: 0.05 }, hillsBack: { x1: 0, x2: 899, speed: 0.02 } }; this.special = { diameter: 30, rot: 5, color: color(255, 50), interval: { timer: 0, value: 300, min: 300, max: 600 } }; this.explosions = []; this.meteorExplosions = []; this.auras = []; this.specials = []; this.meteors = []; this.shipIndex = 0; this.shipColors = [ color(30, 30, 30), color(110, 175, 201), color(222, 96, 106), color(147, 201, 157), color(235, 231, 197) ]; this.ships = []; this.rain = { dx: cos(120), dy: sin(120), len: { min: 50, max: 150 }, weight: { min: 2, max: 6 }, speed: { min: 10, max: 25 }, color: color(255, 20), arr: [] }; this.speed = 10; this.started = false; this.cypher = { value: "twRcfTA9l<rg>yM\|/.5pjBo31I_C?DK)Y]b+:{QNZW,dS0Vn6}[82a=47(UGvLeOFPXHqxEuikzJhm!?>$U@I&" }; this.buttons = { home: { play: Button.new({ x: width / 2 - 60, y: 325, content: "P L A Y", action: function() { app.transition.scene = "play"; app.transition.active = true; } }), how: Button.new({ x: width / 2 - 190, y: 325, content: "H O W", action: function() { app.transition.scene = "how"; app.transition.active = true; } }), leaders: Button.new({ x: width / 2 + 70, y: 325, content: "L E A D E R S", action: function() { app.transition.scene = "leaderboard"; app.transition.active = true; } }), sound: Button.new({ x: width / 2 - 60, y: 430, textSize: 12, content: "S O U N D - " + (this.sound ? "O N" : "O F F"), action: function() { app.sound = !app.sound; this.content = "S O U N D - " + (app.sound ? "O N" : "O F F"); } }) }, how: { home: Button.new({ x: width / 2 - 125, y: 535, content: "H O M E", action: function() { app.transition.scene = "home"; app.transition.active = true; } }), replay: Button.new({ x: width / 2 + 5, y: 535, content: "P L A Y", action: function() { app.transition.scene = "play"; app.transition.active = true; } }) }, leaderboard: { home: Button.new({ x: width / 2 - 125, y: 535, content: "H O M E", action: function() { app.transition.scene = "home"; app.transition.active = true; } }), replay: Button.new({ x: width / 2 + 5, y: 535, content: "P L A Y", action: function() { app.transition.scene = "play"; app.transition.active = true; } }) }, over: { home: Button.new({ x: width / 2 - 180, y: 535, content: "H O M E", action: function() { app.transition.scene = "home"; app.transition.active = true; } }), replay: Button.new({ x: width / 2 - 50, y: 535, content: "R E P L A Y", action: function() { app.transition.scene = "play"; app.transition.active = true; } }), save: Button.new({ x: width / 2 + 80, y: 535, content: "S A V E", action: function() { app.encode(); _clearLogs(); println("Copy the following save code to line 34\n\n" + saveCode); } }) } }; this.shipButtons = { ship1: ShipButton.new({ x: width / 2 - 145, y: 535, ship: 0, selected: true, action: function() { app.resetShips(this); } }), ship2: ShipButton.new({ x: width / 2 - 85, y: 535, ship: 1, action: function() { app.resetShips(this); } }), ship3: ShipButton.new({ x: width / 2 - 25, y: 535, ship: 2, action: function() { app.resetShips(this); } }), ship4: ShipButton.new({ x: width / 2 + 35, y: 535, ship: 3, action: function() { app.resetShips(this); } }), ship5: ShipButton.new({ x: width / 2 + 95, y: 535, ship: 4, action: function() { app.resetShips(this); } }), }; this.init(); this.setup(); }; App.prototype = { init: function() { //decode the save code this.decode(); //sort the leaderboard this.highscores.sort(function(a, b) { return b.score - a.score; }); //setup up the images to be loaded this.images = { back: function() { background(0, 0, 0, 0); strokeWeight(2); for(var y = 0; y <= 400; y++) { stroke(lerpColor(color(110, 85, 60), color(180, 140, 95), y/400)); line(0, y, width, y); } strokeWeight(1); return get(); }, stars: function() { background(0, 0, 0, 0); noStroke(); for(var i = 0; i < 70; i++) { fill(255, random(100, 200)); var diameter = random(1, 3); ellipse(random(width), random(height), diameter, diameter); } return get(); }, hillsFront: function() { var gx = createGraphics(900, 600, P2D); gx.background(0, 0, 0, 0); gx.noStroke(); gx.fill(75, 60, 40); gx.beginShape(); gx.vertex(0, 500); gx.vertex(49, 480); gx.vertex(94, 502); gx.vertex(119, 518); gx.vertex(169, 514); gx.vertex(203, 500); gx.vertex(241, 481); gx.vertex(274, 493); gx.vertex(311, 490); gx.vertex(335, 480); gx.vertex(380, 477); gx.vertex(424, 483); gx.vertex(468, 502); gx.vertex(491, 512); gx.vertex(534, 526); gx.vertex(561, 524); gx.vertex(584, 514); gx.vertex(601, 501); gx.vertex(632, 487); gx.vertex(650, 494); gx.vertex(667, 483); gx.vertex(679, 493); gx.vertex(695, 501); gx.vertex(716, 492); gx.vertex(747, 495); gx.vertex(780, 480); gx.vertex(820, 476); gx.vertex(852, 496); gx.vertex(900, 500); gx.vertex(900, 600); gx.vertex(0, 600); gx.endShape(CLOSE); return gx.get(0, 470, 900, 130); }, hillsMiddle: function() { var gx = createGraphics(900, 600, P2D); gx.background(0, 0, 0, 0); gx.noStroke(); gx.fill(95, 70, 50); gx.beginShape(); gx.vertex(0, 400); gx.vertex(25, 411); gx.vertex(56, 420); gx.vertex(86, 414); gx.vertex(112, 408); gx.vertex(140, 417); gx.vertex(171, 408); gx.vertex(188, 393); gx.vertex(244, 380); gx.vertex(279, 391); gx.vertex(289, 407); gx.vertex(338, 423); gx.vertex(374, 423); gx.vertex(408, 410); gx.vertex(461, 408); gx.vertex(499, 393); gx.vertex(545, 383); gx.vertex(602, 392); gx.vertex(635, 408); gx.vertex(661, 421); gx.vertex(693, 422); gx.vertex(740, 411); gx.vertex(778, 396); gx.vertex(827, 390); gx.vertex(873, 385); gx.vertex(900, 400); gx.vertex(900, 600); gx.vertex(0, 600); gx.endShape(CLOSE); return gx.get(0, 375, 900, 225); }, hillsBack: function() { var gx = createGraphics(900, 600, P2D); gx.background(0, 0, 0, 0); gx.noStroke(); gx.fill(125, 90, 60); gx.beginShape(); gx.vertex(0, 265); gx.vertex(17, 282); gx.vertex(33, 284); gx.vertex(41, 271); gx.vertex(64, 235); gx.vertex(93, 212); gx.vertex(108, 239); gx.vertex(145, 282); gx.vertex(162, 263); gx.vertex(175, 238); gx.vertex(190, 247); gx.vertex(208, 249); gx.vertex(215, 274); gx.vertex(248, 296); gx.vertex(269, 305); gx.vertex(278, 286); gx.vertex(302, 279); gx.vertex(328, 289); gx.vertex(337, 302); gx.vertex(351, 274); gx.vertex(361, 256); gx.vertex(388, 265); gx.vertex(392, 256); gx.vertex(408, 235); gx.vertex(426, 228); gx.vertex(447, 244); gx.vertex(464, 273); gx.vertex(499, 282); gx.vertex(515, 264); gx.vertex(527, 251); gx.vertex(539, 222); gx.vertex(555, 204); gx.vertex(590, 196); gx.vertex(616, 217); gx.vertex(625, 235); gx.vertex(665, 241); gx.vertex(670, 255); gx.vertex(684, 270); gx.vertex(719, 279); gx.vertex(723, 296); gx.vertex(756, 293); gx.vertex(766, 259); gx.vertex(774, 231); gx.vertex(795, 225); gx.vertex(817, 239); gx.vertex(836, 257); gx.vertex(836, 268); gx.vertex(851, 279); gx.vertex(869, 271); gx.vertex(900, 265); gx.vertex(900, 601); gx.vertex(0, 600); gx.endShape(CLOSE); return gx.get(0, 190, 900, 410); }, aura: function() { background(0, 0, 0, 0); noStroke(); fill(255, 75); ellipse(50, 50, 10, 10); fill(255, 5); for(var i = 5; i <= 30; i+=2) { ellipse(50, 50, i, i); } return get(35, 35, 30, 30); }, ship1: function() { background(0, 0, 0, 0); var diameter = 60; pushMatrix(); translate(300, 300); noStroke(); fill(app.shipColors[0]); quad( -diameter / 2, -diameter / 2, -diameter * 0.4, 0, -diameter / 2, diameter / 2, diameter / 2, 0); popMatrix(); return get(270, 270, 60, 60); }, ship2: function() { background(0, 0, 0, 0); var diameter = 60; pushMatrix(); translate(300, 300); pushStyle(); noStroke(); fill(app.shipColors[1]); quad( -diameter / 2, -diameter / 2, -diameter * 0.4, 0, -diameter / 2, diameter / 2, diameter / 2, 0); popStyle(); popMatrix(); return get(270, 270, 60, 60); }, ship3: function() { background(0, 0, 0, 0); var diameter = 60; pushMatrix(); translate(300, 300); pushStyle(); noStroke(); fill(app.shipColors[2]); quad( -diameter / 2, -diameter / 2, -diameter * 0.4, 0, -diameter / 2, diameter / 2, diameter / 2, 0); popStyle(); popMatrix(); return get(270, 270, 60, 60); }, ship4: function() { background(0, 0, 0, 0); var diameter = 60; pushMatrix(); translate(300, 300); pushStyle(); noStroke(); fill(app.shipColors[3]); quad( -diameter / 2, -diameter / 2, -diameter * 0.4, 0, -diameter / 2, diameter / 2, diameter / 2, 0); popStyle(); popMatrix(); return get(270, 270, 60, 60); }, ship5: function() { background(0, 0, 0, 0); var diameter = 60; pushMatrix(); translate(300, 300); pushStyle(); noStroke(); fill(app.shipColors[4]); quad( -diameter / 2, -diameter / 2, -diameter * 0.4, 0, -diameter / 2, diameter / 2, diameter / 2, 0); popStyle(); popMatrix(); return get(270, 270, 60, 60); } }; //add initial rain that will reused for(var i = 0; i < 15; i++) { var len = random(this.rain.len.min, this.rain.len.max); this.rain.arr.push({ x: random(50, width * 1.5), y: random(-200, height - 100), len: len, px: -len * this.rain.dx, py: -len * this.rain.dy, vx: this.rain.dx, vy: this.rain.dy, weight: random(this.rain.weight.min, this.rain.weight.max), speed: random(this.rain.speed.min, this.rain.speed.max) }); } //set initial noise/random seeds noiseSeed(100); randomSeed(100); }, load: function(s) { //load the images prior to game starting var obj = Object.keys(this.images); this.images[obj[this.imageIndex]] = this.images[obj[this.imageIndex]](); this.imageIndex++; background(50, 50, 50); pushStyle(); fill(255, 200); textAlign(CENTER, CENTER); textFont(createFont('Trebuchet MS Bold'), 40); text('L O A D I N G', width / 2, height / 2); noFill(); stroke(255, 200); strokeCap(SQUARE); strokeWeight(15); arc(width / 2, height / 2, 300, 300, 0, map(this.imageIndex / obj.length, 0, 1, 0, 360)); strokeWeight(1); popStyle(); if(this.imageIndex < obj.length){ this.loaded = false; } else { //once loaded add the ship images to the ships array this.ships.push(this.images.ship1); this.ships.push(this.images.ship2); this.ships.push(this.images.ship3); this.ships.push(this.images.ship4); this.ships.push(this.images.ship5); //set the intial ship image this.player.ship = this.ships[this.shipIndex]; this.loaded = true; this.scene = s; } }, setup: function() { //setup initial cave this.cave.noise = 37; this.cave.arr.length = 0; for(var x = -100; x <= width + 100; x+= random(this.cave.width.min, this.cave.width.max)) { var n = noise(this.cave.noise); var y = map(n, 0.25, 0.7, -100, 450); var y1 = map(n, 0.25, 0.7, 100, 650); this.cave.noise+= this.cave.increment; this.cave.arr.push({ x: x, y: y, x1: x, y1: y + y1 }); } }, reset: function() { //reset all game parameters ready for new game this.setup(); this.started = false; this.player.x = 100; this.player.y = 300; this.player.angle = 0; this.player.invincible.active = false; this.player.invincible.timer = 0; this.player.invincible.duration = 420; this.player.invincible.show = true; this.player.trail.arr.length = 0; this.explosions.length = 0; this.meteorExplosions.length = 0; this.meteors.length = 0; this.auras.length = 0; this.specials.length = 0; this.shake = 0; this.slide.value = this.slide.base; this.special.interval.active = false; this.special.interval.timer = 0; this.special.interval.value = random(this.special.interval.min, this.special.interval.max) \| 0; this.inventory.auras.value = 0; this.inventory.meteors.value = 0; this.inventory.distance.value = 0; this.inventory.distance.timer = 0; this.inventory.score.value = 0; this.anim.bar.value = this.anim.bar.base; this.scene = "play"; }, encode: function() { //generate a save code based on current same state var args = []; args.push(this.inventory.auras.total); args.push(this.inventory.auras.best); args.push(this.inventory.meteors.total); args.push(this.inventory.meteors.best); args.push(this.inventory.distance.total); args.push(this.inventory.distance.best); args.push(this.inventory.score.best); args.push(this.inventory.games); args.push(this.shipIndex); var shift = (random(12) \| 0); saveCode = ""; for(var i = 0; i < args.length; i++) { var arg = args[i].toString(); for(var j = 0; j < arg.length; j++) { var ch = arg[j]; saveCode+= this.cypher.value[this.cypher.value.indexOf(ch) + shift + j]; } saveCode+= random() < 0.33 ? "-" : random() < 0.5 ? "#" : "s"; } saveCode+= this.cypher.value[shift]; }, decode: function() { try { //decode the save code provided var arr = saveCode.split(/[-#s]/); var shift = this.cypher.value.indexOf(arr[arr.length-1]); var arrResults = Array(arr.length-1).fill(0); for(var i = 0; i < arrResults.length; i++) { for(var j = 0; j < arr[i].length; j++) { var ch = this.cypher.value[this.cypher.value.indexOf(arr[i][j]) - shift - j]; arrResults[i] = (arrResults[i].toString() + ch \| 0); } } //set resulting values this.inventory.auras.total = arrResults[0]; this.inventory.auras.best = arrResults[1]; this.inventory.meteors.total = arrResults[2]; this.inventory.meteors.best = arrResults[3]; this.inventory.distance.total = arrResults[4]; this.inventory.distance.best = arrResults[5]; this.inventory.score.total = arrResults[6]; this.inventory.games = arrResults[7]; //enable correct ship button and activate the ship switch(arrResults[8]) { case 0: this.resetShips(this.shipButtons.ship1); break; case 1: this.resetShips(this.shipButtons.ship2); break; case 2: this.resetShips(this.shipButtons.ship3); break; case 3: this.resetShips(this.shipButtons.ship4); break; case 4: this.resetShips(this.shipButtons.ship5); break; } } catch (e) { println("You've entered an invalid save code!"); this.inventory.auras.total = this.inventory.auras.best = 0; this.inventory.meteors.total = this.inventory.meteors.best = 0; this.inventory.distance.total = this.inventory.distance.best = 0; this.inventory.score.total = 0; this.inventory.games = 0; this.shipIndex = 0; this.player.ship = this.ships[this.shipIndex]; } }, lineLineCollision: function(x1, y1, x2, y2, x3, y3, x4, y4) { // calculate the distance to intersection point var uA = ((x4-x3)(y1-y3) - (y4-y3)(x1-x3)) / ((y4-y3)(x2-x1) - (x4-x3)(y2-y1)); var uB = ((x2-x1)(y1-y3) - (y2-y1)(x1-x3)) / ((y4-y3)(x2-x1) - (x4-x3)(y2-y1)); // if uA and uB are between 0-1, lines are colliding return (uA >= 0 && uA <= 1 && uB >= 0 && uB <= 1); }, polygonCollision: function(a, b) { var polygons = [a, b]; var minA, maxA, projected, i, i1, j, minB, maxB; for (i = 0; i < polygons.length; i++) { var polygon = polygons[i]; for (i1 = 0; i1 < polygon.length; i1++) { // grab 2 vertices to create an edge var i2 = (i1 + 1) % polygon.length; var p1 = polygon[i1]; var p2 = polygon[i2]; // find the line perpendicular to this edge var normal = { x: p2.y - p1.y, y: p1.x - p2.x }; minA = maxA = undefined; // for each vertex in the first shape, project it onto the line perpendicular to the edge // and keep track of the min and max of these values for (j = 0; j < a.length; j++) { projected = normal.x * a[j].x + normal.y * a[j].y; if (minA===undefined \|\| projected < minA) { minA = projected; } if (maxA===undefined \|\| projected > maxA) { maxA = projected; } } // for each vertex in the second shape, project it onto the line perpendicular to the edge // and keep track of the min and max of these values minB = maxB = undefined; for (j = 0; j < b.length; j++) { projected = normal.x * b[j].x + normal.y * b[j].y; if (minB===undefined \|\| projected < minB) { minB = projected; } if (maxB===undefined \|\| projected > maxB) { maxB = projected; } } // if there is no overlap between the projects, the edge we are looking at separates the two // polygons, and we know there is no overlap if (maxA < minB \|\| maxB < minA) { return false; } } } return true; }, circleCircleCollision: function(a, b) { //check if circles collide and return result return dist(a.x, a.y, b.x, b.y) < (a.diameter + b.diameter) / 2; }, checkPlayerCaveCollision: function() { //check for each cave section with player for(var i = 0; i < this.cave.arr.length - 1; i++) { var nodeStart = this.cave.arr[i]; var nodeEnd = this.cave.arr[i+1]; //only check if collision possible if(nodeStart.x < this.player.x + this.player.w && nodeEnd.x > this.player.x) { //check top and bottom likes of ship for(var j = 0; j < this.player.coords.length; j++) { var ln = this.player.coords[j]; if(this.lineLineCollision(ln.x1, ln.y1, ln.x2, ln.y2, nodeStart.x, nodeStart.y, nodeEnd.x, nodeEnd.y)) { return true; } if(this.lineLineCollision(ln.x1, ln.y1, ln.x2, ln.y2, nodeStart.x1, nodeStart.y1, nodeEnd.x1, nodeEnd.y1)) { return true; } } } } }, checkPlayerMeteorCollision: function() { //check if the ship collides with any of the meteors for(var i = this.meteors.length - 1; i >= 0; i--) { var meteor = this.meteors[i]; if(this.polygonCollision(this.player.nodes, meteor.nodes)) { return i; } } return -1; }, resetShips: function(button) { //reset ship based on button passed in for(var k in this.shipButtons) { this.shipButtons[k].selected = false; } button.selected = true; this.shipIndex = button.ship; this.player.ship = this.ships[this.shipIndex]; }, runMeteors: function() { //move the meteors and remove if off the screen for(var i = this.meteors.length - 1; i>= 0; i--) { var meteor = this.meteors[i]; meteor.run(); meteor.x-= this.speed; if(meteor.x + meteor.diameter < 0 \|\| meteor.y - meteor.diameter > height) { this.meteors.splice(i, 1); } } //randomly add new meteors if(random() < 0.02) { var track = this.cave.arr[this.cave.arr.length-1]; var distance = abs(track.y - track.y1); if(distance > 200) { var diameter = random(10, 50); this.meteors.push(Meteor.new({ x: track.x, y: track.y + distance / 2 + random(-diameter, diameter), diameter: diameter, vx: random(-0.5, 1), vy: random(-0.6, 0.6) })); } } }, drawMeteors: function() { //draw the meteors noStroke(); for(var i = this.meteors.length - 1; i>= 0; i--) { var meteor = this.meteors[i]; meteor.run(); //remove the meteor if it goes off the screen if(meteor.x + meteor.diameter < 0 \|\| meteor.y - meteor.diameter > height) { this.meteors.splice(i, 1); } } }, runSpecials: function() { //run each of the specials (give you invincibility) for(var i = this.specials.length - 1; i>= 0; i--) { var special = this.specials[i]; special.x-= this.speed; special.angle+= special.rot; //check if the ship collides with the special an if so make it invincible if(this.circleCircleCollision(this.player, special)) { this.player.invincible.active = true; this.player.invincible.timer = 0; this.player.invincible.duration = 420; this.player.invincible.show = true; this.special.interval.timer = 0; this.special.interval.value = random(this.special.interval.min, this.special.interval.max) \| 0; this.specials.splice(i, 1); //play a sound when collide with the special if(this.sound){ this.sounds.special.audio.pause(); this.sounds.special.audio.currentTime = 0; this.sounds.special.audio.play(); } } else if(special.x + special.diameter < 0 \|\| special.y - special.diameter > height) { this.specials.splice(i, 1); } } //randomly add a new special based on current special timer/interval if(++this.special.interval.timer === this.special.interval.value) { var track = this.cave.arr[this.cave.arr.length-1]; var distance = abs(track.y - track.y1); this.specials.push({ x: track.x, y: track.y + distance / 2 + random(-this.special.diameter / 2, this.special.diameter / 2), diameter: this.special.diameter, angle: 0, rot: this.special.rot }); this.special.interval.timer = 0; this.special.interval.value = random(this.special.interval.min, this.special.interval.max) \| 0; } }, drawSpecials: function() { //draw the specials for(var i = this.specials.length - 1; i >= 0; i--) { var special = this.specials[i]; noFill(); strokeWeight(special.diameter / 2); stroke(255, 10); ellipse(special.x, special.y, special.diameter, special.diameter); strokeWeight(special.diameter / 6); stroke(this.special.color); ellipse(special.x, special.y, special.diameter, special.diameter); noStroke(); fill(special.color); ellipse(special.x, special.y, special.diameter * 0.3, special.diameter * 0.3); } strokeWeight(1); }, runCave: function() { //move the cave sections for(var i = this.cave.arr.length - 1; i >= 0; i--) { var node = this.cave.arr[i]; //if goes off the screen then remove it if(node.x < -100) { this.cave.arr.splice(i, 1); } //move the nodes node.x-= this.speed; node.x1-= this.speed; } //get the last node var lastNodeX = this.cave.arr[this.cave.arr.length-1].x; //add additional nodes to ensure continuous cave while(this.cave.arr[this.cave.arr.length-1].x < width + 100) { var n = noise(this.cave.noise); var y = map(n, 0.25, 0.7, -100, 450); var y1 = map(n, 0.25, 0.7, 100, 650); this.cave.noise+= this.cave.increment; var w = random(this.cave.width.min, this.cave.width.max); this.cave.arr.push({ x: this.cave.arr[this.cave.arr.length-1].x + w, y: y, x1: this.cave.arr[this.cave.arr.length-1].x + w, y1: y + y1 }); } }, drawCave: function() { //draw the cave pushStyle(); noStroke(); fill(50); //top beginShape(); vertex(this.cave.arr[0].x, -1000); for(var i = 0; i < this.cave.arr.length; i++) { var track = this.cave.arr[i]; vertex(track.x, track.y); } vertex(this.cave.arr[this.cave.arr.length-1].x, -1000); endShape(CLOSE); //bottom fill(50); beginShape(); vertex(this.cave.arr[0].x1, height + 1000); for(var i = 0; i < this.cave.arr.length; i++) { var track = this.cave.arr[i]; vertex(track.x1, track.y1); } vertex(this.cave.arr[this.cave.arr.length-1].x1, height + 1000); endShape(CLOSE); popStyle(); }, runRain: function() { //move/draw the slanted rain pushStyle(); stroke(this.rain.color); for(var i = 0; i < this.rain.arr.length; i++) { var rain = this.rain.arr[i]; //draw the rain strokeWeight(rain.weight); line(rain.x, rain.y, rain.x - rain.px, rain.y - rain.py); //move the rain rain.x+= rain.vx * rain.speed; rain.y+= rain.vy * rain.speed; //if rain goes off the screen then rese it if(rain.y - rain.py > height) { rain.x = random(50, width * 1.5); rain.y = random(-50, -10); } } popStyle(); }, runAuras: function() { //move each of the auras for(var i = this.auras.length - 1; i>= 0; i--) { var aura = this.auras[i]; aura.x-= this.speed; //if ship hits and aura add to number of auras if(this.circleCircleCollision(this.player, aura)) { this.inventory.auras.value++; this.auras.splice(i, 1); //if ship collides with aura then play a sound if(this.sound){ this.sounds.aura.audio.pause(); this.sounds.aura.audio.currentTime = 0; this.sounds.aura.audio.play(); } } else if(aura.x + aura.diameter < 0) { this.auras.splice(i, 1); } } //add random auras if(random() < 0.005) { var track = this.cave.arr[this.cave.arr.length-1]; var distance = abs(track.y - track.y1); if(distance > 200) { var diameter = 30; this.auras.push({ x: track.x, y: track.y + distance / 2 + random(-diameter, diameter), diameter: diameter }); var lastAura = this.auras[this.auras.length-1]; for(var i = 0; i < 360; i+= 60) { this.auras.push({ x: lastAura.x + cos(i) * 50, y: lastAura.y + sin(i) * 50, diameter: diameter }); } } } }, drawAuras: function() { //draw the auras for(var i = this.auras.length - 1; i >= 0; i--) { var aura = this.auras[i]; image(this.images.aura, aura.x - aura.diameter / 2, aura.y - aura.diameter / 2, aura.diameter, aura.diameter); } }, runFire: function() { //randomly add flames if(frameCount % 3 === 0) { this.explosions.push({ x: this.player.x + this.player.w * 0.3, y: this.player.y + this.player.h / 2, diameter: random(this.player.w * 0.1, this.player.w * 0.2), opacity: random(200, 250), vx: random(-0.5, 0.5), vy: random(-1, -0.5) }); } //draw the flames noStroke(); for(var i = this.explosions.length - 1; i >= 0; i--) { var explosion = this.explosions[i]; var explosionColor = lerpColor(color(247, 97, 94), color(250, 250, 250), map(explosion.opacity, 255, 0, 0, 1)); fill(explosionColor, explosion.opacity); ellipse(explosion.x, explosion.y, explosion.diameter, explosion.diameter); explosion.x+= explosion.vx; explosion.y+= explosion.vy; explosion.diameter= 1.02; explosion.opacity = constrain(explosion.opacity - 5, 0, 255); if(explosion.opacity === 0) { this.explosions.splice(i, 1); } } }, runExplosions: function() { //draw and move the explosions noStroke(); for(var i = this.explosions.length - 1; i >= 0; i--) { var explosion = this.explosions[i]; fill(explosion.color , explosion.opacity); translate(explosion.x + explosion.diameter / 2, explosion.y + explosion.diameter / 2); rotate(explosion.angle); rect(-explosion.diameter / 2, -explosion.diameter / 2, explosion.diameter, explosion.diameter); rotate(-explosion.angle); translate(-(explosion.x + explosion.diameter / 2), -(explosion.y + explosion.diameter / 2)); explosion.x+= explosion.vx; explosion.y+= explosion.vy; explosion.angle+= explosion.rot; explosion.opacity = constrain(explosion.opacity - 2, 0, 255); //if the explosion fades out completley then remove it if(explosion.opacity === 0) { this.explosions.splice(i, 1); } } }, runMeteorExplosions: function() { //draw and move the explosions noStroke(); for(var i = this.meteorExplosions.length - 1; i >= 0; i--) { var explosion = this.meteorExplosions[i]; explosion.x-= this.speed; fill(explosion.color , explosion.opacity); translate(explosion.x + explosion.diameter / 2, explosion.y + explosion.diameter / 2); rotate(explosion.angle); rect(-explosion.diameter / 2, -explosion.diameter / 2, explosion.diameter, explosion.diameter); rotate(-explosion.angle); translate(-(explosion.x + explosion.diameter / 2), -(explosion.y + explosion.diameter / 2)); explosion.x+= explosion.vx; explosion.y+= explosion.vy; explosion.angle+= explosion.rot; explosion.opacity = constrain(explosion.opacity - 2, 0, 255); //if the explosion fades out completley then remove it if(explosion.opacity === 0) { this.meteorExplosions.splice(i, 1); } } }, runShake: function() { //shake the screen when a collision happens if(this.shake > 0) { this.shake = lerp(this.shake, 0, this.shakedown) \| 0; translate(round(random(-this.shake, this.shake)), round(random(-this.shake, this.shake))); } }, gameover: function() { //run the game over screen (slides down showing game stats) this.slide.value = lerp(this.slide.value, 0, 0.1); pushMatrix(); translate(0, this.slide.value); pushStyle(); textAlign(CENTER, TOP); textSize(40); textLeading(55); fill(255, 220); text("Final Score\n" + this.inventory.score.value, width / 2, 50); textSize(17); text("GAME\n" + this.inventory.distance.value + " metres\n" + this.inventory.auras.value + " auras\n" + this.inventory.meteors.value + " meteors\n\nTOTAL\n" + this.inventory.distance.total + " metres\n" + this.inventory.auras.total + " auras\n" + this.inventory.meteors.total + " meteors\n" + this.inventory.games + " games played\n\nBEST IN SINGLE GAME\n" + this.inventory.score.best + " score\n" + this.inventory.distance.best + " metres\n" + this.inventory.auras.best + " auras\n" + this.inventory.meteors.best + " meteors", width / 2, 170); popStyle(); popMatrix(); //display the button bar this.bar(); }, crashCave: function() { //run the scene when the ship collides with the cave background(125, 90, 60); image(this.images.back, 0, 0); image(this.images.stars, 0, 0); this.runLightning(); this.drawParallax(); this.runRain(); this.runShake(); pushMatrix(); translate(this.cam.x, this.cam.y); this.drawCave(); this.drawMeteors(); this.drawAuras(); this.drawSpecials(); this.player.draw(); this.runFire(); this.runMeteorExplosions(); popMatrix(); this.gameover(); }, crashMeteor: function() { //run the scene when the ship collides with a meteor background(125, 90, 60); image(this.images.back, 0, 0); image(this.images.stars, 0, 0); this.runLightning(); this.drawParallax(); this.runRain(); this.runShake(); pushMatrix(); translate(this.cam.x, this.cam.y); this.drawCave(); this.drawMeteors(); this.drawAuras(); this.drawSpecials(); this.runExplosions(); this.runMeteorExplosions(); popMatrix(); this.gameover(); }, addPlayerExplosion: function() { //add explosions for(var i = 0; i < 15; i++) { this.explosions.push({ x: this.player.x + this.player.w 0.3, y: this.player.y + this.player.h / 2, vx: random(0.3, 0.8) * (random() < 0.5 ? 1 : -1), vy: random(0.3, 0.8) * (random() < 0.5 ? 1 : -1), angle: random(360) \| 0, rot: random(5, 10) * (random() < 0.5 ? 1 : -1), color: this.shipColors[this.shipIndex], diameter: random(this.player.w * 0.3, this.player.w * 0.5), opacity: random(200, 250) }); } }, addMeteorExplosion: function(meteor) { //add meteor explosions for(var i = 0; i < 10; i++) { this.meteorExplosions.push({ x: meteor.x + random(-meteor.diameter / 2, meteor.diameter / 2), y: meteor.y + random(-meteor.diameter / 2, meteor.diameter / 2), vx: random(0.3, 0.8) * (random() < 0.5 ? 1 : -1), vy: random(0.3, 0.8) * (random() < 0.5 ? 1 : -1), angle: random(360) \| 0, rot: random(10, 20) * (random() < 0.5 ? 1 : -1), color: color(random(20, 50)), diameter: random(meteor.diameter * 0.1, meteor.diameter * 0.3), opacity: random(200, 250) }); } }, runLightning: function() { //randomly generate new lightning if(random() < 0.005) { background(this.lightning.flashColor); this.lightning.generate(); } //draw the lightning this.lightning.draw(); }, bar: function() { //buttons bar that slides onto the screen when game over this.anim.bar.value = lerp(this.anim.bar.value, 0, 0.1); pushMatrix(); translate(0, this.anim.bar.value); noStroke(); stroke(255, 30); fill(50, 50, 50); rect(0, 520, width, 80); for(var k in this.buttons.over) { this.buttons.over[k].draw(); } popMatrix(); }, stats: function() { //display the current game stats pushStyle(); textAlign(RIGHT, TOP); textSize(15); textLeading(25); fill(255, 150); text(this.inventory.distance.value + " metres\n" + this.inventory.auras.value + " auras\n" + this.inventory.meteors.value + " meteors", width -20, 20); popStyle(); }, updateInventory: function() { //update the total and best inventory values this.inventory.auras.total+= this.inventory.auras.value; this.inventory.auras.best = max(this.inventory.auras.best, this.inventory.auras.value); this.inventory.meteors.total+= this.inventory.meteors.value; this.inventory.meteors.best = max(this.inventory.meteors.best, this.inventory.meteors.value); this.inventory.distance.total+= this.inventory.distance.value; this.inventory.distance.best = max(this.inventory.distance.best, this.inventory.distance.value); this.inventory.score.value = this.inventory.distance.value + this.inventory.auras.value * 5 + this.inventory.meteors.value * 5; this.inventory.score.best = max(this.inventory.score.best, this.inventory.score.value); }, runParallax: function() { //continuously moves/draws the hills in the background at different speeds //front hills this.parallax.hillsFront.x1-= this.speed * this.parallax.hillsFront.speed; this.parallax.hillsFront.x2-= this.speed * this.parallax.hillsFront.speed; if(this.parallax.hillsFront.x1 + this.cam.x <= -this.images.hillsFront.width) { this.parallax.hillsFront.x1 = this.parallax.hillsFront.x2 + this.images.hillsFront.width; } if(this.parallax.hillsFront.x2 + this.cam.x <= -this.images.hillsFront.width) { this.parallax.hillsFront.x2 = this.parallax.hillsFront.x1 + this.images.hillsFront.width; } //middle hills this.parallax.hillsMiddle.x1-= this.speed * this.parallax.hillsMiddle.speed; this.parallax.hillsMiddle.x2-= this.speed * this.parallax.hillsMiddle.speed; if(this.parallax.hillsMiddle.x1 + this.cam.x <= -this.images.hillsMiddle.width) { this.parallax.hillsMiddle.x1 = this.parallax.hillsMiddle.x2 + this.images.hillsMiddle.width; } if(this.parallax.hillsMiddle.x2 + this.cam.x <= -this.images.hillsMiddle.width) { this.parallax.hillsMiddle.x2 = this.parallax.hillsMiddle.x1 + this.images.hillsMiddle.width; } //back hills this.parallax.hillsBack.x1-= this.speed * this.parallax.hillsBack.speed; this.parallax.hillsBack.x2-= this.speed * this.parallax.hillsBack.speed; if(this.parallax.hillsBack.x1 + this.cam.x <= -this.images.hillsBack.width) { this.parallax.hillsBack.x1 = this.parallax.hillsBack.x2 + this.images.hillsBack.width; } if(this.parallax.hillsBack.x2 + this.cam.x <= -this.images.hillsBack.width) { this.parallax.hillsBack.x2 = this.parallax.hillsBack.x1 + this.images.hillsBack.width; } }, drawParallax: function() { image(this.images.hillsBack, this.parallax.hillsBack.x1, 190); image(this.images.hillsBack, this.parallax.hillsBack.x2, 190); image(this.images.hillsMiddle, this.parallax.hillsMiddle.x1, 375); image(this.images.hillsMiddle, this.parallax.hillsMiddle.x2, 375); image(this.images.hillsFront, this.parallax.hillsFront.x1, 470); image(this.images.hillsFront, this.parallax.hillsFront.x2, 470); }, leaderboard: function() { //display the current leaderboard background(125, 90, 60); image(this.images.back, 0, 0); image(this.images.stars, 0, 0); this.runLightning(); this.drawParallax(); this.runRain(); this.drawCave(); this.drawMeteors(); //slide the title down this.anim.leaderboard.title.value = lerp(this.anim.leaderboard.title.value, 0, 0.1); pushMatrix(); translate(0, this.anim.leaderboard.title.value); pushStyle(); textAlign(CENTER, CENTER); textFont(createFont('Trebuchet MS Bold'), 40); fill(255, 200); text("L E A D E R B O A R D", width / 2, 50); popStyle(); popMatrix(); //slide the leaderboard to the center of the screen this.anim.leaderboard.scores.value = lerp(this.anim.leaderboard.scores.value, 0, 0.1); pushMatrix(); translate(this.anim.leaderboard.scores.value, 0); pushStyle(); fill(255, 200); textSize(14); textAlign(RIGHT, TOP); for(var i = 0; i < this.highscores.length; i++) { text(this.highscores[i].name, width / 2 - 10, 130 + i * 35); text(this.highscores[i].score, width / 2 + 50, 130 + i * 35); } popStyle(); popMatrix(); //slide the buttons into view this.anim.leaderboard.buttons.value = lerp(this.anim.leaderboard.buttons.value, 0, 0.1); pushMatrix(); translate(0, this.anim.leaderboard.buttons.value); pushStyle(); stroke(255, 30); fill(50); rect(0, 520, width, 80); popStyle(); for(var k in this.buttons.leaderboard) { this.buttons.leaderboard[k].draw(); } popMatrix(); }, how: function() { //display the how to information background(125, 90, 60); image(this.images.back, 0, 0); image(this.images.stars, 0, 0); this.runLightning(); this.drawParallax(); this.runRain(); this.drawCave(); this.drawMeteors(); //slide the title down this.anim.how.title.value = lerp(this.anim.how.title.value, 0, 0.1); pushMatrix(); translate(0, this.anim.how.title.value); pushStyle(); textAlign(CENTER, CENTER); textFont(createFont('Trebuchet MS Bold'), 40); fill(255, 200); text("H O W", width / 2, 50); popStyle(); popMatrix(); //slide the contents to the center of the screen this.anim.how.content.value = lerp(this.anim.how.content.value, 0, 0.1); pushMatrix(); translate(this.anim.how.content.value, 0); pushStyle(); textAlign(CENTER, CENTER); textSize(15); fill(255, 200); text("Click the screen to start, then move the mouse up/down to control the ship.\n\nYour score will be based on distance travelled, number of aura collected, and number of meteors destroyed.\n\nYou need to hit the shield to make you invincible to meteors, but it only lasts for a period of time.\n\nClick Save to generate a save code that you can then enter on line 34.\n\nPost your best score in the Tips & Thanks to get on the leaderboard.", (width - 500) / 2, 0, 500, 600); popStyle(); popMatrix(); //slide the buttons into view this.anim.how.buttons.value = lerp(this.anim.how.buttons.value, 0, 0.1); pushMatrix(); translate(0, this.anim.how.buttons.value); pushStyle(); stroke(255, 30); fill(50); rect(0, 520, width, 80); popStyle(); for(var k in this.buttons.how) { this.buttons.how[k].draw(); } popMatrix(); }, play: function() { //run the main game background(125, 90, 60); image(this.images.back, 0, 0); image(this.images.stars, 0, 0); //display the lightning this.runLightning(); //if the player clicks on the intial play scene if(this.started) { //update the camera this.cam.y = lerp(this.cam.y, height / 2 - this.player.y + this.player.h / 2 - this.cam.y, 0.05) \| 0; //display the parallax hills this.runParallax(); this.drawParallax(); //display the rain this.runRain(); //shake the screen (if active) this.runShake(); pushMatrix(); //move based on current camera position translate(this.cam.x, this.cam.y); this.drawCave(); this.runCave(); this.runMeteors(); this.runAuras(); this.drawAuras(); this.runSpecials(); this.drawSpecials(); this.player.run(); this.runExplosions(); this.runMeteorExplosions(); popMatrix(); //update the distance travelled this.inventory.distance.timer++; this.inventory.distance.value = this.inventory.distance.timer \| 0; //display the stats this.stats(); //check if the player collides with the cave if(this.checkPlayerCaveCollision()) { //update total/best values this.updateInventory(); //shake the screen this.shake = 20; //play a sound if collide if(this.sound){ this.sounds.crash.audio.pause(); this.sounds.crash.audio.currentTime = 0; this.sounds.crash.audio.play(); } //set the new scene this.scene = "crashCave"; } else { //check if collision with meteor var index = this.checkPlayerMeteorCollision(); //if index 0 then no collision if(index >= 0) { //if the player is invincible... if(this.player.invincible.active) { //increase number of meteors hit this.inventory.meteors.value++; //add explotion this.addMeteorExplosion(this.meteors[index]); //remove the meteor this.meteors.splice(index, 1); //shake the screen this.shake = 20; //play a sound if collide if(this.sound){ this.sounds.collide.audio.pause(); this.sounds.collide.audio.currentTime = 0; this.sounds.collide.audio.play(); } } //else player is not invincible else { //update total/best values this.updateInventory(); //add explosion this.addPlayerExplosion(); //shake the screen this.shake = 20; //play a sound if collide if(this.sound){ this.sounds.crash.audio.pause(); this.sounds.crash.audio.currentTime = 0; this.sounds.crash.audio.play(); } //set the new scene this.scene = "crashMeteor"; } } } } else { //update the camera this.cam.y = lerp(this.cam.y, 0, 0.05) \| 0; //draw (not update) the parallax hills this.drawParallax(); pushMatrix(); //translate to the current camera position translate(this.cam.x, this.cam.y); this.runRain(); this.drawCave(); this.player.draw(); popMatrix(); //display the stats this.stats(); //if clicked add to number of games played and start the actual game if(clicked) { this.inventory.games++; this.started = true; } } }, home: function() { //display the main menu screen background(125, 90, 60); image(this.images.back, 0, 0); image(this.images.stars, 0, 0); //display the lightning this.runLightning(); //draw (not update) the parallax hills this.drawParallax(); //reset the camera this.cam.y = lerp(this.cam.y, 0, 0.05) \| 0; pushMatrix(); //translate to the current camera position translate(this.cam.x, this.cam.y); this.runRain(); this.drawCave(); this.drawMeteors(); popMatrix(); //slide the title down this.anim.home.title.value = lerp(this.anim.home.title.value, 0, 0.1); pushMatrix(); translate(0,this.anim.home.title.value); pushStyle(); textAlign(CENTER, CENTER); textFont(createFont('Trebuchet MS Bold'), 40); fill(255, 200); text("S P A C E R A C E R", width / 2, 250); image(this.images.ship1, width / 2 - this.images.ship1.width / 4, 250 - this.images.ship1.height / 4, this.images.ship1.width / 2, this.images.ship1.height / 2); popStyle(); popMatrix(); //slide the buttons into view this.anim.home.buttons.value = lerp(this.anim.home.buttons.value, 0, 0.1); pushMatrix(); translate(0,this.anim.home.buttons.value); pushStyle(); stroke(255, 30); fill(50); rect(0, 310, width, 80); popStyle(); for(var k in this.buttons.home) { this.buttons.home[k].draw(); } //manages the slide in/out of the ship buttons if(!this.anim.home.ships.active) { this.anim.home.ships.value = lerp(this.anim.home.ships.value, this.anim.home.ships.base, 0.1); if(mouseY > 580) { this.anim.home.ships.active = true; } } else if(this.anim.home.ships.active) { this.anim.home.ships.value = lerp(this.anim.home.ships.value, 0, 0.1); if(mouseY < 520) { this.anim.home.ships.active = false; } } //slide the ship buttons into view pushMatrix(); translate(0, this.anim.home.ships.value); pushStyle(); stroke(255, 30); fill(50); quad(width/2-30, 500, width/2+30, 500, width/2+40, 520, width/2-40, 520); rect(0, 520, width, 80); noStroke(); fill(255, 150); triangle(width/2-10, 505, width/2+10, 505, width/2, 515); popStyle(); for(var k in this.shipButtons) { this.shipButtons[k].draw(); } popMatrix(); popMatrix(); }, run: function() { //run the appropriate scene switch(this.scene) { case "load": this.load("home"); break; case "home": if(this.logo.done) { this.home(); } this.logo.draw(); break; case "play": this.play(); break; case "how": this.how(); break; case "leaderboard": this.leaderboard(); break; case "crashCave": this.crashCave(); break; case "crashMeteor": this.crashMeteor(); break; } //run the transitions this.transition.run(); cursor(hover ? 'pointer' : 'default'); clicked = hover = false; } }; return App; })(); //create a new app instance app = new App(); draw = function() { //run the app app.run(); };
Folds	50,54,57,59,62,239,242,310,313,362,365,412,415,477,480,555,558,864,867,2742
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgMOMru3ECgw
Votes	334
Spin-Offs	23
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, 1739451119589
Updated	4 months ago, 1744828864874
Source Deleted	unknown