Viewing Program

Program Data

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

Title	Fractured Mirror
ID	6659771292647424
Created	7 years ago, 1516041693108
Updated	3 years ago, 1669856271550
Code	<!DOCTYPE html> <html> <!-- My ninth game! Started August 2017, finished January 2018! Update released March 9, 2020! Thirty levels! 1/15/2018: Got to sixth on the hotlist, then dropped down to eighth, fifteen votes. 1/16/2018: Fifth on the hotlist! That's more like it! 51 votes! 1/17/2018: Eighth on the hotlist. 63 votes! 1/20/2018: Off the hotlist. 72 votes! 8/22/2018: 93 votes! 12/22/2018: 101 votes! 3/9/2020: 111 votes! 3/11/2020: 157 votes! 11/28/2022: 197 votes! Added WASD controls! --> <!-- Head --> <head> <title>Fractured Mirror</title> <link href="https://fonts.googleapis.com/css?family=ZCOOL+KuaiLe\|Roboto+Condensed" rel="stylesheet"> <style> #canvas { position: absolute; left: 0px; top: 0px; } body { overflow: hidden; } </style> </head> <!-- Body --> <body id="body"> <!-- Canvas --> <canvas id="canvas" width="600px" height="600px"></canvas> <!-- Green Ghost's JS Library --> <script> // Get the body element. var body = document.getElementById("body"); // Gets the canvas element and allows the user to draw on the canvas. var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); // Variables hold the width and height of the canvas. var width = canvas.width; var height = canvas.height; // Controls whether to draw the stroke or fill var isStroke = true; var isFill = true; // A draw function for animation. function draw() {}; // A keyPressed function for key events. function keyPressed() {}; // A keyReleased function for key events. function keyReleased() {}; // A keyPressed function for when the user clicks. function mouseClicked() {}; // If the mouse is pressed. var mouseIsPressed; // The frameRate variable controls animation speed. var frameRate = 60; // Counts frames. var frameCount = 0; // Positions of the mouse. var mouseX = width / 2, mouseY = height / 2; // A keyCode variable. var keyCode; // Key code variables. var LEFT = 37, RIGHT = 39, UP = 38, DOWN = 40; // Alignment variables. var TOP = 0, CENTER = 1, BOTTOM = 2, BASELINE = 3 var SQUARE = "butt"; var ROUND = "round"; var PROJECT = "square"; var MITER = "miter"; var BEVEL = "bevel"; var cMode = "rgb"; var RGB = "rgb"; var HSB = "hsb"; // Aligment objects. var alignmentX = { 37 : "left", 1 : "center", 39 : "right", }; var alignmentY = { 0 : "top", 1 : "middle", 2 : "bottom", 3 : "baseline" }; // Holds current text size. var txtSize = 20, ext = "", txtLead = 1; var mainFont = "sans-serif"; / Makes functions similar to the Processing JS functions. / // Returns a random number in a certain range. function random(min, max) { if (!min) { return Math.random(); } if (!max) { max = min; min = 0; } return min + Math.random() * (max - min); }; // Returns a number from a certain range. function lerp(num1, num2, amount) { return num1 + (num2 - num1) * amount; }; // Maps a number from one range to another. function map(num, start1, stop1, start2, stop2) { return start2 + (num - start1) / stop1 * stop2; }; // varrains a number to a certain range. function varrain(num, min, max) { return Math.max(Math.min(num, max), min); }; // Finds the distance between two points. function dist(x1, y1, x2, y2) { return Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1)); }; // Makes a color (returns a string). function color(r, g, b, a) { a = a === undefined ? 255 : a; r = Math.floor(r); g = Math.floor(g); b = Math.floor(b); if (arguments.length === 0) { r = 0; g = 0; b = 0; } else if (arguments.length === 1 \|\| arguments.length === 2) { g = r; b = r; } if (arguments.length === 2) { a = g; } r = varrain(r, 0, 255); g = varrain(g, 0, 255); b = varrain(b, 0, 255); a = varrain(a, 0, 255); return a << 24 \| r << 16 \| g << 8 \| b; }; // Changes the color mode, can be RGB or HSB. function colorMode(mode) { cMode = mode; }; // Returns the red value of a color. function red(color) { return (color >> 16) & 0xFF; }; // Returns the green value of a color. function green(color) { return (color >> 8) & 0xFF; }; // Returns the blue value of a color. function blue(color) { return color & 0xFF; }; // Returns the opactiy of a color. function a(color) { return (color >> 24) & 0xFF; }; // Returns a string value color. function getUsableColor(c) { if (typeof c === "string") { return getColor(c); } else if (typeof c === "number") { if (c > 0) { return getColor(color(c)); } } return c; }; // Return a color inbetween two colors. function lerpColor(c1, c2, amount) { c1 = getUsableColor(c1); c2 = getUsableColor(c2); return color(lerp(red(c1), red(c2), amount), lerp(green(c1), green(c2), amount), lerp(blue(c1), blue(c2), amount), lerp(a(c1), a(c2), amount)); }; // Function for getting RGB values out of a hue value (credit to Stack Overflow / Wikipedia for help). function hToRGB (p, q, t) { t += t < 0 ? 1 : t > 1 ? -1 : 0; return (t < 1 / 6) ? (p + (q - p) * 6 * t) : (t < 1 / 2) ? q : (t < 2 / 3) ? (p + (q - p) * (2 / 3 - t) * 6) : p; }; // Used for getting a color from a color object. function getColor(n1, n2, n3, n4) { if (n1 === undefined) { n1 = 0; n2 = 0; n3 = 0; n4 = 1; } else if (n2 === undefined) { if (n1.isGrad) { return n1.grad; } if (n1 < 0 \|\| n1 > 255) { let c = n1; n1 = red(c); n2 = green(c); n3 = blue(c); n4 = a(c) / 255; } else { n2 = n1; n3 = n1; n4 = 1; } } else if (n3 === undefined) { if (n1 < 0 \|\| n1 > 255) { let c = n1; n4 = n2 / 255; n1 = red(c); n2 = green(c); n3 = blue(c); } else { n2 = n1; n3 = n1; n4 = n2 / 255; } } else if (n4 === undefined) { n4 = 1; } else { n4 /= 255; } if (cMode === "hsb") { n1 /= 255; n2 /= 255; n3 /= 255 * 2; let temp = n3; n3 += (1 - n2) * temp; // Again, credit to Stack Overflow / Wikipedia for help with this part. let q = n3 < 0.5 ? n3 * (1 - n2) : n3 + n2 - n3 * n2; let p = 2 * n3 - q; let r = hToRGB(p, q, n1 + 1 / 3); let g = hToRGB(p, q, n1); let b = hToRGB(p, q, n1 - 1 / 3); n1 = Math.round(r * 255); n2 = Math.round(g * 255); n3 = Math.round(b * 255); } return "rgba(" + n1 + ", " + n2 + ", " + n3 + ", " + n4 + ")"; }; // Sets fill color. function fill(r, g, b, aVal) { isFill = true; ctx.fillStyle = getColor(r, g, b, aVal); }; // Sets stroke color. function stroke(r, g, b, aVal) { isStroke = true; ctx.strokeStyle = getColor(r, g, b, aVal); }; // Gets rid of stroke. function noStroke() { isStroke = false; }; // Gets rid of fill. function noFill() { isFill = false; }; // A sine function that converts from radians to degrees. function sin(angle) { return Math.sin(angle / 180 * Math.PI); }; // A cosine function that converts from radians to degrees. function cos(angle) { return Math.cos(angle / 180 * Math.PI); }; // An atan2 function. function atan2(x, y) { return Math.atan2(x, y) / Math.PI * 180; }; // Translates to a certain point. function translate(x, y) { ctx.translate(x, y); }; // Scales the drawing. function scale(w, h) { if (h === undefined) { ctx.scale(w, w); return; } ctx.scale(w, h); }; // Rotates the drawing. function rotate(angle) { ctx.rotate(angle / 180 * Math.PI) }; // Starts transformation. function pushMatrix() { ctx.save(); }; // Finishes transformation. function popMatrix() { ctx.restore(); }; // Sets the width of lines. function strokeWeight(width) { ctx.lineWidth = width; }; // Starts a complex shape. function beginShape() { ctx.beginPath(); }; // Closes a complex shape. function endShape() { if (isFill) { ctx.fill(); } if (isStroke) { ctx.stroke(); } }; // Sets the position of the path. function setPath(x, y) { ctx.moveTo(x, y); }; // Draws a vertex for a complex shape. function vertex(x, y) { ctx.lineTo(x, y); }; // Draws a curve vertex for a complex shape. function curveVertex(cx, cy, x, y) { ctx.quadraticCurveTo(cx, cy, x, y); }; // Draws a bezier vertex for a complex shape. function bezierVertex(cx1, cy1, cx2, cy2, x, y) { ctx.bezierCurveTo(cx1, cy1, cx2, cy2, x, y); }; // Draws a curve. function curve(x1, y1, cx, cy, x2, y2) { beginShape(); setPath(x1, y1); curveVertex(cx, cy, x2, y2); endShape(); }; // Draws a bezier. function bezier(x1, y1, cx1, cy1, cx2, cy2, x2, y2) { beginShape(); setPath(x1, y1); bezierVertex(cx1, cy1, cx2, cy2, x2, y2); endShape(); }; // Draws a line. function line(x1, y1, x2, y2) { beginShape(); vertex(x1, y1); vertex(x2, y2); endShape(); }; // Draws a rectangle. function rect(x, y, w, h, r, r2, r3, r4) { r = r \|\| 0; r = varrain(r, -Math.min(w, h) / 2, Math.min(w, h) / 2); if (r2 === undefined \|\| r3 === undefined \|\| r4 === undefined) { r2 = r; r3 = r; r4 = r; } r2 = varrain(r2, -Math.min(w, h) / 2, Math.min(w, h) / 2); r3 = varrain(r3, -Math.min(w, h) / 2, Math.min(w, h) / 2); r4 = varrain(r4, -Math.min(w, h) / 2, Math.min(w, h) / 2); beginShape(); setPath(x, y + r); curveVertex(x, y, x + r, y); vertex(x + w - r2, y); curveVertex(x + w, y, x + w, y + r2); vertex(x + w, y + h - r3); curveVertex(x + w, y + h, x + w - r3, y + h); vertex(x + r4, y + h); curveVertex(x, y + h, x, y + h - r4); vertex(x, y + r); endShape(); }; // Draws an arc. function arc(x, y, w, h, start, stop) { pushMatrix(); beginShape(); translate(x, y); scale(1, h / w); ctx.arc(0, 0, w / 2, start / 180 * Math.PI, stop / 180 * Math.PI); endShape(); popMatrix(); }; // Draws an ellipse. function ellipse(x, y, w, h) { w = Math.abs(w); h = Math.abs(h); arc(x, y, w, h, 0, 360); }; // Draws a triangle. function triangle(x1, y1, x2, y2, x3, y3) { beginShape(); vertex(x1, y1); vertex(x2, y2); vertex(x3, y3); vertex(x1, y1); endShape(); }; // Draws a quad. function quad(x1, y1, x2, y2, x3, y3, x4, y4) { beginShape(); vertex(x1, y1); vertex(x2, y2); vertex(x3, y3); vertex(x4, y4); vertex(x1, y1); endShape(); }; // Fills the background. function background(r, g, b, a) { let prev = ctx.fillStyle; var wasStroke; if (isStroke) { wasStroke = true; isStroke = false; } fill(r, g, b, a); ctx.fillRect(0, 0, width, height); fill(prev); if (wasStroke) { isStroke = true; } }; // Sets text font. function textFont(font, size) { ext = ""; if (font.toLowerCase().match(" small-caps")) { font = font.substring(0, font.length - 11); ext += "small-caps "; } if (font.toLowerCase().match(" italic")) { font = font.substring(0, font.length - 7); ext += "Italic "; } if (font.toLowerCase().match(" bold")) { font = font.substring(0, font.length - 5); ext += "Bold "; } else if (font.toLowerCase().match(" black")) { font = font.substring(0, font.length - 6); ext += "Bolder "; } else if (font.toLowerCase().match(" thin")) { font = font.substring(0, font.length - 5); ext += "Lighter "; } else if (font.toLowerCase().match(" light")) { font = font.substring(0, font.length - 6); ext += "Lighter "; } size = size \|\| txtSize; txtSize = size; mainFont = font; ctx.font = ext + txtSize + "px " + mainFont; }; // Sets text size. function textSize(size) { txtSize = size \|\| 20; ctx.font = ext + txtSize + "px " + mainFont; }; // Sets text alignment. function textAlign(align, baseline) { ctx.textAlign = alignmentX[align]; ctx.textBaseline = alignmentY[baseline]; }; // Draws text. function text(txt, x, y) { if (typeof txt !== "string") { txt = txt.toString(); } var txtList = [""]; for (var i = 0; i < txt.length; i++) { if (txt.charAt(i) === "\n") { txtList.push(""); } else { txtList[txtList.length - 1] += txt.charAt(i); } } for (var i = 0; i < txtList.length; i++) { if (isFill) { ctx.fillText(txtList[i], x, y - txtList.length * txtSize * txtLead / 2 + (i + 0.5) * txtSize * txtLead); } if (isStroke) { ctx.strokeText(txtList[i], x, y - txtList.length * txtSize * txtLead / 2 + (i + 0.5) * txtSize * txtLead); } } }; // Changes txtLead variable function textLeading(amount) { txtLead = amount / 10; }; // Changes the cursor. function cursor(name) { document.body.style.cursor = name; }; // Changes the a line's cap. function strokeCap(cap) { ctx.lineCap = cap; }; // Changes the joining mode between line segments. function strokeJoin(mode) { ctx.lineJoin = mode; }; // Creates a gradient. var createGradient = function(x1, y1, x2, y2) { return {isGrad: true, grad: ctx.createLinearGradient(x1, y1, x2, y2)}; }; // Adds a color to a gradient. var addColor = function(gradient, amount, color) { gradient.grad.addColorStop(amount, getColor(color)); }; // Draws an iamge on the canvas. function image(imageName, x, y, w, h) { w = w \|\| imageName.width; h = h \|\| imageName.height; ctx.drawImage(imageName, x, y, w, h); }; // My own function to create images. var getImage = function(shapes, width, height) { let canvas = document.createElement("canvas"); canvas.width = width; canvas.height = height; canvas.display = "none"; let prevContext = ctx; ctx = canvas.getContext("2d"); shapes(); ctx = prevContext; return canvas; }; // Special methods Array.prototype.random = function() { return this[Math.floor(random(this.length))]; }; Number.prototype.smooth = function(dest, div) { return (dest - this) / div; }; String.prototype.reverse = function() { let ret = ""; for (var i = this.length - 1; i >= 0; i--) { ret += this.charAt(i); } return ret; }; // Interactivity // Moves the mouseX and mouseY variables. document.body.addEventListener("mousemove", function(event) { mouseX = event.pageX; mouseY = event.pageY; }, false); // Moves the mouseX and mouseY variables. document.body.addEventListener("touchmove", function(event) { mouseX = event.pageX; mouseY = event.pageY; }, false); // Checks for key pressed events. body.addEventListener("keydown", function(event) { event.preventDefault(); keyCode = event.keyCode; keyPressed(); }, false); // Checks for key released events. body.addEventListener("keyup", function(event) { event.preventDefault(); keyCode = event.keyCode; keyReleased(); }, false); // Checks for when the mouse is clicked. body.addEventListener("mousedown", function(event) { mouseIsPressed = true; }, false); // Checks for when the mouse is clicked. body.addEventListener("touchstart", function(event) { mouseIsPressed = true; }, false); // Checks for when the mouse is clicked. body.addEventListener("mouseup", function(event) { mouseClicked(); mouseIsPressed = false; }, false); // Checks for when the mouse is clicked. body.addEventListener("touchend", function(event) { mouseClicked(); mouseIsPressed = false; }, false); // Uses the draw function and frameRate variable. var intervalId = function() { setTimeout(function() { frameCount ++; draw(); intervalId(); }, 1000 / frameRate); }; intervalId(); </script> <!-- Game --> <script> // Basic variables // Game title var title = "FRACTURED\nMIRROR"; // Colors var bgColor = color(0, 30, 100); var playerColor = color(160, 170, 255); var lavaColor = color(255, 100, 50); var portalColor = color(0, 255, 150); var monsterColor = color(35, 30, 50); var buttonColor = color(120, 120, 130); var yesButtonColor = color(0, 230, 0); var noButtonColor = color(250, 0, 10); // Fonts var fonts = [ "Roboto Condensed", "ZCOOL KuaiLe Bold" ]; // Scenes var scene; var game, menu, about, levelSelect, pause, win, logo; var curLev = 0; // Dimensions var blockSize = width / 15; var levelSize = width / blockSize; // Important varructors and variables var Player, Block, Button; var player, blocks = []; // Block controls var blockMode = 0; var buttonNum = 0; // User interaction var keys = [], click = false, overButton = false; // Math functions Math.smooth = function(pos, dest, div) { return (dest - pos) / div; }; Math.equal = function(obj1, obj2) { return obj1.x === obj2.x && obj1.y === obj2.y; }; Math.overRect = function(x, y, w, h) { return (mouseX > x && mouseX < x + w) && (mouseY > y && mouseY < y + h); }; // Header function function header(txt, c) { txt = txt.toUpperCase(); textAlign(CENTER, CENTER); textFont(fonts[1], 75); noStroke(); fill(0, 0, 0, 50); text(txt, width / 2, height / 5 + 5); fill(c \|\| color(255, 255, 255)); text(txt, width / 2, height / 5); }; // My logo function greenGhostLogo(x, y, size) { pushMatrix(); translate(x, y); scale(size / 600, size / 600); translate(0, -200); beginShape(); vertex(-270, 20); bezierVertex(-600, 250, -700, 600, -50, 600); vertex(-125, 400); vertex(-255, 480); bezierVertex(-305, 430, -395, 280, -205, 180); vertex(-270, 20); endShape(); beginShape(); vertex(270, 20); bezierVertex(600, 250, 700, 600, 50, 600); vertex(125, 400); vertex(255, 480); bezierVertex(305, 430, 395, 280, 205, 180); vertex(270, 20); endShape(); beginShape(); vertex(0, 600); vertex(225, 0); curveVertex(0, -80, -225, 0); vertex(0, 600); endShape(); popMatrix(); }; /* KEY . P - Sets player position . W - Lava . E - Portal . D - Door . M - Monster . S - Alternates between portal and lava . B - Two way button . Y - Green button . N - Red button / // This array uses strings to make the levels! var levels = (function() { return [ [ "WWWWWWWWWWWWWWW", "WW EEE WW", "WW WW", "WW WW", "WW WW", "WW WW", "WW WW", "WW WW", "WW WW", "WW WW", "WW WW", "WW P WW", "WW WW", "WW WW", "WWWWWWWWWWWWWWW" ], [ "EE WW", "E WW", " WW", "WWWWWWWWWW WW", "W WW W WW WW", "W W W W WW WW", "W WWW WWW WW", "W W WW WWW WW", "W WWW WWW WW", "WWWWWWWWWW WW", "W W WW WW", "W WWW WWW W", "W W W W W W", "W W W P W", "WWWWWWWWW W" ], [ "WWWWWWWWWWWWWWW", "W WW W", "W P W W", "W W", "W W", "W WWWWW W", "W WWWWW W", "WW W W", "WW W W", "WW W", "WW W W W", "WWWWW W", "WWWWW EW", "WWWWW EEW", "WWWWWWWWWWWWWWW" ], [ "EE WWWWWWWWWWW", "E WWWWWWWWW", " WWWWWWWWW", "WW WWWWWWWWW", "WWW WWWWWWWWW", "WWW WWWWWWWWW", "WWW WWWWWWWWW", "WWW WW", "WWW WW", "WWWW WW", "WWWWWWWWWW WW", "WWWWWWWWWW WW", "WWWWWWWWWW WW", "WWWWWWWWW W", "WWWWWWWWW P W" ], [ "EE WWWWWWWW", "E WWWWWW", " WWW WWWWWW", "WWWWWW WWWWWW", "WWW WWWWWW", "WWW WWWWWWW", "WWW WWWWWWWWWW", "WWW WW", "WWW W", "WWW WWW W", "WWWWWWWWWWW W", "WWWWWWWWWW WW", "WWWWWWWWW WW", "WWWWWWWWW WWW", "WWWWWWWWW P WWW" ], [ "WWWWWWWWWWWWWWW", "W W EE W WW", "W W W W W", "W W W W", "WW WW W", "WW W WW W", "W WW", "W W WWW W", "W W W W", "W W W W", "WW WW W W", "W W W", "W W WWWPW W", "WWW WWW W", "WWWWWWWWWWWWWWW" ], [ "WWWWWWWWWWWWWWW", "WW PW", "WW W", "WW WWWWWWWWWWW", "WW WWWWWWWWWWW", "WW WWWWWEWWWWW", "WW WWWWW WWWWW", "WW WWWWW WWWWW", "WW WWWWW WWWWW", "WW WWWWW WWWWW", "WW WWWWW", "WWWWWWWWWWWWWWW", "WWWWWWWWWWWWWWW", "WWWWWWWWWWWWWWW", "WWWWWWWWWWWWWWW" ], [ "WWWWWWWWWWWWWWW", "WW W E", "W W E", "W WWWWWWWWWWW", "W WWWWW WWWW", "W WWWW P WWWW", "W WWWW WWWW", "W WWWWW WWW", "W WWWWW WWW", "WW WW WW", "WW WWWWW", "WWWW WWWWWWW", "WWWWWWWWWWWWWWW", "WWWWWWWWWWWWWWW", "WWWWWWWWWWWWWWW" ], [ "WWWWWWWWWWWWWWW", "WWWWWWWWWWWW PW", "WWWWWW W", "WW W W WWW", "W W W WWWW ", "WW W W WW W", "WW WWW WWW WW", "WW WWWEWWW WW", "WW WWW WW WWW", "WW WW W WWW", "WW WW WW", "WW WW WWWW W", "WWW WW WWWW WW", "WWW WWWWWWWW", "WWWWW WWWWWWWWW" ], [ "WWWWWWWWWWWWWWW", "WWWWWWWWWWWWWPW", "WWWWW WWWWW W", "WWWW WWWW W", "WWWW WWW WWWW W", "WWWW WWW WWW W", "WW WWW WWW W", "WW WWWW W WW", "WW WWWWW WW", "WW WW WWWWWW", "WWW WW W WWW", "WWW WW WWWW WWW", "WWW WW WWWW EW", "WWW WWWWWWWW", "WWWWWWWWWWWWWWW" ], [ "EW WPWWWWWWWW", " W W W WWWWWWWW", " W W W WW WWW", " W W WW W WWW", " W WWWWWW W WWW", " W WWWWWW W WWW", " W WWWW W WWW", " WW WW WWW", " WWWWWWWW WWW", "WW WWWWWWW WW", "WWW WWWWWWWW W", " WWWWWWWWW W", " WWWW WWW W", " WW WW W WW", "W WWWW WWW" ], [ "WWWWWWWWWWWWWWW", "WW EEE WW", "WW WW", "WW WW", "WW WW", "WW WW", "WW WW", "WWWWWWWWDWWWWWW", "WW WW", "WW P WW", "WW WW", "WW WW", "WW WW", "WW WW", "WWWWWWWWWWWWWWW" ], [ "WWWWWWWWWWWWWWW", "WWWW EEE WWWW", "WWWW WWWW", "WWWW WWWW", "WWWW D WWWW", "WWWWWWWW WWWWWW", "WWWW D WWWWW", "WWWW WWWWW", "WWWW WWWWWWWWW", "WWWW WWWWWW", "WWWWW WWWWWW", "WWWWWWWWDWWWWWW", "WWWWWWWW WWWWWW", "WWWWWWWWPWWWWWW", "WWWWWWWWWWWWWWW" ], [ " WWWWWWW ", " WWWWWWWWW ", " WWWWWWWWWWW ", " WWWWWWWWWWW ", " WEEEWWWEEEW ", " WEEWWWWWEEW ", " WWWWWEWWWWW ", " WWWEWEWWW ", " WWWWWWWWW ", " WPD DW ", " WWWWW W ", " WWWWW W ", " WWWWWDW ", " WWWWE ", " " ], [ " WWWW E ", " WWWWW W W ", " WWEWE W ", " WWWWW W W ", " WWWWWWWW W ", " W D D WW ", " WP WWWW W ", " WW WWW W ", " WWWDW ", " WWW W ", " WWWEW ", " W W ", " WW WW ", " ", " ", ], [ " W W ", " WPW WWEWW WEW ", " W W WWDWW W W ", " W W W D W WDW ", " W WW WWD W ", " WW W W D WW ", " WW WW ", " W W ", " W WWWWW W ", " W W ", " WWW WWW ", "DDDDDDDDDDDDDDD", " DDDDDDDDDDD ", "DDDDDDDDDDDDDDD", " DDDDDDDDDDD ", ], [ "WW DD DWWW", "WWPW WWEWW EDD", "WW W WWWWW W W ", "WW W WWWWW WDW ", "WW WW D WWD W ", "DW DD D W ", "D DWWD WWW W", "W WWE WWW W", "W WWWWWWWW W", " WW W", " WWWWWWWWWWWWWW", "DDDDDDDDDDDDDDW", " DDDDDDDDDDD W", " D D D D D D W", "W DDDDDDDDDDDDE", ], [ "WWWWWWWWWWWWWWW", "WWWW WWWWW WWWW", "WWWWWPWWW WWWWW", "WWWW WWWW", "WWW W W WWW", "WW WW", "WW W W WW", "WW W DWWWW W WW", "WWWWW W WWWWW", "WWWWWDWWWWWWWWW", "W D D D DDD W", "W WWWDWWWWWWWDW", "WDWWW D WWD D W", "WDWWWWWDWW WWDW", "WEWWWWW D DWWEW" ], [ "WWWWWWWWWWWWWWW", "WWWWWWPDD WWWWW", "WWWWD DDD DWWW", "WWWD D D D DWW", "WWWDD D D D WW", "WWWWD D D DD DW", "WWWWWW D D D W", "WWWWWWWWWDDDDDW", "WWWWWW DD D DDW", "WWWWD D D DDDW", "WWWD D D DD WW", "WWWD DD DD DWW", "WWWW DDDDDD WWW", "WWWWWWEEEEWWWWW", "WWWWWWWWWWWWWWW" ], [ "E D D W WWWWW", "W WWWD DW ", "WDD WWWWW WWWW ", "WWW W WWW WWWWW", " W D W", " W WWW WWWWW W", "W W WWW WWW D W", "W W W WW WWW", " W WWWWWDWWW", " WWWW WD W W ", " W W W WDW WW ", " W W W W D ", "WWWDW W WDWWWW ", "W W W WWWW ", "WWWWWWWWWPW " ], [ "WWWWD ", "W WWDWWPWWWWWW ", "WD WW WWWWWW ", "W WDWWW WWWEDD ", "WDW WWD DWWWW ", "D W WWDW DWWW ", "D W WWWEWW WWW ", " DW DDEEEDD ", "D W WWWEWW W WW", " DW WWWDW DWDWW", "D WDWWWD DWD W", " DW WWD WWWDWWW", " WW WW W W", " WW DWW WWWDW", "EWWWWWWWW WEW" ], [ "P WWWWWWWWWWW", "WWWDWWWWWWWWWWW", "WWW W", "WWW W", "W WW W", "W MW W", "W WWWWWW W", "W W", "W W", "WWWWWWW W", "WWWWWWWW W", "WWWWWWWW W", "WWWWWWWW W", "WWWWWWWW EW", "WWWWWWWWWWWWWWW" ], [ "P MWWW", "WWWDWWWWWWWWWWW", "WWW W W", "WWW W", "WWWW MW W", "W W W", "W WWWWWW W", "W WW", "WWWWWWWW WW", "WWWWWWWW WW", "WWWWWWWW WW", "WWWWWWWW W", "WWWWWWWW DD W", "WWWWWWWW DDDSW", "WWWWWWWWWWWWWWW" ], [ "SM D D WWS", "WWWW WWW WWWWWD", "DD W MWD", "DWDWWWW WWDWWW ", " DWWDWD W ", "DWWWWWWDW WWWW ", " WD D DPD DWWW ", " W WWWWDWDWWWW ", " W WWWWDW MWD", " WDWWWW WWWWWWD", "DWDWWWWDWWWWWD ", " W WWWW WWWWD W", " W WWWD D DMWWW", " W WWWWWWWWWWWWW", "SW D D D D D DS" ], [ "PD MW", "WWWWWW WWWWWWWW", " D W", " WWWWWWWWWWWW W", " WM W", "WWWWWWOWWWWWWWW", "WW BF F D D D ", "WW W OWWWWWW W", "WW WDWWWWWW W", "WWWWWWDWWWEWE W", "WWWWWWSWWWWWWWW", "WWWWWWWWW D D ", "WWWWWWDWW D D ", "WWWWWWWWW D ", "WWWWWWWWW " ], [ "WWWWWWWWEOBOWWE", "WPBFBFEWWWW WWD", "W WDW W WFW WWD", "W WBBNW WWD", "W WBW WWWW WW ", "W WWW W D WW", "WMDSW WWWDWWW", "WWWWW WWWWWDDSW", "WWWD DWWWWWWWWW", "D D WWWWWWWWWWW", "EWWWWEWWWEEWEEE", "EWWWEWEWEWWWEWW", "EWWWEWEWWEWWEEE", "EWWWEWEWWWEWEWW", "EEEWWEWWEEWWEEE" ], [ "N DDBM ", " M DWWW", "WDWM M ", "WDWWWWW WWWWWW", "W WWWFF OOOOO ", "W WWWFWOWWWWWWD", "W WWWFWYWWWWWW ", "W WWWFFPOYOSWWD", "WMWWWWWWWWWWWW ", "WWFFFW D DWWWWD", "WSFWFY WW DWWW ", "WWNOYW WWW DWWD", "WWFWW WWWW WW ", "WWFWW WWWWWDWWD", "WWF FFNWW D " ], [ "SOOBOWWMWWWWW S", "WWWWOWW WWWWW W", "WW YF W", "WW WWWW WWWWNWW", "WW WWWW WWWW WW", "WW WWWOWWWW WW", "WW WWWWYWWWW WW", "M FNPNO M", "WW WWWWYWWWWW W", "WW WWWWFWWWWW W", "WW WWWW WWWW W", "WW WWWW WWWW WW", "NFD WW", "FWWWWWW WDWWWWW", "SWWWWWWMWODODOS" ], [ "WWWWWWWWWWN YW", "WWWWWWWWWWFWWFW", "WWW P MWFW", "WWWWYWWWWWOWWFW", "WWWWWWWWWWYWWFW", "WWWWWWWWWWOWFFF", "WWWSWWWWWWDWFWF", "WWW WWWWWW WFWF", "WWWDWWWWWWDWNWN", "WWWWWWWWWW WDW ", "WWWDWWWWWWDWDW ", "DWW D D D WDW ", "WWWWWWWWWWWWSW ", "WWWWWWWWWWWWWW ", "S D D D D D D D" ], [ "WWWWWWWPWWWWWWW", "M M", "WWWWWWW WWWWWWW", "SW FYD WWWWW", "WM WWWW WN FDS", "WWWWWWW WOWWWWW", "EFFNFFF WY MM", "WWWWWWWNWWWWWW ", "ONF DYFNFS", "OWWWWW WWWWWWWW", "OWWWWW WWWWWWWD", "OWWWWW WWWWWWWD", "O W MDDDD", "WWW WWWWWWWWWWW", "E D D D DMWEE" ] ]; })(); // The time it takes to beat each level. var levelTime = [15, 17, 18, 19, 20, 20, 22, 25, 27, 50, 75, 15, 20, 20, 20, 30, 40, 45, 60, 70, 70, 25, 30, 50, 60, 60, 120, 120, 130, 150]; // Messages for each level. var levelMessages = (function() { return [ "Part 1: Cracked\nControls for the\ny-axis are switched!\nUp = Down\nDown = Up", "- Green Ghost Presents -\nFractured Mirror", "Trickier", "Seems simple...", "Hmmm...", "Wowie, that's a lot!", "Spiral...", "And another spiral...", "Twisty little things!", "This is tricky...", "Woah, that's\na bit much!", "Part 2: Broken\nIt's been too easy so far...\nWhat about doors?", "Timing is important!", "Skulls...", "Weird dude", "Freaky... Something", "Total chaos yet?", "A space invaders level", "A Pac-man level", "Wow, a maze!", "So many choices...", "Part 3: Shattered\nNow we have monsters.\nAnd they go through doors.\nHooray.", "Sometimes portals...\naren't portals", "Four paths?", "Get out before the\nmonster passes you!\nAlso, there are buttons...", "Some buttons go only one way.\nGrey = Switches blocks\nRed/Green = Set blocks to either on or\noff, but not back", "Well this is fun...", "Think fast!", "Almost there...", "Last one!!!" ]; })(); // Player stats var stats = { timer : 0, startTime : 0, setTimer : function() { this.timer = levelTime[curLev]; this.startTime = this.timer; }, useTimer : function() { this.timer = varrain(this.timer - (1 / 60), 0, Infinity); }, stars : (function() { let retVal = []; for (var i = 0; i < levels.length; i++) { retVal.push(0); } return retVal; })(), getStars : function() { this.stars[curLev] = Math.floor(map(this.timer, 0, this.startTime, 0, 4)); }, pageStars : function(page) { let retVal = 0; for (var i = page 10; i <= Math.min(page * 10 + 9, this.stars.length); i++) { retVal += this.stars[i]; } return retVal; }, get totalStars () { let retVal = 0; for (var i = 0; i < this.stars.length; i++) { retVal += this.stars[i]; } return retVal; }, startY : -600, startGo : true, drawStart : function() { if (this.startY >= -500) { textAlign(CENTER, CENTER); textFont(fonts[0], 70); noStroke(); fill(0, 0, 50, 60); rect(0, this.startY + 100, 600, 400); fill(255, 255, 255); text("* LEVEL " + (curLev + 1) + " ", 300, this.startY + 150); textSize(30); text(levelMessages[curLev] \|\| 0, 300, this.startY + 300); text("Click to play", 300, this.startY + 470); } if (this.startGo) { this.startY += Math.smooth(this.startY, 0, 8); if (click \|\| keys[13] && this.startY > -100) { this.startGo = false; } } else { this.startY += Math.smooth(this.startY, -600, 8); } }, passY : -600, passGo : false, drawPass : function() { if (this.passY >= -500) { textAlign(CENTER, CENTER); textFont(fonts[0], 70); noStroke(); fill(0, 0, 50, 60); rect(0, this.passY + 100, 600, 400); fill(255, 255, 255); text(" LEVEL COMPLETE ", 300, this.passY + 150); textSize(30); text("Stars achieved: " + this.stars[curLev], 300, this.passY + 300); text("Click to continue", 300, this.passY + 470); } if (this.passGo) { this.passY += Math.smooth(this.passY, 0, 8); if (click \|\| keys[13]) { changer.opac = 255; newLevel(); this.passGo = false; } } else { this.passY += Math.smooth(this.passY, -600, 8); } }, newRound : function() { this.startY = -600; this.startGo = true; this.passY = -600; this.passGo = false; } }; // Function to draw the background function bg() { background(bgColor); noStroke(); fill(lerpColor(bgColor, color(220, 50, 255), 0.2)); ellipse(0, 600, 600, 600); ellipse(200, 600, 400, 400); ellipse(400, 500, 100, 100); ellipse(150, 300, 200, 200); ellipse(350, 280, 80, 80); fill(190, 180, 255, 40); pushMatrix(); translate(250, -30); rotate(30); rect(0, 100, 80, 600, 40, 40, 0, 0); rect(240, -300, 80, 640, 0, 0, 40, 40); rect(350, 130, 80, 520, 40, 40, 0, 0); popMatrix(); }; // Function to draw the player function drawPlayer(x, y, size, direcX, direcY, blink) { direcX = varrain(direcX, -1, 1); direcY = varrain(direcY, -1, 1); pushMatrix(); translate(x, y); scale(size / 100, size / 100); noStroke(); // Body fill(playerColor); ellipse(0, 0, 100, 100); noFill(); stroke(lerpColor(playerColor, color(255, 255, 255), 0.3)); strokeWeight(5); strokeCap(ROUND); arc(0, 0, 80, 80, 250, 350); strokeWeight(25); arc(0, 0, 60, 60, 50, 160); noStroke(); fill(lerpColor(playerColor, color(255, 255, 255), 0.3)); ellipse(20, -35, 15, 15); // Eyes fill(0, 0, 0); rect(-25 + direcX 10, direcY * 15 - cos(blink) * 8 - 10, 10, 20 + cos(blink) * 16, 10); rect(15 + direcX * 10, direcY * 15 - cos(blink) * 8 - 10, 10, 20 + cos(blink) * 16, 10); popMatrix(); }; // Function to draw monsters function drawMonster(x, y, size, direcX, direcY) { pushMatrix(); translate(x, y); scale(size / 100, size / 100); fill(monsterColor); // Body ellipse(0, 0, 100, 100); noFill(); stroke(lerpColor(monsterColor, color(255, 255, 255), 0.3)); strokeWeight(5); strokeCap(ROUND); arc(0, 0, 80, 80, 250, 350); strokeWeight(25); arc(0, 0, 60, 60, 50, 160); noStroke(); fill(lerpColor(monsterColor, color(255, 255, 255), 0.3)); ellipse(20, -35, 15, 15); // Eye translate(direcX * 10, direcY * 15); fill(lavaColor); beginShape(); vertex(-35, 0); bezierVertex(-15, -25, 15, -25, 35, 0); bezierVertex(15, 25, -15, 25, -35, 0); endShape(); fill(lerpColor(lavaColor, color(255, 255, 255), 0.3)); ellipse(5, -3, 35, 15); fill(monsterColor); ellipse(0, -10, 10, 50); popMatrix(); }; // Scene transition var changer = { opac : 0, display : function() { noStroke(); fill(255, 255, 255, this.opac); rect(0, 0, width, height); rect(0, 0, map(this.opac, 0, 255, 0, width / 2), height); rect(width - map(this.opac, 0, 255, 0, width / 2), 0, map(this.opac, 0, 255, 0, width / 2), height); this.opac += Math.smooth(this.opac, 0, 8); }, reset : function(sceneTo) { scene = sceneTo; this.opac = 255; } }; / Player varructor / Player = (function() { // Make a new player Player = function(x, y) { this.x = x * blockSize; this.y = y * blockSize; this.start = {x : this.x, y : this.y}; this.direcX = 0; this.direcY = 0; this.blink = 0; this.goBlink = 250; this.xMove = 0; this.yMove = 0; this.deathTime = 0; }; // Draw the player Player.prototype.display = function() { this.deathTime --; drawPlayer(this.x + blockSize / 2, this.y + blockSize / 2, blockSize, this.direcX, this.direcY, this.blink); this.goBlink --; if (this.goBlink < 0) { this.blink += 30; if (this.blink > 360) { this.blink = 0; this.goBlink = random(250, 300); } } }; // Move the player Player.prototype.move = function() { this.xMove = 0; this.yMove = 0; if (keys[LEFT] \|\| keys[65]) { this.xMove = -1; keys[LEFT] = false; keys[65] = false; } if (keys[RIGHT] \|\| keys[68]) { this.xMove = 1; keys[RIGHT] = false; keys[68] = false; } if (keys[UP] \|\| keys[87]) { this.yMove = 1; keys[UP] = false; keys[87] = false; } if (keys[DOWN] \|\| keys[83]) { this.yMove = -1; keys[DOWN] = false; keys[83] = false; } this.direcX = this.xMove === 0 ? (this.yMove === 0 ? this.direcX : 0) : this.xMove; this.direcY = this.yMove === 0 ? (this.xMove === 0 ? this.direcY : 0) : this.yMove; this.x += this.xMove * blockSize; this.y += this.yMove * blockSize; }; // Find if the player has hit anything Player.prototype.detect = function() { for (var i = 0; i < blocks.length; i++) { if (blocks[i].collide(this)) { switch (blocks[i].char) { case "W": this.die(); break; case "E": stats.getStars(); stats.passGo = true; break; case "D": if (blocks[i].mode === 0) { this.die(); } break; case "S": if (blocks[i].mode === 0) { this.die(); } else { stats.getStars(); stats.passGo = true; } break; case "M": this.die(); break; case "B": if (this.xMove !== 0 \|\| this.yMove !== 0) { buttonNum = (buttonNum + 1) % 2; } break; case "N": buttonNum = 0; break; case "Y": buttonNum = 1; break; case "O": if (buttonNum !== 0) { this.die(); } break; case "F": if (buttonNum !== 1) { this.die(); } break; } } } if (this.x < 0 \|\| this.x >= levelSize * blockSize \|\| this.y < 0 \|\| this.y >= levelSize * blockSize) { this.die(); } }; // Move the player to a new position Player.prototype.setPos = function(x, y) { this.x = x * blockSize; this.y = y * blockSize; this.start = {x : this.x, y : this.y}; this.direcX = 0; this.direcY = 0; }; // When the player dies Player.prototype.die = function() { for (var i = 0; i < blocks.length; i++) { if (blocks[i].char === "M") { blocks[i].x = blocks[i].startX; blocks[i].y = blocks[i].startY; } } buttonNum = 0; this.setPos(this.start.x / blockSize, this.start.y / blockSize); this.deathTime = 30; }; return Player; })(); // Make a new player player = new Player(0, 0); / Block varructor / Block = (function() { // Block colors colors = { "W" : lavaColor, // Lava "E" : portalColor, // Portal "D" : lavaColor, // Door "S" : lavaColor, // Switching Door / Portal "M" : monsterColor, // Monster "B" : buttonColor, // Sets buttonNum to (buttonNum + 1) % 2 "N" : noButtonColor, // Sets buttonNum to 0 "Y" : yesButtonColor, // Sets buttonNum to 1 "O" : lavaColor, // Button Door at buttonNum === 0 "F" : lavaColor // Button Door at buttonNum === 1 }; // Make a new block Block = function(x, y, char, otherChars) { this.x = x * blockSize; this.y = y * blockSize; this.startX = x * blockSize; this.startY = y * blockSize; this.char = char; this.otherChars = otherChars; this.mode = blockMode; if (this.char === "D" \|\| this.char === "S") { blockMode = (blockMode + 1) % 2; } this.direc = "right"; this.eyeX = 0; this.eyeY = 0; }; // Draw the block Block.prototype.display = function() { if (frameCount % 60 === 0 && !stats.startGo && !stats.passGo) this.mode = (this.mode + 1) % 2; if ((this.char === "D" && this.mode === 1) \|\| (this.char === "O" && buttonNum === 0) \|\| (this.char === "F" && buttonNum === 1)) return; let blockColor = colors[this.char]; if (this.char === "W" \|\| this.char === "D" \|\| this.char === "F" \|\| this.char === "O" \|\| (this.char === "S" && this.mode === 0)) { fill(lerpColor(blockColor, color(255, 50, 0), (2 + cos(frameCount * 4 + (this.x * 4 + this.y) % 600) + sin(frameCount * 6 + this.y * 3 + this.x)) / 4)); } else { fill(blockColor); } if (this.char === "S" && this.mode === 1) fill(portalColor); if (this.char === "M") { this.monsterAct(blocks); drawMonster(this.x + blockSize / 2, this.y + blockSize / 2, blockSize, this.eyeX, this.eyeY); } else { rect( this.x, this.y, blockSize, blockSize, (this.otherChars.l && this.otherChars.t) ? blockSize / 5 : 0, (this.otherChars.t && this.otherChars.r) ? blockSize / 5 : 0, (this.otherChars.r && this.otherChars.b) ? blockSize / 5 : 0, (this.otherChars.b && this.otherChars.l) ? blockSize / 5 : 0 ); } if (this.char === "B" \|\| this.char === "Y" \|\| this.char === "N") { fill(lerpColor(blockColor, color(255, 255, 230), 0.2)); quad(this.x, this.y + blockSize / 10, this.x, this.y + blockSize / 3, this.x + blockSize, this.y + blockSize / 10 * 9, this.x + blockSize, this.y + blockSize / 3 * 2); fill(lerpColor(blockColor, color(255, 255, 230), 0.5)); ellipse(this.x + blockSize / 2, this.y + blockSize / 2, blockSize / 3 * 2, blockSize / 3 * 2); } if (this.char === "E" \|\| (this.char === "S" && this.mode === 1)) { noFill(); strokeWeight(blockSize / 15); stroke(lerpColor(blockColor, color(0, 20, 50), random(0.3, 0.6))); pushMatrix(); translate(this.x + blockSize / 2, this.y + blockSize / 2); rotate(frameCount * 12 + this.x * 12 + this.y * 8); beginShape(); vertex(0, 0); for (var i = 1; i < 11; i++) { let x = cos(i * 90) * i * (blockSize / 20 + cos(frameCount * 10 + i * 17 + this.x + this.y * 3) / 10); let y = sin(i * 90) * i * (blockSize / 20 + sin(frameCount * 10 + i * 25 + this.x * 2 + this.y) / 10); let prevX = cos((i - 1) * 90) * (i - 1) * blockSize / 20; let prevY = sin((i - 1) * 90) * (i - 1) * blockSize / 20; if (i % 2 === 0) { bezierVertex( lerp(x, prevX, 0.5), prevY, x, lerp(y, prevY, 0.6), x, y ); } else { bezierVertex( prevX, lerp(y, prevY, 0.2), lerp(x, prevX, 0.3), y, x, y ); } } endShape(); noStroke(); popMatrix(); } }; // Find proper direction for monsters Block.prototype.findDirec = function(list) { for (var i = 0; i < list.length; i++) { if (Math.equal({x : this.x, y : this.y + blockSize}, list[i])) { this.direc = "up"; } else if (Math.equal({x : this.x, y : this.y - blockSize}, list[i])) { this.direc = "down"; } else if (Math.equal({x : this.x + blockSize, y : this.y}, list[i])) { this.direc = "left"; } else if (Math.equal({x : this.x - blockSize, y : this.y}, list[i])) { this.direc = "right"; } } }; // Monster movement Block.prototype.monsterAct = function(list) { if (!stats.startGo && !stats.passGo) { if (frameCount % 20 === 0) { if (this.direc === "up") { this.y -= blockSize; this.eyeX = 0; this.eyeY = -1; } else if (this.direc === "down") { this.y += blockSize; this.eyeX = 0; this.eyeY = 1; } else if (this.direc === "left") { this.x -= blockSize; this.eyeX = -1; this.eyeY = 0; } else if (this.direc === "right") { this.x += blockSize; this.eyeX = 1; this.eyeY = 0; } for (var i = 0; i < list.length; i++) { if (this.collide(list[i]) && list[i] !== this && list[i].char !== "D" && list[i].char !== "B" && list[i].char !== "N" && list[i].char !== "Y" && !(list[i].char === "O" && buttonNum === 0) && !(list[i].char === "F" && buttonNum === 1)) { if (this.direc === "up") { this.direc = "left"; this.y += blockSize; } else if (this.direc === "down") { this.direc = "right"; this.y -= blockSize; } else if (this.direc === "left") { this.direc = "down"; this.x += blockSize; } else if (this.direc === "right") { this.direc = "up"; this.x -= blockSize; } } } if (this.x < 0) { this.x += blockSize; this.direc = "down"; } else if (this.x > width - blockSize) { this.x -= blockSize; this.direc = "up"; } else if (this.y < 0) { this.y += blockSize; this.direc = "left"; } else if (this.y > height - blockSize) { this.y -= blockSize; this.direc = "right"; } } } }; // Find if a another object has hit the block Block.prototype.collide = function(other) { return Math.equal(this, other); }; return Block; })(); / Button varructor / Button = (function() { Button = function(x, y, w, h, txt, func) { this.x = x - w / 2 \|\| 300; this.y = y - h / 2 \|\| 300; this.w = w \|\| 150; this.h = h \|\| 60; this.txt = txt.toUpperCase() \|\| ""; this.func = func \|\| function() {}; this.over = 100; }; Button.prototype.display = function() { noStroke(); fill(255, 255, 255, this.over); rect(this.x, this.y, this.w, this.h, 20); noFill(); strokeWeight(this.w / 60); stroke(255, 255, 255, this.over - 100); rect(this.x + this.w / 15, this.y + this.h / 6, this.w / 15 * 13, this.h / 3 * 2, 20); noStroke(); fill(255, 255, 255); rect(this.x, this.y + this.h / 6 - (this.over - 100) / 10, this.w / 30 - (this.over - 100) / 10, this.h / 3 * 2 + (this.over - 100) / 5, this.h / 15); rect(this.x + this.w / 30 * 29 + (this.over - 100) / 10, this.y + this.h / 6 - (this.over - 100) / 10, this.w / 30 - (this.over - 100) / 10, this.h / 3 * 2 + (this.over - 100) / 5, this.h / 15); textFont(fonts[0], this.w / 6); textAlign(CENTER, CENTER); text(this.txt, this.x + this.w / 2, this.y + this.h / 2); }; Button.prototype.check = function() { return Math.overRect(this.x, this.y, this.w, this.h); }; Button.prototype.pack = function() { if (this.check()) { this.over += Math.smooth(this.over, 130, 12); overButton = true; if (click) { this.func(); } } else { this.over += Math.smooth(this.over, 100, 8); } this.display(); }; return Button; })(); // Buttons var levPage = 0, unlocked = 0; var buttons = { play : new Button(300, 280, 250, 60, "PLAY", function() { curLev = -1; newLevel(); changer.reset(game); }), about : new Button(150, 350, 200, 50, "ABOUT", function() { changer.reset(about); }), levels : new Button(450, 350, 200, 50, "LEVELS", function() { changer.reset(levelSelect); }), pause : new Button(565, 570, 40, 40, "", function() { changer.reset(pause); }), cont : new Button(500, 560, 150, 40, "CONT", function() { changer.reset(game); }), quit : new Button(100, 560, 150, 40, "QUIT", function() { changer.reset(menu); }), back : new Button(100, 560, 150, 40, "BACK", function() { levPage = 0; changer.reset(menu); }), prev : new Button(100, 510, 150, 40, "PREVIOUS", function() { levPage = Math.max(levPage - 1, 0); }), next : new Button(500, 510, 150, 40, "NEXT", function() { levPage = Math.min(levPage + 1, 2); }), select : (function() { let retVal = []; for (var i = 0; i < 3; i++) { retVal.push([]); for (var j = 0; j < 10; j++) { retVal[i].push( new Button( 120 + (j % 5) * 90, 280 + Math.floor(j / 5) * 60, 85, 50, "Locked", function() { if (unlocked >= this.levNum) { curLev = this.levNum - 1; newLevel(); changer.reset(game); } } ) ); retVal[i][j].levNum = i * 10 + j; } } return retVal; })() }; // Special pause button buttons.pause.display = function() { noStroke(); fill(255, 255, 255, this.over); rect(this.x, this.y, this.w, this.h, 10); noFill(); strokeWeight(this.w / 60); stroke(255, 255, 255, this.over - 100); rect(this.x + this.w / 15, this.y + this.h / 6, this.w / 15 * 13, this.h / 3 * 2, 10); noStroke(); fill(255, 255, 255); rect(this.x + this.w / 4, this.y + this.h / 4, this.w / 6, this.h / 2); rect(this.x + this.w - this.w / 4 - this.w / 6, this.y + this.h / 4, this.w / 6, this.h / 2); }; // Generate a new level function generateLevel() { blocks = []; let selectedLevel = levels[curLev]; for (var i = 0; i < selectedLevel.length; i++) { selectedLevel[i] = selectedLevel[i].toUpperCase(); for (var j = 0; j < selectedLevel[i].length; j++) { if (selectedLevel[i].charAt(j) === "P") { player.setPos(j, i); } else if (selectedLevel[i].charAt(j) !== " ") { let left = selectedLevel[i].charAt(j - 1) === " " \|\| selectedLevel[i].charAt(j - 1) === "P" \|\| selectedLevel[i].charAt(j - 1) === "M" \|\| false; let right = selectedLevel[i].charAt(j + 1) === " " \|\| selectedLevel[i].charAt(j + 1) === "P" \|\| selectedLevel[i].charAt(j + 1) === "M" \|\| false; let top = (selectedLevel[i - 1] ? selectedLevel[i - 1].charAt(j) === " " : false) \|\| (selectedLevel[i - 1] ? selectedLevel[i - 1].charAt(j) === "P" : false) \|\| (selectedLevel[i - 1] ? selectedLevel[i - 1].charAt(j) === "M" : false) \|\| false; let bottom = (selectedLevel[i + 1] ? selectedLevel[i + 1].charAt(j) === " " : false) \|\| (selectedLevel[i + 1] ? selectedLevel[i + 1].charAt(j) === "P" : false) \|\| (selectedLevel[i + 1] ? selectedLevel[i + 1].charAt(j) === "M" : false) \|\| false; blocks.push(new Block(j, i, selectedLevel[i].charAt(j), { l : left, r : right, t : top, b : bottom })); } } } for (var i = 0; i < blocks.length; i++) { if (blocks[i].char === "M") { blocks[i].findDirec(blocks); } } }; // Continue to the next level function newLevel() { buttonNum = 0; curLev ++; unlocked = Math.max(unlocked, curLev); player.deathTime = 0; if (curLev >= levels.length) { changer.reset(win); } else { blockMode = 0; generateLevel(); stats.setTimer(); stats.newRound(); } }; // Draw a level function drawLev() { noStroke(); fill(255, 255, 255, 50); rect(0, 0, width, height); for (var i = 0; i < blocks.length; i++) { blocks[i].display(); } }; // Draw player stats function drawStats() { textFont(fonts[0], 30); textAlign(LEFT, BOTTOM); fill(255, 255, 255); noStroke(); text("Level " + (curLev + 1), 10, height - 10); stroke(255, 255, 255); strokeCap(ROUND); strokeWeight(10); line(120, 570, 520, 570); let barDest = map(stats.timer, 0, stats.startTime, 0, 10); stroke(Math.floor(barDest) % 2 === 0 ? color(255, 200, 90) : color(255, 230, 120)); line(120, 570, 120 + map(stats.timer, 0, stats.startTime, 0, 400), 570); for (var i = Math.floor(barDest) - 1; i >= 0; i--) { stroke((i % 2 === 0) ? color(255, 200, 90) : color(255, 230, 120)); line(120 + i * 40, 570, 160 + i * 40, 570); } noStroke(); for (var i = 0; i < 3; i++) { fill(50, 50, 70); ellipse(220 + i * 100, 570, 35, 35); fill((stats.timer > stats.startTime * (0.25 * (i + 1))) ? color(255, 245, 100) : color(100, 100, 110)); beginShape(); for (var j = 0; j < 5; j++) { vertex(220 + i * 100 + cos(j * 144 - 90) * 12, 570 + sin(j * 144 - 90) * 12); } endShape(); } }; // Scenes function game() { bg(); pushMatrix(); translate(width / 20, 0); if (player.deathTime > 0) { translate(Math.round(random(-player.deathTime, player.deathTime) / 3 * 2), Math.round(random(-player.deathTime, player.deathTime) / 3 * 2)); } scale(0.9, 0.9); drawLev(); if (!stats.startGo && !stats.passGo) { player.move(); } player.detect(); player.display(); popMatrix(); if (!stats.startGo && !stats.passGo) { stats.useTimer(); } stats.drawStart(); stats.drawPass(); drawStats(); buttons.pause.pack(); }; function menu() { bg(); header(title); drawPlayer(300, 500, 350, Math.round((mouseX - 300) / width * 2), Math.round((mouseY - 500) / height * 2), 0); buttons.play.pack(); buttons.about.pack(); buttons.levels.pack(); noFill(); stroke(255, 255, 255, 80); strokeWeight(20); pushMatrix(); translate(50, 545); rotate(20); greenGhostLogo(0, 0, 80); popMatrix(); }; function about() { bg(); buttons.back.pack(); header("ABOUT"); textFont(fonts[0], 30); fill(255, 255, 255); text("This is Green Ghost's 9th game\nreleased on Khan Academy.\nIt was originally started in 2017.\nIt was released in January 2018,\nand a major update was\nreleased in March 2020.", 300, 320); }; function levelSelect() { bg(); buttons.prev.pack(); buttons.next.pack(); buttons.back.pack(); header("LEVELS"); for (var i = 0; i < buttons.select[levPage].length; i++) { if (unlocked >= buttons.select[levPage][i].levNum) { buttons.select[levPage][i].txt = "Lv. " + (buttons.select[levPage][i].levNum + 1) + " - " + stats.stars[levPage * 10 + i] + " stars"; } buttons.select[levPage][i].pack(); } textFont(fonts[0], 30); textAlign(CENTER, CENTER); text("Page " + (levPage + 1) + "/3\n" + stats.pageStars(levPage) + " / 30 stars", 300, 450); }; function pause() { bg(); textFont(fonts[1], 90); pushMatrix(); translate(300, 280); rotate(sin(frameCount * 30) * varrain(2 + sin(frameCount * 8) * 10, 0, 12)); fill(0, 0, 50, 50); text("PAUSED", 0, 5); fill(255, 255, 255); text("PAUSED", 0, 0); popMatrix(); buttons.quit.pack(); buttons.cont.pack(); }; function win() { bg(); noStroke(); colorMode(HSB); fill((frameCount * 5) % 255, 255, 255, 100); rect(0, 0, width, height); colorMode(RGB); drawPlayer(300, 500, 350, Math.round((mouseX - 300) / width * 2), Math.round((mouseY - 500) / height * 2), 0); buttons.back.pack(); header("YOU WIN!"); fill(255, 255, 255); textFont(fonts[0], 30); text("Stars Collected: " + stats.totalStars + "/" + levels.length * 3, 300, 270); textSize(20); text("Go to the level select to\nachieve any stars you missed.", 300, 560); }; var logoPos = -1000; var plusses = (function() { plusses = []; for (var i = 0; i < 50; i++) { plusses.push({x : random(width), y : random(height), size : random(8, 20), angle : random(290, 340), speed : random(1, 2)}); } return plusses; })(); function logo() { background(0, 50, 60); fill(30, 80, 70); noStroke(); for (var i = 0; i < plusses.length; i++) { rect(plusses[i].x - plusses[i].size / 10, plusses[i].y - plusses[i].size / 2, plusses[i].size / 5, plusses[i].size, plusses[i].size / 8); rect(plusses[i].x - plusses[i].size / 2, plusses[i].y - plusses[i].size / 10, plusses[i].size, plusses[i].size / 5, plusses[i].size / 8); plusses[i].x += cos(plusses[i].angle) * plusses[i].speed; plusses[i].y += sin(plusses[i].angle) * plusses[i].speed; if (plusses[i].x > width + plusses[i].size / 2) { plusses[i].x = -plusses[i].size / 2; } if (plusses[i].y < -plusses[i].size / 2) { plusses[i].y = height + plusses[i].size / 2; } } noStroke(); fill(255, 255, 230, 80); quad(0, 0, width, 0, width, 200, 0, 50); quad(0, 400, width, 550, width, 600, 0, 600); fill(255, 255, 230, 150); if (logoPos > 300) { logoPos -= Math.smooth(logoPos, 290, 10); } else { logoPos += Math.smooth(logoPos, 370, 3 + (logoPos + 1000) / 20); } pushMatrix(); rotate(45); scale(1, 0.8); rotate(-38); greenGhostLogo(logoPos, 240, 240); textFont(fonts[0], 50); fill(255, 255, 230, varrain(logoPos - 150, 0, 150)); text("GREEN GHOST", 330, 30); text("PRESENTS", 330, 485); popMatrix(); if (logoPos > 3000 \|\| click) { changer.reset(menu); } }; function drawThumbnail() { bg(); drawMonster(40, 370, 250, 1, 0); drawMonster(570, 400, 250, -1, 0); noStroke(); fill(50, 0, 100, 100); rect(0, 0, width, height); pushMatrix(); translate(0, 80); header(title, lerpColor(lavaColor, color(255, 255, 150), 0.5)); popMatrix(); drawPlayer(300, 500, 350, 0, -1, 0); textAlign(CENTER, CENTER); textFont(fonts[0], 35); fill(255, 255, 255); text("Green Ghost Presents...", 220, 100); noFill(); stroke(255, 255, 255, 80); strokeWeight(20); pushMatrix(); translate(50, 545); rotate(20); greenGhostLogo(0, 0, 80); popMatrix(); }; scene = logo; draw = function() { textAlign(CENTER, CENTER); scene(); cursor(overButton ? "pointer" : "default"); overButton = false; click = false; changer.display(); if (keys[32] && keys[16] && keys[84]) { drawThumbnail(); } }; mouseClicked = function() { click = true; }; keyPressed = function() { keys[keyCode] = true; }; keyReleased = function() { keys[keyCode] = false; }; </script> </body> </html>
Folds	22,38,41,2317
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgLyx7aDqCww
Votes	219
Spin-Offs	32
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Green Ghost
Author Name	GreenGhost1
Author ID	kaid_145655330786057731504264
Author Profile Access	PUBLIC

Archive Data

Added	10 months ago, 1739460411003
Updated	10 months ago, 1739460420748
Source Deleted	unknown