Viewing Program

Program Data

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

Title	SHIELD [Khantober]
ID	4685881641713664
Created	3 months ago, 1728299819733
Updated	3 months ago, 1728589515777
Code	/** * * ┏━━━┳┓╋┏┳━━┳━━━┳┓╋╋┏━━━┓ * ┃┏━┓┃┃╋┃┣┫┣┫┏━━┫┃╋╋┗┓┏┓┃ * ┃┗━━┫┗━┛┃┃┃┃┗━━┫┃╋╋╋┃┃┃┃ * ┗━━┓┃┏━┓┃┃┃┃┏━━┫┃╋┏┓┃┃┃┃ * ┃┗━┛┃┃╋┃┣┫┣┫┗━━┫┗━┛┣┛┗┛┃ * ┗━━━┻┛╋┗┻━━┻━━━┻━━━┻━━━┛ * by TDJ * Khantober 2024 * Week 1 * * Subscribe? * https://www.khanacademy.org/cs/i/4838951661649920 * * */ smooth(); size(600, 600, P2D); noStroke(); rectMode(CENTER); textAlign(CENTER, CENTER); textFont(createFont("Trebuchet MS Bold")); var scene = "logo"; var Transition; var reset; var newHigh = false; var clicked; var hover; var keys = {}; var objects = []; var particles = []; var rate = 120; function outlined(txt, x, y, sz, clr, outlineClr, outlineWidth) { textSize(sz); for (var i = 0; i < 360; i += 10) { fill(outlineClr); text(txt, x + sin(i) outlineWidth, y + cos(i) * outlineWidth); } fill(clr); text(txt, x, y); } var clrs = { green: color(64, 130, 109), yellow: color(252, 186, 4), white: color(255, 255, 255), black: color(27, 27, 27), }; var logo = { x: 300, y: 300, size: 0, spin: 0, timer: 0, }; var backdropImg = (function() { background(clrs.green); for (var i = 0; i < height; i += 10) { fill(0, i/4); rect(300, i + 5, width, 10); } for (var i = 0; i < 100; i++) { fill(60, 20); ellipse(i, 30 + i, 300 + i, 300 + i); } for (var i = 0; i < 100; i++) { fill(252, 180, 47, 7); ellipse(600 - i, 600 - i, 250 + i, 250 + i); } return get(); }) (); var fireballImg = (function() { background(255, 150, 0); for (var i = 0; i < 50; i++) { fill(255, random(80, 180), 0); rect(random(-5, 55), random(-5, 55), random(10, 30), random(10, 30)); } filter(BLUR, 2); filter(POSTERIZE, 50); var texture = get(); background(0, 0, 0); fill(255); ellipse(35, 35, 50, 50); var shape = get(); if (texture) { texture.mask(shape); } background(255, 0); for (var i = 0; i < 20; i++) { fill(255, 100, 0, 20); ellipse(35, 35, 50 + i, 50 + i); } image(texture, 0, 0); return get(0, 0, 100, 100); }) (); var leaders = [ ["TDJ", 148], ["Avenger", 55], ["Panda15", 76], ["Ibraheem Ahmed", 63], ["Duke™", 128], ["Cubic Coding", 25], ["21262", 72], ["seattlegirljewels27", 98], ["The Coding Speedster", 180], ["caf3820", 107], ["Blue Dragon™", 170], ["LemonTurtle", 135], ["VVhiteTiger", 150], ["ASBackup", 106], ["honeyghost", 45], ["SnackerDavis", 73], ["Red Reaper", 105], ["Luke Ellis", 509], ["octobrush", 255], ["Pineapples", 215], ["pEEKER21", 275], ["p0tat0s_gUn", 115], ["Patrick", 87], ["CodingChamp01", 200], ["Cheesecake Programming", 56], ].sort(function(a, b) { return b[1] - a[1]; }); function collide(a, b) { return dist(a.x, a.y, b.x, b.y) < (a.d + b.d) / 2; } function Button(config) { this.x = config.x; this.y = config.y; this.w = config.w; this.h = config.h; this.txt = config.txt; this.action = config.action; this.show = config.show; this.size = 0; this.o = 0; } Button.prototype.run = function() { if (mouseX > this.x - this.w / 2 && mouseX < this.x + this.w / 2 && mouseY > this.y - this.h / 2 && mouseY < this.y + this.h / 2) { this.o = lerp(this.o, 20, 0.1); this.size = lerp(this.size, 1.1, 0.1); hover = true; if (clicked) { this.action(); } } else { this.o = lerp(this.o, 0, 0.1); this.size = lerp(this.size, 1, 0.1); } pushMatrix(); translate(this.x, this.y); scale(this.size); fill(clrs.white, this.o); stroke(clrs.white); strokeWeight(this.w / 80); rect(0, 0, this.w, this.h); noStroke(); outlined(this.txt, 0, 0, this.h * 0.6, clrs.white, clrs.black, 4); popMatrix(); }; var btns = [ new Button({ x: 300, y: 275, w: 400, h: 60, txt: "Play", action: function() { Transition.next = "game"; reset(); }, show: "menu", }), new Button({ x: 300, y: 350, w: 400, h: 60, txt: "How", action: function() { Transition.next = "how"; }, show: "menu", }), new Button({ x: 300, y: 425, w: 400, h: 60, txt: "Leaderboard", action: function() { Transition.next = "lead"; }, show: "menu", }), new Button({ x: 300, y: 500, w: 400, h: 60, txt: "Sub?", action: function() { println("https://www.khanacademy.org/cs/i/4838951661649920"); }, show: "menu", }), new Button({ x: 300, y: 500, w: 400, h: 70, txt: "Back", action: function() { Transition.next = "menu"; }, show: "how", }), new Button({ x: 300, y: 500, w: 400, h: 70, txt: "Back", action: function() { Transition.next = "menu"; }, show: "lead", }), new Button({ x: 300, y: 450, w: 400, h: 70, txt: "Replay", action: function() { Transition.next = "game"; reset(); }, show: "dead", }), new Button({ x: 300, y: 550, w: 400, h: 70, txt: "Back", action: function() { Transition.next = "menu"; }, show: "dead", }), ]; function Particle(config) { this.x = config.x; this.y = config.y; this.r = random(0, 360); this.d = config.d; this.vel = config.vel; this.clr = config.clr; this.o = config.o; this.fade = config.fade; this.shrink = config.shrink; this.dead = false; } Particle.prototype.display = function() { pushMatrix(); translate(this.x, this.y); fill(this.clr, this.o); ellipse(0, 0, this.d, this.d); popMatrix(); }; Particle.prototype.update = function() { this.x += -cos(this.r) * this.vel; this.y += -sin(this.r) * this.vel; this.d -= this.shrink; this.o -= this.fade; if (this.o <= 0) { this.dead = true; } }; var Player = { x: 300, y: 270, d: 30, vel: 0, shield: { sz: 150, w: 60, r: 330, points: [], }, health: 5, highscore: 0, score: 0, display: function() { pushMatrix(); translate(this.x, this.y); rotate(this.shield.r - 90); noFill(); for (var i = 0; i < 8; i++) { stroke(lerpColor(clrs.white, clrs.yellow, 0.5), 10); strokeWeight(6 + i); arc(0, 0, this.shield.sz, this.shield.sz, this.shield.w, 360); } stroke(clrs.yellow, 10); strokeWeight(6); arc(0, 0, this.shield.sz, this.shield.sz, this.shield.w, 360); for (var i = 0; i < 8; i++) { stroke(lerpColor(clrs.white, clrs.yellow, 0.5), 100 - i * 10); strokeWeight(6 + i); arc(0, 0, this.shield.sz, this.shield.sz, 0, this.shield.w); } stroke(clrs.yellow); strokeWeight(6); arc(0, 0, this.shield.sz, this.shield.sz, 0, this.shield.w); noStroke(); popMatrix(); for (var i = 0; i < 6; i++) { fill(lerpColor(clrs.white, clrs.yellow, 0.5), 100 - i * 10); ellipse(this.x, this.y, this.d + i * 2, this.d + i * 2); } fill(clrs.yellow); ellipse(this.x, this.y, this.d, this.d); }, update: function() { if (keys[LEFT] \|\| keys[65]) { this.vel = lerp(this.vel, -5, 0.1); } else if (keys[RIGHT] \|\| keys[68]) { this.vel = lerp(this.vel, 5, 0.1); } else { this.vel = lerp(this.vel, 0, 0.1); } if (this.shield.r > 359) { this.shield.r = 0; } if (this.shield.r < 0) { this.shield.r = 360; } this.shield.r += this.vel; this.shield.r = round(this.shield.r); this.shield.w = constrain(this.shield.w, 0, 90); this.health = constrain(this.health, 0, 5); this.shield.points = []; for (var i = 0; i < 12; i++) { this.shield.points.push({ x: Player.x + cos(this.shield.r - 90 + this.shield.w * i/11) * this.shield.sz / 2, y: Player.y + sin(this.shield.r - 90 + this.shield.w * i/11) * this.shield.sz / 2, d: 6, }); } }, stat_bar: function() { stroke(80); strokeWeight(4); fill(40); beginShape(); vertex(-10, 610); vertex(610, 610); vertex(600, 550); vertex(400, 550); vertex(380, 520); vertex(220, 520); vertex(200, 550); vertex(-10, 550); endShape(CLOSE); noStroke(); for (var i = 0; i < 5; i++) { fill(80); rect(240 + i * 30, 565, 20, 50, 5); } fill(clrs.yellow); for (var i = 0; i < this.health; i++) { rect(240 + i * 30, 565, 20, 50, 5); } for (var i = 0; i < this.health; i++) { fill(lerpColor(clrs.white, clrs.yellow, 0.5), 10); for (var j = 0; j < 10; j++) { rect(240 + i * 30, 565, 20 + j, 50 + j, 5); } } fill(clrs.yellow); textSize(22); text("Score: " + this.score, 100, 575); textSize(20); text("Health: " + round(this.health/5 * 100) + "%", 500, 575); }, }; function Fireball(config) { this.r = config.r; this.d = config.d; this.vel = config.vel; this.distance = 400; this.x = Player.x + cos(this.r) * this.distance; this.y = Player.y + sin(this.r) * this.distance; } Fireball.prototype.display = function() { imageMode(CENTER); image(fireballImg, this.x + this.d / 3.5, this.y + this.d / 3.5, this.d * 2, this.d * 2); imageMode(CORNER); }; Fireball.prototype.update = function() { this.x += -cos(this.r) * this.vel; this.y += -sin(this.r) * this.vel; if (frameCount % 5 === 0) { particles.push(new Particle({ x: this.x, y: this.y, d: round(random(10, 20)), vel: random(0.5, 1.5), clr: color(255, random(80, 180), 0), o: random(100, 200), fade: 5, shrink: 0.2, })); } for (var i = 0; i < Player.shield.points.length; i++) { if (collide(this, Player.shield.points[i]) && Player.shield.w > 0) { for (var i = 0; i < 30; i++) { particles.push(new Particle({ x: this.x, y: this.y, d: round(random(10, 20)), vel: random(1, 3), clr: color(255, random(80, 180), 0), o: random(100, 200), fade: 3, shrink: 0.1, })); } Player.score++; Player.shield.w -= this.d / 5; this.dead = true; return; } } if (collide(this, Player)) { for (var i = 0; i < 30; i++) { particles.push(new Particle({ x: this.x, y: this.y, d: round(random(10, 20)), vel: random(1, 3), clr: color(255, random(80, 180), 0), o: random(100, 200), fade: 5, shrink: 0.2, })); } Player.health--; this.dead = true; } }; function Boost(config) { this.r = config.r; this.vel = config.vel; this.distance = 400; this.x = Player.x + cos(this.r) * this.distance; this.y = Player.y + sin(this.r) * this.distance; this.d = 30; this.angle = 0; this.angleVel = random(-1, 1); } Boost.prototype.display = function() { pushMatrix(); translate(this.x, this.y); rotate(this.angle); for (var i = 0; i < 10; i++) { fill(clrs.yellow, 10); ellipse(0, 0, 30 + i, 30 + i); } fill(clrs.yellow); ellipse(0, 0, 30, 30); fill(clrs.white); rect(0, 0, 10, 20); rect(0, 0, 6, 24); rect(0, 0, 20, 10); rect(0, 0, 24, 6); popMatrix(); }; Boost.prototype.update = function() { this.x += -cos(this.r) * this.vel; this.y += -sin(this.r) * this.vel; this.angle += this.angleVel; for (var i = 0; i < Player.shield.points.length; i++) { if (collide(this, Player.shield.points[i]) && Player.shield.w > 0) { for (var i = 0; i < 20; i++) { particles.push(new Particle({ x: this.x, y: this.y, d: round(random(10, 20)), vel: random(0.5, 1.5), clr: clrs.yellow, o: random(100, 200), fade: 3, shrink: 0.5, })); } this.dead = true; return; } } if (collide(this, Player)) { for (var i = 0; i < 20; i++) { particles.push(new Particle({ x: this.x, y: this.y, d: round(random(10, 20)), vel: random(0.5, 1.5), clr: clrs.yellow, o: random(100, 200), fade: 3, shrink: 0.5, })); } if (Player.shield.w < 90) { Player.shield.w += 15; } this.dead = true; } }; function Health(config) { this.r = config.r; this.vel = config.vel; this.distance = 400; this.x = Player.x + cos(this.r) * this.distance; this.y = Player.y + sin(this.r) * this.distance; this.d = 30; this.angle = 0; this.angleVel = random(-1, 1); } Health.prototype.display = function() { pushMatrix(); translate(this.x, this.y); rotate(this.angle); fill(clrs.white); ellipse(0, 0, 30, 30); for (var i = 0; i < 10; i++) { fill(clrs.white, 10); ellipse(0, 0, 30 + i, 30 + i); } fill(255, 0, 0); rect(0, 0, 5, 20); rect(0, 0, 20, 5); for (var i = 0; i < 5; i++) { fill(255, 0, 0, 30); rect(0, 0, 5 + i, 20 + i); rect(0, 0, 20 + i, 5 + i); } popMatrix(); }; Health.prototype.update = function() { this.x += -cos(this.r) * this.vel; this.y += -sin(this.r) * this.vel; this.angle += this.angleVel; for (var i = 0; i < Player.shield.points.length; i++) { if (collide(this, Player.shield.points[i]) && Player.shield.w > 0) { for (var i = 0; i < 30; i++) { particles.push(new Particle({ x: this.x, y: this.y, d: round(random(10, 20)), vel: random(0.5, 1.5), clr: clrs.white, o: random(100, 200), fade: 3, shrink: 0.5, })); } this.dead = true; return; } } if (collide(this, Player)) { for (var i = 0; i < 30; i++) { particles.push(new Particle({ x: this.x, y: this.y, d: round(random(10, 20)), vel: random(0.5, 1.5), clr: clrs.white, o: random(100, 200), fade: 3, shrink: 0.5, })); } if (Player.health < 5) { Player.health++; } this.dead = true; } }; reset = function() { Player.shield.w = 60; Player.health = 5; Player.score = 0; particles = []; objects = []; rate = 120; }; Transition = { next: "", x: -630, run: function() { if (this.next !== "") { this.x = lerp(this.x, 0, 0.1); } else { this.x = lerp(this.x, -630, 0.1); } if (this.x > -10) { scene = this.next; this.next = ""; } fill(0); for (var i = 0; i < 20; i++) { rect(300 + (i % 2 ? -1 : 1) * this.x, 15 + i * 30, 650, 30); } }, }; var Scenes = { logo: function() { background(clrs.black); stroke(50); strokeWeight(1); for (var i = 0; i < width * 2; i+= 10) { line(-600 + i, 600, i, 0); } noStroke(); pushMatrix(); translate(logo.x, logo.y); scale(logo.size * cos(logo.spin), logo.size); outlined("TDJ", 0, 0, 160, clrs.black, clrs.yellow, 4); popMatrix(); logo.timer++; logo.size = lerp(logo.size, 1, 0.02); logo.spin = lerp(logo.spin, 720, 0.02); if (logo.timer >= 300) { Transition.next = "menu"; } }, menu: function() { image(backdropImg, 0, 0); fill(clrs.white); textSize(150); outlined("SHIELD", 300, 100, 150, clrs.white, clrs.black, 6); textSize(10); text("© TDJ 2024" + (year() === 2024 ? "" : "-" + year()), 300, 590); }, game: function() { image(backdropImg, 0, 0); Player.display(); Player.update(); for (var i = 0; i < particles.length; i++) { particles[i].display(); particles[i].update(); } for (var i = particles.length - 1; i >= 0; i--) { if (particles[i].dead) { particles.splice(i, 1); } } if (frameCount % (rate * 3) === 0) { objects.push(new Boost({ r: random(0, 360), vel: random(2, 5), })); if (rate > 70) { rate--; } } if (frameCount % (rate * 5) === 0) { objects.push(new Health({ r: random(0, 360), vel: random(2, 5), })); } if (frameCount % rate === 0) { objects.push(new Fireball({ r: random(0, 360), d: round(random(20, 40)), vel: random(2, 5), })); } for (var i = 0; i < objects.length; i++) { objects[i].display(); objects[i].update(); } for (var i = objects.length - 1; i >= 0; i--) { if (objects[i].dead) { objects.splice(i, 1); } } Player.stat_bar(); if (Player.health <= 0) { newHigh = false; Transition.next = "dead"; } }, how: function() { image(backdropImg, 0, 0); outlined("HOW", 300, 100, 80, clrs.white, clrs.black, 6); fill(clrs.white); textSize(22); text("Use the left/right arrows or A/D to rotate your shield\n& block fireballs. Blocking a fireball damages your\nshield. Collect boosts to repair your shield and\nregenerate your health. Make sure not to block\nthe boosts!\nSurvive as long as possible!", 300, 250); textSize(18); text("Fireball Shield boost Health boost", 300, 430); image(fireballImg, 135, 350, 90, 90); pushMatrix(); translate(285, 380); scale(1.5); for (var i = 0; i < 10; i++) { fill(clrs.yellow, 10); ellipse(0, 0, 30 + i, 30 + i); } fill(clrs.yellow); ellipse(0, 0, 30, 30); fill(clrs.white); rect(0, 0, 10, 20); rect(0, 0, 6, 24); rect(0, 0, 20, 10); rect(0, 0, 24, 6); popMatrix(); pushMatrix(); translate(410, 380); scale(1.5); fill(clrs.white); ellipse(0, 0, 30, 30); for (var i = 0; i < 10; i++) { fill(clrs.white, 10); ellipse(0, 0, 30 + i, 30 + i); } fill(255, 0, 0); rect(0, 0, 5, 20); rect(0, 0, 20, 5); for (var i = 0; i < 5; i++) { fill(255, 0, 0, 30); rect(0, 0, 5 + i, 20 + i); rect(0, 0, 20 + i, 5 + i); } popMatrix(); }, lead: function() { image(backdropImg, 0, 0); outlined("LEADERBOARD", 300, 100, 80, clrs.white, clrs.black, 6); fill(clrs.white); textSize(20); textAlign(LEFT, CENTER); for (var i = 0; i < 10; i++) { text((i + 1) + ". " + leaders[i][0] + " - " + leaders[i][1], 175, 170 + (i * 27)); } textAlign(CENTER, CENTER); }, dead: function() { image(backdropImg, 0, 0); outlined("GAME OVER!", 300, 60, 80, clrs.white, clrs.black, 6); if (Player.score > Player.highscore) { Player.highscore = Player.score; newHigh = true; } Player.display(); fill(clrs.white); outlined("Score: " + Player.score + "\nHighscore: " + Player.highscore, 300, 270, 45, clrs.white, clrs.black, 4); if (newHigh) { pushMatrix(); translate(300, 125); rotate(sin(frameCount * 2) * 5); outlined("NEW HIGHSCORE!", 0, 0, 25, clrs.yellow, clrs.black, 6); popMatrix(); } }, }; function draw() { background(0); Scenes[scene](); for (var i = 0; i < btns.length; i++) { var btn = btns[i]; if (btn.show === scene) { btn.run(); } } Transition.run(); cursor(hover ? "pointer" : "default"); hover = false; clicked = false; } mousePressed = function() { clicked = true; }; keyPressed = function() { keys[keyCode] = true; }; keyReleased = function() { keys[keyCode] = false; };
Folds	36,44,45,50,51,57,58,77,78,105,107,132,133,135,137,139,141,153,154,178,179,270,272,284,285,291,292,301,303,419,421,429,430,434,435,489,491,502,503,519,520,562,564,575,576,595,596,638,640,647,649,670,672,847,849,865,867,869,870,872,873,875
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgNu1jbmpCAw
Votes	77
Spin-Offs	2
Type	PJS
Width	600
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	TDJ
Author Name	tdj.ka
Author ID	kaid_682972421482671044758972
Author Profile Access	PUBLIC

Archive Data

Added	23 days ago, 1734464217918
Updated	23 days ago, 1734464274720
Source Deleted	unknown