Viewing Program

Program Data

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

Title	Ball Defence (Game)
ID	5380716746555392
Created	3 years ago, 1645446211635
Updated	3 years ago, 1647382677441
Code	/ Ball Defence (Game) Gray Wolf, February 2022 @Instructions Click the mouse or press the UP key to rotate the cannon to shoot the blocks. Keep upgrading to shoot faster with more power. You'll start to get higher scores as you upgrade. Special abilities you can obtain during the game are: - speed: bullets fire more frequently - power: bullets do more damage - duo: double turrets - bomb: destroys all blocks @Save To save your game you'll need to take a spin-off then copy your save code to line 39. After you take a spin-off you'll need to go into Settings (beneath the program) and set it to 600 x 600, Save, then Refresh your browser window. @Highscores Post your highscores in the Tips & Thanks (please be honest) Note that I'll try to update them as quickly as I can. I'm in a completely different timezone to most people on KA so might take a little while. @Reference Based off the game Ball Defence on iOS @Subscribe Want to be notified when I create a new program? Sub here: https://www.khanacademy.org/cs/gray-wolf/4876588413698048 / / Put your save code here to start from where you last saved. / var saveCode = "=s=#]-]#<"; //makes items smoother on certain browsers smooth(); //set default font textFont(createFont('Trebuchet MS')); var app; var clicked = false, pressed = false, hover = false, keys = []; mouseClicked = function() { clicked = true; }; keyPressed = function() { keys[keyCode] = true; }; keyReleased = function () { keys[keyCode] = false; pressed = false; }; var Button = (function() { var Button = function(args) { this.x = args.x; this.y = args.y; this.w = args.w \|\| 200; this.h = args.h \|\| 70; this.content = args.content; this.textSize = args.textSize \|\| this.w * 0.13; this.hover = false; this.action = args.action; this.active = args.active === false ? false : true; this.backColor = args.backColor \|\| color(50, 50, 50); this.textColor = args.textColor \|\| color(255, 255, 255); this.type = args.type \|\| "standard"; }; Button.prototype = { over: function() { //check if the mouse is over the button return (mouseX > this.x && mouseX < this.x + this.w && mouseY > this.y && mouseY < this.y + this.h); }, draw: function() { //set hover based on mouse over the button this.hover = this.over(); if(this.hover) { hover = true; } //draw the button pushStyle(); noStroke(); fill(this.backColor, !this.active ? 100 : this.hover ? 150 : 220); rect(this.x, this.y, this.w, this.h); textAlign(CENTER, CENTER); textSize(this.textSize); fill(this.active ? this.textColor : color(220, 220, 220)); textLeading(this.textSize * 1.5); text(this.content, this.x + this.w / 2, this.y + this.h / 2); popStyle(); //if button is clicked and active then run the function argument if(clicked && this.active && this.hover) { this.action(); } } }; return Button; })(); var Transition = (function() { var Transition = function() { this.h = 0; this.vy = 15; this.active = false; this.scene = "home"; }; Transition.prototype = { reset: function() { this.h = 0; this.vy = 15; }, draw: function() { pushStyle(); stroke(45, 250); strokeWeight(30); fill(20); rect(-20, -20, width + 40, this.h); rect(-20, height-this.h, width + 40, this.h + 20); strokeWeight(1); popStyle(); }, 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 === "home") { app.anim.home.title.value = app.anim.home.title.base; app.anim.home.player.value = app.anim.home.player.base; app.anim.home.abilities.value = app.anim.home.abilities.base; app.anim.home.buttons.value = app.anim.home.buttons.base; } else if(this.scene === "leaderboard") { app.anim.leaderboard.title.value = app.anim.leaderboard.title.base; app.anim.leaderboard.buttons.value = app.anim.leaderboard.buttons.base; app.anim.leaderboard.scores.value = app.anim.leaderboard.scores.base; } else if(this.scene === "upgrade") { app.anim.upgrade.panel.value = app.anim.upgrade.panel.base; app.anim.upgrade.buttons.value = app.anim.upgrade.buttons.base; } 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; } }, run: function() { if(this.active) { this.draw(); this.update(); } } }; return Transition; })(); 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(20, 20, 20), outline: color(5, 5, 5), from: color(102, 99, 98), to: color(13, 13, 13), text: color(227, 227, 227) }; 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; })(); var Player = (function() { var Player = function() { this.x = 300; this.y = 300; this.diameter = 70; this.dx = 0; this.dy = 0; this.colors = { outer: color(225, 80, 70), inner: color(250, 230, 100) }; this.angle = 0; this.type = 0; this.types = [ { name: "basic", delay: 40, speed: 5, damage: 1 }, { name: "duo", delay: 40, speed: 5, damage: 1 }, { name: "rapid", delay: 30, speed: 5, damage: 1 } ]; this.turret = { len: this.diameter * 0.5, min: this.diameter * 0.3, max: this.diameter * 0.5 }; }; Player.prototype = { draw: function() { pushMatrix(); translate(this.x, this.y); rotate(this.angle); switch(this.type) { case 0: //basic pushStyle(); noStroke(); //outer fill(this.colors.outer); ellipse(0, 0, this.diameter, this.diameter); //turret fill(this.colors.inner, 200); quad(0, -this.diameter * 0.15, this.turret.len, -this.diameter * 0.2, this.turret.len, this.diameter * 0.2, 0, this.diameter * 0.15); fill(this.colors.inner); rect(this.turret.len, -this.diameter * 0.25, this.diameter * 0.1, this.diameter * 0.5); //inner fill(this.colors.inner); ellipse(0, 0, this.diameter * 0.75, this.diameter * 0.75); popStyle(); break; case 1: //duo pushStyle(); noStroke(); //outer fill(this.colors.outer); ellipse(0, 0, this.diameter, this.diameter); //turret fill(this.colors.inner, 200); quad(0, -this.diameter * 0.15, this.turret.len, -this.diameter * 0.2, this.turret.len, this.diameter * 0.2, 0, this.diameter * 0.15); fill(this.colors.inner); rect(this.turret.len, -this.diameter * 0.25, this.diameter * 0.1, this.diameter * 0.5); pushMatrix(); rotate(180); fill(this.colors.inner, 200); quad(0, -this.diameter * 0.15, this.turret.len, -this.diameter * 0.2, this.turret.len, this.diameter * 0.2, 0, this.diameter * 0.15); fill(this.colors.inner); rect(this.turret.len, -this.diameter * 0.25, this.diameter * 0.1, this.diameter * 0.5); popMatrix(); //inner fill(this.colors.inner); ellipse(0, 0, this.diameter * 0.75, this.diameter * 0.75); popStyle(); break; case 2: //rapid break; } popMatrix(); }, update: function() { this.dx = cos(this.angle); this.dy = sin(this.angle); this.turret.len = lerp(this.turret.len, this.turret.max, 0.1); }, run: function() { this.update(); this.draw(); } }; return Player; })(); var App = (function() { var App = function() { this.scene = "home"; this.started = false; this.highscores = [ { name: "Mr. X", score: 65562 }, { name: "♆ Thanatos ♆", score: 20490 }, { name: "L", score: 40110 }, { name: "Şχβ", score: 75279 }, { name: "penguin343", score: 39434 }, { name: "Kai Anderson", score: 22509 }, { name: "Leo (╯°□°)╯︵ ┻━┻", score: 23136 }, { name: "maxwell.colvin", score: 41595 }, { name: "Zoravar", score: 24289 }, { name: "jaydenmattekatt", score: 58232 } ]; this.score = { value: 0, best: 0 }; this.bullet = { delay: 1, power: 1, delayCost: 0, powerCost: 0, hits: 0, delayOffset: 0, mult: 1 }; this.ability = { delay: { value: 5, //10 min: 5, //10 max: 7, //20 }, active: false, value: 0, current: 0, timer: 0, duration: { value: 500, //600 base: 500 //600 }, values: [ { //normal block //nothing to do }, { //bomb (all blocks explode) //nothing to do }, { //duo turret duration: 600 }, { //quicker speed duration: 600 }, { //more power duration: 600 } ] }; this.points = 0; this.timer = -60; this.colors = { track: color(45, 45, 45), blocks: [ color(80, 20, 240), color(100, 20, 200), color(145, 35, 240), color(230, 50, 225), color(230, 50, 50), color(225, 80, 40), color(235, 160, 60), color(245, 195, 60), color(126, 217, 65) ] }; this.shake = 0; this.shakedown = 0.025; this.angle = 45; this.player = new Player(); this.transition = new Transition(); this.logo = new Logo({}); this.block = { diameter: 50, delay: { value: 180, min: 60, max: 180 }, hits: { min: 3, max: 5, offset: 0 } }; this.gameover = false; this.anim = { home: { title: { value: -600, base: -600 }, player: { value: -600, base: -600 }, abilities: { value: 600, base: 600 }, buttons: { value: 600, base: 600 } }, leaderboard: { title: { value: -600, base: -600 }, buttons: { value: 300, base: 300 }, scores: { value: width, base: width } }, upgrade: { panel: { value: -600, base: -600 }, buttons: { value: 300, base: 300 } } }; this.lines = { timer: 0, start: 0, end: 1 }; this.cypher = { value: "twRcfTA9l<rg>yM\|/.5pjBo31I_C?DK)Y]b+:{QNZW,dS0Vn6}[82a=47(UGvLeOFPXHqxEuikzJhm!?>$U@I&" }; this.blocks = []; this.bullets = []; this.explosions = []; this.circles = []; this.buttons = { home: { play: new Button({ x: width / 2 - 100, y: 335, content: "START", backColor: color(240, 150, 50), action: function() { app.score.value = 0; app.transition.scene = "play"; app.transition.active = true; } }), upgrade: new Button({ x: width / 2 - 100, y: 420, content: "UPGRADE", backColor: color(55, 125, 230), action: function() { app.transition.scene = "upgrade"; app.transition.active = true; } }), leaderboard: new Button({ x: width / 2 - 100, y: 505, content: "LEADERBOARD", backColor: color(230, 80, 70), action: function() { app.transition.scene = "leaderboard"; app.transition.active = true; } }), save: new Button({ x: 20, y: 505, w: 100, content: "SAVE", textSize: 22, backColor: color(100, 20, 195), action: function() { app.encode(); _clearLogs(); println("Copy the following save code to line 39\n\n" + saveCode); } }) }, leaderboard: { home: new Button({ x: width / 2 - 100, y: 505, content: "HOME", // backColor: color(55, 125, 230), action: function() { app.transition.scene = "home"; app.transition.active = true; } }), }, upgrade: { speed: new Button({ x: 110, y: 270, w: 180, backColor: color(55, 125, 230), content: "SPEED UP", active: false, action: function() { app.bullet.delay++; app.points-= app.bullet.delayCost; app.updateOffset(); app.updateCosts(); app.updateUpgradeButtons(); } }), power: new Button({ x: 310, y: 270, w: 180, backColor: color(140, 25, 15), content: "POWER UP", active: false, action: function() { app.bullet.power++; app.points-= app.bullet.powerCost; app.updateOffset(); app.updateCosts(); app.updateUpgradeButtons(); } }), play: new Button({ x: width / 2 - 100, y: 420, content: "START", backColor: color(240, 150, 50), action: function() { app.score.value = 0; app.transition.scene = "play"; app.transition.active = true; } }), home: new Button({ x: width / 2 - 100, y: 505, content: "HOME", // backColor: color(55, 125, 230), action: function() { app.transition.scene = "home"; app.transition.active = true; } }), save: new Button({ x: 20, y: 505, w: 100, content: "SAVE", textSize: 22, backColor: color(100, 20, 195), action: function() { app.encode(); _clearLogs(); println("Copy the following save code to line 39\n\n" + saveCode); } }) } }; this.images = {}; this.setup(); }; App.prototype = { setup: function() { this.decode(); this.bullets.delayHits = this.block.hits.max; this.bullets.powerHits = this.block.hits.max; this.updateCosts(); this.images.track = this.getTrack(); this.highscores.sort(function(a, b) { return b.score - a.score; }); }, updateCosts: function() { var offset = constrain(this.bullet.delay * 2 - 2, 0, Infinity); this.bullet.delayCost = ((14 + this.bullet.delay) + this.bullet.delay * (5 + offset * 6)); offset = constrain(this.bullet.power * 2 - 2, 0, Infinity); this.bullet.powerCost = ((14 + this.bullet.power) + this.bullet.power * (5 + offset * 6)); }, getTrack: function() { background(0, 0, 0, 0); pushMatrix(); translate(width/2, height/2); rotate(this.angle); translate(-width/2, -height/2); pushStyle(); noStroke(); fill(this.colors.track); rect(width * 0.44, -height, width * 0.12, height * 3); rect(-width, height * 0.44, width * 3, height * 0.12); // noFill(); // stroke(this.colors.track); // rect(width * 0.42, -height, width * 0.16, height * 3); // rect(-width, height * 0.42, width * 3, height * 0.16); // noFill(); // stroke(this.colors.track); // strokeWeight(70); // line(-width, height / 2, width * 2, height / 2); // line(width / 2, -height, width / 2, height * 2); // strokeWeight(1); // stroke(255); // line(width * 0.6, height * 0.4, width * 2, height * 0.4); // line(width * 0.6, height * 0.4, width * 0.6, -height * 2); // line(width * 0.6, height * 0.6, width * 2, height * 0.6); // line(width * 0.6, height * 0.6, width * 0.6, height * 2); // line(width * 0.4, height * 0.6, -width * 2, height * 0.6); // line(width * 0.4, height * 0.6, width * 0.4, height * 2); popStyle(); popMatrix(); return get(); }, updateUpgradeButtons: function() { this.buttons.upgrade.speed.active = (this.bullet.delayCost <= this.points) && this.bullet.delay < 30; this.buttons.upgrade.power.active = (this.bullet.powerCost <= this.points); }, reset: function() { this.blocks.length = 0; this.explosions.length = 0; this.circles.length = 0; this.bullets.length = 0; this.bullet.hits = 0; this.timer = -60; this.player.turret.len = this.player.turret.max; this.player.type = 0; this.points+= this.score.value; this.score.best = max(this.score.best, this.score.value); this.updateUpgradeButtons(); this.updateOffset(); this.gameover = false; this.shake = 0; this.bullet.mult = 1; this.bullet.delayOffset = 0; this.ability.active = false; this.ability.duration.value = this.ability.duration.base; this.ability.value = 0; this.ability.current = 0; }, encode: function() { //generate a save code based on current game state var args = []; args.push(this.score.best); args.push(this.points); args.push(this.bullet.delay); args.push(this.bullet.power); var shift = (random(12) \| 0); saveCode = ""; for(var i = 0; i < args.length; i++) { var arg = args[i].toString(); for(var j = 0; j < arg.length; j++) { var ch = arg[j]; saveCode+= this.cypher.value[this.cypher.value.indexOf(ch) + shift + j]; } saveCode+= random() < 0.33 ? "-" : random() < 0.5 ? "#" : "s"; } saveCode+= this.cypher.value[shift]; }, decode: function() { try { //decode the save code provided var arr = saveCode.split(/[-#s]/); var shift = this.cypher.value.indexOf(arr[arr.length-1]); var arrResults = Array(arr.length-1).fill(0); for(var i = 0; i < arrResults.length; i++) { for(var j = 0; j < arr[i].length; j++) { var ch = this.cypher.value[this.cypher.value.indexOf(arr[i][j]) - shift - j]; arrResults[i] = (arrResults[i].toString() + ch \| 0); } } //set resulting values this.score.best = arrResults[0]; this.points = arrResults[1]; this.bullet.delay = arrResults[2]; this.bullet.power = arrResults[3]; } catch (e) { println("You've entered an invalid save code!"); this.score.best = 0; this.points = 0; this.bullet.delay = 1; this.bullet.power = 1; } }, collision: function(circle, block) { return circle.x - circle.diameter / 2 < block.x + block.diameter && circle.x + circle.diameter / 2 > block.x && circle.y - circle.diameter / 2 < block.y + block.diameter && circle.y + circle.diameter / 2 > block.y; }, runExplosions: function() { noFill(); strokeWeight(4); for(var i = this.circles.length - 1; i >= 0; i--) { var circle = this.circles[i]; stroke(circle.color, circle.opacity); ellipse(circle.x, circle.y, circle.diameter, circle.diameter); circle.diameter= 1.02; circle.opacity = constrain(circle.opacity - 2, 0, 255); if(circle.opacity === 0) { this.circles.splice(i, 1); } } strokeWeight(1); noStroke(); rectMode(CENTER); for(var i = this.explosions.length - 1; i >= 0; i--) { var explosion = this.explosions[i]; translate(explosion.x, explosion.y); rotate(explosion.angle); fill(explosion.color, explosion.opacity); rect(0, 0, explosion.diameter, explosion.diameter); rotate(-explosion.angle); translate(-explosion.x, -explosion.y); explosion.x+= explosion.vx; explosion.y+= explosion.vy; explosion.angle+= explosion.rot; explosion.opacity = constrain(explosion.opacity - 3, 0, 255); if(explosion.opacity === 0) { this.explosions.splice(i, 1); } } rectMode(CORNER); }, addPlayerExplosion: function() { for(var i = 0; i < 20; i++) { this.explosions.push({ x: random(this.player.x + this.player.diameter 0.2, this.player.x + this.player.diameter * 0.8) - this.player.diameter / 2, y: random(this.player.y + this.player.diameter * 0.2, this.player.y + this.player.diameter * 0.8) - this.player.diameter / 2, vx: random(-1, 1), vy: random(-1, 1), diameter: this.player.diameter * 0.2, color: random() < 0.5 ? this.player.colors.inner : this.player.colors.outer, angle: random(360) \| 0, rot: random(-15, 15), opacity: random(200, 230) \| 0 }); } }, addExplosions: function(block, type) { if(type === "explode") { for(var i = 0; i < 20; i++) { this.explosions.push({ x: random(block.x + block.diameter * 0.2, block.x + block.diameter * 0.8), y: random(block.y + block.diameter * 0.2, block.y + block.diameter * 0.8), vx: random(-1, 1), vy: random(-1, 1), diameter: block.diameter * 0.2, color: this.colors.blocks[block.colorIndex], angle: random(360) \| 0, rot: random(-15, 15), opacity: random(200, 230) \| 0 }); } this.circles.push({ x: block.x + block.diameter * 0.5, y: block.y + block.diameter * 0.5, diameter: block.diameter * 0.2, color: this.colors.blocks[block.colorIndex], opacity: random(220, 250) \| 0 }); } for(var i = 0; i < 10; i++) { this.explosions.push({ x: (block.vx === 1 ? block.x + block.diameter : block.vx === -1 ? block.x : block.x + block.diameter / 2), y: (block.vy === 1 ? block.y + block.diameter : block.vy === -1 ? block.y : block.y + block.diameter / 2), vx: random(-1, 1), vy: random(-1, 1), diameter: block.diameter * 0.1, color: color(255), angle: random(360) \| 0, rot: random(-10, 10), opacity: random(200, 230) \| 0 }); } }, runBullets: function() { if(this.timer % (this.player.types[this.player.type].delay - (constrain(this.bullet.delay + this.bullet.delayOffset, 0, 30))) === 0) { this.bullets.push({ x: this.player.x + this.player.dx * this.player.turret.len, y: this.player.y + this.player.dy * this.player.turret.len, vx: this.player.dx, vy: this.player.dy, diameter: (this.ability.active && this.ability.current === 4) ? this.player.diameter * 0.3 : this.player.diameter * 0.2, speed: 5, color: color(255) }); if(this.player.type === 1) { //duo this.bullets.push({ x: this.player.x + this.player.dx * -this.player.turret.len, y: this.player.y + this.player.dy * -this.player.turret.len, vx: -this.player.dx, vy: -this.player.dy, diameter: (this.ability.active && this.ability.current === 4) ? this.player.diameter * 0.3 : this.player.diameter * 0.2, speed: 5, color: color(255) }); } this.player.turret.len = this.player.turret.min; } var destroyBlocks = false; noStroke(); for(var i = this.bullets.length - 1; i >= 0; i--) { var bullet = this.bullets[i]; fill(bullet.color); ellipse(bullet.x, bullet.y, bullet.diameter, bullet.diameter); bullet.x+= bullet.vx * bullet.speed; bullet.y+= bullet.vy * bullet.speed; if(bullet.x < -100 \|\| bullet.x > width + 100 \|\| bullet.y < -100 \|\| bullet.y > height + 100) { this.bullets.splice(i, 1); } else { for(var j = this.blocks.length - 1; j >= 0; j--) { var block = this.blocks[j]; if(this.collision(bullet, block)) { //add explosion at impact point this.addExplosions(block, "hit"); this.bullets.splice(i, 1); var damage = this.bullet.power; this.score.value+= damage; block.hits-= damage * this.bullet.mult; block.x-= block.vx * 7; block.y-= block.vy * 7; if(block.hits <= 0) { //add explosion for block including current color this.addExplosions(block, "explode"); switch(block.ability) { case 1: //bomb destroyBlocks = true; break; case 2: //duo this.ability.active = true; this.ability.value = 2; //duo this.player.type = 1; break; case 3: //speed this.ability.active = true; this.ability.value = 3; //speed this.bullet.delayOffset = 20; break; case 4: //damage this.ability.active = true; this.ability.value = 4; //speed this.bullet.mult = 3; break; } this.blocks.splice(j, 1); this.bullet.hits++; if(this.bullet.hits % 3 === 0) { this.block.hits.min+= this.bullet.delay + this.bullet.power; this.block.hits.max+= this.bullet.delay + this.bullet.power; } } else { block.colorIndex = (block.colorIndex + 1) % this.colors.blocks.length; } break; } } } } if(this.ability.active) { if(this.ability.duration.value-- === 0) { this.ability.active = false; this.ability.duration.value = this.ability.duration.base; this.player.type = 0; this.bullet.delayOffset = 0; this.bullet.mult = 1; this.ability.current = 0; } } if(destroyBlocks) { for(var i = this.blocks.length - 1; i >= 0; i--) { var block = this.blocks[i]; this.addExplosions(block, "explode"); this.score.value+= block.hits; this.bullet.hits+= block.hits; this.blocks.splice(i, 1); } this.shake = 20; } }, runBlocks: function() { if(!this.gameover) { if(this.timer % this.block.delay.value === 0) { //0 = top, 1 = right, 2 = bottom, 3 = left var pos = random(4) \| 0; //check if add ability if(++this.ability.timer % this.ability.delay.value === 0) { this.ability.value = (random(this.ability.values.length) + 1) \| 0; this.ability.current = this.ability.value; this.ability.delay.value = random(this.ability.delay.min, this.ability.delay.max) \| 0; this.ability.timer = 0; } switch(pos) { case 0: //top this.blocks.push({ x: this.player.x - this.block.diameter / 2, y: -this.block.diameter * 4, vx: 0, vy: 0.75, diameter: this.block.diameter, colorIndex: random(this.colors.blocks.length) \| 0, hits: random(this.block.hits.min, this.block.hits.max) \| 0, ability: this.ability.value }); break; case 1: //right this.blocks.push({ x: width + this.block.diameter * 3, y: this.player.y - this.block.diameter / 2, vx: -0.75, vy: 0, diameter: this.block.diameter, colorIndex: random(this.colors.blocks.length) \| 0, hits: random(this.block.hits.min, this.block.hits.max) \| 0, ability: this.ability.value }); break; case 2: //bottom this.blocks.push({ x: this.player.x - this.block.diameter / 2, y: height + this.block.diameter * 3, vx: 0, vy: -0.75, diameter: this.block.diameter, colorIndex: random(this.colors.blocks.length) \| 0, hits: random(this.block.hits.min, this.block.hits.max) \| 0, ability: this.ability.value }); break; case 3: //left this.blocks.push({ x: -this.block.diameter * 4, y: this.player.y - this.block.diameter / 2, vx: 0.75, vy: 0, diameter: this.block.diameter, colorIndex: random(this.colors.blocks.length) \| 0, hits: random(this.block.hits.min, this.block.hits.max) \| 0, ability: this.ability.value }); break; } } this.ability.value = 0; for(var i = this.blocks.length - 1; i >= 0; i--) { var block = this.blocks[i]; noStroke(); fill(this.colors.blocks[block.colorIndex]); rect(block.x, block.y, block.diameter, block.diameter); switch(block.ability) { case 1: //bomb fill(255, 255, 255); ellipse(block.x + block.diameter * 0.75, block.y + block.diameter * 0.75, block.diameter * 0.25, block.diameter * 0.25); ellipse(block.x + block.diameter * 0.75, block.y + block.diameter * 0.64, block.diameter * 0.10, block.diameter * 0.10); noFill(); stroke(255); arc(block.x + block.diameter * 0.81, block.y + block.diameter * 0.60, block.diameter * 0.12, block.diameter * 0.15, 180, 360); break; case 2: //duo fill(255, 255, 255); ellipse(block.x + block.diameter * 0.8, block.y + block.diameter * 0.7, block.diameter * 0.15, block.diameter * 0.15); ellipse(block.x + block.diameter * 0.7, block.y + block.diameter * 0.8, block.diameter * 0.15, block.diameter * 0.15); break; case 3: //speed fill(255, 255, 255, 100); ellipse(block.x + block.diameter * 0.8, block.y + block.diameter * 0.8, block.diameter * 0.15, block.diameter * 0.15); fill(255, 255, 255, 200); ellipse(block.x + block.diameter * 0.8, block.y + block.diameter * 0.7, block.diameter * 0.15, block.diameter * 0.15); fill(255, 255, 255); ellipse(block.x + block.diameter * 0.8, block.y + block.diameter * 0.6, block.diameter * 0.15, block.diameter * 0.15); break; case 4: //damage fill(255, 255, 255); ellipse(block.x + block.diameter * 0.75, block.y + block.diameter * 0.75, block.diameter * 0.25, block.diameter * 0.25); break; } translate(block.x + block.diameter / 2, block.y + block.diameter / 2); rotate(-this.angle); pushStyle(); textAlign(CENTER, CENTER); textSize(block.diameter * 0.3); fill(255); text(block.hits, 0, 0); popStyle(); rotate(this.angle); translate(-(block.x + block.diameter / 2), -(block.y + block.diameter / 2)); block.x+= block.vx; block.y+= block.vy; //if collides with the player then it's game over if(this.collision(this.player, block)) { this.gameover = true; this.shake = 25; break; } } } else { for(var i = this.blocks.length - 1; i >= 0; i--) { var block = this.blocks[i]; this.addExplosions(block, "explode"); this.blocks.splice(i, 1); } this.addPlayerExplosion(); this.timer = 0; this.scene = "over"; } }, updateOffset: function() { var offset = constrain(this.bullet.delay + this.bullet.power - 2, 0, Infinity); this.block.hits.min = 3 + offset * 2; this.block.hits.max = 5 + offset * 4; }, runLines: function() { pushMatrix(); translate(width/2, height/2); rotate(this.angle); translate(-width/2, -height/2); pushStyle(); noFill(); noStroke(); this.lines.timer = (this.lines.timer + 1) % 60; if(this.lines.timer === 0) { this.lines.start = (this.lines.start + 1) % this.colors.blocks.length; this.lines.end = (this.lines.end + 1) % this.colors.blocks.length; } var strokeColor = lerpColor(this.colors.blocks[this.lines.start], this.colors.blocks[this.lines.end], map(this.lines.timer, 0, 60, 0, 1)); fill(strokeColor, 80); rect(width * 0.43, -height, width * 0.14, height * 3); rect(-width, height * 0.43, width * 3, height * 0.14); popStyle(); popMatrix(); }, home: function() { background(20); this.runLines(); image(this.images.track, 0, 0); //slide the title down this.anim.home.title.value = ceil(lerp(this.anim.home.title.value, 0, 0.1)); pushMatrix(); translate(0, this.anim.home.title.value); pushStyle(); textAlign(CENTER, CENTER); textSize(80); fill(this.colors.blocks[0]); text("B", 220, 70); fill(this.colors.blocks[6]); text("A", 275, 70); fill(this.colors.blocks[2]); text("L", 325, 70); fill(this.colors.blocks[3]); text("L", 380, 70); textSize(50); fill(255); text("DEFENCE", 300, 135); popStyle(); popMatrix(); //slide the abilities across this.anim.home.abilities.value = floor(lerp(this.anim.home.abilities.value, 0, 0.1)); pushMatrix(); translate(this.anim.home.abilities.value, 0); pushStyle(); noStroke(); stroke(25, 40); fill(48, 48, 48); rect(260, 190, 210, 110); triangle(260, 230, 260, 260, 235, 245); stroke(255, 100); strokeWeight(2); line(365, 200, 365, 290); fill(255); textAlign(CENTER, TOP); textSize(18); text("SPEED", 312, 200); text("POWER", 417, 200); textSize(41); text(this.bullet.delay, 312, 235); text(this.bullet.power, 417, 235); popStyle(); popMatrix(); //slide the player across this.anim.home.player.value = ceil(lerp(this.anim.home.player.value, 0, 0.1)); pushMatrix(); translate(this.anim.home.player.value, 0); translate(this.player.x - 130, this.player.y - 50); rotate(-40); translate(-this.player.x, -this.player.y); this.player.draw(); popMatrix(); //slide the buttons up this.anim.home.buttons.value = floor(lerp(this.anim.home.buttons.value, 0, 0.1)); pushMatrix(); translate(0, this.anim.home.buttons.value); for(var k in this.buttons.home) { this.buttons.home[k].draw(); } popMatrix(); }, leaderboard: function() { background(20); this.runLines(); image(this.images.track, 0, 0); //slide the title down this.anim.leaderboard.title.value = ceil(lerp(this.anim.leaderboard.title.value, 0, 0.1)); pushMatrix(); translate(0, this.anim.leaderboard.title.value); pushStyle(); textAlign(CENTER, CENTER); textSize(50); fill(240, 150, 50); text("LEADERBOARD", 300, 50); popStyle(); popMatrix(); noStroke(); fill(25, 25, 25, 180); rect(0, 90, 600, 380); stroke(this.colors.blocks[5], 200); strokeWeight(2); line(0, 90, 600, 90); stroke(this.colors.blocks[6], 200); line(0, 470, 600, 470); //slide the leaderboard to the center of the screen this.anim.leaderboard.scores.value = floor(lerp(this.anim.leaderboard.scores.value, 0, 0.1)); pushMatrix(); translate(this.anim.leaderboard.scores.value, 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 + 10, 110 + i * 35); text(this.highscores[i].score, width / 2 + 80, 110 + i * 35); } popStyle(); popMatrix(); //slide the buttons into view this.anim.leaderboard.buttons.value = floor(lerp(this.anim.leaderboard.buttons.value, 0, 0.1)); pushMatrix(); translate(0, this.anim.leaderboard.buttons.value); for(var k in this.buttons.leaderboard) { this.buttons.leaderboard[k].draw(); } popMatrix(); }, upgrade: function() { background(20); this.runLines(); image(this.images.track, 0, 0); //slide the panel down this.anim.upgrade.panel.value = ceil(lerp(this.anim.upgrade.panel.value, 0, 0.1)); pushMatrix(); translate(0, this.anim.upgrade.panel.value); noStroke(); fill(25, 25, 25, 200); rect(100, 50, 400, 355); this.buttons.upgrade.speed.draw(); this.buttons.upgrade.power.draw(); pushStyle(); textAlign(CENTER, CENTER); //score (last, best) textSize(30); fill(255); text("BEST " + this.score.best + "\nSCORE " + this.score.value, width / 2, 100); //points textSize(40); fill(245, 185, 65); text(this.points + " POINTS", width / 2, 185); //upgrade buttons textSize(24); fill(255); text("LV " + this.bullet.delay, this.buttons.upgrade.speed.x + this.buttons.upgrade.speed.w / 2, this.buttons.upgrade.speed.y - 30); text("LV " + this.bullet.power, this.buttons.upgrade.power.x + this.buttons.upgrade.power.w / 2, this.buttons.upgrade.power.y - 30); fill(245, 185, 65); if(this.bullet.delay < 30) { text(this.bullet.delayCost + " POINTS", this.buttons.upgrade.speed.x + this.buttons.upgrade.speed.w / 2, this.buttons.upgrade.speed.y + this.buttons.upgrade.speed.h + 30); } else { text("MAXED OUT", this.buttons.upgrade.speed.x + this.buttons.upgrade.speed.w / 2, this.buttons.upgrade.speed.y + this.buttons.upgrade.speed.h + 30); } text(this.bullet.powerCost + " POINTS", this.buttons.upgrade.power.x + this.buttons.upgrade.power.w / 2, this.buttons.upgrade.power.y + this.buttons.upgrade.power.h + 30); popStyle(); popMatrix(); //slide the buttons into view this.anim.upgrade.buttons.value = floor(lerp(this.anim.upgrade.buttons.value, 0, 0.1)); pushMatrix(); translate(0, this.anim.upgrade.buttons.value); this.buttons.upgrade.play.draw(); this.buttons.upgrade.home.draw(); this.buttons.upgrade.save.draw(); popMatrix(); }, play: function() { background(20); //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))); } this.runLines(); image(this.images.track, 0, 0); pushMatrix(); translate(width/2, height/2); rotate(this.angle); translate(-width/2, -height/2); if(this.timer > 0) { this.runBlocks(); this.runExplosions(); this.runBullets(); this.player.run(); } else { this.player.draw(); } popMatrix(); this.timer++; if(clicked \|\| (!pressed && keys[UP])) { this.player.angle+= 90; pressed = true; if(!this.started) { this.started = true; } } pushStyle(); textAlign(CENTER, CENTER); textSize(30); fill(255); text("BEST " + this.score.best, 300, 50); textSize(50); fill(245, 185, 65); text(this.score.value, 300, 130); if(!this.started) { textSize(30); text("CLICK OR UP KEY\nTO ROTATE", 300, 450); } popStyle(); }, over: function() { background(20); //shake the screen if active if(this.shake > 0) { this.shake = lerp(this.shake, 0, this.shakedown); translate(round(random(-this.shake, this.shake)), round(random(-this.shake, this.shake))); } this.runLines(); image(this.images.track, 0, 0); pushMatrix(); translate(width/2, height/2); rotate(this.angle); translate(-width/2, -height/2); this.runExplosions(); if(this.explosions.length === 0 && this.circles.length === 0) { this.reset(); this.scene = "upgrade"; } popMatrix(); }, run: function() { switch(this.scene) { case "home": if(this.logo.done) { this.home(); } this.logo.draw(); break; case "leaderboard": this.leaderboard(); break; case "upgrade": this.upgrade(); break; case "play": this.play(); break; case "over": this.over(); break; } this.transition.run(); cursor(hover ? 'pointer' : 'default'); clicked = hover = false; } }; return App; })(); app = new App(); draw = function() { app.run(); };
Folds	56,58,59,61,62,65,67,118,120,185,187,493,495,598,600,1733
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgMPyu7fHCQw
Votes	262
Spin-Offs	100
Type	PJS
Width	600
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Gray Wolf 🐺
Author Name	grantjenkins
Author ID	kaid_639291037700385781852565
Author Profile Access	COACH

Archive Data

Added	6 months ago, 1739381276682
Updated	4 months ago, 1744845441608
Source Deleted	unknown