Viewing Program

Program Data

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

Title	Bottle Bash (Mobile Friendly)
ID	6541849371131904
Created	3 years ago, 1652296928814
Updated	3 years ago, 1652706191197
Code	<!DOCTYPE html> <!-- 2nd on hotlist! Thanks everyone! Like breaking things? Vent your anger in this game as you destroy bottles one after the other. this game is more about quality, and less about quantity haha Can someone tell me why it runs twice as fast every time the code is changed or the program is reloaded? This game is not my invention, it is almost an exact replica of a game I found somewhere. Tell me if you know of it. Features: Responsive, as long as you reload when you change the size of the screen. (making canvas games responsive is such a pain) Your high score is saved automatically It works better on larger screens. Go to settings and click on the fullscreen icon to get a larger display. there is no sound, btw p5.js library by VEXCESS. For some reason the actual p5 cdn doesn't work --> <html> <head> <title>Bottle Bash (Mobile Friendly)</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&family=Passion+One&display=swap" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/gh/vExcess/library@main/p5.js"></script> <style> html, body { margin: 0; padding: 0; } body { overflow: hidden; } </style> </head> <body> <!-- Credit to VEXCESS for this crazy awesome piece of code that fixes one of the most annoying bugs I have ever come across --> <script> var i = requestAnimationFrame(Math.cos); while (i--) { cancelAnimationFrame(i); } </script> <!-- JavaScript --> <script type='module'> const windowLink = 'https://www.khanacademy.org/computer-programming/bottle-bash-mobile-friendly/6541849371131904' const LEADERBOARD_SCORES = [ ['LaVaNinJa28', 29], ['Mills', 57], ['theweirdkidwhocodesstuff', 36], ['Corin Fist', 40], ['Prof. P', 47], ['Freezle', 29], ["James Blagg", 56], ["bravo bravo", 42], ["CoolCodingStudios", 18], ["The No-Sock Guy", 27], ["21262", 44], ["SXB", 57], ["Crystal", 58], ["CanonRouge24", 45], ["MJW55", 27], ["Aqua Willy", 30], ["Doctor137", 42], ["Red Arrow", 39] ] / Logo / //{ let Logo = function() { var theme = [color(0, 0, 255), color(0, 255, 255), color(0, 255, 0)]; var qual = width / 20; var logoLength = 130; var s = min(width, height); var d = sqrt(width * width + height * height); var angle = atan2(height, width); var loaded = false; var imgTop, imgBottom; var loadData = function() { push(); function getColor(i) { var spacing = d / (theme.length - 1); var currentIndex = floor(i / spacing); var currentColors = [theme[currentIndex], theme[currentIndex + 1]]; return lerpColor(currentColors[0], currentColors[1], (i % spacing) / spacing); } noStroke(); for(var i = 0; i < d; i += qual) { fill(getColor(i)); push(); translate(cos(angle) * i, sin(angle) * i); rotate(angle); rectMode(CENTER); rect(0, 0, qual + 1, d); pop(); } imgTop = get(0, height / 2 - s / 2, width, s / 2); imgBottom = get(0, height / 2, width, s / 2); function drawBravo(x, y, w, c) { push(); translate(x - w / 2, y - w / 6); scale(w / 200); noFill(); strokeWeight(10); ellipse(20, 40, 30, 30); line(5, 40, 5, 5); line(50, 55, 50, 25); arc(62, 40, 30, 30, 220, 290); ellipse(93, 40, 30, 30); line(110, 25, 110, 55); line(125, 25, 140, 55); line(155, 25, 140, 55); ellipse(180, 40, 30, 30); pop(); } function drawBravos(x, y, w) { stroke(100); drawBravo(x + 1, y, w); drawBravo(x - 1, y, w); drawBravo(x, y + 1, w); drawBravo(x, y - 1, w); stroke(255); drawBravo(x, y, w); } clear() drawBravos(width / 2, height / 2 - s / 4, min(width, height) * 0.9); const textTop = get(0, height / 2 - s / 2, width, s / 2); drawBravos(width / 2, height / 2 + s / 4, min(width, height) * 0.9); const textBottom = get(0, height / 2, width, s / 2); imgTop.mask(textTop); imgBottom.mask(textBottom); loaded = true; pop(); }; var getScale = function(t) { return t < 30 ? sin(map(max(t, 0), 0, 30, 0, 125)) * 1.2 : 1; }; var time = 0; var ended = false; function run() { if(!loaded) { loadData(); } push(); imageMode(CENTER); background(0); time++; push(); translate(width / 2, height / 2 - s / 4); scale(getScale(time - 20)); image(imgTop, 0, 0); pop(); push(); translate(width / 2, height / 2 + s / 4); scale(getScale(time - 30)); image(imgBottom, 0, 0); pop(); if(time > logoLength) { ended = true } pop(); } return { run, ended: () => ended }; } //} / Helper functions / //{ const easeInQuint = t => t * t * t * t * t; Array.prototype.any = function() { return this[Math.floor(Math.random() * this.length)] } const randArray = len => Array(len).fill(null).map((_, i) => i).sort((a, b) => Math.random() - 0.5); String.prototype.capitalize = function() { return this[0].toUpperCase() + this.slice(1, this.length) } //} / Graphics / //{ // shiny button function buttonImgGenerator(x, y, s) { clear() noStroke(); var c1 = color(240, 192, 60), c2 = color(209, 142, 42); for(var i = 0; i < s; i++) { stroke(lerpColor(c1, c2, i / s)); line(x - s / 2, y - s / 2 + i, x + s / 2, y - s / 2 + i); } var gradientOverlay = get(x - s / 2, y - s / 2, s, s); clear() noStroke(); fill(255); ellipse(x, y - s / 30, s - s / 15, s - s / 15); var btnCircle = get(x - s / 2, y - s / 2, s, s); gradientOverlay.mask(btnCircle); c1 = color(255, 150); c2 = color(255, 0); clear() for(var i = 0; i < s / 4; i++) { stroke(lerpColor(c1, c2, i / (s / 4))); line(0, i, s / 2, i); } var shineOverlay = get(0, 0, s / 2, s / 4); clear() fill(255); noStroke(); ellipse(s / 4, s / 8, s / 2, s / 4); var ovalShape = get(0, 0, s / 2, s / 4); shineOverlay.mask(ovalShape); clear() noStroke(); fill(176, 109, 25); ellipse(x, y, s, s); image(gradientOverlay, x - s / 2, y - s / 2, s, s); image(shineOverlay, x - s / 4, y - s / 2 + s / 20, s / 2, s / 4); return get(x - s / 2, y - s / 2, s, s); } // was a gradient menu title, not using it tho function textImg(x, y, s) { textFont("Passion One"); noStroke(); const color1 = color(255); const color2 = color(100, 255, 255); for (var i = 0; i < s; i++) { fill(lerpColor(color1, color2, i / s)); rect(x - s / 2, y - s / 2 + i, s, 1); } const img = get(x - s / 2, y - s / 4, s, s / 2); clear(); textAlign(CENTER, CENTER); fill(255); noStroke(); textSize(s / 3); text("BOTTLE", x, y - s / 8); textSize(s / 3); text("SMASH", x, y + s / 8); const textImg = get(x - s / 2, y - s / 2, s, s); img.mask(textImg); return img; } // wood background function woodBG() { const w = width, h = height; let img = createGraphics(w, h, P2D); img.background(50); img = img.get() img.loadPixels(); let d = img.imageData.data; for(var x = 0; x < w; x++) { for(var y = 0; y < h; y++) { var i = x + y * w << 2; if((noise(x / 5, y / 100) + noise(x / 300, y / 300)) / 2 < 0.4) { d[i] = 100; d[i + 1] = 100; d[i + 2] = 100; } } } img.updatePixels(); return img; } // icons used for buttons const icons = { gear(x, y, s, c) { push() stroke(c); strokeWeight(s / 5); noFill(); ellipse(x, y, s - s / 2.3, s - s / 2.3); rectMode(CENTER) fill(c) noStroke() for(var i = 0; i < 360; i += 360 / 8) { push(); translate(x + cos(i) * s * 0.37, y + sin(i) * s * 0.37) rotate(i) rect(0, 0, s / 5, s / 5, 2); pop(); } pop() }, play(x, y, s, c) { push(); stroke(c) strokeWeight(s / 3) strokeJoin(ROUND) push() translate(x, y) beginShape() for(var i = 0; i < 360; i += 360 / 3) { vertex(cos(i) * s / 3, sin(i) * s / 3) } endShape(CLOSE) pop() pop(); }, lead(x, y, s, c) { push() fill(c) noStroke() rectMode(CENTER) rect(x, y, s / 6, s * 0.7) rect(x + s / 4, y + s / 10, s / 6, s / 2.0) rect(x - s / 4, y + s / 5.5, s / 6, s / 3.0) pop(); }, wrong(x, y, s, opacity = 255) { stroke(255, opacity); strokeWeight(1); fill(255, 0, 0, opacity); push(); translate(x, y); rotate(45); beginShape(); vertex(-s / 8, -s / 2); vertex(s / 8, -s / 2); vertex(s / 8, -s / 8); vertex(s / 2, -s / 8); vertex(s / 2, s / 8); vertex(s / 8, s / 8); vertex(s / 8, s / 2); vertex(-s / 8, s / 2); vertex(-s / 8, s / 8); vertex(-s / 2, s / 8); vertex(-s / 2, -s / 8); vertex(-s / 8, -s / 8); endShape(CLOSE); pop(); }, right(x, y, s, opacity = 255) { stroke(255, opacity); strokeWeight(1); fill(0, 255, 0, opacity); push(); translate(x + s / 10, y); rotate(45); beginShape(); vertex(-s / 8, -s / 2); vertex(s / 8, -s / 2); vertex(s / 8, s / 2); vertex(-s / 2, s / 2); vertex(-s / 2, s / 2 - s / 4); vertex(-s / 8, s / 4); endShape(CLOSE); pop(); }, sound(x, y, s, c) { fill(c); noStroke(); push(); translate(x, y); beginShape(); vertex(-s / 2, -s / 4); vertex(-s / 4, -s / 4); vertex(0, -s / 2); vertex(0, s / 2); vertex(-s / 4, s / 4); vertex(-s / 2, s / 4); endShape(); stroke(c); noFill(); strokeWeight(s / 20); strokeCap(SQUARE); arc(0, 0, s * 0.8, s * 0.8, -70, 70); arc(0, 0, s * 0.6, s * 0.6, -70, 70); arc(0, 0, s * 0.4, s * 0.4, -70, 70); pop(); }, noSound(x, y, s, c) { fill(c); noStroke(); push(); translate(x, y); beginShape(); vertex(-s / 2, -s / 4); vertex(-s / 4, -s / 4); vertex(0, -s / 2); vertex(0, s / 2); vertex(-s / 4, s / 4); vertex(-s / 2, s / 4); endShape(); stroke(c); noFill(); strokeWeight(s / 20); strokeCap(SQUARE); line(s / 10, s / 7, s / 2.5, -s / 7); line(s / 10, -s / 7, s / 2.5, s / 7); pop(); }, back(x, y, s, c) { fill(c); noStroke(); push(); translate(x - s / 7, y); scale(1.3); stroke(c); noFill(); strokeWeight(s / 8); strokeCap(SQUARE); arc(s / 4 - s / 16, 0, s - s / 2, s - s / 2, -90, 90); line(s / 4 - s / 16, -s / 4, 0, -s / 4); line(s / 4 - s / 16, s / 4, 0, s / 4); noStroke(); fill(c); triangle(0, -s / 4 - s / 8, 0, -s / 4 + s / 8, -s / 8, -s / 4); pop(); }, fullscreen(x, y, s, c) { push() translate(x, y) scale(s / dist(0, 0, s, s)) translate(-x, -y) noStroke(); fill(c); rect(x - s / 2, y - s / 2, s / 8, s / 3); rect(x - s / 2, y - s / 2, s / 3, s / 8); rect(x + s / 2 - s / 8, y - s / 2, s / 8, s / 3); rect(x + s / 2 - s / 3, y - s / 2, s / 3, s / 8); rect(x - s / 2, y + s / 2 - s / 3, s / 8, s / 3); rect(x - s / 2, y + s / 2 - s / 8, s / 3, s / 8); rect(x + s / 2 - s / 9, y + s / 2 - s / 3, s / 8, s / 3); rect(x + s / 2 - s / 3, y + s / 2 - s / 8, s / 3, s / 8); pop() }, info(x, y, s, c) { noStroke(); fill(c); rect(x - s / 8, y - s / 9, s / 4, s / 2); ellipse(x, y - s / 3, s / 4, s / 4); } } // easy to an icon function drawIcon(t, x, y, s, c) { icons[t](x, y + 3, s, color(100, 100)) icons[t](x, y, s, c) } // draws an arrow function drawArrow(x, y, s, dir) { push() translate(x, y) scale(1, dir) noFill() stroke(255) strokeWeight(s / 10) beginShape() vertex(-s / 2, 0) vertex(-s / 6, 0) vertex(-s / 6, -s / 2) vertex(s / 6, -s / 2) vertex(s / 6, 0) vertex(s / 2, 0) vertex(0, s / 2) endShape(CLOSE) pop() } // draws a bottle const drawBottle = function(x, y, h, f, c, s = 100) { push() translate(x, y) scale(s / 100) translate(-x, -y) const capPalette = [ c === 0 ? color(0) : color(100), c === 0 ? color(255) : c === 1 ? color(150) : color(0) ] noStroke(); fill(255); rect(x - 50, y - h + 35, 100, h - 35, 15) rect(x - 12, y - h + 25, 24, 10); fill(0); rect(x - 12, y - h + 20, 24, 5); stroke(capPalette[0]) fill(capPalette[1]) rect(x - 20, y - h, 40, 20, 3); line(x - 13, y - h, x - 13, y - h + 20) line(x + 13, y - h, x + 13, y - h + 20) line(x - 5, y - h, x - 5, y - h + 20) line(x + 5, y - h, x + 5, y - h + 20); const bh = h - 45; noStroke(); fill(200, 230, 255); rect(x - 45, y - h + 40 + bh * (1 - f), 90, bh * f, 0, 0, 15, 15); fill(0) ellipse(x - 25, y - h + h * 0.7, 17, 17); ellipse(x + 25, y - h + h * 0.7, 17, 17); noFill() stroke(0) var my = y - h + h * 0.7 + 5 beginShape(); vertex(x - 10, my) vertex(x - 5, my + 5) vertex(x, my) vertex(x + 5, my + 5) vertex(x + 10, my) endShape(); noStroke() fill(0, 18) rect(x, y - h + 35, 50, h - 35, 0, 15, 15, 0) rect(x, y - h + 25, 15, 10) rect(x, y - h, 20, 20) pop() } // handles all the images const img = { imgs: { button: () => buttonImgGenerator(width / 2, height / 2, min(width, height)), title: () => textImg(width / 2, height / 2, min(width, height)), bg: woodBG }, loadIndex: 0, loaded: false, load() { if(this.loadIndex >= Object.keys(this.imgs).length) { return this.loaded = true; } const key = Object.keys(this.imgs)[this.loadIndex] this.imgs[key] = this.imgs[key]() this.loadIndex++; background(0); fill(255) noStroke() textSize(min(width, height) / 10) text("Loading...", width / 2, height / 2) }, display(name, x, y, w, h) { const _img = this.imgs[name] if(!_img) { throw new Error('Image not loaded or does not exist') } if(!h) { h = w / _img.width * _img.height } image(_img, x, y, w, h) } } //} / Particles / //{ const GRAVITY = 0.5 const particles = [] class Particle { constructor(x, y) { this.x = x this.y = y this.xVel = 0 this.yVel = 0 this.damping = 0.95 this.rotation = 0 this.rotationSpeed = 0 this.mass = 0 this.opacity = 1 this.fadeSpeed = 0.03 this.dead = false } update() { this.x += this.xVel = this.xVel * this.damping if(this.mass) this.yVel += GRAVITY this.y += this.yVel = this.yVel * this.damping this.rotation += this.rotationSpeed this.opacity = max(this.opacity - this.fadeSpeed, 0) } } class ShatterParticle extends Particle { constructor(x, y) { super(x, y) this.size = min(width, height) / 20 this.rotation = random(0, 360) this.rotationSpeed = random(-1, 1) this.shape = this.generateShape() this.xVel = random(-4, 4) this.yVel = random(-4, 4) this.damping = 0.97 particles.push(this) } generateShape() { const vertices = [] for(var i = 0; i < 360; i += 360 / 10) { vertices.push({ x: cos(i) * this.size * random(0.5, 1) + random(this.size / 5) - this.size / 10, y: sin(i) * this.size * random(0.5, 1) + random(this.size / 5) - this.size / 10 }) } return vertices } update() { if(this.opacity <= 0) { this.dead = true } super.update() } display() { fill(255, this.opacity * 150) noStroke() push() translate(this.x, this.y) rotate(this.rotation) beginShape() for(var i = 0; i < this.shape.length; i++) { vertex(this.shape[i].x, this.shape[i].y) } endShape() pop() } } class BottleParticle extends Particle { constructor(x, y, t) { super(x, y) this.mass = 1 this.bottle = bottleTypes[t] this.rotation = random(0, 360) this.rotationSpeed = random(-3, 3) this.size = min(width / 10, height / 10) } display() { push() translate(this.x, this.y) rotate(this.rotation) drawBottle(0, (this.size / 100 * this.bottle.height / 2), this.bottle.height, this.bottle.full, this.bottle.cap, this.size) pop() } } class AlertParticle extends Particle { constructor(x, y, type) { super(x, y) this.size = min(width, height) / 10 this.yVel = -2 this.damping = 0.97 this.icon = type === 'right' ? icons.right : icons.wrong this.fadeSpeed = 0.05 particles.push(this) } display() { this.icon(this.x, this.y, this.size, this.opacity * 255) } update() { if(this.opacity <= 0) this.dead = true super.update() } } //} / Popups / //{ const popups = { arr: [], add(p) { this.arr.push(p) return p }, run() { for(var i = this.arr.length - 1; i >= 0; i--) { this.arr[i].update() this.arr[i].display() if(this.arr[i].dead) { this.arr.splice(i, 1) } } }, clearAll() { this.arr = [] } } class Popup { constructor() { this.scale = 0 this.speed = 5 this.time = 0 this.closed = false } update() { this.time += this.speed this.scale = this.closed ? (this.time < 130 ? cos(this.time - 40) * 1.4 : 0) : (this.time < 70 ? sin(this.time * 1.8) * 1.2 : 1); if(this.closed && this.time > 130) { this.dead = true } } close() { this.time = 0 this.closed = true } destroy() { this.dead = true } } class TimeoutPopup extends Popup { constructor() { super() this.speed = 3 } display() { push() translate(width / 2, height / 2.2) scale(this.scale) textFont('Passion One') textSize(min(width / 8, height / 10, 80)) textAlign(CENTER, CENTER) fill(255) noStroke() text("Time!", 0, 0) pop() } } class HowtoPopup extends Popup { constructor() { super() this.pressed = false } display() { var s = min(width * 0.8, height / 3) push() translate(width / 2, height / 2) scale(this.scale) fill(220, 200, 100) noStroke() rect(-s / 2, -s, s, s * 2, s / 10) stroke(0); strokeWeight(1); textSize(s / 6) textFont('Passion One') textAlign(CENTER, CENTER) fill(0) text("How to play", 0, -s / 1.5 + 3); fill(255); text("How to play", 0, -s / 1.5); textFont("Comic Neue") fill(255); noStroke(); textSize(s / 9) text("Break the bottles\nin the order given,\nbut be careful not\nto break the wrong\none!", 0, 0) fill(0) rect(-s * 0.4, s * 0.6, s * 0.8, s * 0.3, s / 20) fill(255) text("Let's go!", 0, s * 0.75) pop() if(!this.pressed && mouseIsPressed && abs(mouseX - width / 2) < s / 2 && abs(mouseY - height / 2) < s) { this.pressed = true this.close() } } } //} / Scene handler / //{ // draws the current scene and handles transitions const scene = { current: '', loading: false, loadTime: 0, _nextPage: null, transitionTime: 0, to(newPage, transitionTime = 0) { this.transitionTime = transitionTime this.beginFade = true this._nextPage = newPage }, onload(cb) { if(this.loading) { cb() this.loading = false } }, _scenes: {}, use(name, cb) { this._scenes[name] = cb }, fade: 0, runFade() { if(this.transitionTime === 0) { if(this._nextPage) { this._to() } return } if(this.fade > 0 \|\| this.beginFade) { const change = 255 / this.transitionTime if(this.beginFade) { this.fade += change if(this.fade >= 255) { this.beginFade = false this._to() } }else { this.fade = max(this.fade - change, 0) } fill(0, this.fade) noStroke() rect(0, 0, width, height) } }, _to() { if(!this._nextPage) return this.current = this._nextPage this._nextPage = null this.loading = true }, run() { if(this._scenes[this.current]) { this._scenes[this.current]() } this.runFade() } } //} / Screen Shake / //{ const screenshake = { x: 0, y: 0, amount: 0, time: 0, shaking: false, startedAt: null, flash: 0, shake({ amount = 5, time = 300, flash = false } = {}) { this.shaking = true this.amount = amount this.time = time if(flash) { this.flash = 1 } this.startedAt = Date.now() }, run() { this.flash = max(this.flash - 0.05, 0) if(!this.shaking \|\| !this.startedAt) return this.x = random(-1, 1) * this.amount this.y = random(-1, 1) * this.amount translate(this.x, this.y); if(Date.now() - this.startedAt > this.time) { this.shaking = false } } } //} / Button / //{ class Button { constructor(config) { this.x = config.x \|\| 0 this.y = config.y \|\| 0 this.s = config.s \|\| 100 this.baseSize = this.s this.onClick = config.onClick this.dragOver = false this.pressed = false this.icon = config.icon } display() { push() imageMode(CENTER) translate(this.x, this.y) if(this.pressed) scale(0.8, 0.8) fill(0) stroke(255) strokeWeight(3) ellipse(0, 0, this.s + 10, this.s + 10) img.display('button', 0, 0, this.s) drawIcon(this.icon, 0, 0, this.s * 0.7, color(255)) pop() } update() { if(dist(mouseX, mouseY, this.x, this.y) < this.s / 2) { if(!mouseIsPressed) { cursor('pointer') if(this.pressed) { this.onClick() } } if(mouseIsPressed && !this.pressed && !this.dragOver) { this.pressed = true; } } if(this.pressed) cursor('pointer') if(!mouseIsPressed) this.pressed = false this.dragOver = mouseIsPressed } run() { this.update() this.display() } } //} / Bottle / //{ const bottleTypes = [ { height: 200, cap: 1, full: 0.2, heightOrder: 2, capOrder: 1, fullOrder: 0 }, { height: 130, cap: 2, full: 0.7, heightOrder: 0, capOrder: 0, fullOrder: 1 }, { height: 170, cap: 0, full: 0.8, heightOrder: 1, capOrder: 2, fullOrder: 2 } ] class Bottle { constructor(type) { this.type = type this.time = 0 this.x = 0 this.y = 0 this.pressed = false this.clicked = false this.destroyed = false this.blinking = false this.blinkTimer = 0 Object.assign(this, bottleTypes[type]) } update() { this.time++; this.targetSize = min(width / 5, height / 7, 150) if(mouseX > this.x - this.targetSize / 2 && mouseX < this.x + this.targetSize / 2 && mouseY < this.y && mouseY > this.y - (this.targetSize / 100 * this.height)) { if(mouseIsPressed && !this.pressed) { this.clicked = true }else { this.clicked = false } } this.pressed = mouseIsPressed } display() { if(this.blinking) { this.blinkTimer--; if(this.blinkTimer <= 0) { this.blinking = false } if(this.blinkTimer % 10 >= 5) { return; } } drawBottle(this.x, this.y, this.height, this.full, this.cap, this.targetSize) } destroy() { this.destroyed = true for(var i = 0; i < 10; i++) { new ShatterParticle(this.x + random(this.targetSize) - this.targetSize / 2, this.y - random(this.targetSize)) } } blink(duration = 30) { if(this.blinking) return this.blinking = true this.blinkTimer = duration } } //} / Score handler / //{ class ScoreHandler { constructor() { this._last = this.getStorage('last-score') this._best = this.getStorage('highscore') this.leaderboard = LEADERBOARD_SCORES this.updateLeaderboard() console.log('best', this._best, typeof this._best) } set best(val) { this.setStorage('highscore', val) this._best = val this.updateLeaderboard() } set last(val) { this.setStorage('last-score', val) this._last = val } get best() { return this._best } get last() { return this._last } updateLeaderboard() { const index = this.leaderboard.findIndex(s => s[0] === 'You') if(index === -1) { this.leaderboard.push(["You", this._best]) }else { this.leaderboard[index][1] = this._best } this.leaderboard.sort((a, b) => b[1] - a[1]) this.playerIndex = this.leaderboard.findIndex(s => s[0] === 'You') } getStorage(key) { let item = localStorage.getItem(`BOTTLE_SMASH\|${key}`) if(!item) return 0 item = parseFloat(item) return isNaN(item) ? 0 : item } setStorage(key, value) { localStorage.setItem(`BOTTLE_SMASH\|${key}`, value) } display() { const ms = min(width, height) fill(255) noStroke() textSize(ms / 25) textAlign(RIGHT, TOP) text("Last", width / 2 - (ms / 30), ms / 40) text(this._last, width / 2 - ms / 30, ms / 15) textAlign(LEFT, TOP) text("Best", width / 2 + (ms / 30), ms / 40) text(this._best, width / 2 + ms / 30, ms / 15) rect(width / 2 - 3, ms / 40, 6, ms / 13) } } const scores = new ScoreHandler() //} / Runs the game / //{ class Game { constructor(tutorial = false) { this.queue = [] this.bottles = [] this.maxTime = 3e4 // 30 seconds this.time = this.maxTime this.startTime = null this.timeout = false this.errorTime = 5e3 this.lastUpdate = null; this.score = 0 } start() { this.generateNext() this.lastUpdate = Date.now() this.time = this.maxTime } generateNext() { const types = ['cap', 'height', 'liquid'] let type, dir; while(true) { type = Math.floor(Math.random() * types.length) dir = Math.random() - 0.5 < 0 ? -1 : 1; if(!this.lastQueue) break; if(this.lastQueue[0] === type && this.lastQueue[1] === dir) { continue; } this.lastQueue = [type, dir] break; } this.dir = dir const lang = { cap: ['dark', 'light'], height: ['short', 'tall'], liquid: ['empty', 'full'] } this.type = types[type] this.lang = lang[this.type] if(this.dir === 1) this.lang = this.lang.reverse() this.lang = this.lang.join(' to ') this.typeKey = ['capOrder', 'heightOrder', 'fullOrder'][type] this.bottles = randArray(3).map(a => { return new Bottle(a) }) this.queue = Array(3).fill(null).map((_, i) => i) if(this.dir === 1) { this.queue = this.queue.reverse() } } runTimeout() { if(!this.lastUpdate) return if(!this.timeout) { this.time -= Date.now() - this.lastUpdate this.lastUpdate = Date.now() } if(this.time <= 0 && !this.timeout) { this.timeout = true; scores.last = this.score let popup = popups.add(new TimeoutPopup()) if(this.score > scores.best) { scores.best = this.score } setTimeout(() => { scene.to('menu', 50) popup.close() }, 1000) } } run() { noStroke() fill(screenshake.flash * 100, 180 - screenshake.flash * 30) rect(0, 0, width, height) for(var i = particles.length - 1; i >= 0; i--) { particles[i].update() particles[i].display() if(particles[i].dead) { particles.splice(i, 1) } } this.runTimeout() const targetY = height * 0.7 const offset = min(width / 5, height / 7, 150) + 20 for(var i = 0; i < this.bottles.length; i++) { const bottle = this.bottles[i] if(bottle.destroyed) continue; bottle.update() bottle.x = width / 2 + ((i - 1) * offset) if(bottle.y < targetY) { bottle.y = easeInQuint(constrain(bottle.time / 15 - i / 10, 0, 1)) * targetY } bottle.display() if(bottle.clicked && !this.timeout) { if(bottle[this.typeKey] === this.queue[0]) { this.queue.shift() new AlertParticle(bottle.x, bottle.y - (bottle.targetSize / 100 * bottle.height), 'right') bottle.destroy() this.score++ screenshake.shake({ flash: true }) }else { screenshake.shake({ amount: 3 }) this.time -= this.errorTime bottle.blink() new AlertParticle(bottle.x, bottle.y - (bottle.targetSize / 100 * bottle.height), 'wrong') } } } noStroke() fill(0, 100, 150) let w = min(width * 0.8, height * 0.7, 600) rect(width / 2 - w / 2, targetY, w, w / 20) rect(width / 2 - w / 2, targetY, w, w / 20) rect(width / 2 - w / 2 + w / 40, targetY + w / 15, w / 20, w / 20) rect(width / 2 + w / 2 - w / 20 - w / 40, targetY + w / 15, w / 20, w / 20) strokeWeight(max(width, height)) var s = min(min(width, height) * 0.8, 600) stroke(0, 50) noFill() circle(width / 2, height / 2, s + max(width, height)) strokeWeight(1) noStroke() if(this.lastUpdate) { textAlign(CENTER) fill(255) textSize(min(width / 20, height / 20, 30)) text((`by ${this.type}`).toUpperCase(), width / 2, height / 4 + 10) textSize(20) text(this.lang + '', width / 2, height / 4 + 30) drawArrow(width / 2, height / 6, min(width / 5, height / 10, 100), this.dir) } noStroke() var timeW = w * 0.7 fill(255, 0, 0); rect(width / 2 - timeW / 2, height * 0.85, timeW, timeW / 10) fill(255, 255, 0) rect(width / 2 - timeW / 2, height * 0.85, max(timeW / this.maxTime * this.time, 0), timeW / 10) fill(0, 100) rect(width / 2 - timeW / 2, height * 0.85 + timeW / 20, timeW, timeW / 20) if(this.queue.length === 0 && this.lastUpdate) { this.generateNext() } } } //} / Create the scenes / //{ // bottles falling in background const bottleParticles = [] function runBottleParticles() { // bottles falling in background if(frameCount % 50 === 0) { bottleParticles.push(new BottleParticle(random(0, width), -100, floor(random(0, 3)))) } noStroke() strokeWeight(1) for(var i = bottleParticles.length - 1; i >= 0; i--) { bottleParticles[i].update() bottleParticles[i].display() if(bottleParticles[i].y > height + 100) { bottleParticles.splice(i, 1) } } } scene.use('load', () => { img.load() if(img.loaded) { scene.to('logo') } }) scene.use('logo', () => { Logo.run() if(Logo.ended()) { scene.to('menu', 40) } }) let playBtn, settingsBtn, leadBtn; scene.use('menu', () => { scene.onload(() => { const s = max(100, min(width / 4, height / 4)); const y = height - max(height / 8, s * 0.7) playBtn = new Button({ x: width / 2, y: y, s: s, icon: 'play', onClick: () => scene.to('game', 50), }) settingsBtn = new Button({ x: width / 2 - s, y: y, s: s / 2, onClick: () => scene.to('settings', 20), icon: 'gear' }) leadBtn = new Button({ x: width / 2 + s, y: y, s: s / 2, onClick: () => scene.to('leaderboard', 20), icon: 'lead' }) }) background(0) img.display('bg', 0, 0) noStroke() fill(0, 150) rect(0, 0, width, height) runBottleParticles() // making stuff responsive is such a pain var size = min(height / 2, width * 0.8, 600) noFill() stroke(0, 100) strokeWeight(max(width, height)) circle(width / 2, height / 2.2, size + max(width, height)) imageMode(CENTER) push() translate(width / 2, height / 2.2) scale(1 + sin(frameCount * 2) / 30, 1.2 - sin(frameCount * 2) / 30) rotate(sin(frameCount * 1.6) * 2) textSize(size / 2.5) fill(150, 255, 255) noStroke() textAlign(CENTER, CENTER) textFont('Passion One') text("BOTTLE", 0, -size / 7) text("SMASH", 0, size / 7) textFont('Comic Neue') pop() // buttons playBtn.s = playBtn.baseSize + cos(frameCount * 2) * playBtn.baseSize / 20 playBtn.run() settingsBtn.s = settingsBtn.baseSize + sin(frameCount * 2) * settingsBtn.baseSize / 20 settingsBtn.run() leadBtn.s = leadBtn.baseSize - sin(frameCount * 2) * leadBtn.baseSize / 20 leadBtn.run() // score panel scores.display() }) let game; let showTutorial = true, tutorialPopup; scene.use('game', () => { scene.onload(() => { game = new Game() // create a new game if(!showTutorial) { return game.start() } tutorialPopup = new HowtoPopup() setTimeout(() => popups.add(tutorialPopup), 500) showTutorial = false }) background(0) img.display('bg', 0, 0) if(tutorialPopup && tutorialPopup.dead) { tutorialPopup = null game.start() } game.run() popups.run() }) let soundBtn, menuFromSettingsBtn, fullscreenBtn, infoBtn; scene.use('settings', () => { scene.onload(() => { const s = min(width / 5, height / 5, 140) const spacing = 0.7 soundBtn = new Button({ x: width / 2 - s * spacing, y: height / 2 - s * spacing, icon: 'sound', onClick() { this.icon = (this.icon === 'sound' ? 'noSound' : 'sound') }, s }) menuFromSettingsBtn = new Button({ x: width / 2 + s * spacing, y: height / 2 - s * spacing, icon: 'back', onClick: () => scene.to('menu', 20), s }) fullscreenBtn = new Button({ x: width / 2 + s * spacing, y: height / 2 + s * spacing, icon: 'fullscreen', onClick: () => { window.open(windowLink + '?width=1000&height=600&editor=no', '_blank') } , s }) infoBtn = new Button({ x: width / 2 - s * spacing, y: height / 2 + s * spacing, icon: 'info', onClick: () => scene.to('menu', 20), s }) }) background(0); soundBtn.run() menuFromSettingsBtn.run() fullscreenBtn.run() infoBtn.run() }) let leaderboardY = 0 let leadToMenu; scene.use('leaderboard', () => { scene.onload(() => { const s = min(width / 6, height / 8, 140) leadToMenu = new Button({ x: width / 2, y: height * 0.86, s, onClick: () => scene.to('menu', 20), icon: 'back' }) leaderboardY = 0 }) img.display('bg', 0, 0) noStroke() fill(0, 150) rect(0, 0, width, height) runBottleParticles() textAlign(CENTER, CENTER) textFont('Passion One') const spacing = min(width / 15, height / 25, 40) textSize(spacing) const len = scores.leaderboard.length if(!leaderboardY) { leaderboardY = -scores.playerIndex * spacing + len / 2 * spacing } for(var i = 0; i < len; i++) { const score = scores.leaderboard[i] if(i === scores.playerIndex) { fill(255, 200, 50) }else { fill(255) } text(`#${i + 1} ${score[0]}: ${score[1]}`, width / 2, leaderboardY + height / 2.2 + i * spacing - len / 2 * spacing) } if(mouseIsPressed) { leaderboardY = floor(leaderboardY + mouseY - pmouseY) } var size = min(height / 2, width * 0.8, 600) noFill() stroke(0, 100) strokeWeight(max(width, height)) circle(width / 2, height / 2.2, size + max(width, height)) strokeWeight(1) fill(255); noStroke(); textSize(min(width / 5, height / 8, 100)) text("LEADERBOARD", width / 2, height / 8) leadToMenu.run() }) //} / PJS functions / //{ let mouseIsPressed = false function mousePressed() { mouseIsPressed = true } function mouseReleased() { mouseIsPressed = false } function setup() { createCanvas(windowWidth, windowHeight) angleMode(DEGREES) img.load() Logo = Logo() textAlign(CENTER, CENTER) scene.to('load') } function draw() { cursor() push() screenshake.run() scene.run() pop() } window.draw = draw window.setup = setup window.mousePressed = mousePressed window.mouseReleased = mouseReleased // } </script> <!-- you gotta be able to reload --> <script></script> </body> </html>
Folds	24,40,43,46
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgMP_77jPCww
Votes	220
Spin-Offs	18
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	bravo bravo
Author Name	jjroley
Author ID	kaid_3550040499775075061747637
Author Profile Access	PUBLIC

Archive Data

Added	10 months ago, 1739459029843
Updated	10 months ago, 1739459037589
Source Deleted	unknown