Viewing Program

Program Data

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

Title	Spider Square KA (Game)
ID	6592535607689216
Created	3 years ago, 1643631629520
Updated	3 years ago, 1651472137035
Code	/ Spider Square KA (Game) Based off the game Spider Square on IOS Gray Wolf, February 2022 @News I'll be trying to release a new game every week through to at least the end of March :) @Credits Line/Line collisions Learner https://www.khanacademy.org/cs/i/5342084580458496 Rotated rect collisions Loyalty (Cavan P) https://www.khanacademy.org/profile/kaid_716488551714127278797372 Dandelion Fire Coding https://www.khanacademy.org/profile/kaid_565064446382644511974643 @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}s?[82a=47(UGvLeOFPXHq-f"; var app; smooth(); textFont(createFont("Trebuchet MS")); var keys = []; keyPressed = function() { keys[keyCode] = true; }; keyReleased = function() { keys[keyCode] = false; }; var clicked = false, hover = false, pressed = false; mouseClicked = function() { clicked = true; }; mousePressed = function () { pressed = true; }; mouseReleased = function () { pressed = false; }; var Button = (function() { var Button = function(args) { this.x = args.x; this.y = args.y; this.w = args.w \|\| 75; this.h = args.h \|\| 35; this.size = args.size \|\| 75; this.content = args.content; this.textSize = args.textSize \|\| this.size * 0.18; this.hover = false; this.func = args.func; this.backColor = args.backColor \|\| color(95, 180, 217); this.textColor = color(240); }; Button.prototype = { over: function() { return (mouseX > this.x && mouseX < this.x + this.size && mouseY > this.y && mouseY < this.y + this.size); }, draw: function() { this.hover = this.over(); if(this.hover) { hover = true; } noStroke(); fill(this.hover ? app.color : app.colors[app.colorIndex.previous], this.hover ? 255 : 220); rect(this.x, this.y, this.size, this.size); switch(this.content) { case "play": noStroke(); fill(this.hover ? app.color : app.colors[app.colorIndex.previous], this.hover ? 255 : 220); rect(this.x, this.y, this.size, this.size); fill(this.textColor); triangle( this.x + this.size * 0.85, this.y + this.size * 0.5, this.x + this.size * 0.20, this.y + this.size * 0.15, this.x + this.size * 0.20, this.y + this.size * 0.85); break; case "leaderboard": pushStyle(); noStroke(); fill(this.hover ? app.color : app.colors[app.colorIndex.previous], this.hover ? 255 : 220); rect(this.x, this.y, this.size, this.size); noFill(); stroke(this.textColor); strokeWeight(this.size * 0.16); strokeCap(SQUARE); line(this.x + this.size * 0.50, this.y + this.size * 0.80, this.x + this.size * 0.50, this.y + this.size * 0.2); line(this.x + this.size * 0.25, this.y + this.size * 0.80, this.x + this.size * 0.25, this.y + this.size * 0.4); line(this.x + this.size * 0.75, this.y + this.size * 0.80, this.x + this.size * 0.75, this.y + this.size * 0.3); strokeWeight(1); popStyle(); break; case "store": pushStyle(); noStroke(); fill(this.hover ? app.color : app.colors[app.colorIndex.previous], this.hover ? 255 : 220); rect(this.x, this.y, this.size, this.size); fill(this.textColor); rect(this.x + this.size * 0.2, this.y + this.size * 0.2, this.size * 0.6, this.size * 0.6); fill(50); rect(this.x + this.size * 0.65, this.y + this.size * 0.40, this.size * 0.1, this.size * 0.1); rect(this.x + this.size * 0.50, this.y + this.size * 0.40, this.size * 0.1, this.size * 0.1); popStyle(); break; case "home": pushStyle(); noStroke(); fill(this.hover ? app.color : app.colors[app.colorIndex.previous], this.hover ? 255 : 220); rect(this.x, this.y, this.size, this.size); fill(this.textColor); pushMatrix(); translate(this.size0.5, this.size0.5); beginShape(); vertex(this.x+this.size0.25, this.y); //1 vertex(this.x+this.size0.25, this.y+this.size0.25); //2 vertex(this.x+this.size0.07, this.y+this.size0.25); //3 vertex(this.x+this.size0.07, this.y+this.size0.12); //4 vertex(this.x-this.size0.07, this.y+this.size0.12); //5 vertex(this.x-this.size0.07, this.y+this.size0.25); //6 vertex(this.x-this.size0.25, this.y+this.size0.25); //7 vertex(this.x-this.size0.25, this.y); //8 vertex(this.x, this.y-this.size0.2); //9 vertex(this.x+this.size0.25, this.y); //10 endShape(); noFill(); stroke(this.textColor); strokeWeight(this.size0.05); line(this.x-this.size0.27, this.y-this.size0.05, this.x, this.y-this.size0.27); line(this.x+this.size0.27, this.y-this.size0.05, this.x, this.y-this.size0.27); line(this.x+this.size0.15, this.y-this.size0.19, this.x+this.size0.15, this.y-this.size0.25); popMatrix(); popStyle(); break; default: pushStyle(); noStroke(); fill(this.hover ? app.color : app.colors[app.colorIndex.previous], this.hover ? 255 : 220); rect(this.x, this.y, this.size, this.size); textAlign(CENTER, CENTER); textSize(this.textSize); fill(this.textColor); text(this.content, this.x + this.size / 2, this.y + this.size / 2); popStyle(); break; } if(clicked && this.hover) { this.func(); } } }; return Button; })(); var CharacterButton = (function() { var CharacterButton = function(args) { Button.call(this, args); this.name = args.name; this.index = args.index; this.cost = args.cost; this.purchased = args.purchased; this.selected = args.selected \|\| false; }; CharacterButton.prototype = Object.create(Button.prototype); CharacterButton.prototype.draw = function() { this.hover = this.over(); if(this.hover) { hover = true; } var character = app.characters[this.index]; var img = app.characters[this.index].img; pushStyle(); fill(this.index === app.characterIndex ? color(app.color, 100) : this.selected ? color(app.colors[app.colorIndex.previous], 100) : color(255, 255, 255, 0)); stroke(this.hover ? app.color : app.colors[app.colorIndex.previous], this.hover ? 255 : 220); strokeWeight(3); rect(this.x, this.y, this.size, this.size); imageMode(CENTER); image(img, this.x + this.size 0.5, this.y + this.size * 0.5, img.width, img.height); imageMode(CORNER); fill(character.purchased ? color(255, 255, 255, 0) : color(250, 150)); rect(this.x, this.y, this.size, this.size); strokeWeight(1); popStyle(); if(clicked && this.hover) { app.updateCharacter(this.index); app.clearSelectedButtons(this); } }; return CharacterButton; })(); 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(255, 240, 220), outline: color(5, 5, 5), from: color(102, 99, 98), to: color(13, 13, 13), text: color(85, 85, 85) }; 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() { 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; })(); 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[3], 50); strokeWeight(20); fill(app.color); 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(); } else if(this.scene === "store") { app.characterIndexSelected = app.characterIndex; app.clearSelectedButtons(app.characterButtons[app.characterIndex]); } 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(); } }; }; var Player = (function() { var Player = function(args) { this.x = args.x \|\| 100; this.y = args.y \|\| 250; this.vx = 0; this.vy = 0; this.w = args.w \|\| 36; this.h = args.h \|\| 36; this.gravity = 0.2; this.angle = 0; this.rot = 0; this.coords = [ {x: 0, y: 0}, {x: 0, y: 0}, {x: 0, y: 0}, {x: 0, y: 0}]; this.character = undefined; this.color = args.color \|\| color(82, 82, 82); this.onGround = false; this.shake = 0; this.shakedown = 0.1; }; Player.prototype = { draw: function() { pushMatrix(); translate(this.x + this.w / 2, this.y + this.h / 2); rotate(this.angle); image(this.character, -this.character.width / 2, -this.character.height / 2, this.character.width, this.character.height); popMatrix(); } }; return Player; })(); var App = (function() { var App = function(args) { this.scene = "load"; this.images = undefined; this.imageIndex = 0; this.loaded = false; this.characterIndex = 0; this.characterIndexSelected = this.characterIndex; this.player = new Player({}); this.logo = new Logo({}); this.colors = [ color(250, 115, 105), color(95, 180, 217), color(180, 120, 205), color(105, 130, 195), color(92, 92, 92), color(119, 194, 135), color(201, 105, 199), color(92, 92, 92) ]; this.colorIndex = { current: 0, previous: this.colors.length - 1, timer: 0, duration: 600, change: 60, increment: 0, active: false }; this.color = this.colors[this.colorIndex.current]; this.textColor = color(245); this.fonts = { bold: createFont("Arial Bold") }; this.score = { value: 0, best: 0, played: 0 }; this.transition = new Transition(); this.transitions = { leaderboard: { yoff: -height } }; this.shake = 0; this.shakedown = 0.1; this.parallax = { front: { x1: 0, x2: 899, speed: 0.10 }, back: { x1: 0, x2: 899, speed: 0.25 } }; this.gem = { value: 0, size: 24, color: color(242, 234, 116), dest: { x: width - 40, y: 10, w: 30, h: 30 }, arr: [] }; this.gems = []; this.start = false; this.highscores = [ { name: "Ashrit R", score: 233 }, { name: "Jaiden Walker", score: 161 }, { name: "Noah Mericle", score: 145 }, { name: "⊂RεtrσTµrt\|ε⊃", score: 170 }, { name: "27aydogdufurkan", score: 113 }, { name: "appleisthebest", score: 116 }, { name: "colby", score: 106 }, { name: "Gray Wolf", score: 121 }, { name: "nikolas.titolo", score: 116 }, { name: "rylee.2178327", score: 99 } ]; this.cam = { x: 0, y: 0 }; this.line = { x1: 0, y1: 0, x2: 0, y2: 0, vx: 0, vy: 0, angle: 0, active: false }; this.boundary = { top: { x: 0, y: 0, w: width, h: 50, coords: [ {x: 0, y: 0}, {x: width, y: 0}, {x: width, y: 50}, {x: 0, y: 50}] }, bottom: { x: 0, y: height - 100, w: width, h: 100, coords: [ {x: 0, y: height - 100}, {x: width, y: height - 100}, {x: width, y: height}, {x: 0, y: height}] } }; this.over = { color: color(255, 240, 220), opacity: { value: 0, max: 150 }, buttons: { value: height, target: height - 80 }, play: { value: -height, target: 300 }, yoff: -height }; this.particles = []; this.block = { w: { min: 30, max: 150 }, ns: 0, noise: 0, mapping: { from: 0.3, to: 0.7, ymin: 0, ymax: 300 }, increment: 0.09 }; this.bit = { size: 26, spacing: { value: 0, min: 3 }, difficulty: { value: 0.25, min: 0.25, max: 0.6 } }; this.markers = { arr: [], number: 1, spacing: 400 }; this.blocks = []; this.bits = []; this.trails = []; this.buttons = { home: { play: new Button({ x: width / 2 - 30, y: 360, size: 120, content: "play", func: function() { app.transition.scene = "play"; app.transition.active = true; } }), store: new Button({ x: width / 2 - 105, y: 360, size: 55, content: "store", func: function() { app.transition.scene = "store"; app.transition.active = true; } }), leaderboard: new Button({ x: width / 2 - 105, y: 425, size: 55, content: "leaderboard", func: function() { app.transition.scene = "leaderboard"; app.transition.active = true; } }), }, play: { home: new Button({ x: 15, y: height - 80, size: 60, content: "home", func: function() { app.transition.scene = "home"; app.transition.active = true; } }), store: new Button({ x: 95, y: height - 80, size: 60, content: "store", func: function() { app.transition.scene = "store"; app.transition.active = true; } }), leaderboard: new Button({ x: 175, y: height - 80, size: 60, content: "leaderboard", func: function() { app.transition.scene = "leaderboard"; app.transition.active = true; } }), save: new Button({ x: 255, y: height - 80, size: 60, textSize: 20, content: "SAVE", func: function() { app.encode(); println("Copy the following save code to line 34\n\n" + saveCode); } }) }, store: { play: new Button({ x: width / 2 - 30, y: height - 80, size: 60, content: "play", func: function() { app.transition.scene = "play"; app.transition.active = true; } }), leaderboard: new Button({ x: width / 2 + 50, y: height - 80, size: 60, content: "leaderboard", func: function() { app.transition.scene = "leaderboard"; app.transition.active = true; } }), home: new Button({ x: width / 2 - 110, y: height - 80, size: 60, content: "home", func: function() { app.transition.scene = "home"; app.transition.active = true; } }), buy: new Button({ x: width / 2 - 30, y: 380, size: 60, textSize: 20, content: "BUY", func: function() { app.buyCharacter(); } }) }, leaderboard: { play: new Button({ x: width / 2 - 30, y: height - 80, size: 60, content: "play", func: function() { app.transition.scene = "play"; app.transition.active = true; } }), home: new Button({ x: width / 2 - 110, y: height - 80, size: 60, content: "home", func: function() { app.transition.scene = "home"; app.transition.active = true; } }), store: new Button({ x: width / 2 + 50, y: height - 80, size: 60, content: "store", func: function() { app.transition.scene = "store"; app.transition.active = true; } }) }, over: { play: new Button({ x: width / 2 - 60, y: -height, size: 120, content: "play", func: function() { app.transition.scene = "play"; app.transition.active = true; } }), home: new Button({ x: 15, y: height, size: 60, content: "home", func: function() { app.transition.scene = "home"; app.transition.active = true; } }), store: new Button({ x: 95, y: height, size: 60, content: "store", func: function() { app.transition.scene = "store"; app.transition.active = true; } }), leaderboard: new Button({ x: 175, y: height, size: 60, content: "leaderboard", func: function() { app.transition.scene = "leaderboard"; app.transition.active = true; } }), save: new Button({ x: 255, y: height, size: 60, textSize: 20, content: "SAVE", func: function() { app.encode(); println("Copy the following save code to line 34\n\n" + saveCode); } }) } }; this.characterButtons = []; this.characters = [ { name: "Bob", cost: 0, purchased: true, color: color(82, 82, 82) }, { name: "Bluey", cost: 20, purchased: false, color: color(89, 204, 242) }, { name: "Red", cost: 20, purchased: false, color: color(242, 94, 104) }, { name: "Spooky", cost: 20, purchased: false, color: color(184, 184, 184) }, { name: "Crim", cost: 20, purchased: false, color: color(50) }, { name: "Kamakura", cost: 20, purchased: false, color: color(82, 82, 82) }, { name: "Max", cost: 20, purchased: false, color: color(150, 90, 50) }, { name: "Bubbles", cost: 20, purchased: false, color: color(240, 133, 67) }, { name: "Homer", cost: 20, purchased: false, color: color(230, 217, 101) }, { name: "Rasta", cost: 20, purchased: false, color: color(160, 100, 50) }, { name: "Daisy", cost: 20, purchased: false, color: color(245, 171, 35) }, { name: "Mr Smith", cost: 20, purchased: false, color: color(220, 155, 90) }, { name: "Officer Jones", cost: 20, purchased: false, color: color(232, 171, 111) }, { name: "Foxy", cost: 20, purchased: false, color: color(240, 103, 65) }, { name: "Franky", cost: 20, purchased: false, color: color(25, 150, 15) }, { name: "Piglet", cost: 20, purchased: false, color: color(235, 110, 235) }, { name: "Leo", cost: 20, purchased: false, color: color(240, 180, 20) }, { name: "Moby", cost: 20, purchased: false, color: color(30, 120, 200) }, { name: "Sven", cost: 20, purchased: false, color: color(50, 50, 50) }, { name: "Roboto", cost: 20, purchased: false, color: color(100, 120, 120) } ]; this.cypher = { value: "twRcfTA9l<rg>yM\|/.5pjBo31I_C?DK)Y]b+:{QNZW,dS0Vn6}[82a=47(UGvLeOFPXHqxEuikzJhm!?>$U@I&" }; this.init(); this.setup(); }; App.prototype = { setCoords: function(obj) { var cosTheta = cos(obj.angle), sinTheta = sin(obj.angle); obj.coords[0].x = ((-obj.w/2)cosTheta - (-obj.h/2)sinTheta) + obj.x + obj.w / 2; obj.coords[0].y = ((-obj.w/2)sinTheta + (-obj.h/2)cosTheta) + obj.y + obj.h / 2; obj.coords[1].x = (( obj.w/2)cosTheta - (-obj.h/2)sinTheta) + obj.x + obj.w / 2; obj.coords[1].y = (( obj.w/2)sinTheta + (-obj.h/2)cosTheta) + obj.y + obj.h / 2; obj.coords[2].x = (( obj.w/2)cosTheta - ( obj.h/2)sinTheta) + obj.x + obj.w / 2; obj.coords[2].y = (( obj.w/2)sinTheta + ( obj.h/2)cosTheta) + obj.y + obj.h / 2; obj.coords[3].x = ((-obj.w/2)cosTheta - ( obj.h/2)sinTheta) + obj.x + obj.w / 2; obj.coords[3].y = ((-obj.w/2)sinTheta + ( obj.h/2)cosTheta) + obj.y + obj.h / 2; }, addMarker: function() { //check if should add marker var blockTop = this.blocks[this.blocks.length-2]; var blockBottom = this.blocks[this.blocks.length-1]; if( blockTop.x < this.markers.number this.markers.spacing && blockTop.x + blockTop.w >= this.markers.number * this.markers.spacing) { //add marker var maxTopY = max(blockTop.h, this.boundary.top.h); var minBottomY = min(blockBottom.y, this.boundary.bottom.y); this.markers.arr.push({ x: this.markers.number * this.markers.spacing, y: maxTopY + ((minBottomY - maxTopY) / 2), number: this.markers.number++, reached: false }); } }, addBit: function() { //check if should add random block var blockTop = this.blocks[this.blocks.length-2]; var blockBottom = this.blocks[this.blocks.length-1]; var maxTopY = max(blockTop.h, this.boundary.top.h); var minBottomY = min(blockBottom.y, this.boundary.bottom.y); var distance = minBottomY - maxTopY; this.bit.spacing.value++; if(this.bit.spacing.value >= this.bit.spacing.min && distance > 300 && random() < this.bit.difficulty.value) { this.bit.difficulty.value = constrain(this.bit.difficulty.value + 0.01, this.bit.difficulty.min, this.bit.difficulty.max); if(random() < 0.5) { this.bits.push({ x: blockTop.x + blockTop.w / 2 - this.bit.size / 2, y: random(maxTopY + this.bit.size / 2, minBottomY - this.bit.size * 1.5), w: this.bit.size, h: this.bit.size, type: "fixed" }); } else { this.bits.push({ x: blockTop.x + blockTop.w / 2 - this.bit.size / 2, y: random(maxTopY + this.bit.size / 2, minBottomY - this.bit.size * 1.5), w: this.bit.size, h: this.bit.size, type: "moving", speed: random(0.5, 1.5), dir: random() < 0.5 ? 1 : -1, top: blockTop, bottom: blockBottom }); } this.bit.spacing.value = 0; var bit = this.bits[this.bits.length - 1]; bit.coords = [ {x: bit.x, y: bit.y}, {x: bit.x + bit.w, y: bit.y}, {x: bit.x + bit.w, y: bit.y + bit.h}, {x: bit.x, y: bit.y + bit.h}]; } }, addGem: function() { if(random() < 0.1) { var blockTop = this.blocks[this.blocks.length-2]; var blockBottom = this.blocks[this.blocks.length-1]; var maxTopY = max(blockTop.h, this.boundary.top.h); var minBottomY = min(blockBottom.y, this.boundary.bottom.y); this.gems.push({ x: blockTop.x + blockTop.w / 2 - this.gem.size / 2, y: random(maxTopY + this.gem.size / 2, minBottomY - this.gem.size * 1.5), w: this.gem.size, h: this.gem.size, angle: random(360) \| 0, rot: 2 }); var gem = this.gems[this.gems.length - 1]; gem.coords = [ {x: gem.x, y: gem.y}, {x: gem.x + gem.w, y: gem.y}, {x: gem.x + gem.w, y: gem.y + gem.h}, {x: gem.x, y: gem.y + gem.h}]; } }, encode: function() { var args = []; args.push(this.gem.value); args.push(this.score.best); args.push(this.score.played); args.push(this.characterIndex); var purchased = ""; for(var i = 0; i < this.characters.length; i++) { purchased+= (this.characters[i].purchased ? "1" : "0"); } args.push(purchased); 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 { var arr = saveCode.split(/[-#s]/); var shift = this.cypher.value.indexOf(arr[5]); this.gem.value = 0; for(var i = 0; i < arr[0].length; i++) { var ch = this.cypher.value[this.cypher.value.indexOf(arr[0][i]) - shift - i]; this.gem.value = (this.gem.value.toString() + ch \| 0); } this.score.best = 0; for(var i = 0; i < arr[1].length; i++) { var ch = this.cypher.value[this.cypher.value.indexOf(arr[1][i]) - shift - i]; this.score.best = (this.score.best.toString() + ch \| 0); } this.score.played = 0; for(var i = 0; i < arr[2].length; i++) { var ch = this.cypher.value[this.cypher.value.indexOf(arr[2][i]) - shift - i]; this.score.played = (this.score.played.toString() + ch \| 0); } this.characterIndex = 0; for(var i = 0; i < arr[3].length; i++) { var ch = this.cypher.value[this.cypher.value.indexOf(arr[3][i]) - shift - i]; this.characterIndex = (this.characterIndex.toString() + ch \| 0); } for(var i = 0; i < arr[4].length; i++) { this.characters[i].purchased = this.cypher.value[this.cypher.value.indexOf(arr[4][i]) - shift - i] \| 0; } } catch (e) { println("You've entered an invalid save code!"); this.gem.value = this.score.best = this.score.played = this.characterIndex = 0; } }, outlineText: function(args) { textSize(args.textSize); fill(args.stroke); for(var i = 0; i < 360; i+= 90) { 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); }, init: function() { this.decode(); this.highscores.sort(function(a, b) { return b.score - a.score; }); //add images this.images = { parallaxFront: function() { var gx = createGraphics(900, 600, P2D); gx.background(0, 0, 0, 0); gx.noStroke(); gx.fill(235, 224, 205); for(var x = random(30); x < width; x+= random(80, 170)) { gx.rect(x, 0, random(30, 100), random(70, 280)); } for(var x = random(30); x < width; x+= random(80, 170)) { var h = random(70, 280); gx.rect(x, height - h, random(30, 100), h); } return gx.get(0, 0, 900, 600); }, parallaxBack: function() { var gx = createGraphics(900, 600, P2D); gx.background(0, 0, 0, 0); gx.noStroke(); gx.fill(245, 235, 210); for(var x = random(30); x < width; x+= random(80, 170)) { gx.rect(x, 0, random(30, 100), random(70, 280)); } for(var x = random(30); x < width; x+= random(80, 170)) { var h = random(70, 280); gx.rect(x, height - h, random(30, 100), h); } return gx.get(0, 0, 900, 600); }, character1: function() { background(0, 0, 0, 0); //body noStroke(); fill(82, 82, 82); rect(300, 300, 36, 36); //eyes fill(255); rect(320, 310, 5, 5); rect(328, 310, 5, 5); return get(300, 300, 36, 36); }, character2: function() { background(0, 0, 0, 0); //body noStroke(); fill(89, 204, 242); rect(300, 300, 36, 36); //eyes fill(50); rect(320, 310, 5, 5); rect(328, 310, 5, 5); return get(300, 300, 36, 36); }, character3: function() { background(0, 0, 0, 0); //body noStroke(); fill(242, 94, 104); rect(300, 300, 36, 36); //eyes fill(50); rect(320, 310, 5, 5); rect(328, 310, 5, 5); return get(300, 300, 36, 36); }, character4: function() { background(0, 0, 0, 0); //body noStroke(); fill(184, 184, 184); rect(300, 300, 36, 32, 3, 3, 0, 0); rect(300, 332, 6, 4); rect(310, 332, 6, 4); rect(320, 332, 6, 4); rect(330, 332, 6, 4); //eyes fill(50); rect(320, 310, 5, 5); rect(328, 310, 5, 5); return get(300, 300, 36, 36); }, character5: function() { background(0, 0, 0, 0); //body noStroke(); fill(240, 180, 130); rect(300, 300, 36, 36, 2, 2, 0, 0); //headband fill(50); rect(300, 309, 36, 8); //body fill(240, 240, 240); rect(300, 322, 36, 14); fill(50); rect(300, 324, 36, 4); rect(300, 330, 36, 4); //eyes fill(250); rect(320, 311, 4, 4); rect(328, 311, 4, 4); return get(300, 300, 36, 36); }, character6: function() { background(0, 0, 0, 0); //body noStroke(); fill(82, 82, 82); rect(300, 300, 36, 36); //headband fill(250, 80, 97); rect(300, 304, 36, 4); triangle(303, 306, 295, 306, 295, 301); triangle(303, 306, 295, 311, 295, 307); //eyes fill(250); rect(320, 311, 4, 4); rect(328, 311, 4, 4); return get(295, 295, 46, 46); }, character7: function() { background(0, 0, 0, 0); noStroke(); //back ear fill(115, 65, 30); rect(326, 300, 12, 24, 5); //body fill(150, 90, 50); rect(300, 300, 36, 36, 2, 2, 5, 2); //mouth fill(115, 65, 30); rect(315, 322, 23, 14, 5); //nose fill(50); ellipse(334, 324, 7, 7); //front ear fill(115, 65, 30); rect(298, 300, 12, 24, 5); //eyes noStroke(); fill(250); rect(319, 315, 4, 4); rect(329, 315, 4, 4); return get(298, 300, 40, 36); }, character8: function() { background(0, 0, 0, 0); noStroke(); //body fill(240, 133, 67); rect(300, 300, 36, 36, 3); rect(297, 316, 5, 6); rect(292, 313, 6, 6, 2, 4, 0, 0); rect(292, 320, 6, 6, 0, 0, 4, 2); //scales noFill(); stroke(50); arc(311, 315, 5, 5, -90, 90); arc(311, 323, 5, 5, -90, 90); arc(306, 319, 5, 5, -90, 90); //eyes noStroke(); fill(250); rect(321, 314, 4, 5); rect(329, 314, 4, 5); return get(292, 300, 52, 36); }, character9: function() { background(0, 0, 0, 0); noStroke(); //body fill(230, 217, 101); rect(300, 300, 36, 36); fill(209, 163, 90); rect(313, 324, 23, 12); //eyes noStroke(); fill(250); rect(321, 315, 5, 5); rect(329, 315, 5, 5); //hair stroke(85); strokeWeight(1); line(312, 301, 331, 301); return get(300, 300, 36, 36); }, character10: function() { background(0, 0, 0, 0); noStroke(); //body fill(160, 100, 50); rect(300, 300, 36, 36); //hair fill(50); rect(298, 300, 6, 32); rect(302, 300, 6, 26); rect(306, 300, 6, 18); rect(336, 300, 2, 29); //headband fill(107, 163, 70); rect(298, 300, 40, 3); fill(196, 184, 75); rect(298, 303, 40, 3); fill(247, 84, 101); rect(298, 306, 40, 3); //eyes noStroke(); fill(50); rect(321, 315, 5, 5); rect(329, 315, 5, 5); return get(298, 300, 40, 36); }, character11: function() { background(0, 0, 0, 0); noStroke(); //body fill(232, 224, 111); rect(300, 300, 36, 36); //beak fill(245, 171, 35); rect(320, 321, 18, 9); //eyes noStroke(); fill(50); rect(321, 313, 5, 5); rect(329, 313, 5, 5); return get(298, 300, 40, 36); }, character12: function() { background(0, 0, 0, 0); noStroke(); //body fill(220, 155, 90); rect(300, 300, 36, 36); //hat fill(50); rect(300, 298, 36, 20); rect(297, 315, 42, 5); fill(240); rect(300, 313, 36, 2); //eyes noStroke(); fill(50); rect(321, 322, 4, 5); rect(329, 322, 4, 5); return get(297, 298, 42, 40); }, character13: function() { background(0, 0, 0, 0); noStroke(); //body fill(232, 171, 111); rect(300, 300, 36, 36); //hat fill(30, 144, 189); rect(300, 298, 36, 12); fill(50); rect(300, 309, 40, 3); fill(237, 187, 71); rect(324, 300, 7, 7); //eyes noStroke(); fill(50); rect(321, 316, 4, 5); rect(329, 316, 4, 5); return get(296, 300, 44, 36); }, character14: function() { background(0, 0, 0, 0); noStroke(); //ears fill(240, 103, 65); rect(300, 296, 8, 6); rect(311, 296, 8, 6); fill(240); rect(301, 297, 6, 6); rect(312, 297, 6, 6); //body fill(240, 103, 65); rect(300, 300, 36, 36, 0, 3, 0, 0); //nose fill(240); rect(300, 322, 36, 4); rect(323, 324, 11, 5, 0, 0, 5, 5); fill(50); rect(326, 324, 6, 4, 5); //eyes noStroke(); fill(50); rect(321, 316, 4, 4); rect(329, 316, 4, 4); return get(300, 296, 36, 44); }, character15: function() { background(0, 0, 0, 0); noStroke(); //body fill(25, 150, 15); rect(300, 300, 36, 36); fill(50, 160, 40); rect(300, 322, 38, 14); //teeth fill(240); rect(320, 320, 3, 2); rect(325, 320, 3, 2); rect(330, 320, 3, 2); rect(335, 320, 3, 2); //eyes noStroke(); fill(50); rect(320, 312, 4, 4); rect(329, 312, 4, 4); return get(298, 300, 40, 36); }, character16: function() { background(0, 0, 0, 0); //tail noFill(); stroke(180, 100, 191); strokeWeight(1.5); bezier(300, 330, 288, 323, 306, 323, 294, 329); strokeWeight(1); //body noStroke(); fill(235, 110, 235); rect(300, 300, 36, 36, 2); //nose fill(200, 70, 175); rect(318, 325, 16, 9, 2); //nostrils fill(50); rect(322, 328, 4, 3); rect(328, 328, 4, 3); //eyes noStroke(); fill(50); rect(320, 319, 4, 4); rect(329, 319, 4, 4); return get(294, 300, 48, 36); }, character17: function() { background(0, 0, 0, 0); //body noStroke(); fill(240, 180, 20); rect(300, 300, 36, 36); //nose fill(250, 220, 165); rect(312, 322, 24, 14); fill(90, 40, 10); rect(325, 322, 4, 4); fill(185, 115, 40); rect(325, 300, 4, 22); //spots fill(90, 40, 10); rect(300, 305, 4, 4); rect(300, 312, 4, 4); rect(300, 319, 4, 4); rect(315, 300, 5, 3); rect(333, 300, 3, 3); //eyes noStroke(); fill(50); rect(319, 317, 4, 4); rect(330, 317, 4, 4); return get(300, 300, 36, 36); }, character18: function() { background(0, 0, 0, 0); //body noStroke(); fill(30, 120, 200); rect(300, 300, 36, 36); rect(308, 296, 13, 10); rect(314, 298, 13, 10); //tail rect(296, 310, 10, 4); rect(294, 305, 4, 14, 0, 2, 2, 0); //nose fill(90, 150, 210); rect(305, 319, 31, 17); //eyes noStroke(); fill(50); rect(319, 313, 4, 4); rect(330, 313, 4, 4); return get(294, 296, 48, 44); }, character19: function() { background(0, 0, 0, 0); //body noStroke(); fill(232, 171, 111); rect(300, 300, 36, 36, 1, 1, 0, 0); //beard fill(242, 85, 53); rect(300, 321, 36, 15); rect(300, 308, 8, 28); //hat fill(50); rect(300, 300, 36, 9, 1, 1, 0, 0); rect(324, 302, 6, 8); rect(296, 303, 44, 3); rect(296, 298, 3, 7); rect(337, 298, 3, 7); //eyes noStroke(); fill(50); rect(319, 313, 4, 4); rect(330, 313, 4, 4); return get(294, 298, 48, 40); }, character20: function() { background(0, 0, 0, 0); //body noStroke(); fill(100, 120, 120); rect(300, 300, 36, 36, 2, 2, 10, 10); //mouth fill(120, 160, 160); rect(300, 324, 38, 12, 10, 0, 10, 10); fill(100, 120, 120); ellipse(305, 330, 6, 6); //eyes noStroke(); fill(250); rect(319, 316, 4, 4); rect(329, 317, 3, 3); //ariel fill(100, 120, 120); rect(319, 298, 2, 5); fill(70, 190, 190); ellipse(320, 297, 4, 4); return get(298, 295, 40, 46); }, heading: function() { background(0, 0, 0, 0); pushStyle(); textAlign(CENTER, CENTER); textFont(createFont("Trebuchet MS Bold")); app.outlineText({ text: "SPIDER SQUARE", x: width / 2, y: app.boundary.top.h, textSize: 60, fill: app.textColor, stroke: color(40, 50), strokeWeight: 4, }); pushMatrix(); translate(width - 50, app.boundary.top.h); rotate(-90); app.outlineText({ text: "KA", x: 0, y: 0, textSize: 40, fill: app.textColor, stroke: color(40, 50), strokeWeight: 4, }); popMatrix(); popStyle(); return get(0, 0, width, app.boundary.top.h * 2); }, leaderboard: function() { background(0, 0, 0, 0); pushStyle(); textAlign(CENTER, CENTER); textFont(createFont("Trebuchet MS Bold")); app.outlineText({ text: "LEADERBOARD", x: width / 2, y: app.boundary.top.h, textSize: 40, fill: app.textColor, stroke: color(40, 50), strokeWeight: 4, }); popStyle(); return get(0, 0, width, app.boundary.top.h * 2); } }; //add character buttons var cx = 0; var cy = 0; var charactersPerRow = 5; var start = (width - (charactersPerRow * 70)) / 2 + 5; for(var i = 0; i < this.characters.length; i++) { var character = this.characters[cx]; this.characterButtons.push(new CharacterButton({ x: start + cx * 70, y: 80 + cy * 75, size: 60, name: character.name, cost: character.cost, purchased: character.purchased, index: i })); cx = (cx + 1) % charactersPerRow; if((i + 1) % charactersPerRow === 0) { cy++; } } }, setup: function() { //setup initial tracks for the road this.block.ns = random(1000) \| 0; for(var x = 300; x <= width + this.block.w.max * 4; x+= this.blocks[this.blocks.length-1].w) { var n = noise(this.block.ns); var h = map(n, this.block.mapping.from, this.block.mapping.to, this.block.mapping.ymin, this.block.mapping.ymax); var w = random(this.block.w.min, this.block.w.max) \| 0; this.blocks.push({ x: x, y: 0, w: w, h: h, coords: [ {x: x, y: 0}, {x: x + w, y: 0}, {x: x + w, y: h}, {x: x, y: h}] }); var randHeight = random(200, 450); this.blocks.push({ x: x, y: h + randHeight, w: w, h: height, coords: [ {x: x, y: h + randHeight}, {x: x + w, y: h + randHeight}, {x: x + w, y: height}, {x: x, y: height}] }); this.block.ns+= this.block.increment; this.addMarker(); } }, load: function(s) { var obj = Object.keys(this.images); this.images[obj[this.imageIndex]] = this.images[obj[this.imageIndex]](); this.imageIndex++; background(255, 240, 220); pushStyle(); fill(85, 85, 85); textAlign(CENTER, CENTER); textSize(40); text('LOADING', width/2, height/2); noFill(); stroke(250, 115, 105); 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 { //load character images into array this.characters[0].img = this.images.character1; this.characters[1].img = this.images.character2; this.characters[2].img = this.images.character3; this.characters[3].img = this.images.character4; this.characters[4].img = this.images.character5; this.characters[5].img = this.images.character6; this.characters[6].img = this.images.character7; this.characters[7].img = this.images.character8; this.characters[8].img = this.images.character9; this.characters[9].img = this.images.character10; this.characters[10].img = this.images.character11; this.characters[11].img = this.images.character12; this.characters[12].img = this.images.character13; this.characters[13].img = this.images.character14; this.characters[14].img = this.images.character15; this.characters[15].img = this.images.character16; this.characters[16].img = this.images.character17; this.characters[17].img = this.images.character18; this.characters[18].img = this.images.character19; this.characters[19].img = this.images.character20; this.player.character = this.characters[this.characterIndex].img; this.loaded = true; this.scene = s; } }, updateBlocks: function() { for(var i = 0; i < this.blocks.length; i++) { var block = this.blocks[i]; if(block.x + block.w < -this.block.w.max - this.cam.x) { this.blocks.splice(i--, 1); } } while(this.blocks[this.blocks.length-1].x < width + this.block.w.max * 4 - this.cam.x) { var n = noise(this.block.ns); var h = map(n, this.block.mapping.from, this.block.mapping.to, this.block.mapping.ymin, this.block.mapping.ymax); var w = random(this.block.w.min, this.block.w.max) \| 0; var lastBlock = this.blocks[this.blocks.length - 1]; this.blocks.push({ x: lastBlock.x + lastBlock.w, y: 0, w: w, h: h, coords: [ {x: lastBlock.x + lastBlock.w, y: 0}, {x: lastBlock.x + lastBlock.w + w, y: 0}, {x: lastBlock.x + lastBlock.w + w, y: h}, {x: lastBlock.x + lastBlock.w, y: h}] }); var randHeight = random(200, 450); this.blocks.push({ x: lastBlock.x + lastBlock.w, y: h + randHeight, w: w, h: height, coords: [ {x: lastBlock.x + lastBlock.w, y: h + randHeight}, {x: lastBlock.x + lastBlock.w + w, y: h + randHeight}, {x: lastBlock.x + lastBlock.w + w, y: height}, {x: lastBlock.x + lastBlock.w, y: height}] }); this.block.ns+= this.block.increment; this.addMarker(); this.addBit(); this.addGem(); } }, updateBits: function() { var bottomBoundary = { x: this.boundary.bottom.x - this.cam.x, y: this.boundary.bottom.y, w: this.boundary.bottom.w, h: this.boundary.bottom.h }; var topBoundary = { x: this.boundary.top.x - this.cam.x, y: this.boundary.top.y, w: this.boundary.top.w, h: this.boundary.top.h }; for(var i = 0; i < this.bits.length; i++) { var bit = this.bits[i]; if(bit.type === "moving") { if(bit.dir === 1) { if(this.rectRectCollision(bit, bit.bottom) \|\| this.rectRectCollision(bit, bottomBoundary)) { bit.dir = -1; } } else { if(this.rectRectCollision(bit, bit.top) \|\| this.rectRectCollision(bit, topBoundary)) { bit.dir = -1; } } bit.y+= bit.speed * bit.dir; bit.coords[0].x = bit.x; bit.coords[0].y = bit.y; bit.coords[1].x = bit.x + bit.w; bit.coords[1].y = bit.y; bit.coords[2].x = bit.x + bit.w; bit.coords[2].y = bit.y + bit.h; bit.coords[3].x = bit.x; bit.coords[3].y = bit.y + bit.h; } if(bit.x + bit.w < -this.block.w.max - this.cam.x) { this.bits.splice(i--, 1); } } }, updateGems: function() { for(var i = this.gems.length - 1; i >= 0; i--) { var gem = this.gems[i]; gem.angle+= gem.rot; this.setCoords(gem); if(this.rotatedRectCollision(gem.coords, this.player.coords)) { gem.x+= this.cam.x; gem.y+= this.cam.y; gem.angle+= 360; this.gem.arr.push(gem); this.gems.splice(i, 1); } else if(gem.x + gem.w < -this.block.w.max - this.cam.x) { this.gems.splice(i, 1); } } for(var i = this.gem.arr.length - 1; i >= 0; i--) { var gem = this.gem.arr[i]; gem.x = lerp(gem.x, this.gem.dest.x, 0.07); gem.y = lerp(gem.y, this.gem.dest.y, 0.07); gem.angle = lerp(gem.angle, 0, 0.07); gem.w = lerp(gem.w, this.gem.dest.w, 0.07); gem.h = lerp(gem.h, this.gem.dest.h, 0.07); if(dist(gem.x, gem.y, this.gem.dest.x, this.gem.dest.y) < 2) { this.gem.value++; this.gem.arr.splice(i, 1); } } }, updateParallax: function() { //front parallax this.parallax.front.x1-= this.player.vx * this.parallax.front.speed; this.parallax.front.x2-= this.player.vx * this.parallax.front.speed; if(this.parallax.front.x1 + this.cam.x <= -this.images.parallaxFront.width) { this.parallax.front.x1 = this.parallax.front.x2 + this.images.parallaxFront.width; } if(this.parallax.front.x2 + this.cam.x <= -this.images.parallaxFront.width) { this.parallax.front.x2 = this.parallax.front.x1 + this.images.parallaxFront.width; } //back parallax this.parallax.back.x1-= this.player.vx * this.parallax.back.speed; this.parallax.back.x2-= this.player.vx * this.parallax.back.speed; if(this.parallax.back.x1 + this.cam.x <= -this.images.parallaxBack.width) { this.parallax.back.x1 = this.parallax.back.x2 + this.images.parallaxBack.width; } if(this.parallax.back.x2 + this.cam.x <= -this.images.parallaxBack.width) { this.parallax.back.x2 = this.parallax.back.x1 + this.images.parallaxBack.width; } }, drawGems: function() { stroke(this.color); strokeWeight(2); fill(this.gem.color); for(var i = 0; i < this.gems.length; i++) { var gem = this.gems[i]; translate(gem.x + gem.w / 2, gem.y + gem.h / 2); rotate(gem.angle); rect(-gem.w / 2, -gem.h / 2, gem.w, gem.h); rotate(-gem.angle); translate(-(gem.x + gem.w / 2), -(gem.y + gem.h / 2)); } strokeWeight(1); }, drawGemsCollected: function() { stroke(this.color); strokeWeight(2); fill(this.gem.color); for(var i = 0; i < this.gem.arr.length; i++) { var gem = this.gem.arr[i]; translate(gem.x + gem.w / 2, gem.y + gem.h / 2); rotate(gem.angle); rect(-gem.w / 2, -gem.h / 2, gem.w, gem.h); rotate(-gem.angle); translate(-(gem.x + gem.w / 2), -(gem.y + gem.h / 2)); } strokeWeight(1); }, updateCharacter: function(index) { var character = this.characters[index]; this.characterIndexSelected = index; if(character.purchased) { this.characterIndex = index; this.player.character = character.img; } }, buyCharacter: function() { var selectedCharacter = this.characters[this.characterIndexSelected]; selectedCharacter.purchased = true; this.gem.value-= selectedCharacter.cost; this.characterIndex = this.characterIndexSelected; this.player.character = selectedCharacter.img; }, clearSelectedButtons: function(button) { for(var i = 0; i < this.characterButtons.length; i++) { this.characterButtons[i].selected = false; } button.selected = true; }, 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 if (uA >= 0 && uA <= 1 && uB >= 0 && uB <= 1) { // calculate the intersection point var intersectX = x1 + (uA * (x2-x1)); var intersectY = y1 + (uA * (y2-y1)); return { result: true, x: intersectX, y: intersectY }; } return { result: false }; }, rotatedRectCollision: 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; }, rectRectCollision: function(a, b) { return a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y; }, updateBoundary: function() { if(this.start) { this.boundary.top.coords[0].x = -this.cam.x; this.boundary.top.coords[1].x = width - this.cam.x; this.boundary.top.coords[2].x = width - this.cam.x; this.boundary.top.coords[3].x = -this.cam.x; this.boundary.bottom.coords[0].x = -this.cam.x; this.boundary.bottom.coords[1].x = width - this.cam.x; this.boundary.bottom.coords[2].x = width - this.cam.x; this.boundary.bottom.coords[3].x = -this.cam.x; } }, reset: function() { this.blocks.length = 0; this.bits.length = 0; this.trails.length = 0; this.particles.length = 0; this.color = this.colors[this.colorIndex.current]; this.score.value = 0; this.markers.arr.length = 0; this.markers.number = 1; this.bit.difficulty.value = this.bit.difficulty.min; this.player.x = 100; this.player.y = 250; this.player.angle = 0; this.player.vx = 0; this.player.vy = 0; this.cam.x = 0; this.cam.y = 0; this.shake = 0; this.parallax.front.x1 = 0; this.parallax.front.x2 = 899; this.parallax.back.x1 = 0; this.parallax.back.x2 = 899; this.over.opacity.value = 0; this.over.play.value = -height; this.over.yoff = -height; this.over.buttons.value = height; this.buttons.over.home.y = this.over.buttons.value; this.buttons.over.store.y = this.over.buttons.value; this.buttons.over.leaderboard.y = this.over.buttons.value; this.buttons.over.save.y = this.over.buttons.value; this.buttons.over.play.y = this.over.play.value; this.colorIndex.timer = 0; this.colorIndex.increment = 0; this.colorIndex.active = false; this.setup(); }, runTrails: function() { noStroke(); for(var i = this.trails.length - 1; i >= 0; i--) { var trail = this.trails[i]; trail.angle+= trail.rot; trail.opacity = constrain(trail.opacity - 10, 0, 255); fill(trail.color, trail.opacity); translate(trail.x + trail.w / 2, trail.y + trail.h / 2); rotate(trail.angle); rect(-trail.w / 2, -trail.h / 2, trail.w, trail.h); rotate(-trail.angle); translate(-(trail.x + trail.w / 2), -(trail.y + trail.h / 2)); if(trail.opacity === 0) { this.trails.splice(i, 1); } } }, validPress: function() { return !this.buttons.play.home.over() && !this.buttons.play.store.over() && !this.buttons.play.leaderboard.over() && !this.buttons.play.save.over(); }, move: function() { if(this.start) { if(this.line.active) { this.line.angle = atan2(this.line.y2 - this.line.y1, this.line.x2 - this.line.x1); this.line.vx = map(this.line.angle, 120, 0, 7, -2); this.line.vy = 5; this.player.vx = this.line.vx; this.player.rot = map(this.line.vx, 0, 7, -1, -10); this.player.angle+= -2; this.line.x2+= this.line.vx; this.line.y2-= this.line.vy; this.player.x = this.line.x2 - this.player.w / 2; this.player.y = this.line.y2 - this.player.h / 2; this.player.vy = 0; } else { this.player.x+= this.player.vx; this.player.vy+= this.player.gravity; this.player.y+= this.player.vy; this.player.angle+= this.player.rot; } if(frameCount % 10 === 0) { this.trails.push({ x: this.player.x, y: this.player.y, w: this.player.w, h: this.player.h, color: color(148, 146, 148), opacity: 200, angle: this.player.angle, rot: this.player.rot }); } // this.setCoords(this.player); } if(!this.line.active && pressed && this.validPress()) { //set initial connected line to roof this.line.x1 = this.player.x + 100; this.line.y1 = this.boundary.top.h; this.line.x2 = this.player.x + this.player.w / 2; this.line.y2 = this.player.y + this.player.h / 2; //check blocks to see if the line collides and intersection point closer to current var closest = { x: this.line.x1, y: this.line.y1, distance: dist(this.line.x1, this.line.y1, this.line.x2, this.line.y2) }; for(var i = 0; i < this.blocks.length; i++) { var block = this.blocks[i]; if(block.x + block.w > this.line.x2 && block.x < this.line.x1 && block.y === 0) { var lines = [ { x1: block.x, y1: this.boundary.top.y, x2: block.x, y2: block.h }, { x1: block.x, y1: block.h, x2: block.x + block.w, y2: block.h } ]; for(var j = 0; j < lines.length; j++) { var ln = lines[j]; var collide = this.lineLineCollision( this.line.x1, this.line.y1, this.line.x2, this.line.y2, ln.x1, ln.y1, ln.x2, ln.y2); if(collide.result) { var distance = dist(this.line.x2, this.line.y2, collide.x, collide.y); if(distance < closest.distance) { closest.x = collide.x; closest.y = collide.y; closest.distance = distance; } } } } } this.line.x1 = closest.x; this.line.y1 = closest.y; this.line.angle = atan2(this.line.y2 - this.line.y1, this.line.x2 - this.line.x1); this.line.active = true; this.player.attached = true; this.start = true; } else if(!pressed) { this.line.active = false; this.player.attached = false; } }, updateCamera: function() { this.cam.x = lerp(this.cam.x, width * 0.1 - this.player.x, 0.1) \| 0; }, draw: function() { //draw the blocks pushMatrix(); translate(this.cam.x, this.cam.y); //draw the parallax images image(this.images.parallaxBack, this.parallax.back.x1, 0); image(this.images.parallaxBack, this.parallax.back.x2, 0); image(this.images.parallaxFront, this.parallax.front.x1, 0); image(this.images.parallaxFront, this.parallax.front.x2, 0); //draw the boundary noStroke(); fill(this.color); rect(this.boundary.top.x - this.cam.x, this.boundary.top.y, this.boundary.top.w, this.boundary.top.h); rect(this.boundary.bottom.x - this.cam.x, this.boundary.bottom.y, this.boundary.bottom.w, this.boundary.bottom.h); this.updateBlocks(); for(var i = 0; i < this.blocks.length; i++) { var block = this.blocks[i]; rect(block.x, block.y, block.w, block.h); } if(this.scene === "play") { this.updateBits(); this.updateGems(); } noStroke(); fill(this.color); for(var i = 0; i < this.bits.length; i++) { var bit = this.bits[i]; rect(bit.x, bit.y, bit.w, bit.h); } this.drawGems(); this.drawMarkers(); if(this.line.active) { stroke(this.player.color); line(this.line.x1, this.line.y1, this.line.x2, this.line.y2); noStroke(); fill(this.player.color); ellipse(this.line.x1, this.line.y1, 5, 5); } this.runTrails(); this.player.draw(); popMatrix(); this.drawGemsCollected(); }, checkCrash: function() { if(this.start) { var crashed = false; this.setCoords(this.player); //check block collision for(var i = 0; i < this.blocks.length; i++) { var block = this.blocks[i]; if(this.rotatedRectCollision(this.player.coords, block.coords)) { crashed = true; break; } } //check bit collision for(var i = 0; i < this.bits.length; i++) { var bit = this.bits[i]; if(this.rotatedRectCollision(this.player.coords, bit.coords)) { crashed = true; break; } } //check boundary collision if(!crashed) { if(this.rotatedRectCollision(this.player.coords, this.boundary.top.coords)) { crashed = true; } } if(!crashed) { if(this.rotatedRectCollision(this.player.coords, this.boundary.bottom.coords)) { crashed = true; } } if(crashed) { this.start = false; this.score.played++; this.score.best = max(this.score.value, this.score.best); //add explosions for(var i = 0; i < 20; i++) { this.particles.push({ x: random(this.player.x, this.player.x + this.player.w * 0.8) + this.cam.x, y: random(this.player.y, this.player.y + this.player.h * 0.8) + this.cam.y, w: this.player.w * 0.3, h: this.player.h * 0.3, angle: 0, rot: random(3, 8) * (random() < 0.5 ? 1 : -1), vx: random(-1, 1), vy: random(-1, 1), color: this.characters[this.characterIndex].color, opacity: random(200, 250) \| 0 }); } this.shake = 20; this.scene = "gameover"; } } }, gameover: function() { background(255, 240, 220); this.updateCamera(); 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))); } //draw the blocks pushMatrix(); translate(this.cam.x, this.cam.y); //draw the parallax images image(this.images.parallaxBack, this.parallax.back.x1, 0); image(this.images.parallaxBack, this.parallax.back.x2, 0); image(this.images.parallaxFront, this.parallax.front.x1, 0); image(this.images.parallaxFront, this.parallax.front.x2, 0); //draw the boundary noStroke(); fill(this.color); rect(this.boundary.top.x - this.cam.x, this.boundary.top.y, this.boundary.top.w, this.boundary.top.h); rect(this.boundary.bottom.x - this.cam.x, this.boundary.bottom.y, this.boundary.bottom.w, this.boundary.bottom.h); for(var i = 0; i < this.blocks.length; i++) { var block = this.blocks[i]; rect(block.x, block.y, block.w, block.h); } this.updateGems(); noStroke(); fill(this.color); for(var i = 0; i < this.bits.length; i++) { var bit = this.bits[i]; rect(bit.x, bit.y, bit.w, bit.h); } this.drawGems(); this.drawMarkers(); popMatrix(); this.stats(); this.drawGemsCollected(); noStroke(); if(this.particles.length > 0) { for(var i = this.particles.length - 1; i >= 0; i--) { var particle = this.particles[i]; fill(particle.color, particle.opacity); translate(particle.x + particle.w / 2, particle.y + particle.h / 2); rotate(particle.angle); rect(-particle.w / 2, -particle.h / 2, particle.w, particle.h); rotate(-particle.angle); translate(-(particle.x + particle.w / 2), -(particle.y + particle.h / 2)); particle.x+= particle.vx; particle.y+= particle.vy; particle.angle+= particle.rot; particle.opacity = constrain(particle.opacity - 2, 0, 255); if(particle.opacity === 0) { this.particles.splice(i, 1); } } } else { this.over.opacity.value = lerp(this.over.opacity.value, this.over.opacity.max, 0.1); noStroke(); fill(this.over.color, this.over.opacity.value); rect(0, this.boundary.top.h, width, height); this.over.yoff = lerp(this.over.yoff, 0, 0.1); textAlign(RIGHT, TOP); textSize(40); fill(this.color); var maxLength = max(this.score.best.toString().length, this.score.played.toString().length); text("YOUR SCORE :\nBEST SCORE :\nGAMES PLAYED :", width / 2 + 100, this.over.yoff + 140); text(this.score.value + "\n" + this.score.best + "\n" + this.score.played, width / 2 + 120 + (maxLength * 20), this.over.yoff + 140); this.stats(); this.buttons.over.play.y = lerp(this.buttons.over.play.y, this.over.play.target, 0.1); this.buttons.over.home.y = lerp(this.buttons.over.home.y, this.over.buttons.target, 0.1); this.buttons.over.store.y = lerp(this.buttons.over.store.y, this.over.buttons.target, 0.1); this.buttons.over.leaderboard.y = lerp(this.buttons.over.leaderboard.y, this.over.buttons.target, 0.1); this.buttons.over.save.y = lerp(this.buttons.over.save.y, this.over.buttons.target, 0.1); for(var i in this.buttons.over) { this.buttons.over[i].draw(); } } }, store: function() { background(255, 240, 220); this.player.vx = 15; this.updateParallax(); pushMatrix(); translate(this.cam.x, this.cam.y); //draw the parallax images image(this.images.parallaxBack, this.parallax.back.x1, 0); image(this.images.parallaxBack, this.parallax.back.x2, 0); image(this.images.parallaxFront, this.parallax.front.x1, 0); image(this.images.parallaxFront, this.parallax.front.x2, 0); popMatrix(); var selectedCharacter = this.characters[this.characterIndexSelected]; pushStyle(); noStroke(); fill(this.color); rect(this.boundary.top.x, this.boundary.top.y, this.boundary.top.w, this.boundary.top.h); rect(this.boundary.bottom.x, this.boundary.bottom.y, this.boundary.bottom.w, this.boundary.bottom.h); textAlign(RIGHT, CENTER); fill(this.textColor); textSize(20); text(this.gem.value, width - 50, 25); stroke(this.textColor); fill(242, 234, 116); rect(width - 40, 10, 30, 30); textAlign(CENTER, CENTER); textSize(20); fill(this.textColor); text(selectedCharacter.name, width / 2, 25); if(!selectedCharacter.purchased) { fill(40); textSize(20); textAlign(CENTER, CENTER); text(selectedCharacter.name + " will cost you " + selectedCharacter.cost + " gems", width / 2, 460); if(selectedCharacter.cost <= this.gem.value) { this.buttons.store.buy.draw(); } else { textSize(16); textAlign(CENTER, CENTER); fill(40); text("Unfortunately you don't have enough gems to buy " + selectedCharacter.name, width / 2, 485); } } else { textSize(20); textAlign(CENTER, CENTER); fill(40); text(selectedCharacter.name + " is ready to play", width / 2, 460); } popStyle(); for(var i = 0; i < this.characterButtons.length; i++) { this.characterButtons[i].draw(); } this.buttons.store.play.draw(); this.buttons.store.leaderboard.draw(); this.buttons.store.home.draw(); }, leaderboard: function() { background(255, 240, 220); this.player.vx = 15; this.updateParallax(); pushMatrix(); translate(this.cam.x, this.cam.y); //draw the parallax images image(this.images.parallaxBack, this.parallax.back.x1, 0); image(this.images.parallaxBack, this.parallax.back.x2, 0); image(this.images.parallaxFront, this.parallax.front.x1, 0); image(this.images.parallaxFront, this.parallax.front.x2, 0); popMatrix(); pushStyle(); noStroke(); fill(this.color); rect(this.boundary.top.x, this.boundary.top.y, this.boundary.top.w, this.boundary.top.h * 2); rect(this.boundary.bottom.x, this.boundary.bottom.y, this.boundary.bottom.w, this.boundary.bottom.h); image(this.images.leaderboard, 0, 0); fill(this.color); textSize(20); textAlign(RIGHT, TOP); for(var i = 0; i < this.highscores.length; i++) { text(this.highscores[i].name, width / 2 + 20, 118 + i * 35); text(this.highscores[i].score, width / 2 + 90, 118 + i * 35); } popStyle(); for(var i in this.buttons.leaderboard) { this.buttons.leaderboard[i].draw(); } }, stats: function() { pushStyle(); noStroke(); textAlign(CENTER, CENTER); textSize(20); fill(this.textColor); text("HIGHSCORE: " + this.score.best, width / 2, 25); textAlign(RIGHT, CENTER); text(this.gem.value, width - 50, 25); stroke(this.textColor); fill(242, 234, 116); rect(this.gem.dest.x, this.gem.dest.y, 30, 30); popStyle(); }, drawMarkers: function() { pushStyle(); textAlign(CENTER, CENTER); textSize(40); for(var i = this.markers.arr.length - 1; i >= 0; i--) { var marker = this.markers.arr[i]; fill(marker.reached ? this.color : color(215, 200, 180)); text(marker.number, marker.x, marker.y); if(!marker.reached && this.player.x + this.player.w / 2 > marker.x) { marker.reached = true; this.score.value++; } if(marker.x + 50 < -this.cam.x) { this.markers.arr.splice(i, 1); } } popStyle(); }, updateColors: function() { if(this.start && !this.colorIndex.active && this.colorIndex.timer++ === this.colorIndex.duration) { this.colorIndex.active = true; this.colorIndex.timer = 0; this.colorIndex.previous = this.colorIndex.current; this.colorIndex.current = (this.colorIndex.current + 1) % this.colors.length; } if(this.colorIndex.active) { this.color = lerpColor(this.colors[this.colorIndex.previous], this.colors[this.colorIndex.current], this.colorIndex.increment); this.colorIndex.increment = constrain(this.colorIndex.increment + 0.02, 0, 1); if(this.colorIndex.timer++ === this.colorIndex.change) { this.colorIndex.active = false; this.colorIndex.timer = 0; this.colorIndex.increment = 0; } } }, home: function() { background(255, 240, 220); this.player.vx = 15; this.updateParallax(); pushMatrix(); translate(this.cam.x, this.cam.y); //draw the parallax images image(this.images.parallaxBack, this.parallax.back.x1, 0); image(this.images.parallaxBack, this.parallax.back.x2, 0); image(this.images.parallaxFront, this.parallax.front.x1, 0); image(this.images.parallaxFront, this.parallax.front.x2, 0); popMatrix(); pushMatrix(); translate(width / 2, 100); rotate(sin(frameCount * 2) * -20); scale(2.5); //web stroke(this.player.color); line(0, 50, 0, -50); //player noStroke(); fill(89, 204, 242); rect(-18, 45, 36, 36); //eyes fill(50); rect(20 - 18, 55, 5, 5); rect(28 - 18, 55, 5, 5); popMatrix(); pushStyle(); noStroke(); fill(this.color); rect(this.boundary.top.x, this.boundary.top.y, this.boundary.top.w, this.boundary.top.h * 2); rect(this.boundary.bottom.x, this.boundary.bottom.y, this.boundary.bottom.w, this.boundary.bottom.h); image(this.images.heading, 0, 0); fill(255); textSize(17); textAlign(CENTER, CENTER); textLeading(30); text("Click the screen to spin your web and release to let go.\nSwing through the maze collecting gems along the way.", width / 2, this.boundary.bottom.y + this.boundary.bottom.h / 2); popStyle(); for(var i in this.buttons.home) { this.buttons.home[i].draw(); } }, play: function() { background(255, 240, 220); this.updateBoundary(); this.updateColors(); this.move(); this.updateCamera(); this.draw(); this.stats(); this.checkCrash(); this.updateParallax(); if(!this.start && this.scene !== "gameover") { for(var i in this.buttons.play) { this.buttons.play[i].draw(); } } }, run: function() { 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 "gameover": this.gameover(); break; case "store": this.store(); break; case "leaderboard": this.leaderboard(); break; } this.transition.run(); cursor(hover ? 'pointer' : 'default'); clicked = hover = false; } }; return App; })(); app = new App({}); draw = function() { app.run(); };
Folds	46,48,49,51,53,55,56,58,59,61,63,181,183,222,224,529,531,580,582,613,615,3027
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgMP4hPzaCww
Votes	359
Spin-Offs	49
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, 1739459740763
Updated	8 months ago, 1744828696151
Source Deleted	unknown