Viewing Program

Program Data

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

Title	Go Go (Game)
ID	5829511187841024
Created	3 years ago, 1644842329742
Updated	3 years ago, 1644924080813
Code	/ Go Go (Game) Gray Wolf, February 2022 Click to move up the screen. Collect stars and destroy the swimming birds to get points. Watch out for the lava below, spikes, lazers and the bird's beaks (you can only destroy them if you hit their body). Post your highscores in the Tips & Thanks (please be honest) @Credits Rect/Circle collisions code from Green Ghost https://www.khanacademy.org/cs/rect-to-circle-collision/5082153290645504 @Reference Based off the game Go Go Jelly on iOS @Subscribe Want to be notified when I create a new program? Sub here: https://www.khanacademy.org/cs/gray-wolf/4876588413698048 / //makes items smoother on certain browsers smooth(); //set default font textFont(createFont('Trebuchet MS')); var app; //manages the key/mouse states var pressed = false, clicked = false, hover = false, keys = []; mouseClicked = function() { clicked = true; }; mousePressed = function () { pressed = true; }; keyPressed = function() { keys[keyCode] = true; }; keyReleased = function () { keys[keyCode] = false; }; //Button object var Button = (function() { var Button = function(args) { this.x = args.x; this.y = args.y; this.diameter = args.diameter \|\| 120; this.content = args.content; this.textSize = args.textSize \|\| this.diameter * 0.13; this.hover = false; this.action = args.action; this.backColor = args.backColor \|\| color(242, 242, 242); this.textColor = args.textColor \|\| color(242, 239, 242); }; Button.prototype = { over: function() { //check if the mouse is over the button return (dist(mouseX, mouseY, this.x, this.y) < this.diameter / 2); }, draw: function() { //set hover based on mouse over the button this.hover = this.over(); if(this.hover) { hover = true; } pushMatrix(); translate(this.x, this.y); fill(this.backColor, (this.hover ? 200 : 255)); noStroke(); ellipse(0, 0, this.diameter, this.diameter); fill(app.colors.stroke); switch(this.content) { case "play": triangle(this.diameter0.25, 0, -this.diameter0.15, -this.diameter0.25, -this.diameter0.15, this.diameter0.25); break; case "sound": pushStyle(); noStroke(); fill(app.colors.stroke); triangle(0, -this.diameter 0.3, 0, this.diameter * 0.3, -this.diameter * 0.3, 0); rect(-this.diameter * 0.3, -this.diameter * 0.1, this.diameter * 0.3, this.diameter * 0.2); if(app.sound) { noFill(); stroke(app.colors.stroke); strokeWeight(this.diameter/20); arc(this.diameter * 0.1, 0, this.diameter * 0.2, this.diameter * 0.2, -91, 90); arc(this.diameter * 0.1, 0, this.diameter * 0.4, this.diameter * 0.4, -81, 80); } else { noFill(); stroke(app.colors.stroke); strokeWeight(this.diameter/20); line(this.diameter * 0.1, -this.diameter * 0.1, this.diameter * 0.25, this.diameter * 0.1); line(this.diameter * 0.1, this.diameter * 0.1, this.diameter * 0.25, -this.diameter * 0.1); } popStyle(); break; case "leaders": pushStyle(); noFill(); stroke(app.colors.stroke); strokeWeight(this.diameter * 0.14); strokeCap(SQUARE); line(0, this.diameter * 0.25, 0, -this.diameter * 0.3); line(-this.diameter * 0.2, this.diameter * 0.25, -this.diameter * 0.2, -this.diameter * 0.1); line(this.diameter * 0.2, this.diameter * 0.25, this.diameter * 0.2, -this.diameter * 0.2); popStyle(); break; case "shop": pushStyle(); noStroke(); fill(app.colors.stroke); rect(-this.diameter * 0.25, -this.diameter * 0.25, this.diameter * 0.5, this.diameter * 0.5); fill(255, 100); rect(-this.diameter * 0.15, -this.diameter * 0.15, this.diameter * 0.1, this.diameter * 0.15); rect(this.diameter * 0.05, -this.diameter * 0.15, this.diameter * 0.1, this.diameter * 0.15); popStyle(); break; case "home": pushStyle(); beginShape(); vertex(this.diameter0.25, 0); //1 vertex(this.diameter0.25, this.diameter0.25); //2 vertex(this.diameter0.07, this.diameter0.25); //3 vertex(this.diameter0.07, this.diameter0.12); //4 vertex(-this.diameter0.07, this.diameter0.12); //5 vertex(-this.diameter0.07, this.diameter0.25); //6 vertex(-this.diameter0.25, this.diameter0.25); //7 vertex(-this.diameter0.25, 0); //8 vertex(0, -this.diameter0.2); //9 vertex(this.diameter0.25, 0); //10 endShape(); noFill(); stroke(app.colors.stroke); strokeWeight(this.diameter0.05); line(-this.diameter0.27, -this.diameter0.05, 0, -this.diameter0.27); line(this.diameter0.27, -this.diameter0.05, 0, -this.diameter0.27); line(this.diameter0.15, -this.diameter0.19, this.diameter0.15, -this.diameter0.25); popStyle(); break; case "replay": pushStyle(); noFill(); stroke(app.colors.stroke); strokeWeight(5); pushMatrix(); rotate(frameCount 3); arc(0, 0, this.diameter * 0.6, this.diameter * 0.6, 1, 275); noStroke(); fill(app.colors.stroke); translate(this.diameter * 0.30, -this.diameter * 0.18); rotate(-70); triangle(0, -this.diameter * 0.1, -this.diameter * 0.14, -this.diameter * 0.3, this.diameter * 0.14, -this.diameter * 0.3); popMatrix(); popStyle(); break; case "how": pushStyle(); textAlign(CENTER, CENTER); textFont(createFont('Trebuchet MS Bold'), this.diameter * 0.7); text("?", 0, 0); popStyle(); break; default: pushStyle(); textAlign(CENTER, CENTER); text(this.content, 0, 0); popStyle(); } popMatrix(); //if button is clicked then run the function argument if(clicked && this.hover) { this.action(); } } }; return Button; })(); //Player object var Player = (function() { var Player = function() { this.x = 275; this.y = 400; this.px = 275; this.py = 400; this.w = 40; this.h = 40; this.color = color(227, 211, 134); this.state = 0; //0 = normal, 1 = lava this.mouth = { value: 0, max: 3 }; this.eyes = { value: 0, max: 3 }; this.vx = 0; this.vy = 0; this.dir = random() < 0.5 ? 1 : -1; this.gravity = 0.1; this.ymin = 400; this.angle = 0; }; Player.prototype = { draw: function() { switch(this.state) { case 1: //hit lava state fill(50); break; default: fill(this.color); } pushStyle(); noStroke(); strokeWeight(1); stroke(250, 200); noStroke(); //tenticles ellipse(this.x + this.w * 0.25, this.y + this.h * 0.9, this.w * 0.25, this.h * 0.5); ellipse(this.x + this.w * 0.5, this.y + this.h * 0.9, this.w * 0.25, this.h * 0.5); ellipse(this.x + this.w * 0.75, this.y + this.h * 0.9, this.w * 0.25, this.h * 0.5); //body strokeWeight(1); stroke(250, 200); rect(this.x, this.y, this.w, this.h, 8, 8, 5, 5); //eyes switch(this.eyes.value) { case 0: noStroke(); fill(255); ellipse(this.x + this.w * 0.3, this.y + this.h * 0.35, this.w * 0.35, this.w * 0.35); ellipse(this.x + this.w * 0.7, this.y + this.h * 0.35, this.w * 0.35, this.w * 0.35); fill(40); ellipse(this.x + this.w * 0.31, this.y + this.h * 0.34, this.w * 0.17, this.w * 0.19); ellipse(this.x + this.w * 0.69, this.y + this.h * 0.34, this.w * 0.17, this.w * 0.19); break; case 1: noFill(); stroke(50, 200); strokeWeight(3); arc(this.x + this.w * 0.3, this.y + this.h * 0.41, this.w * 0.25, this.w * 0.30, 180, 360); arc(this.x + this.w * 0.7, this.y + this.h * 0.41, this.w * 0.25, this.w * 0.30, 180, 360); break; case 2: noFill(); stroke(50, 200); strokeWeight(4); line(this.x + this.w * 0.33, this.y + this.h * 0.25, this.x + this.w * 0.33, this.y + this.h * 0.45); line(this.x + this.w * 0.67, this.y + this.h * 0.25, this.x + this.w * 0.67, this.y + this.h * 0.45); break; case 3: //dead eyes noFill(); stroke(50, 200); strokeWeight(2); line(this.x + this.w * 0.30, this.y + this.h * 0.27, this.x + this.w * 0.40, this.y + this.h * 0.43); line(this.x + this.w * 0.40, this.y + this.h * 0.27, this.x + this.w * 0.30, this.y + this.h * 0.43); line(this.x + this.w * 0.57, this.y + this.h * 0.27, this.x + this.w * 0.67, this.y + this.h * 0.43); line(this.x + this.w * 0.67, this.y + this.h * 0.27, this.x + this.w * 0.57, this.y + this.h * 0.43); break; } //mouth switch(this.mouth.value) { case 0: strokeWeight(3); stroke(50, 200); line(this.x + this.w * 0.35, this.y + this.h * 0.75, this.x + this.w * 0.65, this.y + this.h * 0.75); break; case 1: noStroke(); fill(50, 200); ellipse(this.x + this.w / 2, this.y + this.h * 0.75, this.w * 0.20, this.w * 0.20); break; case 2: noStroke(); fill(50, 200); arc(this.x + this.w / 2, this.y + this.h * 0.70, this.w * 0.30, this.w * 0.25, 0, 180); break; } popStyle(); }, update: function() { //not implemented within the player prototype }, run: function() { this.update(); this.draw(); } }; return Player; })(); //Transition object var Transition = function() { this.h = 0; this.vy = 15; this.active = false; this.scene = "home"; this.reset = function() { this.h = 0; this.vy = 15; }; this.draw = function() { pushStyle(); stroke(app.colors.stroke, 250); strokeWeight(30); fill(app.colors.blockColor[0]); rect(-20, -20, width + 40, this.h); rect(-20, height-this.h, width + 40, this.h + 20); strokeWeight(1); popStyle(); }; this.update = function() { this.h+= this.vy; //if halfway down the screen then change the scene if(this.h >= height/2) { app.scene = this.scene; if(this.scene === "play") { app.reset(); } this.vy= -1; } //else if it's completely off the screen reset it and set to inactive else if(this.h < 0) { this.reset(); this.active = false; } }; this.run = function() { if(this.active) { this.draw(); this.update(); } }; }; //Logo object 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(30, 110, 120), outline: color(5, 5, 5), from: color(102, 99, 98), to: color(13, 13, 13), text: color(232, 232, 232) }; 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 (runs the game) var App = (function() { var App = function() { this.scene = "load"; this.start = false; this.player = new Player(); this.transition = new Transition(); this.logo = new Logo({}); this.highscores = [ { name: "Electric Dolphin", score: 215 }, { name: "Logix Indie", score: 150 }, { name: "PRAJAY", score: 150 }, { name: "bethberning", score: 135 }, { name: "ButterFly⁴⁷⁹", score: 135 }, { name: "Doctor137", score: 115 }, { name: "Mr. X", score: 110 }, { name: "jmtyk", score: 105 }, { name: "Ganoojjee", score: 95 }, { name: "BrenErso", score: 80 } ]; this.theme = 0; this.themes = [ { backColor: color(35, 205, 255), blockColor: [ color(40, 120, 130), color(30, 110, 120) ], stroke: color(20, 100, 110), playerColor: color(230, 141, 240), images: [] }, { backColor: color(235, 95, 125), blockColor: [ color(150, 50, 70), color(115, 50, 65), ], stroke: color(105, 40, 55), playerColor: color(144, 222, 113), images: [] }, { backColor: color(180, 210, 130), blockColor: [ color(70, 120, 75), color(60, 90, 60), ], stroke: color(50, 80, 50), playerColor: color(235, 225, 80), images: [] } ]; this.colors = this.themes[this.theme]; this.images = undefined; this.imageIndex = 0; this.loaded = false; this.sound = false; this.sounds = { lava: getSound("rpg/water-bubble"), bird: getSound("rpg/giant-yah"), spike: getSound("rpg/giant-hyah"), wall: getSound("rpg/hit-thud"), lazer: getSound("retro/laser2"), star: getSound("rpg/metal-chime"), }; this.shake = 0; this.shakedown = 0.1; this.cam = { x: 0, y: 0 }; this.inventory = { stars: 0 }; this.score = { value: 0, best: 0 }; this.stats = { games: 0 }; this.fonts = { title: createFont('Trebuchet MS Bold'), content: createFont('Trebuchet MS') }; this.anim = { over: { value: -600, base: -600, angle: 0 } }; this.parallax = { back: { y1: 0, y2: 899, speed: 0.25 } }; this.lava = { x1: -50, y1: height - 40, cx1: 200, cy1: height - 40, cx2: 400, cy2: height - 40, x2: width + 50, y2: height - 40, h: 200, arr: [] }; this.blocks = []; this.centerBlocks = []; this.spikes = []; this.lazers = []; this.enemies = []; this.deadEnemies = []; this.smokes = []; this.bubbles = []; this.fishes = []; this.particles = []; this.starImages = []; this.stars = []; this.assetImages = []; this.assets = []; this.dead = false; this.grid = { y1: 0, y2: -599 }; this.buttons = { menu: { play: new Button({ x: width / 2, y: 300, diameter: 150, content: "play", action: function() { app.transition.scene = "play"; app.transition.active = true; } }), leaders: new Button({ x: width / 2 - 70, y: 435, content: "leaders", action: function() { app.transition.scene = "leaderboard"; app.transition.active = true; } }), sound: new Button({ x: width / 2 + 70, y: 435, content: "sound", action: function() { app.sound = !app.sound; } }) }, over: { home: new Button({ x: width / 2 - 60, y: 460, diameter: 100, content: "home", action: function() { if(app.dead) { app.transition.scene = "home"; app.transition.active = true; } } }), leaders: new Button({ x: width / 2 + 60, y: 460, diameter: 100, content: "leaders", action: function() { if(app.dead) { app.transition.scene = "leaderboard"; app.transition.active = true; } } }), replay: new Button({ x: width / 2, y: 320, diameter: 130, content: "replay", action: function() { if(app.dead) { app.transition.scene = "play"; app.transition.active = true; } } }) }, leaderboard: { home: new Button({ x: width / 2, y: 535, diameter: 100, textSize: 20, content: "home", action: function() { app.transition.scene = "home"; app.transition.active = true; } }) } }; this.init(); }; App.prototype = { setBlocks: function() { //initializes the blocks at the start of each game this.blocks.length = 0; this.centerBlocks.length = 0; var y = height + 300; for(var i = 0; i < 8; i++) { var h = random(100, 250); var blockColor = this.colors.blockColor[random(this.colors.blockColor.length) \| 0]; this.blocks.push({ x: -310, y: y - h, w: 300 + random(20, 250), h: h, color: blockColor, image: this.colors.images[random(this.colors.images.length) \| 0] }); var w = random(20, 250); this.blocks.push({ x: width - w + 10, y: y - h, w: w + 300, h: h, color: blockColor, image: this.colors.images[random(this.colors.images.length) \| 0] }); //add random plants on the left if(random() < 0.3) { var b1 = this.blocks[this.blocks.length-2]; var asset1 = this.assetImages[random(this.assetImages.length) \| 0]; this.assets.push({ x: b1.x + b1.w - asset1.width / 2, y: random(b1.y + asset1.height, b1.y + b1.h - asset1.height), image: asset1 }); } //add random plants on the right if(random() < 0.3) { var b2 = this.blocks[this.blocks.length-1]; var asset2 = this.assetImages[random(this.assetImages.length) \| 0]; this.assets.push({ x: b2.x - asset2.width / 2, y: random(b2.y + asset2.height, b2.y + b2.h - asset2.height), image: asset2 }); } y-= h; } }, outlineText: function(args) { //creates text with an outline color textSize(args.textSize); fill(args.stroke); for(var i = 0; i < 360; i+= 30) { text(args.text, args.x + sin(i) * (args.strokeWeight \|\| 2), args.y + cos(i) * (args.strokeWeight \|\| 2)); } fill(args.fill); text(args.text, args.x, args.y); }, generateBlock: function(blockColor, strokeColor) { //gets an image of the blocks used in the game background(0, 0, 0, 0); pushMatrix(); translate(25, 50); pushStyle(); fill(blockColor); stroke(strokeColor); strokeWeight(3); rect(0, 0, 550, 250, 10); noStroke(); fill(0, 10); for(var i = 0; i < 10; i++) { var w = random(50, 300); var h = random(50, 200); rect(random(0, 550 - w), random(0, 250 - h), w, h, 10); } popStyle(); popMatrix(); return get(23, 48, 554, 254); }, star: function(x, y, inner, outer, sides) { //gets an image of the stars used in the game var rot = 360 / sides; pushMatrix(); translate(x, y); rotate(270); beginShape(); for(var angle = 0; angle < 360; angle+= rot / 2) { vertex(cos(angle) * (angle % rot === 0 ? outer : inner), sin(angle) * (angle % rot === 0 ? outer : inner)); } endShape(CLOSE); popMatrix(); }, init: function() { //add initial bubbles for(var i = 0; i < 15; i++) { this.bubbles.push({ x: random(width), y: random(height), vx: random(0.3, 1) * (random() < 0.5 ? 1 : -1), vy: random(-0.7, -0.3), diameter: random(10, 20), opacity: random(50, 100), dir: random() < 0.5 ? 1 : -1, offset: random(360) \| 0 }); } //add initial fishes for(var i = 0; i < 10; i++) { this.fishes.push({ x: random(width), y: random(height - 50), diameter: random(20, 30), vx: random(0.5, 2), vy: 0, dir: random() < 0.5 ? 1 : -1, speed: random(0.5, 2) }); } //generate block images this.themes[0].images.push(this.generateBlock(this.themes[0].blockColor[0], this.themes[0].stroke)); this.themes[0].images.push(this.generateBlock(this.themes[0].blockColor[0], this.themes[0].stroke)); this.themes[0].images.push(this.generateBlock(this.themes[0].blockColor[1], this.themes[0].stroke)); this.themes[0].images.push(this.generateBlock(this.themes[0].blockColor[1], this.themes[0].stroke)); this.themes[1].images.push(this.generateBlock(this.themes[1].blockColor[0], this.themes[1].stroke)); this.themes[1].images.push(this.generateBlock(this.themes[1].blockColor[0], this.themes[1].stroke)); this.themes[1].images.push(this.generateBlock(this.themes[1].blockColor[1], this.themes[1].stroke)); this.themes[1].images.push(this.generateBlock(this.themes[1].blockColor[1], this.themes[1].stroke)); this.themes[2].images.push(this.generateBlock(this.themes[2].blockColor[0], this.themes[2].stroke)); this.themes[2].images.push(this.generateBlock(this.themes[2].blockColor[0], this.themes[2].stroke)); this.themes[2].images.push(this.generateBlock(this.themes[2].blockColor[1], this.themes[2].stroke)); this.themes[2].images.push(this.generateBlock(this.themes[2].blockColor[1], this.themes[2].stroke)); //add images this.images = { heading: function() { background(0, 0, 0, 0); pushStyle(); textAlign(CENTER, CENTER); textFont(app.fonts.title); app.outlineText({ text: "GO GO", x: width / 2, y: 50, textSize: 100, fill: color(255, 240), stroke: color(50, 100), strokeWeight: 5, }); popStyle(); return get(0, 0, width, 150); }, store: function() { background(0, 0, 0, 0); pushStyle(); textAlign(CENTER, CENTER); textFont(app.fonts.title); app.outlineText({ text: "Store", x: width / 2, y: 50, textSize: 70, fill: color(255, 240), stroke: app.colors.stroke, strokeWeight: 5, }); popStyle(); return get(0, 0, width, 150); }, leaderboard: function() { background(0, 0, 0, 0); pushStyle(); textAlign(CENTER, CENTER); textFont(app.fonts.title); app.outlineText({ text: "Leaderboard", x: width / 2, y: 50, textSize: 70, fill: color(255, 240), stroke: app.colors.stroke, strokeWeight: 5, }); popStyle(); return get(0, 0, width, 150); }, spike: function() { background(0, 0, 0, 0); pushMatrix(); translate(300, 300); pushStyle(); fill(50); stroke(209, 209, 209); strokeWeight(3); beginShape(); for(var angle = 0; angle < 360; angle+= 30) { var dx = cos(angle); var dy = sin(angle); var dxOuter = cos(angle + 15); var dyOuter = sin(angle + 15); vertex(dx * 25, dy * 25); vertex(dxOuter * 45, dyOuter * 45); } endShape(CLOSE); popStyle(); popMatrix(); return get(250, 250, 100, 100); }, back: function() { var gx = createGraphics(600, 900, P2D); gx.background(0, 0, 0, 0); gx.pushStyle(); gx.noStroke(); gx.fill(0, 4); for(var i = 0; i < 20; i++) { var diameter = random(30, 300); gx.ellipse(random(width), random(diameter / 2, 900 - diameter / 2), diameter, diameter); } gx.popStyle(); return gx.get(); }, plant1: function() { background(0, 0, 0, 0); pushStyle(); strokeWeight(8); stroke(70, 180, 35); pushMatrix(); translate(300, 300); var diameter = 25; for(var i = 0; i < 360; i+= 30) { rotate(30); line(0, 0, diameter, 0); } popMatrix(); popStyle(); return get(270, 270, 60, 60); }, plant2: function() { background(0, 0, 0, 0); pushStyle(); strokeWeight(8); stroke(193, 133, 204); pushMatrix(); translate(300, 300); var diameter = 25; for(var i = 0; i < 360; i+= 30) { rotate(30); line(0, 0, diameter, 0); } popMatrix(); popStyle(); return get(270, 270, 60, 60); }, plant3: function() { background(0, 0, 0, 0); pushStyle(); strokeWeight(8); stroke(70, 180, 35); pushMatrix(); translate(300, 300); var diameter = 30; for(var i = 0; i < 360; i+= 180) { rotate(180); line(0, 0, diameter, 0); line(diameter * 0.3, -diameter * 0.40, diameter * 1.2, -diameter * 0.40); line(diameter * 0.4, diameter * 0.40, diameter * 0.8, diameter * 0.40); line(diameter * 0.3, -diameter * 0.40, diameter * 0.3, 0); line(diameter * 0.4, diameter * 0.40, diameter * 0.4, 0); } popMatrix(); popStyle(); return get(260, 280, 80, 40); }, plant4: function() { background(0, 0, 0, 0); pushStyle(); strokeWeight(8); stroke(193, 133, 204); pushMatrix(); translate(300, 300); var diameter = 30; for(var i = 0; i < 360; i+= 180) { rotate(180); line(0, 0, diameter, 0); line(diameter * 0.3, -diameter * 0.40, diameter * 1.2, -diameter * 0.40); line(diameter * 0.4, diameter * 0.40, diameter * 0.8, diameter * 0.40); line(diameter * 0.3, -diameter * 0.40, diameter * 0.3, 0); line(diameter * 0.4, diameter * 0.40, diameter * 0.4, 0); } popMatrix(); popStyle(); return get(260, 280, 80, 40); }, star1: function() { background(0, 0, 0, 0); pushStyle(); stroke(255, 200); strokeWeight(6); fill(237, 150, 107); app.star(300, 300, 55, 100, 5); strokeWeight(8); stroke(50, 200); line(280, 270, 280, 285); line(320, 270, 320, 285); popStyle(); return get(200, 190, 200, 200); }, star2: function() { background(0, 0, 0, 0); pushStyle(); stroke(255, 200); strokeWeight(6); fill(240, 115, 209); app.star(300, 300, 55, 100, 5); strokeWeight(8); stroke(50, 200); line(280, 270, 280, 285); line(320, 270, 320, 285); popStyle(); return get(200, 190, 200, 200); }, star3: function() { background(0, 0, 0, 0); pushStyle(); stroke(255, 200); strokeWeight(6); fill(83, 189, 224); app.star(300, 300, 55, 100, 5); strokeWeight(8); stroke(50, 200); line(280, 270, 280, 285); line(320, 270, 320, 285); popStyle(); return get(200, 190, 200, 200); } }; }, load: function(s) { //loads the images before the game starts var obj = Object.keys(this.images); this.images[obj[this.imageIndex]] = this.images[obj[this.imageIndex]](); this.imageIndex++; background(this.colors.blockColor[1]); pushStyle(); fill(250); textAlign(CENTER, CENTER); textSize(40); text('LOADING', width/2, height/2); noFill(); stroke(250); strokeCap(SQUARE); strokeWeight(15); arc(width/2, height/2, height/2, height/2, 0, map(this.imageIndex / obj.length, 0, 1, 0, 360)); strokeWeight(1); popStyle(); if(this.imageIndex < obj.length){ this.loaded = false; } else { //add plant images to plants array this.assetImages.push(this.images.plant1); this.assetImages.push(this.images.plant2); this.assetImages.push(this.images.plant3); this.assetImages.push(this.images.plant4); //add star images this.starImages.push(this.images.star1); this.starImages.push(this.images.star2); this.starImages.push(this.images.star3); //set the initial blocks this.setBlocks(); this.loaded = true; this.scene = s; } }, resetBubbles: function() { //resets the bubbles ready for a new game for(var i = 0; i < this.bubbles.length; i++) { this.bubbles[i].x = random(width); this.bubbles[i].y = random(height); } }, reset: function() { //resets all game parameters before each game this.stars.length = 0; this.spikes.length = 0; this.lazers.length = 0; this.enemies.length = 0; this.deadEnemies.length = 0; this.smokes.length = 0; this.particles.length = 0; this.assets.length = 0; this.score.value = 0; this.start = false; this.player.x = 275; this.player.y = 400; this.player.vx = 0; this.player.vy = 0; this.player.ymin = 400; this.player.state = 0; this.player.eyes.value = 0; this.player.mouth.value = 0; this.anim.over.value = this.anim.over.base; this.dead = false; this.shake = 0; this.theme = random(this.themes.length) \| 0; this.colors = this.themes[this.theme]; this.resetBubbles(); this.setBlocks(); }, rectCircleCollision: function(player, circle) { //checks for rectangle to circle collision var closestX = constrain(circle.x, player.x, player.x + player.w); var closestY = constrain(circle.y, player.y, player.y + player.h); return dist(circle.x, circle.y, closestX, closestY) <= circle.diameter / 2; }, rectRectCollision: function(player, rectangle) { //checks for rectangle to rectangle collision return player.x < rectangle.x + rectangle.w && player.x + player.w > rectangle.x && player.y < rectangle.y + rectangle.h && player.y + player.h > rectangle.y; }, collisionBlocks: function(dir, blocks) { //checks to see if the player collided with the blocks for(var i = 0; i < blocks.length; i++) { var block = blocks[i]; //if player collided with block if(this.rectRectCollision(this.player, block)) { //check horizontal collision if(dir === "horizontal") { if(this.player.vx > 0) { this.player.x = block.x - this.player.w; } else { this.player.x = block.x + block.w; } this.player.dir= -1; this.player.vx = -this.player.vx; } //check vertical collision else { if(this.player.vy > 0) { this.player.y = block.y - this.player.h; this.player.vy = -2; } else { this.player.y = block.y + block.h; this.player.vy = 0; } } //shake the screen slightly if collide with a block this.shake = 7; //randomly update the eyes and mouth of the player this.player.eyes.value = random(this.player.eyes.max) \| 0; this.player.mouth.value = random(this.player.mouth.max) \| 0; //play a sound if collide if(this.sound){ this.sounds.wall.audio.pause(); this.sounds.wall.audio.currentTime = 0; this.sounds.wall.audio.play(); } break; } } }, movePlayer: function() { //if the mouse is pressed if(pressed) { //if not yet started and at the bottom of the screen just above the lava if(!this.start && this.cam.y < 30) { //start the game and increment number of games played this.start = true; this.stats.games++; } //move the player horizontally in the current direction this.player.vx = constrain(this.player.vx + 0.5 this.player.dir, -3, 3); //move the player vertically (upwards) if(this.player.vy > 0) { this.player.vy = 0; } this.player.vy = constrain(this.player.vy - 3, -8, this.player.h * 0.25); } //if the game started if(this.start) { //store the previous x and y coordinates this.player.px = this.player.x; this.player.py = this.player.y; //move the player horizontally this.player.x+= this.player.vx; //check for horizontal collisions with the blocks and center blocks this.collisionBlocks("horizontal", this.blocks); this.collisionBlocks("horizontal", this.centerBlocks); //move the player vertically (up) this.player.vy = constrain(this.player.vy + this.player.gravity, -8, this.player.h * 0.25); this.player.y+= this.player.vy; //check for vertical collisions with the blocks and center blocks this.collisionBlocks("vertical", this.blocks); this.collisionBlocks("vertical", this.centerBlocks); //update the current y position of the player for the camera movement this.player.ymin = min(this.player.ymin, this.player.y); //add a player particle every 5 frames if(frameCount % 5 === 0) { this.particles.push({ x: this.player.x + this.player.w / 2, y: this.player.y + this.player.h / 2, diameter: this.player.w * 0.4, vx: random(-0.5, 0.5), vy: random(-0.5, 0.5), gravity: 0, color: color(225), opacity: random(200, 240), angle: random(360) \| 0, rot: random(-2, 2) }); } } }, updateBestScore: function() { //update the best score using max of current and best scores this.score.best = max(this.score.best, this.score.value); }, addSmoke: function() { //add smoke when hit the lava for(var i = 0; i < 30; i++) { this.smokes.push({ x: random(this.player.x, this.player.x + this.player.w), y: random(this.player.y, this.player.y + this.player.h), vx: random(-0.5, 0.5), vy: random(-1, -0.5), color: random(50, 80), diameter: 15, opacity: random(180, 230) \| 0 }); } }, runSmoke: function() { //display and move the smoke noStroke(); for(var i = this.smokes.length - 1; i >= 0; i--) { var smoke = this.smokes[i]; fill(smoke.color, smoke.opacity); rect(smoke.x, smoke.y, smoke.diameter, smoke.diameter, 2); smoke.x+= smoke.vx; smoke.y+= smoke.vy; smoke.opacity = constrain(smoke.opacity - 2, 0, 255); //if the opacity is zero then remove the smoke if(smoke.opacity === 0) { this.smokes.splice(i, 1); } } }, addPlayerExplosion: function() { //add 15 particles (player explosion) for(var i = 0; i < 15; i++) { this.particles.push({ x: this.player.x + this.player.w / 2, y: this.player.y + this.player.h / 2, diameter: this.player.w * 0.4, vx: random(-2, 2), vy: random(-8, -5), gravity: 0.2, color: color(84, 84, 84), opacity: random(220, 250), angle: random(360) \| 0, rot: random(-4, 4) }); } }, runBubbles: function() { //display and move the bubbles noStroke(); for(var i = this.bubbles.length - 1; i >= 0; i--) { var bubble = this.bubbles[i]; fill(255, bubble.opacity); ellipse(bubble.x, bubble.y, bubble.diameter, bubble.diameter); bubble.x+= sin(frameCount + bubble.offset) * bubble.vx; bubble.y+= bubble.vy; //reuse the bubbles if(bubble.dir === 1) { bubble.opacity = constrain(bubble.opacity - 0.5, 0, 150); if(bubble.opacity === 0) { bubble.dir= -1; } } else { bubble.opacity = constrain(bubble.opacity + 0.5, 0, 150); if(bubble.opacity === 150) { bubble.dir= -1; } } if(bubble.y - bubble.diameter > this.player.ymin + 400) { bubble.y-= 800; } else if(bubble.y + bubble.diameter < this.player.ymin - 400) { bubble.y+= 800; } } }, runFishes: function() { //display and move the fishes noStroke(); fill(50, 50); for(var i = 0; i < this.fishes.length; i++) { var fish = this.fishes[i]; pushMatrix(); translate(fish.x, fish.y + sin(frameCount * fish.speed) * 20); rotate((fish.dir === 1 ? 0 : 180)); ellipse(0, 0, fish.diameter, fish.diameter * 0.7); triangle(-fish.diameter * 0.4, 0, -fish.diameter * 0.7, -fish.diameter * 0.3, -fish.diameter * 0.7, fish.diameter * 0.3); popMatrix(); fish.x+= fish.vx * fish.dir; //if fish go off the screen then reset them if( (fish.dir === 1 && fish.x - fish.diameter > width) \|\| (fish.dir === -1 && fish.x + fish.diameter < 0)) { var dir = random() < 0.5 ? 1 : -1; if(dir === 1) { fish.x = -fish.diameter; } else { fish.x = width + fish.diameter; } fish.y = random(height - 50) - this.player.ymin; } else if(fish.y - fish.diameter > this.player.ymin + 400) { fish.y-= 800; } else if(fish.y + fish.diameter < this.player.ymin - 400) { fish.y+= 800; } } }, checkCollisions: function() { //check collisions with the stars for(var i = this.stars.length - 1; i >= 0; i--) { var star = this.stars[i]; if(this.rectCircleCollision(this.player, star)) { this.inventory.stars++; this.score.value+= 5; this.stars.splice(i, 1); if(this.sound){ this.sounds.star.audio.pause(); this.sounds.star.audio.currentTime = 0; this.sounds.star.audio.play(); } } } var collided = false; //check collision with spikes for(var i = this.spikes.length - 1; i >= 0; i--) { var spike = this.spikes[i]; if(this.rectCircleCollision(this.player, spike)) { collided = true; this.updateBestScore(); this.addPlayerExplosion(); this.player.vy = -10; this.player.eyes.value = 3; this.player.mouth.value = 0; this.shake = 25; this.scene = "gameover"; if(this.sound){ this.sounds.spike.audio.pause(); this.sounds.spike.audio.currentTime = 0; this.sounds.spike.audio.play(); } break; } } //if not collided check collision with lazers if(!collided) { for(var i = this.lazers.length - 1; i >= 0; i--) { var lazer = this.lazers[i]; if(lazer.active && this.rectRectCollision(this.player, lazer)) { collided = true; this.updateBestScore(); this.addPlayerExplosion(); this.player.vy = -10; this.player.eyes.value = 3; this.player.mouth.value = 0; this.shake = 25; this.scene = "gameover"; if(this.sound){ this.sounds.lazer.audio.pause(); this.sounds.lazer.audio.currentTime = 0; this.sounds.lazer.audio.play(); } break; } } } //if still not collided check collisions with enemies (birds) if(!collided) { for(var i = this.enemies.length - 1; i >= 0; i--) { var enemy = this.enemies[i]; //check nose collision first var circle = { x: enemy.x + enemy.dx * enemy.diameter / 2, y: enemy.y + enemy.dy * enemy.diameter / 2, diameter: enemy.diameter * 0.5 }; if(this.rectCircleCollision(this.player, circle)) { collided = true; this.updateBestScore(); this.addPlayerExplosion(); this.player.vy = -10; this.player.eyes.value = 3; this.player.mouth.value = 0; this.shake = 25; this.scene = "gameover"; if(this.sound){ this.sounds.bird.audio.pause(); this.sounds.bird.audio.currentTime = 0; this.sounds.bird.audio.play(); } break; } //else check body collisions if(this.rectCircleCollision(this.player, enemy)) { this.score.value+= 5; enemy.vy = -10; this.shake = 25; this.deadEnemies.push(enemy); this.enemies.splice(i, 1); if(this.sound){ this.sounds.star.audio.pause(); this.sounds.star.audio.currentTime = 0; this.sounds.star.audio.play(); } } } } //if not collided then check if collision with lava at bottom of screen if(!collided && this.player.y + this.player.h + this.cam.y > this.lava.y1) { this.updateBestScore(); this.player.vy = -8; this.player.eyes.value = 0; this.player.mouth.value = 0; this.player.state = 1; this.addSmoke(); this.shake = 25; this.scene = "gameover"; if(this.sound){ this.sounds.lava.audio.pause(); this.sounds.lava.audio.currentTime = 0; this.sounds.lava.audio.play(); } } }, drawBlocks: function() { //draw the current blocks and remove/add blocks pushStyle(); stroke(this.colors.stroke); strokeWeight(3); for(var i = this.blocks.length - 1; i >= 0; i--) { var block = this.blocks[i]; image(block.image, block.x, block.y, block.w, block.h); //if block goes off the screen remove the left/right blocks and add two new ones if(block.y > this.player.ymin + 400) { var lastBlock = this.blocks[this.blocks.length-1]; var h = random(100, 250); var bh = random(h * 0.85, h * 1.2); var blockColor = this.colors.blockColor[random(this.colors.blockColor.length) \| 0]; this.blocks.push({ x: -310, y: lastBlock.y - h, w: 300 + random(20, 270), h: bh, color: blockColor, image: this.colors.images[random(this.colors.images.length) \| 0] }); var w = random(20, 270); this.blocks.push({ x: width - w + 10, y: lastBlock.y - h, w: w + 300, h: bh, color: blockColor, image: this.colors.images[random(this.colors.images.length) \| 0] }); //remove the blocks that went off the screen this.blocks.splice(i-1, 2); //get the last blocks added var b1 = this.blocks[this.blocks.length - 2]; var b2 = this.blocks[this.blocks.length - 1]; //if the distance between the new blocks is wide enough... if(dist(b1.x + b1.w, b1.y, b2.x, b2.y) > 200) { var selection = random(); var spikeSide = random() < 0.5 ? "left" : "right"; var lazerAdded = false; if(selection < 0.15 && b1.h > 170) { //add center block this.centerBlocks.push({ x: b1.x + b1.w + ((b2.x - (b1.x + b1.w)) / 2) - 10, y: b1.y + b1.h / 2 - b1.h * 0.2, w: 20, h: b1.h * 0.4, color: blockColor }); } else if(selection < 0.1) { //don't add anything } else if(selection < 0.5) { //spike spikeSide = random() < 0.5 ? "left" : "right"; this.spikes.push({ x: spikeSide === "left" ? b1.x + b1.w : b2.x, y: random(b1.y + 30, b1.y + b1.h - 30), diameter: 60, angle: 0, rot: random(1, 2) * (random() < 0.5 ? 1 : -1), color: color(247, 102, 104) }); } else if(selection < 0.85 && b1.h > 150) { //enemy var dir = random() < 0.5 ? 1 : -1; this.enemies.push({ x: b1.x + b1.w + ((b2.x - (b1.x + b1.w)) / 2), y: b1.y + b1.h / 2, diameter: 40, vx: dir, vy: 0, dx: 0, dy: 0, angle: { value: dir === 1 ? 0 : 180, dest: dir === 1 ? 0 : 180 }, rot: random(1, 2) * (random() < 0.5 ? 1 : -1), gravity: 0.4, color: color(219, 118, 247) }); } else if(selection < 0.8) { //lazer lazerAdded = true; this.lazers.push({ x: b1.x + b1.w - 10, y: b1.y + b1.h / 2 - 5, w: b2.x - (b1.x + b1.w) + 10, h: 10, diameter: 40, timer: 0, duration: { value: 120, on: 240, off: 120 }, active: false }); } //add a random plant on the left if(random() < 0.3) { var b1 = this.blocks[this.blocks.length-2]; var asset1 = this.assetImages[random(this.assetImages.length) \| 0]; this.assets.push({ x: b1.x + b1.w - asset1.width / 2, y: random(b1.y + asset1.height, b1.y + b1.h - asset1.height), image: asset1 }); } //add a random plant on the right if(random() < 0.3) { var b2 = this.blocks[this.blocks.length-1]; var asset2 = this.assetImages[random(this.assetImages.length) \| 0]; this.assets.push({ x: b2.x - asset2.width / 2, y: random(b2.y + asset2.height, b2.y + b2.h - asset2.height), image: asset2 }); } //add some stars if(!lazerAdded && random() < 0.75) { var numberOfStars = random(4) \| 0; for(var j = 0; j < numberOfStars; j++) { this.stars.push({ x: spikeSide === "right" ? b1.x + b1.w + 18 : b2.x - 18, y: b1.y + b1.h / 2 - (numberOfStars - 1) * 20 + j * 40, diameter: 30, color: color(242, 215, 63), image: this.starImages[random(this.starImages.length) \| 0] }); } } } } } //display the center blocks for(var i = this.centerBlocks.length - 1; i >= 0; i--) { var block = this.centerBlocks[i]; fill(block.color); rect(block.x, block.y, block.w, block.h, 5); if(block.y > this.player.ymin + 400) { this.centerBlocks.splice(i, 1); } } popStyle(); }, drawSpikes: function() { //draw the spikes for(var i = this.spikes.length - 1; i >= 0; i--) { var spike = this.spikes[i]; pushMatrix(); translate(spike.x, spike.y); rotate(spike.angle); image(this.images.spike, -spike.diameter * 0.55, -spike.diameter * 0.55, spike.diameter * 1.1, spike.diameter * 1.1); popMatrix(); spike.angle+= spike.rot; //remove the spike if it goes off the screen if(spike.y - spike.diameter > this.player.ymin + 400) { this.spikes.splice(i, 1); } } }, drawLazers: function() { //draw the lazers pushStyle(); for(var i = this.lazers.length - 1; i >= 0; i--) { var lazer = this.lazers[i]; if(lazer.timer++ === lazer.duration.value) { if(lazer.active) { lazer.duration.value = lazer.duration.off; } else { lazer.duration.value = lazer.duration.on; } lazer.timer = 0; lazer.active = !lazer.active; } //lazer beam if(lazer.active) { if(random() < 0.8) { stroke(235, 88, 47); strokeWeight(3); fill(242, 137, 84); rect(lazer.x, lazer.y, lazer.w, lazer.h); strokeWeight(3); stroke(255, 150); line(lazer.x, lazer.y + 5, lazer.x + lazer.w, lazer.y + 5); } } //ends of the lazer noStroke(); fill(69, 68, 68); ellipse(lazer.x, lazer.y + 5, lazer.diameter, lazer.diameter); ellipse(lazer.x + lazer.w + 10, lazer.y + 5, lazer.diameter, lazer.diameter); //remove the lazer if it goes off the screen if(lazer.y - lazer.diameter > this.player.ymin + 400) { this.lazers.splice(i, 1); } } popStyle(); }, drawStars: function() { //draw the stars pushStyle(); imageMode(CENTER); for(var i = this.stars.length - 1; i >= 0; i--) { var star = this.stars[i]; pushMatrix(); translate(star.x, star.y); rotate(frameCount); image(star.image, 0, 0, star.diameter * 1.5, star.diameter * 1.5); popMatrix(); //remove the star if it goes off the screen if(star.y - star.diameter > this.player.ymin + 400) { this.stars.splice(i, 1); } } imageMode(CORNER); popStyle(); }, drawAssets: function() { //draw the assets (plants) for(var i = this.assets.length - 1; i >= 0; i--) { var asset = this.assets[i]; image(asset.image, asset.x, asset.y); if(asset.y > this.player.ymin + 400) { this.assets.splice(i, 1); } } }, moveEnemies: function() { //move the enemies (birds) for(var i = this.enemies.length - 1; i >= 0; i--) { var enemy = this.enemies[i]; enemy.x+= enemy.vx; enemy.y+= enemy.vy; for(var j = 0; j < this.blocks.length; j++) { var block = this.blocks[j]; //change direction if the bird hits a block if(this.rectCircleCollision(block, enemy)) { enemy.vx= -1; enemy.angle.dest+= 180; break; } } //rotate the bird 180 degrees enemy.angle.value = lerp(enemy.angle.value, enemy.angle.dest, 0.2); //update the unit vectors based on the new angle enemy.dx = cos(enemy.angle.value); enemy.dy = sin(enemy.angle.value); } }, drawEnemies: function() { //draw the enemies (birds) noStroke(); for(var i = this.enemies.length - 1; i >= 0; i--) { var enemy = this.enemies[i]; pushMatrix(); translate(enemy.x, enemy.y); rotate(enemy.angle.value + sin(frameCount 10) * 10); //beak fill(247, 208, 67); triangle(enemy.diameter * 0.7, 0, enemy.diameter * 0.4, -enemy.diameter * 0.15, enemy.diameter * 0.4, enemy.diameter * 0.15); //body fill(enemy.color); ellipse(0, 0, enemy.diameter, enemy.diameter); noStroke(); fill(79, 79, 79); arc(0, 0, enemy.diameter, enemy.diameter, 0, 180); noFill(); stroke(255, 200); strokeWeight(1); ellipse(0, 0, enemy.diameter, enemy.diameter); //fin fill(247, 54, 74); triangle(-enemy.diameter / 2, 0, -enemy.diameter * 0.7, -enemy.diameter * 0.2, -enemy.diameter * 0.7, enemy.diameter * 0.2); //eyes fill(50, 150); ellipse(enemy.diameter * 0.3, -enemy.diameter * 0.15, enemy.diameter * 0.15, enemy.diameter * 0.15); fill(250, 100); ellipse(enemy.diameter * 0.3, enemy.diameter * 0.15, enemy.diameter * 0.15, enemy.diameter * 0.15); popMatrix(); //remove the enemy (bird) if it goes off the screen if(enemy.y - enemy.diameter > this.player.ymin + 400) { this.enemies.splice(i, 1); } } }, drawDeadEnemies: function() { //draw the enemies (birds) when you destroy them for(var i = this.deadEnemies.length - 1; i >= 0; i--) { var enemy = this.deadEnemies[i]; enemy.vy+= enemy.gravity; enemy.y+= enemy.vy; enemy.angle.value+= 10; pushMatrix(); translate(enemy.x, enemy.y); rotate(enemy.angle.value + sin(frameCount * 10) * 10); //beak fill(247, 208, 67); triangle(enemy.diameter * 0.7, 0, enemy.diameter * 0.4, -enemy.diameter * 0.15, enemy.diameter * 0.4, enemy.diameter * 0.15); //body fill(enemy.color); ellipse(0, 0, enemy.diameter, enemy.diameter); fill(79, 79, 79); arc(0, 0, enemy.diameter, enemy.diameter, 0, 180); //fin fill(247, 54, 74); triangle(-enemy.diameter / 2, 0, -enemy.diameter * 0.7, -enemy.diameter * 0.2, -enemy.diameter * 0.7, enemy.diameter * 0.2); //eyes fill(50, 150); ellipse(enemy.diameter * 0.3, -enemy.diameter * 0.15, enemy.diameter * 0.15, enemy.diameter * 0.15); fill(250, 100); ellipse(enemy.diameter * 0.3, enemy.diameter * 0.15, enemy.diameter * 0.15, enemy.diameter * 0.15); popMatrix(); //remove the enemy (bird) if it goes off the screen if(enemy.y - enemy.diameter > this.player.ymin + 400) { this.deadEnemies.splice(i, 1); } } }, drawDeadPlayer: function() { //draw the player when it hits the lava this.player.vy+= this.player.gravity * 3; this.player.y+= this.player.vy; this.player.angle+= 5; pushMatrix(); translate(this.player.x + this.player.w / 2, this.player.y + this.player.h / 2); rotate(this.player.angle); translate(-(this.player.x + this.player.w / 2), -(this.player.y + this.player.h / 2)); this.player.draw(); popMatrix(); this.runSmoke(); //if the player goes off the screen then game over if(this.player.y - this.player.h > this.player.ymin + 400) { this.dead = true; } }, drawLava: function() { //draw the lava at bottom of the screen pushStyle(); stroke(lerpColor(color(242, 145, 97), color(232, 108, 46), map(sin(frameCount * 4), -1, 1, 1, 0))); strokeWeight(15); fill(242, 229, 111); beginShape(); vertex(this.lava.x1, this.lava.y1); bezierVertex( this.lava.cx1 + cos(frameCount * 4) * 100, this.lava.cy1 + sin(frameCount * 4) * 15, this.lava.cx2 + sin(frameCount * 4) * 100, this.lava.cy2 + cos(frameCount * 4) * 15, this.lava.x2, this.lava.y2); vertex(this.lava.x2, this.lava.y2 + this.lava.h); vertex(this.lava.x1, this.lava.y1 + this.lava.h); endShape(CLOSE); strokeWeight(1); popStyle(); //add particles coming out of the lava if(frameCount % 2 === 0) { this.lava.arr.push({ x: random(width), y: height + 30, vx: random(-1, 1), vy: random(-1, -0.5), diameter: random(10, 20), opacity: random(200, 255) \| 0, color: color(237, 205, 87), timer: 0, duration: random(60, 120) }); } noStroke(); for(var i = this.lava.arr.length - 1; i >= 0; i--) { var particle = this.lava.arr[i]; fill(particle.color, particle.opacity); ellipse(particle.x, particle.y, particle.diameter, particle.diameter); particle.color = lerpColor(color(237, 205, 87), color(232, 108, 46), map(particle.timer, 0, 120, 0, 1)); particle.x+= particle.vx; particle.y+= particle.vy; if(particle.timer++ >= particle.duration) { particle.diameter-= 1; } if(particle.diameter <= 0) { this.lava.arr.splice(i, 1); } } }, drawParticles: function() { //draw the particles noStroke(); for(var i = this.particles.length - 1; i >= 0; i--) { var particle = this.particles[i]; translate(particle.x + particle.diameter / 2, particle.y + particle.diameter / 2); rotate(particle.angle); fill(particle.color, particle.opacity); rect(-particle.diameter / 2, -particle.diameter / 2, particle.diameter, particle.diameter); rotate(-particle.angle); translate(-(particle.x + particle.diameter / 2), -(particle.y + particle.diameter / 2)); particle.angle+= particle.rot; particle.x+= particle.vx; particle.vy+= particle.gravity; particle.y+= particle.vy; particle.opacity = constrain(particle.opacity - 5, 0, 255); //remove the particle if the opacity is zero if(particle.opacity === 0) { this.particles.splice(i, 1); } } }, drawScore: function() { //display the current and best score pushStyle(); fill(255, 150); textAlign(CENTER, TOP); textSize(22); text("BEST: " + this.score.best, 300, 10); textSize(60); text(this.score.value, 300, 50); popStyle(); }, updateParallax: function() { //move the back shapes this.parallax.back.y1-= this.player.vy * this.parallax.back.speed; this.parallax.back.y2-= this.player.vy * this.parallax.back.speed; if(this.parallax.back.y1 + this.cam.y >= this.images.back.height) { this.parallax.back.y1 = this.parallax.back.y2 - this.images.back.height; } if(this.parallax.back.y2 + this.cam.y >= this.images.back.height) { this.parallax.back.y2 = this.parallax.back.y1 - this.images.back.height; } }, leaderboard: function() { background(this.colors.backColor); pushMatrix(); translate(this.cam.x, this.cam.y); //draw the parallax images image(this.images.back, 0, this.parallax.back.y1); image(this.images.back, 0, this.parallax.back.y2); this.runFishes(); this.drawAssets(); this.drawBlocks(); popMatrix(); //leaderboard title image(this.images.leaderboard, 0, 0); //display the highscores pushStyle(); fill(255, 240); textSize(18); textAlign(RIGHT, TOP); for(var i = 0; i < this.highscores.length; i++) { text(this.highscores[i].name, width / 2, 110 + i * 35); text(this.highscores[i].score, width / 2 + 50, 110 + i * 35); } popStyle(); this.runBubbles(); this.drawLava(); for(var k in this.buttons.leaderboard) { this.buttons.leaderboard[k].draw(); } }, home: function() { background(this.colors.backColor); pushMatrix(); translate(this.cam.x, this.cam.y); //draw the parallax images image(this.images.back, 0, this.parallax.back.y1); image(this.images.back, 0, this.parallax.back.y2); this.runFishes(); this.drawAssets(); this.drawBlocks(); popMatrix(); //game title pushMatrix(); translate(width / 2, 180); rotate(sin(frameCount * 1.5) * 5); image(this.images.heading, -width/2, -90); popMatrix(); this.runBubbles(); this.drawLava(); for(var k in this.buttons.menu) { this.buttons.menu[k].draw(); } }, gameover: function() { background(this.colors.backColor); this.cam.y = lerp(this.cam.y, height * 0.7 - this.player.ymin, 0.1); //shake the screen if active 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))); } pushMatrix(); translate(this.cam.x, this.cam.y); //draw the parallax images image(this.images.back, 0, this.parallax.back.y1); image(this.images.back, 0, this.parallax.back.y2); this.runFishes(); this.drawAssets(); this.drawSpikes(); this.drawLazers(); this.drawEnemies(); this.moveEnemies(); this.drawDeadEnemies(); this.drawBlocks(); this.drawStars(); this.drawParticles(); this.drawDeadPlayer(); this.runBubbles(); popMatrix(); this.drawLava(); if(this.dead) { //slide down / rotate the game over panel this.anim.over.value = lerp(this.anim.over.value, 0, 0.1); this.anim.over.angle = map(this.anim.over.value, this.anim.over.base, 0, 0, 360); pushMatrix(); translate(0, this.anim.over.value); translate(300, 420); rotate(this.anim.over.angle); translate(-300, -420); pushStyle(); strokeWeight(5); stroke(this.colors.stroke); fill(this.colors.blockColor[1], 200); rect(100, 50, 400, 480, 10); fill(250, 200); textAlign(CENTER, TOP); textSize(40); text("GAME OVER", 300, 70); textSize(23); text("SCORE: " + this.score.value + "\nBEST: " + this.score.best + "\nGAMES PLAYED: " + this.stats.games, 300, 135); popStyle(); for(var k in this.buttons.over) { this.buttons.over[k].draw(); } popMatrix(); } else { this.drawScore(); } }, play: function() { background(this.colors.backColor); this.cam.y = lerp(this.cam.y, height * 0.7 - this.player.ymin, 0.1); //shake the screen if active 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))); } pushMatrix(); translate(this.cam.x, this.cam.y); //draw the parallax images image(this.images.back, 0, this.parallax.back.y1); image(this.images.back, 0, this.parallax.back.y2); this.runFishes(); this.drawAssets(); this.drawSpikes(); this.drawLazers(); this.drawEnemies(); this.moveEnemies(); this.drawDeadEnemies(); this.drawBlocks(); this.drawStars(); this.drawParticles(); this.player.draw(); this.movePlayer(); this.runBubbles(); popMatrix(); //if game has started then check for collisions if(this.start) { this.checkCollisions(); } this.drawLava(); this.drawScore(); this.updateParallax(); }, run: function() { switch(this.scene) { case "load": this.load("home"); break; case "home": if(this.logo.done) { this.home(); } this.logo.draw(); break; case "leaderboard": this.leaderboard(); break; case "play": this.play(); break; case "dead": this.dead(); break; case "gameover": this.gameover(); break; } this.transition.run(); cursor(hover ? 'pointer' : 'default'); pressed = clicked = hover = false; } }; return App; })(); //create a new app instance app = new App(); draw = function() { //run the app app.run(); };
Folds	38,40,41,43,44,46,47,49,52,191,194,309,312,356,359,665,668,2491
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgMO8jb2tCgw
Votes	187
Spin-Offs	9
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	10 months ago, 1739449719031
Updated	10 months ago, 1739449730169
Source Deleted	unknown