Viewing Program

Program Data

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

Title	Color Ball
ID	4718368382730240
Created	4 years ago, 1625238039711
Updated	4 years ago, 1625326613011
Code	/************************************************************ * Color Ball - by ѕнєяℓσ¢к нσℓмєѕ * * A fun and challenging board game where * color is everything! * * Color Ball functions on both desktop and mobile * devices! * * Beginner/Introductory levels are from 1-12 * More difficult levels begin at level 13 * * I reccomend playing through levels 1-12 to get a feel * for the game and to grasp the controls/game pieces. * * However, at any time you can exit the game and go * to level select to play any level in the game. I did * this for any returning users who did not wish to play * through all of the introduction levels. * * *Important: Please select the correct device type. I cannot guarantee the game will function * properly if the incorrect device type is * selected. (See Features for more information about * mobile functionality) * * I would like to thank KWC for his code, without which * I would never have been able to create this game. * I would also like to thank the Modzilla Developer * Network, which helped me understand how to properly * use what I had learned. * For more details see Credits below * * Color Ball game and code is owned by * ѕнєяℓσ¢к нσℓмєѕ (excepting credited ideas/code) * * © ѕнєяℓσ¢к нσℓмєѕ July 2021 * Lines: 9300 * Hours logged: 145+ * Version 1.2.05 ************************************************************ * * 🔶 Work log { * * This is by no means a comprehensive work log, * but it does give an idea of time investment. * The actual time investment including brainstorming, * coding, and testing is well over 200 hours * as of (1/1/2021) * * 5-12-2019 7:00-9:00 (2 hrs) * 5-14-2019 11:00-4:00 (5 hrs) * 5-16-2019 8:00-11:00 (3 hrs) * 5-22-2019 12:00-2:30 (2.5 hrs) * 5-29-2019 9:00-9:30 (0.5 hrs) * 6-3-2019 2:00-5:00 (3 hrs) * 6-4-2019 6:00-9:00 (3 hrs) * 6-5-2019 8:30-10:30 (2 hrs) * 6-6-2019 9:00-12:00 (3 hrs) * 6-8-2019 8:00-9:30/5:00-8:30 (5 hrs) * 6-10-2019 8:00-9:00/2:00-4:00/8:00-11:00 (6 hrs) * 6-14-2019 8:30-9:00 (0.5 hrs) * 6-24-2019 11:00-11:30 (0.5 hrs) * 7-11-2019 8:30-10:30 (2 hrs) * 7-26-2019 9:30-10:30 (1 hr) * 8-8-2019 9:00-10:00 (1 hr) * 8-24-2019 8:30-10:30 (2 hrs) * 9-2-2019 2:45-3:45 (1 hr) * 9-4-2019 7:30-8:30 (1 hr) * 5-25-2020 1:00-3:00 (2 hrs) * 5-26-2020 11:00-4:00 (5 hrs) * 5-28-2020 9:00-10:30 (1.5 hrs) * 6-8-2020 8:00-11:00 (3 hrs) * 6-9-2020 9:00-11:00 (2 hrs) * 6-10-2020 8:00-9:00 (1 hr) * 6-13-2020 8:30-9:30 (1 hr) * 6-16-2020 12:00-3:00 (3 hrs) * 6-18-2020 12:00-3:30/8:30-11:00 (6 hrs) * 6-22-2020 8:00-9:30/12:00-3:00/7:00-9:30 (5 hrs) * 6-23-2020 8:00-9:00/1:00-3:30 (3.5 hrs) * 6-24-2020 8:00-9:00 (1 hr) * 6-25-2020 11:00-12:00 (1 hr) * 6-26-2020 9:15-12:15/4:00-5:00/9:00-11:00 (6 hrs) * 6-27-2020 9:30-11:30/8:30-9:30/9:00-10:00 (4 hrs) * 6-28-2020 9:30-2:30/5:00-8:00/9:00-10:00 (9 hrs) * 6-29-2020 8:30-9:30/11:00-12:00/9:00-10:00 (3 hrs) * 6-30-2020 8:30-10:30/7:00-8:00 (3 hrs) * 7-1-2020 8:30-10:30 (2 hrs) * 7-2-2020 8:30-9:30 (1 hr) * 7-3-2020 8:30-10:30/8:30-10:30 (4 hrs) * 7-4-2020 9:00-10:00/11:00-1:00/6:00-8:00 (5 hr) * 7-6-2020 9:00-10:00 (1 hr) * 7-10-2020 2:00-3:00 (1 hr) * 12-23-2020 10:00-12:00/3:00-8:00 (7 hrs) * 12-26-2020 9:00-12:00 (3 hrs) * 12-30-2020 9:00-1:00 (4 hrs) * 12-31-2020 9:00-12:00 (3 hrs) * 1-1-2021 10:00-12:00 (2 hrs) * 6-15-2021 10:00-11:00 (1 hr) * 6-16-2021 9:00-12:00 (3 hrs) * 7-1-2021 10:00-12:00 (2 hrs) * 7-2-2021 8:00-10:00 (2 hrs) * * Total Work Time: 145 hours * * } * 🔵 Credits { * * MODZILLA DEVELOPER NETWORK * Most of this program's graphics were made with the help * of MDN. The use of externals (which is allowed in this * particular instance) and the 'ctx' is all from MDN. * * KWC * "Click to start" was something I first found in KWC's * Memory Card Game, and the text is pretty similar * visually. I also used his code as a reference to help * me understand how to properly use what I learned from * MDN. The stats box after each level is also similar * to one in Memory Card Game (with several differences * which make it unique to my game) * * The preventDefault() and wheelHandler are also from * his Memory Card Game (I haven't found another program * that successfully implements a scrolling bar) and I * was able to extract the DOMEventUtil and the * assignEventCallbacks functions to use for my level * select. Hopefully I'm using them right! * * References: * -Memory Card Game (KWC): https://www.khanacademy.org * /computer-programming/memory-card-game/5648647542833152 * * -Modzilla Developer Network: https://developer.mozilla.org * /en-US/ * * } * 🔶 Beta Testers { * * As of 12/23/2020 there has been no BETA testing. * * } * 🔵 Level Designers { * * Currently, I am the only person to have made a level. * I do not have plans at the moment to allow public * level creations into my game. * * } * 🔷 Programming Notes { * * NOTE: The choice at the begining of the * game is between touchscreen control and * trackpad/mouse/desktop control. It is important * that the correct device type is selected. I * cannot garuntee that the game will function * properly if the wrong method is selected! * * NOTE: The mobile version of this game is * functional, but it is not meant to be the * primary method of playing the game. For the best * gameplay experience, I suggest using a computer * with a trackpad/mouse and arrow keys. * * NOTE: The wheel handler used for scrolling in * level select does not work with mobile. A wheel * event is not the same as a finger swiping. This * means that a different method of scrolling was * fixed for mobile devices. * * NOTE: there is a method of using * 0 and 1 instead of true and false when * defining boolean variables. I do not * use this extensively as this program is not long * to warrent worry over character limit. * Also, true/false is easier to read when * looking through the code. * * NOTE: Some game objects (such as the * platform) have a limitation of one per * level. Nevertheless, they have been programed * in such a way as to theoretically allow * multiple per level. This is why some reset/ * control statements have a single statement * that uses [0] instead of a loop using [i] * (the instances are still stored in an array, * but only one value at index 0 is used. * * NOTE: Leaving this tab during runtime can * drastically alter performance. This means * switching tabs or minimizing the browser * can cause gameplay to lag some. Waiting for 30 * to 90 seconds seems to be about long enough for * performance to pick back up again to a resonable * level, but I have not confirmed this with other * users/browsers other than myself and Chrome. * * NOTE: This does not seem to be the case if * this tab remains open in the background, * however. For example, switching tabs in the same * window causes a decrease in performance, but * opening another (already open) window and leaving * the game tab selected and not minimized seems * to have very little effect on performance. I do * not know if this is the case for other users or * browsers other than myself and Chrome. * * NOTE: Leaving the tab and coming back can cause * the graphics to pixelate and animations/collisions * to stop working momentarily. I do not know if this * is the case for other users or browsers other than * myself and Chrome. * * NOTE: Mobile Color Ball runs very slow on my * mobile device. I have plans at the moment to test * on a second mobile device (and a more updated one) * to see if this problem persists or if it is device * specific. However, I have no plans to try to de-lag * mobile Color Ball, as it is meant to be simply * functional, and is expected to be slightly less * polished than desktop Color Ball. * * NOTE: For users interested in mobile compatability, * here are a few things I learned. The most important detail * for me was that mouseX and mouseY do not update unless the * screen is tapped. This is important, as it can cause some * code to not function properly if the program thinks the * "mouse" is still somewhere even if the finger is somewhere * else. The second thing I learned was that I could not get * "clicked" to trigger with mobile touchscreen. I could, * however, get "released" to trigger. This is why all buttons * in mobile react to "released" instead of "clicked and * released" like in desktop version. * * NOTE: there appears to be a size limit on the board * and still have the platform function properly. If the * board is larger than 7x6 then the platform will not trigger * properly at a corner or at the end of a track and will * simply continue through the board off the end. I believe * this is because the window in which it needs to be in order * to trigger the end is so small (because each square is so * small) that it simply skips right over it. * * } * 🔶 General & Misc Notes { * * The work log does not represent total hours * spend on this program. There were many days * where I forgot to log my progress. * * Version numbers are decided using the following * method: * 1). Complete redesign of the game results in a * first number change (i.e. version 1 -> version 2) * 2). Significant visual or mechanical modifications * result in a second number change (i.e. * version 1.1 -> version 1.2) * 3). General or progresive changes result in a third * number change (i.e. version 1.2.08 -> * version 1.2.09) * * } * 🔵 Features { * * DESKTOP/MOBILE * * My game features the ability to function both on * desktop and mobile devices. * * NOTE: Mobile Color Ball does not function as well * as well as Desktop Color Ball, due to limited * interaction between the game and touchscreen * environments. For a better experience, I * suggest running Color Ball on a desktop device. * * * SCROLL WHEEL * * You can youse a trackpad or a mouse to scroll on * the canvas without moving the entire webpage. * This is featured in my level select scene where * you can scroll through all the levels, see your * stats, and select any level. (See credits for more * information about code). * * } * 🔷 Planned Updates { * * Currently I do not have any planned updates after * releasing Color Ball. If you would like to make * a suggestion, feel free to do so in Tips and Thanks. * * } * 🔶 Suggestions { * * Currently, no suggestions have been made. Feel free * to make suggestions to me in the Tips and Thanks * * However, be aware that I reserve the right to decline * to implement any suggestion I feel will not be * worthwhile or benificial to the program * * } * **********************************************************/ var startup = function(debug) { // ⬟ Variables { // ￭ Graphic Related Variables { / ⬇ Access this.externals to create the programs graphics. Create a variable 'ctx' to use externals for the graphics. Permission to use this.externals is granted for the purpose of creating graphics / var canvas = this.externals.canvas; var ctx = canvas.getContext("2d", { alpha: false }); //} // ￭ Global Control Variables { /* ⬇ Global variables / var SCENE = "pre-game", WIDTH = canvas.width, HEIGHT = canvas.height, clicked = !1, released = !1, scrolling = 0, curLoad = 0, gradient, pf, deltaY, local; //} // ￭ Graphics, Class, and Instance Variables { /* ⬇ Graphics holder variable / var CanvasGraphics; /* ⬇ Class name variables / var Square, Board, Levels, Target, Ball, Switch, SwitchTile, Keyboard, GameManager, Transition, Platform, Lever, FlipSwitchTile, FlipSwitch_RedBlue, FlipSwitch_YellowPurple, FourColorTile, Transporter, InGameOptions, PauseHandler, FinalStats, Animation, ScrollBar, MobileScrollBar, LevelBar, LevelSelect, PreGameHandler, LocationHandler, LocateButton, ButtonGroup, MobileArrowButtons, Logo, Clrs, FlipBackground, Quad; /* ⬇ Instance variable names / var playingBoard, loader, game, trans, ball, timer, timerHand, ingameopp, pauser, animate, levelselect, pregamehandler, locatedevice, buttongroup, mobilebuttons, logo, finalstats, flipBck; //} // ￭ Text Value Variables { /* ⬇ Variables with string values (fonts and creators) / var tnr = "times new roman", me = "ѕнєяℓσ¢к нσℓмєѕ"; //} // ￭ Short Control Variables { /* ⬇ Loop variables and random control variables / var i = 0, j = 0, q = 0, t = 0; //} // ￭ Time Variables/Smooth { /* ⬇ Time variables used in debugging / var currentTime = this.Date && this.Date.now ? this.Date.now : this.millis; var undef, then = undef, beginFrame = undef; var initializeTime = currentTime(), beginTaskTime; /* ⬇ Smooth is useful for graphics on certain browsers / smooth(); //} // ￭ Common colors for use { /* ⬇ Common colors used in the program / Clrs = { //red color (primary) clr: color(255, 127, 127), clr2: color(105, 0, 0), //blue color (secondary) secondclr: color(131, 127, 255), secondclr2: color(12, 0, 105), //yellow color (third) thirdclr: color(255, 247, 130), thirdclr2: color(163, 155, 0), //purple color (fourth) fourthclr: color(255, 94, 231), fourthclr2: color(128, 0, 109), //normal colors BLACK: "black", GREY_DARK: "darkgrey", GREY: "grey", GREY_LIGHT: "lightgrey", WHITE: "white", }; //} // ￭ Cursor Type Text { /* ⬇ Cursor types used in the game / var cursorType = { NORMAL: "default", SELECT: "pointer", GRAB: "grab", GRABBING: "grabbing", LOADING: "progress", }; //} //} // ⬟ Functions { // ￭ Object Constructor Function { /* ⬇ Function used to create instances of objects. This works better than 'new' Credit to KWC for first introducing this to me on my Planes 'n Balloons Game, link below: https://www.khanacademy.org/computer-programming/planes-n-balloons/5345226416488448 / Object.constructor.prototype.create = function () { var obj = Object.create(this.prototype); return this.apply(obj, arguments), obj; }; //} // ￭ Color/Text Functions { /* ⬇ Function used to translate a color(r, g, b) into the text version used by ctx. This allows me to use the color picker to pick my colors instead of having find the actual rgb values / var Fill = function(clr) { return "rgba(" + red(clr) + "," + green(clr) + "," + blue(clr) + ")"; }; /* ⬇ Function used to display text with an outline. Text, position, size, color, and alignment are variable / var word = function(txt,x,y,sz,clr,clr2,side) { ctx.save(); ctx.font = sz + "px " + tnr; ctx.textAlign = "center"; if(side !== undefined \|\| side !== null) { ctx.textAlign = side; } ctx.shadowColor = "black"; ctx.shadowBlur = 4; ctx.shadowOffsetX = 5; ctx.shadowOffsetY = 6; gradient = ctx.createLinearGradient(x,y - (0.55sz),x,y); gradient.addColorStop(0,Fill(clr)); gradient.addColorStop(0.5,Fill(clr2)); gradient.addColorStop(1,Fill(clr)); ctx.fillText(txt,x,y); ctx.shadowBlur = 0; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; ctx.fillStyle = null; for(var i = 0; i < 360; i += 360/20) { ctx.fillStyle = "black"; ctx.fillText(txt,x+sin(i)4,y+cos(i)4); } for(var i = 0; i < 360; i += 360/8) { ctx.fillStyle = "white"; ctx.fillText(txt,x+sin(i)2,y+cos(i)2); } ctx.fillStyle = gradient; ctx.fillText(txt,x,y); ctx.restore(); }; /** ⬇ Function used to display a more simple text for the in-game-opptions bar / var smallWord = function(txt,x,y,sz,clr) { ctx.save(); ctx.font = sz + "px " + tnr; ctx.textAlign = "left"; ctx.fillStyle = Fill(color(230, 230, 230)); if(clr !== undefined) { ctx.fillStyle = Fill(clr); } ctx.fillText(txt,x+1,y); ctx.fillStyle = "black"; if(clr !== undefined) { ctx.fillStyle = "white"; } ctx.fillText(txt,x,y); ctx.restore(); }; /* ⬇ Function that displays the same text as smallWord above, but adds the option of aligning text left, right or center / var smallWordwAlign = function(txt,x,y,sz,aln) { ctx.save(); ctx.font = sz + "px " + tnr; ctx.textAlign = aln; ctx.fillStyle = Fill(color(230, 230, 230)); ctx.fillText(txt,x+1,y); ctx.fillStyle = "black"; ctx.fillText(txt,x,y); ctx.restore(); }; //} // ￭ Create Graphic Functions { /* A convention I use here is the prefix "create" as a substitute for "paint," "render," or "draw." These functions are purely used to create visuals in the program / // ▲ Gameplay visuals { /* ⬇ Functions used to create the basic gradient square / var createSquare = function(clr,clr2) { pushMatrix(); resetMatrix(); gradient = ctx.createLinearGradient(0,0,150,150); gradient.addColorStop(0,Fill(clr)); gradient.addColorStop(1,Fill(clr2)); ctx.fillStyle = gradient; ctx.fillRect(0,0,150,150); popMatrix(); return get(0,0,150,150); }; /* ⬇ Function used to create the key piece / var createKey = function(clr) { pushMatrix(); resetMatrix(); switch(clr) { case "red": noFill(); stroke(219, 46, 46); strokeWeight(11); ellipse(150/2,60,20,20); rect(150/2,73,0,26); fill(219, 46, 46); noStroke(); rect(61,92,17,8); rect(61,81,17,8); break; case "blue": noFill(); stroke(73, 48, 217); strokeWeight(11); ellipse(150/2,60,20,20); rect(150/2,73,0,26); fill(73, 48, 217); noStroke(); rect(61,92,17,8); rect(61,81,17,8); break; case "yellow": noFill(); stroke(217, 217, 48); strokeWeight(11); ellipse(150/2,60,20,20); rect(150/2,73,0,26); fill(217, 217, 48); noStroke(); rect(61,92,17,8); rect(61,81,17,8); break; case "purple": noFill(); stroke(217, 48, 206); strokeWeight(11); ellipse(150/2,60,20,20); rect(150/2,73,0,26); fill(217, 48, 206); noStroke(); rect(61,92,17,8); rect(61,81,17,8); break; } popMatrix(); return get(0,0,150,150); }; /* ⬇ Function used to create a locked square piece / var createBlockedSquare = function(clr) { switch(clr) { case "red": gradient = ctx.createLinearGradient(0,0,150,150); gradient.addColorStop(0,Fill(color(255, 127, 127))); gradient.addColorStop(1,Fill(color(105, 0, 0))); break; case "blue": gradient = ctx.createLinearGradient(0,0,150,150); gradient.addColorStop(0,Fill(color(131, 127, 255))); gradient.addColorStop(1,Fill(color(12, 0, 105))); break; case "yellow": gradient = ctx.createLinearGradient(0,0,150,150); gradient.addColorStop(0,Fill(color(255, 247, 130))); gradient.addColorStop(1,Fill(color(163, 155, 0))); break; case "purple": gradient = ctx.createLinearGradient(0,0,150,150); gradient.addColorStop(0,Fill(color(255, 94, 231))); gradient.addColorStop(1,Fill(color(128, 0, 109))); break; } pushMatrix(); resetMatrix(); ctx.lineJoin = "miter"; ctx.lineWidth = 20; ctx.strokeStyle = gradient; ctx.strokeRect(10,10,130,130); ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(130,130); ctx.moveTo(140,10); ctx.lineTo(10,140); ctx.stroke(); popMatrix(); return get(0,0,150,150); }; /* ⬇ Function used to create a switch activated square / var createSwitchSquare = function(clr,clr2) { pushMatrix(); resetMatrix(); gradient = ctx.createLinearGradient(0,0,150,150); gradient.addColorStop(0,Fill(clr)); gradient.addColorStop(1,Fill(clr2)); ctx.lineJoin = "miter"; ctx.lineWidth = 20; ctx.strokeStyle = gradient; ctx.strokeRect(10,10,130,130); ctx.clearRect(20,20,110,110); popMatrix(); return get(0,0,150,150); }; /* ⬇ Function used to create a backup square for the switch tile game piece / var createBackup = function(clr) { switch(clr) { case "red": createSquare(color(255, 127, 127),color(105, 0, 0)); break; case "blue": createSquare(color(131, 127, 255),color(12, 0, 105)); break; case "yellow": createSquare(color(255, 247, 130),color(163, 155, 0)); break; case "purple": createSquare(color(255, 94, 231),color(128, 0, 109)); break; } return get(0,0,150,150); }; /* ⬇ Function used to create a square with a switch not activated (shadow still present) / var createSwitchOn = function(clr) { pushMatrix(); resetMatrix(); createSquare(color(166),color(71)); gradient = ctx.createLinearGradient(50,50,100,100); switch(clr) { case "red": gradient.addColorStop(0,Fill(color(235, 87, 87))); gradient.addColorStop(1,Fill(color(112, 0, 0))); break; case "blue": gradient.addColorStop(0,Fill(color(131, 127, 255))); gradient.addColorStop(1,Fill(color(12, 0, 105))); break; case "yellow": gradient.addColorStop(0,Fill(color(255, 247, 130))); gradient.addColorStop(1,Fill(color(163, 155, 0))); break; case "purple": gradient.addColorStop(0,Fill(color(255, 94, 231))); gradient.addColorStop(1,Fill(color(128, 0, 109))); break; } ctx.shadowColor = "black"; ctx.shadowBlur = 10; ctx.shadowOffsetX = 5; ctx.shadowOffsetY = 5; ctx.fillStyle = gradient; ctx.fillRect(50,50,50,50); ctx.shadowColor = ""; ctx.shadowBlur = 0; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; popMatrix(); return get(0,0,150,150); }; /* ⬇ Function used to create a square with a switch that is activated (shadow no longer present) / var createSwitchOff = function(clr) { pushMatrix(); resetMatrix(); createSquare(color(166),color(71)); gradient = ctx.createLinearGradient(50,50,100,100); switch(clr) { case "red": gradient.addColorStop(0,Fill(color(235, 87, 87))); gradient.addColorStop(1,Fill(color(112, 0, 0))); break; case "blue": gradient.addColorStop(0,Fill(color(131, 127, 255))); gradient.addColorStop(1,Fill(color(12, 0, 105))); break; case "yellow": gradient.addColorStop(0,Fill(color(255, 247, 130))); gradient.addColorStop(1,Fill(color(163, 155, 0))); break; case "purple": gradient.addColorStop(0,Fill(color(255, 94, 231))); gradient.addColorStop(1,Fill(color(128, 0, 109))); break; } ctx.fillStyle = gradient; ctx.fillRect(50,50,50,50); popMatrix(); return get(0,0,150,150); }; /* ⬇ Function used to create the platform square piece / var createPlatform = function() { pushMatrix(); resetMatrix(); ctx.lineCap = "square"; ctx.strokeStyle = "yellow"; ctx.lineWidth = 10; ctx.beginPath(); for(var i = 0; i < 300; i += 26) { ctx.moveTo(i,0); ctx.lineTo(i-150,150); } ctx.stroke(); ctx.strokeStyle = "black"; ctx.lineWidth = 10; ctx.beginPath(); for(var i = 13; i < 300; i += 26) { ctx.moveTo(i,0); ctx.lineTo(i-150,150); } ctx.stroke(); gradient = ctx.createLinearGradient(20,20,130,130); gradient.addColorStop(0,Fill(color(166))); gradient.addColorStop(1,Fill(color(71))); ctx.fillStyle = gradient; ctx.fillRect(15,15,120,120); popMatrix(); return get(0,0,150,150); }; /* ⬇ Function used to create the lever square piece / var createLever = function(on) { pushMatrix(); resetMatrix(); gradient = ctx.createLinearGradient(0,0,150,150); gradient.addColorStop(0,Fill(color(166))); gradient.addColorStop(1,Fill(color(71))); ctx.fillStyle = gradient; ctx.fillRect(0,0,150,150); gradient = ctx.createLinearGradient(20,60,20+110,90); gradient.addColorStop(0,Fill(color(199, 199, 199))); gradient.addColorStop(1,Fill(color(133, 133, 133))); ctx.lineJoin = "round"; ctx.lineWidth = 6; ctx.strokeStyle = gradient; ctx.fillStyle = gradient; ctx.strokeRect(20,60,110,30); ctx.shadowColor = "black"; ctx.shadowBlur = 10; ctx.shadowOffsetX = 3; ctx.shadowOffsetY = 2; ctx.fillStyle = "black"; if(!on) { ctx.fillRect(20,60,110/4,30); } else { ctx.fillRect(100,60,110/4,30); } ctx.shadowColor = "white"; ctx.shadowBlur = 0; ctx.shadowOFfsetX = 0; ctx.shadowOffsetY = 0; popMatrix(); return get(0,0,150,150); }; /* ⬇ Function used to create the red-blue flip-switch tiles. NOTE: this chooses (has arrow) / var createFlipSwitch_RedBlue = function(clr) { pushMatrix(); resetMatrix(); gradient = ctx.createLinearGradient(0,0,150,150); gradient.addColorStop(0,Fill(Clrs.clr)); gradient.addColorStop(1,Fill(Clrs.clr2)); ctx.fillStyle = gradient; ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(0,150); ctx.lineTo(150,0); ctx.closePath(); ctx.fill(); gradient = ctx.createLinearGradient(0,0,150,150); gradient.addColorStop(0,Fill(Clrs.secondclr)); gradient.addColorStop(1,Fill(Clrs.secondclr2)); ctx.fillStyle = gradient; ctx.beginPath(); ctx.moveTo(150,0); ctx.lineTo(0,150); ctx.lineTo(150,150); ctx.closePath(); ctx.fill(); ctx.shadowColor = "black"; ctx.shadowBlur = 4; ctx.shadowOffsetX = 3; ctx.shadowOffsetY = 3; if(clr === "red") { ctx.lineJoin = "round"; ctx.lineWidth = 12; ctx.strokeStyle = Clrs.GREY; ctx.beginPath(); ctx.moveTo(130/2,130/2); ctx.lineTo(25,25); ctx.lineTo(50,25); ctx.lineTo(25,50); ctx.lineTo(25,25); ctx.closePath(); ctx.stroke(); ctx.strokeStyle = Clrs.GREY; ctx.lineWidth = 11; ctx.beginPath(); ctx.ellipse(150/2, 150/2, 15, 15, 0, 0, 2 Math.PI); ctx.stroke(); ctx.closePath(); } else if(clr === "blue") { ctx.lineJoin = "round"; ctx.strokeStyle = Clrs.GREY; ctx.lineWidth = 11; ctx.beginPath(); ctx.ellipse(150/2, 150/2, 15, 15, 0, 0, 2 * Math.PI); ctx.stroke(); ctx.closePath(); ctx.lineWidth = 12; ctx.beginPath(); ctx.moveTo(180/2,180/2); ctx.lineTo(125,125); ctx.lineTo(125,100); ctx.lineTo(100,125); ctx.lineTo(125,125); ctx.closePath(); ctx.stroke(); } ctx.shadowColor = "white"; ctx.shadowBlur = 0; ctx.shadowOFfsetX = 0; ctx.shadowOffsetY = 0; popMatrix(); return get(0,0,150,150); }; /** ⬇ Function used to create the yellow-purple flip- switch / var createFlipSwitch_YellowPurple = function(clr) { pushMatrix(); resetMatrix(); gradient = ctx.createLinearGradient(0,0,150,150); gradient.addColorStop(0,Fill(Clrs.thirdclr)); gradient.addColorStop(1,Fill(Clrs.thirdclr2)); ctx.fillStyle = gradient; ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(0,150); ctx.lineTo(150,0); ctx.closePath(); ctx.fill(); gradient = ctx.createLinearGradient(0,0,150,150); gradient.addColorStop(0,Fill(Clrs.fourthclr)); gradient.addColorStop(1,Fill(Clrs.fourthclr2)); ctx.fillStyle = gradient; ctx.beginPath(); ctx.moveTo(150,0); ctx.lineTo(0,150); ctx.lineTo(150,150); ctx.closePath(); ctx.fill(); ctx.shadowColor = "black"; ctx.shadowBlur = 4; ctx.shadowOffsetX = 3; ctx.shadowOffsetY = 3; if(clr === "yellow") { ctx.lineJoin = "round"; ctx.lineWidth = 12; ctx.strokeStyle = Clrs.GREY; ctx.beginPath(); ctx.moveTo(130/2,130/2); ctx.lineTo(25,25); ctx.lineTo(50,25); ctx.lineTo(25,50); ctx.lineTo(25,25); ctx.closePath(); ctx.stroke(); ctx.strokeStyle = Clrs.GREY; ctx.lineWidth = 11; ctx.beginPath(); ctx.ellipse(150/2, 150/2, 15, 15, 0, 0, 2 Math.PI); ctx.stroke(); ctx.closePath(); } else if(clr === "purple") { ctx.lineJoin = "round"; ctx.strokeStyle = Clrs.GREY; ctx.lineWidth = 11; ctx.beginPath(); ctx.ellipse(150/2, 150/2, 15, 15, 0, 0, 2 * Math.PI); ctx.stroke(); ctx.closePath(); ctx.lineWidth = 12; ctx.beginPath(); ctx.moveTo(180/2,180/2); ctx.lineTo(125,125); ctx.lineTo(125,100); ctx.lineTo(100,125); ctx.lineTo(125,125); ctx.closePath(); ctx.stroke(); } ctx.shadowColor = "white"; ctx.shadowBlur = 0; ctx.shadowOFfsetX = 0; ctx.shadowOffsetY = 0; popMatrix(); return get(0,0,150,150); }; /** ⬇ Function used to create all four faded tiles used in the flip-switch tiles set / var createFlipSwitchTile = function(clr,fade) { pushMatrix(); resetMatrix(); ctx.fillStyle = "white"; ctx.fillRect(0,0,150,150); gradient = ctx.createLinearGradient(0,0,150,150); if(clr === "red") { if(fade) { gradient.addColorStop(0,"rgba(255, 127, 127, 0.3"); gradient.addColorStop(1,"rgba(105, 0, 0, 0.5)"); } else { gradient.addColorStop(0,Fill(Clrs.clr)); gradient.addColorStop(1,Fill(Clrs.clr2)); } } else if(clr === "blue") { if(fade) { gradient.addColorStop(0,"rgba(131, 127, 255, 0.3"); gradient.addColorStop(1,"rgba(12, 0, 105, 0.5)"); } else { gradient.addColorStop(0,Fill(Clrs.secondclr)); gradient.addColorStop(1,Fill(Clrs.secondclr2)); } } else if(clr === "yellow") { if(fade) { gradient.addColorStop(0,"rgba(255, 247, 130, 0.3"); gradient.addColorStop(1,"rgba(163, 155, 0, 0.5)"); } else { gradient.addColorStop(0,Fill(Clrs.thirdclr)); gradient.addColorStop(1,Fill(Clrs.thirdclr2)); } } else if(clr === "purple") { if(fade) { gradient.addColorStop(0,"rgba(255, 94, 231, 0.3"); gradient.addColorStop(1,"rgba(128, 0, 109, 0.6)"); } else { gradient.addColorStop(0,Fill(Clrs.fourthclr)); gradient.addColorStop(1,Fill(Clrs.fourthclr2)); } } ctx.fillStyle = gradient; ctx.fillRect(0,0,150,150); popMatrix(); return get(0,0,150,150); }; /* ⬇ Function used to create the four-color faded tile where color is based on enter position / var createFourColorSquare = function() { pushMatrix(); resetMatrix(); gradient = ctx.createLinearGradient(0,150/2,150/2,150); gradient.addColorStop(0,Fill(Clrs.clr)); gradient.addColorStop(1,Fill(Clrs.clr2)); ctx.fillStyle = gradient; ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(150/2,150/2); ctx.lineTo(0,150); ctx.closePath(); ctx.fill(); gradient = ctx.createLinearGradient(0,0,150,150/2); gradient.addColorStop(0,Fill(Clrs.secondclr)); gradient.addColorStop(1,Fill(Clrs.secondclr2)); ctx.fillStyle = gradient; ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(150,0); ctx.lineTo(150/2,150/2); ctx.closePath(); ctx.fill(); gradient = ctx.createLinearGradient(150/2,0,150,150); gradient.addColorStop(0,Fill(Clrs.thirdclr)); gradient.addColorStop(1,Fill(Clrs.thirdclr2)); ctx.fillStyle = gradient; ctx.beginPath(); ctx.moveTo(150,0); ctx.lineTo(150,150); ctx.lineTo(150/2,150/2); ctx.closePath(); ctx.fill(); gradient = ctx.createLinearGradient(0,150/2,150,150); gradient.addColorStop(0,Fill(Clrs.fourthclr)); gradient.addColorStop(1,Fill(Clrs.fourthclr2)); ctx.fillStyle = gradient; ctx.beginPath(); ctx.moveTo(0,150); ctx.lineTo(150,150); ctx.lineTo(150/2,150/2); ctx.closePath(); ctx.fill(); popMatrix(); return get(0,0,150,150); }; /* ⬇ Function used to create the color based teleporter to transport the player from one teleporter to the other / var createTeleporterSquare = function(clr) { pushMatrix(); resetMatrix(); gradient = ctx.createLinearGradient(0,0,150,150); gradient.addColorStop(0,Fill(color(166,166,166))); gradient.addColorStop(1,Fill(color(71,71,71))); ctx.fillStyle = gradient; ctx.fillRect(0,0,150,150); if(clr === "red") { gradient = ctx.createLinearGradient(0,0,150,150); gradient.addColorStop(0,Fill(color(Clrs.clr))); gradient.addColorStop(1,Fill(color(Clrs.clr2))); } else if(clr === "blue") { gradient = ctx.createLinearGradient(0,0,150,150); gradient.addColorStop(0,Fill(color(Clrs.secondclr))); gradient.addColorStop(1,Fill(color(Clrs.secondclr2))); } else if(clr === "yellow") { gradient = ctx.createLinearGradient(0,0,150,150); gradient.addColorStop(0,Fill(color(Clrs.thirdclr))); gradient.addColorStop(1,Fill(color(Clrs.thirdclr2))); } else if(clr === "purple") { gradient = ctx.createLinearGradient(0,0,150,150); gradient.addColorStop(0,Fill(color(Clrs.fourthclr))); gradient.addColorStop(1,Fill(color(Clrs.fourthclr2))); } ctx.fillStyle = gradient; ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(0,150/3); ctx.lineTo(150/3,0); ctx.closePath(); ctx.moveTo(150/3 + 150/3, 0); ctx.lineTo(150,0); ctx.lineTo(150,150/3); ctx.moveTo(0,150/3+150/3); ctx.lineTo(0,150); ctx.lineTo(150/3,150); ctx.moveTo(150/3+150/3,150); ctx.lineTo(150,150); ctx.lineTo(150,150/3+150/3); ctx.fill(); ctx.beginPath(); ctx.ellipse(150/2, 150/2, 25, 25, 0, 0, 2 Math.PI); ctx.fill(); ctx.closePath(); popMatrix(); return get(0,0,150,150); }; /** ⬇ Function used to create the dots that the platform will follow. Does not determine the path; only allows the player to see where it will go before the lever is thrown / var createPlatformDot = function(sz) { pushMatrix(); resetMatrix(); ctx.beginPath(); ctx.ellipse(150/2, 150/2, sz/5, sz/5, 0, 0, 2 Math.PI); ctx.fill(); ctx.closePath(); popMatrix(); return get(0,0,150,150); }; //} // ▲ Backgroud visuals { /** ⬇ Function used to create the tile for the program backdrop / var createTile = function(x,y,one,two) { pushMatrix(); translate(x,y); gradient = ctx.createLinearGradient(0,0,50,50); gradient.addColorStop(0,Fill(color(one))); gradient.addColorStop(1,Fill(color(two))); ctx.fillStyle = gradient; ctx.fillRect(0,0,50,50); popMatrix(); }; //} // ▲ Scene Management visuals { /* ⬇ Function used to create an info box with text / var createInfoBox = function(x,y,w,h,txt,txtSz) { ctx.lineJoin = "round"; ctx.fillStyle = "black"; ctx.fillRect(x-(w/2),y-(h/2),w,h); ctx.lineWidth = 14; ctx.strokeStyle = "black"; ctx.strokeRect(x-(w/2),y-(h/2),w,h); gradient = ctx.createLinearGradient(x-(w/2),y-(h/2),x-(w/2),y+(h/2)); gradient.addColorStop(0,"darkgrey"); gradient.addColorStop(0.3,"white"); gradient.addColorStop(1,"darkgrey"); ctx.shadowColor = "black"; ctx.shadowBlur = 5; ctx.shadowOffsetX = 6; ctx.shadowOffsetY = 7; ctx.strokeStyle = gradient; ctx.lineJoin = "round"; ctx.lineWidth = 8; ctx.strokeRect(x-(w/2),y-(h/2),w,h); ctx.shadowColor = "white"; ctx.shadowBlur = 0; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; for(i = 0; i < txt.length; i++) { smallWord(txt[i],x-((w/2)0.92),y-((h/2)0.75)+i22,15,color(0, 0, 0)); } }; /** ⬇ Function used to create most of the scroll bar / var createScrollBar = function(x,y,w,h) { resetMatrix(); pushMatrix(); ctx.lineJoin = "round"; ctx.lineWidth = 15; ctx.strokeStyle = "black"; ctx.strokeRect(x-(w/2),y-(h/2),w,h); ctx.fillStyle = "lightgrey"; ctx.fillRect(x-(w/2),y-(h/2),w,h); popMatrix(); return get(x-(w/2)-(15/2),y-(h/2)-(15/2),w+15,h+15); }; /* ⬇ Function used to create the pre-game state box / var createStateBox = function(x,y,w,h,tle,value) { ctx.strokeStyle = "black"; ctx.lineJoin = "round"; ctx.lineWidth = 18; ctx.strokeRect(x-(w/2),y-(h/2), w,h); gradient = ctx.createLinearGradient(x- (w/2),y-(h/2), x-(w/2),y+(h/2)); gradient.addColorStop(0,"grey"); gradient.addColorStop(0.25,"white"); gradient.addColorStop(0.4,"white"); gradient.addColorStop(1,"grey"); ctx.fillStyle = gradient; ctx.fillRect(x-(w/2),y-(h/2), w,h); ctx.strokeStyle = gradient; ctx.lineWidth = 7; ctx.strokeRect(x-(w/2),y-(h/2), w,h); ctx.fillStyle = "black"; ctx.textAlign = "center"; ctx.font = "30px " + tnr; ctx.fillText(tle,x,y-(h/2)+30); ctx.fillText("______________________",x,y-(h/2)+30); ctx.textAlign= "left"; ctx.font = "17px " + tnr; for(i = 0; i < value.length; i++) { ctx.fillText(value[i],x-(w/2)+5,y-(h/2)+60+(i25)); } return get(x-(w/2)-9,y-(h/2)-9,w+18,h+18); }; //} // ▲ Pre-Game Prompt visual { /** ⬇ Function used to create the pre-program prompt / var createPreGamePrompt = function() { ctx.save(); ctx.fillStyle = "white"; ctx.fillRect(0,0,WIDTH,HEIGHT); ctx.font = "40px " + tnr; ctx.fillStyle = "black"; ctx.textAlign = "center"; ctx.fillText("click/tap to start the program", WIDTH/2,HEIGHT/2); ctx.restore(); }; //} // ▲ Mobile Button visuals { /* ⬇ Function used to create the mobile movement buttons / var createMobileArrowButton = function(dir,x,y) { ctx.save(); if(dir === "up" \|\| dir === "down") { ctx.translate(x-(134/2),y-(84/2)); } else { ctx.translate(x-(84/2),y-(134/2)); } ctx.strokeStyle = "rgba(255, 255, 255, 0.6)"; ctx.fillStyle = "rgba(255, 255, 255, 0.6)"; switch(dir) { case "left": ctx.lineWidth = 14; ctx.lineJoin = "round"; ctx.strokeRect(7,7,70,120); ctx.fillRect(7,7,70,120); ctx.lineWidth = 10; ctx.strokeStyle = "white"; ctx.beginPath(); ctx.moveTo(28,(120+14)/2); ctx.lineTo(55,25); ctx.lineTo(55,120+14-25); ctx.closePath(); ctx.stroke(); ctx.fillStyle = "white"; ctx.beginPath(); ctx.moveTo(28,(120+14)/2); ctx.lineTo(55,25); ctx.lineTo(55,120+14-25); ctx.closePath(); ctx.fill(); break; case "right": ctx.lineWidth = 14; ctx.lineJoin = "round"; ctx.strokeRect(7,7,70,120); ctx.fillRect(7,7,70,120); ctx.lineWidth = 10; ctx.strokeStyle = "white"; ctx.beginPath(); ctx.moveTo(84-28,(120+14)/2); ctx.lineTo(84-55,25); ctx.lineTo(84-55,120+14-25); ctx.closePath(); ctx.stroke(); ctx.fillStyle = "white"; ctx.beginPath(); ctx.moveTo(84-28,(120+14)/2); ctx.lineTo(84-55,25); ctx.lineTo(84-55,120+14-25); ctx.closePath(); ctx.fill(); break; case "up": ctx.lineWidth = 14; ctx.lineJoin = "round"; ctx.strokeRect(7,7,120,70); ctx.fillRect(7,7,120,70); ctx.lineWidth = 10; ctx.strokeStyle = "white"; ctx.beginPath(); ctx.moveTo((120+14)/2,28); ctx.lineTo(84-55,55); ctx.lineTo((134-25),55); ctx.closePath(); ctx.stroke(); ctx.fillStyle = "white"; ctx.beginPath(); ctx.moveTo((120+14)/2,28); ctx.lineTo(84-55,55); ctx.lineTo((134-25),55); ctx.closePath(); ctx.fill(); break; case "down": ctx.lineWidth = 14; ctx.lineJoin = "round"; ctx.strokeRect(7,7,120,70); ctx.fillRect(7,7,120,70); ctx.lineWidth = 10; ctx.strokeStyle = "white"; ctx.beginPath(); ctx.moveTo((120+14)/2,84-28); ctx.lineTo(84-55,84-55); ctx.lineTo((134-25),84-55); ctx.closePath(); ctx.stroke(); ctx.fillStyle = "white"; ctx.beginPath(); ctx.moveTo((120+14)/2,84-28); ctx.lineTo(84-55,84-55); ctx.lineTo((134-25),84-55); ctx.closePath(); ctx.fill(); break; } ctx.restore(); }; //} //} // ￭ Mouse Related Functions { /* ⬇ Function used to determine when the mouse is pressed / canvas.onmousedown = function() { clicked = true; released = false; }; /* ⬇ Function used to determine when the mouse is not released / canvas.onmouseup = function() { released = true; clicked = false; }; //} // ￭ DOMEventUtil/Scrolling { //Credit for DOMEVEventUtil to @KWC Memory Card Game var DOMEventUtil = { preventDefault: function (evt) { if (typeof evt.preventDefault === "function") { evt.preventDefault(); } }, addHandler: function (ele, type, fn) { if (typeof ele.addEventListener === "function") { ele.addEventListener(type, fn, false); } }, }; //Credit for wheel handler to @KWC Memory Card Game var assignEventCallbacks = function (output) { this.wheelEventHandler = function (dom_event) { DOMEventUtil.preventDefault(dom_event); deltaY = dom_event.deltaY \|\| dom_event.detail \|\| 0; scrolling = true; }; DOMEventUtil.addHandler(output.canvas, "onwheel" in output.canvas ? "wheel" : "DOMMouseScroll", this.wheelEventHandler); }; assignEventCallbacks(this.externals); //} //} // ⬟ Levels/Graphics { // ￭ Levels for gameplay { /* ⬇ Gameplay levels / Levels = [ /* Character code for creating levels { 'n: normal grey tile 'e': green end tile that progresses player to next level 'o': first color (red) 's:' secondary color (blue) 't': third color (yellow) 'f': fourth color (purple) 'a': paint red tile (tile color grey) 'b': paint blue tile (tile color grey) 'c': paint yellow tile (tile color grey) 'd': paint purple tile (tile color grey) ' ': no tile (hole) '1': red color blocked tile (key to open) '2': blue color blocked tile (key to open) '3': yellow color blocked tile (key to open) '4': purple color blocked tile (key to open) '5': red color tile key '6': blue color tile key '7': yellow color tile key '8': purple color tile key '!': red color switch tile '@': blue color switch tile '#': yellow color switch tile '$': purple color switch tile '%': switch color picker red '^': switch color picker blue '&': switch color picker yellow '': switch color picker purple 'p': moving platform '.': platform track 'l': lever to start platforms (normal grey tile) '(': red fade flipswitch tile ')': blue fade flipswitch tile '-': yellow fade flipswitch tile '_': purple fade flipswitch tile '=': flip switch 'dial' (Red_Blue) '+': flip switch 'dial' (Yellow_Purple) '?': teleporter red } / /** Piece count variables needed in the level code startX: number startY: number normal: n primary: o secondary: s third: t fourth: f paintRed: a paintBlue: b paintYellow: c paintPurple: d redBlock: 1 blueBlock: 2 yellowBlock: 3 purpleBlock: 4 redKey: 5 blueKey: 6 yellowKey: 7 purpleKey: 8 redSwitchTile: ! blueSwitchTile: @ yellowSwitchTile: # purpleSwitchTile: $ redSwitch: % blueSwitch: ^ yellowSwitch: & purpleSwitch: * lever: l platform: p pi: number pj: number end: e flipTileRed: ( flipTileBlue: ) flipTileYellow: - flipTilePurple: _ flipSwitchRB: = flipSwitchYP: + fourColorTile: < teleporterRed: ? teleporterBlue: > teleporterYellow: / teleporterPurple: ; redij: [[0,0],[0,0]] blueij: [[0,0],[0,0]] creator: name hard: difficulty level: [...] last: true/false */ { startX: 0, startY: 0, normal: 3, end: 1, creator: me, level: [ "nnne" ], hard: "Beginner", }, //level 1 { startX: 0, startY: 0, normal: 4, primary: 2, paintRed: 1, end: 1, creator: me, level: [ "nonn", "aone", ], hard: "Beginner", }, //level 2 { startX: 1, startY: 2, normal: 5, primary: 1, third: 1, fourth: 2, paintRed: 1, paintYellow: 1, paintPurple: 1, end: 1, creator: me, level: [ " tnnfna", "cn d o", " n e", ], hard: "Beginner", }, //level 3 { startX: 2, startY: 0, normal: 11, redSwitchTile: 1, redSwitch: 1, paintRed: 1, end: 1, creator: me, level: [ " n ", "nnnnn", "n n n", "n ! n", "% e a", ], hard: "Beginner", }, //level 4 { startX: 0, startY: 0, normal: 14, fourth: 2, paintPurple: 1, redSwitchTile: 6, yellowSwitchTile: 1, redSwitch: 1, yellowSwitch: 1, paintRed: 1, paintYellow: 1, end: 1, creator: me, level: [ "nafnn%", "dnfnnn", "!!!!!!", "nnnnn#", "ncn& e" ], hard: "Beginner", }, //level 5 { startX: 0, startY: 0, normal: 4, redKey: 1, redBlock: 1, end: 1, creator: me, level: [ "n ", "5 ", "n ", "1 ", "nne", ], hard: "Beginner", }, //level 6 { startX: 0, startY: 0, normal: 13, primary: 1, paintRed: 2, paintPurple: 1, purpleSwitchTile: 2, purpleSwitch: 1, yellowKey: 1, yellowBlock: 3, end: 1, creator: me, level: [ "nnd$a", "n n$a", " non", "33n n", "e3n 7", ], hard: "Beginner", }, //level 7 { startX: 0, startY: 0, normal: 2, lever: 1, platform: 1, pi: 0, pj: 1, end: 1, creator: me, level: [ "np..", "l .", " en", ], hard: "Intermediate", }, //level 8 { startX: 1, startY: 1, normal: 6, lever: 1, platform: 1, pi: 0, pj: 1, primary: 1, fourth: 6, paintRed: 1, paintPurple: 1, end: 1, blueBlock: 1, blueKey: 1, creator: me, level: [ " p.. ", " n nf", "fl af", "do ff", "2f n ", " e 6 ", ], hard: "Intermediate", }, //level 9 { startX: 0, startY: 0, normal: 16, primary: 1, third: 1, paintRed: 1, paintBlue: 1, paintYellow: 1, paintPurple: 1, redSwitchTile: 2, redSwitch: 1, blueKey: 1, blueBlock: 2, end: 1, creator: me, level: [ "nnnt%", "n b n", "2anc6", "n d ", "on2!e", ], hard: "Intermediate", }, //level 10 { startX: 0, startY: 0, normal: 7, lever: 1, platform: 1, pi: 3, pj: 0, yellowKey: 1, yellowBlock: 1, purpleSwitchTile: 4, purpleSwitch: 1, paintYellow: 1, paintPurple: 1, end: 1, creator: me, level: [ "n3* e", "l $", "n$$$7", "p....", "n n", "dnnnc" ], hard: "Intermediate", }, //level 11 { startX: 0, startY: 0, flipTileRed: 4, flipTileBlue: 4, paintRed: 2, paintBlue: 1, flipSwitchRB: 2, normal: 16, end: 1, level: [ "na(n=", "nn(bn", ")) ))", "nn(an", "en(n=", ], creator: me, hard: "Intermediate", }, //level 12 { startX: 2, startY: 0, normal: 9, third: 1, paintYellow: 1, paintPurple: 1, yellowKey: 1, yellowBlock: 3, flipTileYellow: 2, flipTilePurple: 5, flipSwitchYP: 2, end: 1, level: [ "7 nc dn", "_ --__n", "__+ + n", "3 nnnnt", "3 ", "3ne", ], creator: me, hard: "Intermediate", }, //level 13 { startX: 0, startY: 0, platform: 1, pi: 0, pj: 2, lever: 1, normal: 6, end: 1, flipSwitchRB: 1, flipTileRed: 2, flipTileBlue: 2, yellowSwitch: 1, purpleSwitch: 1, yellowSwitchTile: 5, purpleSwitchTile: 6, paintRed: 1, paintBlue: 1, paintYellow: 1, paintPurple: 1, level: [ "nlp..=", ")ba (", "&) c(", "##d###", "$$$$$$", "nnnnen", ], creator: me, hard: "Intermediate", }, //level 14 { startX: 0, startY: 0, normal: 13, primary: 2, secondary: 2, yellowKey: 1, yellowBlock: 1, purpleSwitch: 1, purpleSwitchTile: 1, fourColorTile: 1, end: 1, level: [ "nnns7 ", "n nns ", "nn<nn ", "onn ", "on3$e", ], creator: me, hard: "Intermediate", }, //level 15 { startX: 0, startY: 0, normal: 5, third: 2, paintRed: 2, paintBlue: 1, paintYellow: 1, paintPurple: 1, yellowBlock: 1, yellowKey: 1, flipTileRed: 4, flipTileBlue: 6, flipTilePurple: 2, redSwitch: 1, redSwitchTile: 1, flipSwitchRB: 3, flipSwitchYP: 1, end: 1, level: [ "na))=%", "d=() =", "(+()))", "(_nnb ", "7 cn e", "attn3!", ], creator: me, hard: "Advanced", }, //level 16 { startX: 0, startY: 0, normal: 21, platform: 1, pi: 3, pj: 0, lever: 1, paintBlue: 2, paintYellow: 3, paintPurple: 1, blueBlock: 1, blueKey: 1, flipTileBlue: 6, flipTileYellow: 4, flipTilePurple: 3, flipSwitchYP: 1, flipSwitchRB: 1, end: 1, level: [ "nc))))", "b-d2cl", ") +_ b", "p) _ c", ". -nn6", "e =- ", ], creator: me, hard: "Advanced", }, //level 17 { startX: 0, startY: 0, normal: 8, third: 1, paintRed: 1, paintBlue: 1, paintYellow: 2, paintPurple: 1, blueKey: 1, purpleKey: 1, blueBlock: 2, purpleBlock: 1, yellowSwitch: 1, yellowSwitchTile: 1, flipTileRed: 2, flipTileBlue: 2, flipTileYellow: 1, flipTilePurple: 1, flipSwitchRB: 1, flipSwitchYP: 1, platform: 1, pi: 0, pj: 5, lever: 1, end: 1, level: [ "nbnc.p", "2 n l", "6 =)+8", "_d4 #", "(n- e2", "&(na ", ], creator: me, hard: "Advanced", }, //level 18 { startX: 0, startY: 0, normal: 9, fourth: 2, paintRed: 1, paintBlue: 1, blueKey: 1, blueBlock: 1, redSwitchTile: 1, redSwitch: 1, flipTileRed: 2, flipTileBlue: 2, flipTileYellow: 2, flipTilePurple: 2, fourColorTile: 3, flipSwitchYP: 1, flipSwitchRB: 1, end: 1, level: [ "n<(n_%", "<ffnn_", "--+)n6", "n <)bn", "na =", "n2(!e ", ], creator: me, hard: "Advanced", }, //level 19 { startX: 1, startY: 1, normal: 5, secondary: 1, fourth: 1, paintRed: 1, paintPurple: 1, third: 3, redKey: 1, blueKey: 1, purpleKey: 1, redBlock: 1, blueBlock: 1, purpleBlock: 1, yellowSwitchTile: 1, yellowSwitch: 1, fourColorTile: 2, flipTileRed: 2, flipTileYellow: 2, flipTilePurple: 1, flipSwitchRB: 2, flipSwitchYP: 1, end: 1, level: [ "t<(n=d", "<n ( 6", "21anf=", "st 8_-", "nt5 & ", "n+4-#e", ], creator: me, hard: "Advanced", }, //level 20 { startX: 1, startY: 1, normal: 8, primary: 3, secondary: 2, fourth: 1, paintRed: 3, paintBlue: 3, paintPurple: 2, redBlock: 3, redKey: 1, purpleSwitchTile: 1, purpleSwitch: 1, flipTileRed: 5, flipTileBlue: 5, flipTileYellow: 1, flipTilePurple: 3, flipSwitchRB: 2, flipSwitchYP: 1, fourColorTile: 1, platform: 1, lever: 1, pi: 0, pj: 3, end: 1, level: [ " <.pn)a", "1n+_no5", "s )lnd(", "d = - =", "$_b(b ", " e as1a", ], creator: me, hard: "Advanced", }, //level 21 { startX: 3, startY: 0, normal: 2, secondary: 1, third: 1, paintBlue: 1, paintYellow: 1, paintPurple: 1, flipTileRed: 1, flipTileBlue: 3, flipTileYellow: 1, flipTilePurple: 1, flipSwitchRB: 2, flipSwitchYP: 1, purpleSwitchTile: 1, purpleSwitch: 1, fourColorTile: 2, redKey: 1, yellowKey: 1, redBlock: 1, yellowBlock: 1, platform: 1, lever: 1, pi: 1, pj: 4, end: 1, creator: me, level: [ "+)bnl)c", ")...p-5", ".$_nd ", "<.3 (7", "=.1e =", "s....t<", ], hard: "Advanced", }, //level 22 { startX: 1, startY: 1, normal: 36, third: 4, fourth: 2, paintBlue: 1, paintPurple: 2, yellowBlock: 2, yellowKey: 1, blueSwitchTile: 1, blueSwitch: 1, platform: 1, lever: 1, pi: 1, pj: 4, flipSwitchRB: 1, flipSwitchYP: 2, flipTileRed: 2, flipTileBlue: 4, flipTileYellow: 2, flipTilePurple: 2, fourColorTile: 1, teleporterRed: 2, redij: [[2,1],[5,0]], end: 1, creator: me, level: [ "=f...-7", "tn<(p(-", " ?) _n ", "+)nfd3^", ")ln b)3", "?d@e n+", ], hard: "Expert", }, //level 23 { startX: 0, startY: 0, paintRed: 2, paintPurple: 1, primary: 2, redSwitchTile: 1, blueSwitchTile: 1, redSwitch: 1, blueSwitch: 1, blueBlock: 3, yellowBlock: 2, blueKey: 1, yellowKey: 1, normal: 42, platform: 1, lever: 1, pi: 4, pj: 5, flipTileRed: 1, flipTileBlue: 2, flipTilePurple: 2, flipSwitchRB: 1, flipSwitchYP: 1, fourColorTile: 2, teleporterRed: 2, teleporterBlue: 2, teleporterYellow: 2, redij: [[1,1],[3,6]], blueij: [[1,3],[3,2]], yellowij: [[0,3],[3,3]], end: 1, creator: me, level: [ "n!6/^ e", "a?3>@)2", " ", "%_>/72?", "_<...pl", " ..n+= ", ], hard: "Expert", }, //level 24 { startX: 0, startY: 0, normal: 42, third: 1, fourth: 2, paintRed: 1, paintBlue: 1, platform: 1, pi: 2, pj: 0, lever: 1, redBlock: 1, redKey: 1, redSwitchTile: 1, yellowSwitchTile: 1, yellowSwitch: 1, redSwitch: 1, flipTileRed: 2, flipTileBlue: 4, flipTilePurple: 6, flipTileYellow: 1, fourColorTile: 2, flipSwitchRB: 2, flipSwitchYP: 1, teleporterRed: 2, teleporterBlue: 2, teleporterYellow: 2, redij: [[0,3],[5,1]], blueij: [[2,4],[5,3]], yellowij: [[2,3],[4,4]], end: 1, creator: me, level: [ "n<!?()&", "_b=)naf", "p.t/>)%", " ..____", "+ <)/#-", "l? >= e", ], hard: "Expert", }, //level 25 { startX: 0, startY: 0, normal: 4, primary: 1, paintRed: 1, yellowSwitchTile: 1, purpleSwitchTile: 1, yellowSwitch: 1, purpleSwitch: 1, platform: 1, lever: 1, pi: 5, pj: 3, flipTileRed: 4, flipTileBlue: 1, flipTileYellow: 1, flipTilePurple: 2, flipSwitchRB: 1, flipSwitchYP: 1, fourColorTile: 3, teleporterRed: 2, teleporterBlue: 2, teleporterPurple: 2, redij: [[1,1],[3,4]], blueij: [[4,5],[3,2]], purpleij: [[0,1],[5,0]], end: 1, creator: me, level: [ "n;$e #<", "a? -+o", " <..((", "&=>.?)l", "_nn.<> ", ";_np((", ], hard: "Expert", }, //level 26 { startX: 0, startY: 0, normal: 48, fourth: 1, paintRed: 2, paintBlue: 1, flipTileRed: 5, flipTileBlue: 3, redSwitchTile: 1, blueSwitchTile: 1, redSwitch: 1, blueSwitch: 1, redBlock: 5, blueBlock: 4, purpleBlock: 1, redKey: 1, blueKey: 1, purpleKey: 1, fourColorTile: 3, flipSwitchRB: 2, teleporterRed: 2, teleporterBlue: 2, teleporterYellow: 2, redij: [[0,2],[0,4]], blueij: [[1,2],[2,4]], yellowij: [[2,0],[4,0]], end: 1, creator: me, level: [ "n(? ?15", "n<> <nf", "/ a >a=", " %4(@b ", "/ ((28!", "<1 n (", "1^)6= e", ], hard: "Expert", }, //level 27 { startX: 2, startY: 1, normal: 39, secondary: 1, third: 1, fourth: 1, paintRed: 1, paintBlue: 1, paintPurple: 1, redKey: 1, yellowKey: 1, purpleKey: 1, redBlock: 1, yellowBlock: 2, purpleBlock: 1, flipTileRed: 2, flipTileBlue: 5, flipTileYellow: 2, flipTilePurple: 2, fourColorTile: 4, redSwitchTile: 1, blueSwitchTile: 1, yellowSwitchTile: 1, redSwitch: 1, blueSwitch: 1, yellowSwitch: 1, flipSwitchRB: 2, flipSwitchYP: 1, teleporterRed: 2, teleporterBlue: 2, teleporterPurple: 2, redij: [[1,6],[6,4]], purpleij: [[0,4],[6,2]], blueij: [[0,0],[2,2]], end: 1, creator: me, level: [ ">b( ;=8", "5 n=a ?", "-<> 37!", "+ 4%) n", "<)< 3&)", "# nn1 @", "d^; ?)e" ], hard: "Expert", last: true }, //level 28 ]; //} // ￭ Pre-made graphics { /* ⬇ Program graphics / CanvasGraphics = { "playerWhite": function() { pushMatrix(); resetMatrix(); gradient = ctx.createLinearGradient(0,0,100,100); gradient.addColorStop(0.2,"white"); gradient.addColorStop(1,"grey"); ctx.fillStyle = gradient; ctx.beginPath(); ctx.ellipse(50, 50, 50, 50, 0, 0, 2 Math.PI); ctx.fill(); ctx.closePath(); popMatrix(); return get(0,0,100,100); }, "playerRed": function() { pushMatrix(); resetMatrix(); gradient = ctx.createLinearGradient(0,0,100,100); gradient.addColorStop(0.2,Fill(color(255, 99, 99))); gradient.addColorStop(1,Fill(color(117, 0, 0))); ctx.fillStyle = gradient; ctx.beginPath(); ctx.ellipse(50, 50, 50, 50, 0, 0, 2 * Math.PI); ctx.fill(); popMatrix(); return get(0,0,100,100); }, "playerBlue": function() { pushMatrix(); resetMatrix(); gradient = ctx.createLinearGradient(0,0,100,100); gradient.addColorStop(0.19,Fill(color(120, 105, 255))); gradient.addColorStop(1,Fill(color(11, 0, 107))); ctx.fillStyle = gradient; ctx.beginPath(); ctx.ellipse(50, 50, 50, 50, 0, 0, 2 * Math.PI); ctx.fill(); popMatrix(); return get(0,0,100,100); }, "playerYellow": function() { pushMatrix(); resetMatrix(); gradient = ctx.createLinearGradient(0,0,100,100); gradient.addColorStop(0.2,Fill(color(250, 250, 108))); gradient.addColorStop(1,Fill(color(140, 140, 0))); ctx.fillStyle = gradient; ctx.beginPath(); ctx.ellipse(50, 50, 50, 50, 0, 0, 2 * Math.PI); ctx.fill(); popMatrix(); return get(0,0,100,100); }, "playerPurple": function() { pushMatrix(); resetMatrix(); gradient = ctx.createLinearGradient(0,0,100,100); gradient.addColorStop(0.2,Fill(color(250, 110, 234))); gradient.addColorStop(1,Fill(color(138, 0, 106))); ctx.fillStyle = gradient; ctx.beginPath(); ctx.ellipse(50, 50, 50, 50, 0, 0, 2 * Math.PI); ctx.fill(); popMatrix(); return get(0,0,100,100); }, "redSpot": function() { gradient = ctx.createLinearGradient(-35,-35,35,35); gradient.addColorStop(0,Fill(color(255, 161, 161))); gradient.addColorStop(0.7,Fill(color(125, 0, 0))); ctx.fillStyle = gradient; pushMatrix(); translate(35,35); for(i = 0; i < 15; i++) { pushMatrix(); rotate(floor(random(360))); ctx.beginPath(); ctx.ellipse(0,floor(random(-i2)),i/2,i/2,0,0,2Math.PI); ctx.fill(); popMatrix(); } for(i = 0; i < 5; i++) { pushMatrix(); rotate(floor(random(360))); ctx.beginPath(); ctx.ellipse(0,floor(random(-15,-25)),i/2,i/2,0,0,2Math.PI); ctx.fill(); popMatrix(); } popMatrix(); return get(0,0,70,70); }, "blueSpot": function() { gradient = ctx.createLinearGradient(-35,-35,35,35); gradient.addColorStop(0,Fill(color(169, 163, 255))); gradient.addColorStop(0.7,Fill(color(8, 0, 125))); ctx.fillStyle = gradient; pushMatrix(); translate(35,35); for(var i = 0; i < 15; i++) { pushMatrix(); rotate(floor(random(360))); ctx.beginPath(); ctx.ellipse(0,floor(random(-i2)),i/2,i/2,0,0,2Math.PI); ctx.fill(); popMatrix(); } for(var i = 0; i < 5; i++) { pushMatrix(); rotate(floor(random(360))); ctx.beginPath(); ctx.ellipse(0,floor(random(-15,-25)),i/2,i/2,0,0,2Math.PI); ctx.fill(); popMatrix(); } popMatrix(); return get(0,0,70,70); }, "yellowSpot": function() { gradient = ctx.createLinearGradient(-35,-35,35,35); gradient.addColorStop(0,Fill(color(252, 255, 163))); gradient.addColorStop(0.7,Fill(color(184, 184, 0))); ctx.fillStyle = gradient; pushMatrix(); translate(35,35); for(var i = 0; i < 15; i++) { pushMatrix(); rotate(floor(random(360))); ctx.beginPath(); ctx.ellipse(0,floor(random(-i2)),i/2,i/2,0,0,2Math.PI); ctx.fill(); popMatrix(); } for(var i = 0; i < 5; i++) { pushMatrix(); rotate(floor(random(360))); ctx.beginPath(); ctx.ellipse(0,floor(random(-15,-25)),i/2,i/2,0,0,2Math.PI); ctx.fill(); popMatrix(); } popMatrix(); return get(0,0,70,70); }, "purpleSpot": function() { gradient = ctx.createLinearGradient(-35,-35,35,35); gradient.addColorStop(0,Fill(color(255, 163, 241))); gradient.addColorStop(0.7,Fill(color(125, 0, 106))); ctx.fillStyle = gradient; pushMatrix(); translate(35,35); for(var i = 0; i < 15; i++) { pushMatrix(); rotate(floor(random(360))); ctx.beginPath(); ctx.ellipse(0,floor(random(-i2)),i/2,i/2,0,0,2Math.PI); ctx.fill(); popMatrix(); } for(var i = 0; i < 5; i++) { pushMatrix(); rotate(floor(random(360))); ctx.beginPath(); ctx.ellipse(0,floor(random(-15,-25)),i/2,i/2,0,0,2Math.PI); ctx.fill(); popMatrix(); } popMatrix(); return get(0,0,70,70); }, "redSwitchTile": function() { pushMatrix(); resetMatrix(); createSwitchSquare(color(255, 127, 127),color(105, 0, 0)); popMatrix(); return get(0,0,150,150); }, "blueSwitchTile": function() { pushMatrix(); resetMatrix(); createSwitchSquare(color(131, 127, 255),color(12, 0, 105)); popMatrix(); return get(0,0,150,150); }, "yellowSwitchTile": function() { pushMatrix(); resetMatrix(); createSwitchSquare(color(255, 247, 130),color(163, 155, 0)); popMatrix(); return get(0,0,150,150); }, "purpleSwitchTile": function() { pushMatrix(); resetMatrix(); createSwitchSquare(color(255, 94, 231),color(128, 0, 109)); popMatrix(); return get(0,0,150,150); }, "gameBck": function() { for(var i = 0; i < WIDTH; i += 50) { for(var j = 0; j < HEIGHT; j += 50) { createTile(i,j,random(150,200),random(180,200)); } } return get(0,0,WIDTH,HEIGHT); }, "menuBck": function() { image(CanvasGraphics.gameBck,0,0); word("C",93,149,125,color(219, 0, 0),color(255, 110, 110)); word("o",165,137,125,color(0, 11, 212),color(110, 134, 255)); word("l",209,152,125,color(204, 0, 190),color(255, 74, 234)); word("o",254,143,125,color(0, 11, 212),color(110, 134, 255)); word("r",306,132,125,color(209, 209, 0),color(255, 255, 66)); word("B",402,149,125,color(219, 0, 0),color(255, 110, 110)); word("a",468,164,125,color(209, 209, 0),color(255, 255, 66)); word("l",509,143,125,color(204, 0, 190),color(255, 74, 234)); word("l",540,154,125,color(204, 0, 190),color(255, 74, 234)); word("_______",300,155,139,color(255)); ctx.font = "12px " + tnr; ctx.fillStyle = "black"; ctx.textAlign = "left"; ctx.fillText("© ѕнєяℓσ¢к нσℓмєѕ",445,202); ctx.restore(); return get(0,0,WIDTH,HEIGHT); }, "main_menuBck": function() { image(CanvasGraphics.gameBck,0,0); word("Pre - Game",300,140,75, color(255, 140, 33),color(179, 87, 0)); word("__________",300,160,75,color(255),color(255)); return get(0,0,WIDTH,HEIGHT); }, "breakBck": function() { image(CanvasGraphics.gameBck,0,0); word("Level Complete!",300,146,71,color(219, 110, 0),color(255, 168, 74)); return get(0,0,WIDTH,HEIGHT); }, "howBck": function() { image(CanvasGraphics.gameBck,0,0); var how_txt = [(local) ? "• Use the arrow keys to move" : "Use the arrow buttons to move", "• You must be the same color as painted squares you land on", "• Land on paint spills to change your color", "• Land on color buttons to fill in square outlines", "• Grab keys to open up locked color squares", "• Throw black levers to start moving platforms", "• Flip flip-switches to flip faded tiles back and forth", "• Enter four-color tiles from any direction to change color", "• Land on teleporters with the right color to teleport", "• Reach the checkered square to finish the level", ]; word("How To Play",300,140,75,color(66, 72, 255),color(7, 0, 148)); word("___________",300,160,75,color(255),color(255)); createInfoBox(300,335,400,245,how_txt,15); return get(0,0,WIDTH,HEIGHT); }, "levelSelectBck": function() { image(CanvasGraphics.gameBck,0,0); word("Level Select",300,140,75,color(255, 252, 66),color(185, 191, 0)); word("__________",300,160,75,color(255),color(255)); return get(0,0,WIDTH,HEIGHT); }, "inGameOpp": function() { gradient = ctx.createLinearGradient(0,0,width,100); gradient.addColorStop(0,Fill(color(173, 173, 173))); gradient.addColorStop(1,Fill(color(105, 105, 105))); t = 25; ctx.fillStyle = gradient; ctx.lineJoin = "round"; ctx.lineWidth = t; ctx.strokeStyle = Fill(color(135, 135, 135)); ctx.strokeRect(t/2,520-t/2,600-t,80); ctx.fillRect(t/2,520-t/2,600-t,80); return get(0,495,WIDTH,105); }, "pauseScreen": function() { ctx.fillStyle = "rgba(0, 0, 0, 0.4)"; ctx.fillRect(0,0,WIDTH,HEIGHT); return get(0,0,WIDTH,HEIGHT); }, "pauseMenu": function() { gradient = ctx.createLinearGradient(50,200,50,330); gradient.addColorStop(0,Fill(color(150,150,150))); gradient.addColorStop(0.25,Fill(color(190,190,190))); gradient.addColorStop(0.45,Fill(color(190,190,190))); gradient.addColorStop(1,Fill(color(150, 150, 150))); ctx.fillStyle = gradient; ctx.fillRect(50,200,WIDTH-100,130); ctx.lineWidth = 15; ctx.strokeStyle = "lightgrey"; ctx.lineJoin = "round"; ctx.strokeRect(50,200,WIDTH-100,130); word("Game Paused",WIDTH/2,240,30,null,null,"center"); word("____________________________________________", WIDTH/2,251,20,null,null,"center"); return get(50-(15/2),200-(15/2),515,150); }, "final_break": function() { image(CanvasGraphics.gameBck,0,0); word("Game Over!",300,146,85,color(219, 110, 0),color(255, 168, 74)); word("You Win!",300,220,60,color(43, 50, 255),color(30, 0, 166)); return get(0,0,WIDTH,HEIGHT); }, "final_stats": function() { ctx.lineJoin = "round"; ctx.fillStyle = "black"; ctx.fillRect(300-(350/2),270,350,125); ctx.lineWidth = 14; ctx.strokeStyle = "black"; ctx.strokeRect(300-(350/2),270,350,125); gradient = ctx.createLinearGradient(150,220,150,345); gradient.addColorStop(0,"darkgrey"); gradient.addColorStop(0.3,"white"); gradient.addColorStop(1,"darkgrey"); ctx.strokeStyle = gradient; ctx.lineJoin = "round"; ctx.lineWidth = 8; ctx.strokeRect(300-(350/2),270,350,125); word("Final Stats",300,305,34,null,null); return get(300-(350/2)-7,270-7,350+14,125+14); }, }; var LEVEL_TEST = 25 -2; //} //} // ⬟ Classes { // ￭ Logo { Logo = function() { var sLBlack = function(x,y,s,op) { pushMatrix(); translate(x,y); scale(s); noStroke(); fill(0, 0, 0,op); beginShape(); vertex(221,-220); bezierVertex(35,-72,55,-108,-41,-42); bezierVertex(-79,-16,-56,-20,-19,-20); bezierVertex(50,-28,45,-22,14,7); bezierVertex(-78,91,-73,76,-242,220); bezierVertex(-137,116,-150,22,-150,-87); bezierVertex(-160,-179,-90,-140,39,-154); bezierVertex(137,-169,128,-167,220,-219); endShape(); noStroke(); for(var i = 0.80; i < 1.01; i += 0.02) { pushMatrix(); translate(1,-3); scale(i); fill(128, 43, 9, (op/255)40); beginShape(); vertex(221,-220); bezierVertex(35,-72,55,-108,-41,-42); bezierVertex(-79,-16,-56,-20,-19,-20); bezierVertex(50,-28,45,-22,14,7); bezierVertex(-78,91,-73,76,-242,220); bezierVertex(-137,116,-150,22,-150,-87); bezierVertex(-160,-179,-90,-140,39,-154); bezierVertex(137,-169,128,-167,220,-219); endShape(); popMatrix(); } popMatrix(); }; var sRBlack = function(x,y,s,op) { pushMatrix(); translate(x,y); scale(s); noStroke(); fill(0, 0, 0, op); beginShape(); vertex(219,-210); bezierVertex(197,-187,179,-160,94,-108); bezierVertex(-126,8,77,-47,48,-34); bezierVertex(71,-33,53,-3,7,40); bezierVertex(-54,90,-25,64,-226,217); bezierVertex(-54,127,-82,152,103,145); bezierVertex(186,144,152,53,156,-34); bezierVertex(158,-119,147,-103,215,-202); endShape(); noStroke(); for(var i = 0.76; i < 0.98; i += 0.02) { pushMatrix(); translate(8,-2); scale(i); fill(128, 43, 9, (op/255)40); beginShape(); vertex(219,-210); bezierVertex(197,-190,179,-174,59,-97); bezierVertex(-128,1,77,-53,48,-34); bezierVertex(71,-33,53,-3,7,40); bezierVertex(-54,90,-25,64,-226,217); bezierVertex(-54,127,-82,152,103,145); bezierVertex(186,144,152,53,156,-34); bezierVertex(158,-119,147,-103,215,-202); endShape(); popMatrix(); } popMatrix(); }; var sLOutline = function(x,y,s,r) { pushMatrix(); translate(x,y); scale(s); rotate(r); fill(0, 0, 0); noStroke(); beginShape(); vertex(204,-210); bezierVertex(67,-95,72,-120,-23,-56); bezierVertex(-84,-21,-71,-12,-13,-20); bezierVertex(50,-26,40,-22,11,7); bezierVertex(-84,91,-75,76,-230,205); bezierVertex(-137,116,-150,22,-150,-87); bezierVertex(-160,-179,-90,-140,39,-154); bezierVertex(137,-169,128,-167,220,-219); endShape(); popMatrix(); }; var sROutline = function(x,y,s,r) { pushMatrix(); translate(x,y); scale(s); rotate(r); fill(0, 0, 0); noStroke(); beginShape(); vertex(212,-199); bezierVertex(192,-184,179,-157,92,-102); bezierVertex(-115,7,75,-53,57,-30); bezierVertex(63,-10,53,0,7,44); bezierVertex(-54,98,-25,66,-210,209); bezierVertex(-78,135,-82,145,103,143); bezierVertex(182,144,150,53,153,-34); bezierVertex(155,-135,164,-143,215,-202); endShape(); popMatrix(); }; this.wait = 0; this.p = [ [71,505], [97,474], [116,444], [130,414], [140,381], [146,345], [149,307], [149,265], [149,226], [149,197], [152,174], [160,160], [176,152], [198,149], [231,149], [269,149], [323,147], [363,141], [403,135], [427,128], [459,114], [487,99], [511,84], [511,84], [511,84], [485,107], [443,143], [404,171], [360,197], [316,222], [280,244], [254,261], [241,271], [240,279], [259,282], [287,278], [308,276], [333,277], [337,283], [331,291], [313,309], [281,337], [244,368], [218,389], [177,421], [145,447], [118,470], [71,505], ]; this.p2 = [ [522,89], [500,118], [471,157], [462,182], [456,208], [455,234], [455,271], [456,307], [458,344], [459,383], [456,404], [451,420], [438,436], [416,444], [372,446], [331,446], [296,446], [267,446], [238,448], [210,454], [181,465], [160,475], [133,487], [91,506], [91,506], [91,506], [118,485], [152,460], [185,434], [219,408], [250,385], [286,358], [317,332], [348,300], [357,282], [357,268], [343,264], [323,265], [297,268], [289,261], [292,255], [320,237], [360,214], [398,191], [434,165], [469,139], [499,112], [521,90], ]; this.max = 5; this.count = 0; this.index = 0; this.speed = 24; this.ready = false; this.color = []; this.shakeTime = 0; this.shakeNow = false; this.shakeLimit = 20; this.shakeMag = 3; this.logoOp = 100; this.fullOp = 0.1; this.bx = 300; this.bx2 = 300; this.by = 300; this.by2 = 300; this.bvy = random(-30,-50); this.bvy2 = random(-30,-50); this.bvx = random(-7,-4); this.bvx2 = random(4,7); this.br = 0; this.br2 = 0; this.bvr = random(2,4); this.bvr2 = random(-2,-4); this.drop = false; this.textOp = 0; this.logoText = "ѕ н є я ℓ σ ¢ к н σ ℓ м є ѕ"; this.fadeOp = 0.1; for(var i = 0; i < 100; i++) { this.color.push(random(255)); } this.hexagon = function(x, y, s) { pushMatrix(); translate(x, y); beginShape(); for(var i = 0; i < 360; i += 60){ vertex(sin(i)s, cos(i)s); } endShape(CLOSE); popMatrix(); }; this.animateBackground = function() { background(0, 0, 0); for(var i = -10; i < width + 40; i += 55){ for(var j = 5; j < height + 440; j += 95){ stroke(255, 255, 255, 40 + cos(j-i+frameCount10)25); fill(87, 37, 10, 50); this.hexagon(i, j, 30); this.hexagon(i+27, j + 47, 30); } } }; this.initialize = function() { if(this.count >= this.max && this.wait > 90) { this.ready = true; } this.wait++; this.callSplits(); }; this.showP = function() { pushMatrix(); resetMatrix(); if(this.ready) { if(this.shakeNow) { this.shake(); this.shakeTime++; this.drop = true; } if(this.drop) { this.logoOp = this.logoOp * 0.5; this.fullOp += (255-this.fullOp)0.4; this.bx += this.bvx; this.by += this.bvy; this.br += this.bvr; this.bx2 += this.bvx2; this.by2 += this.bvy2; this.br2 += this.bvr2; this.bvy += (60-this.bvy)0.04; this.bvy2 += (60-this.bvy2)0.04; } if(this.by > 600) { this.textOp += (255-this.textOp)0.05; } noStroke(); fill(105, 40, 15, this.logoOp); for(var i = 0; i < this.p.length; i++) { if(i < this.index) { ellipse(this.p[i][0],this.p[i][1],3,3); } } for(var i = 0; i < this.p2.length; i++) { if(i < this.index) { ellipse(this.p2[i][0],this.p2[i][1],3,3); } if(this.index > this.p2.length-30) { this.shakeNow = true; } } this.index += this.speed; } else { this.initialize(); } sLBlack(300,300,1,this.fullOp); sRBlack(300,300,1,this.fullOp); sLOutline(this.bx,this.by,1,this.br); sROutline(this.bx2,this.by2,1,this.br2); //ctx.fillStyle = Fill(color(255, 255, 255, this.textOp)); ctx.textAlign = "center"; pf = loadFont(tnr, 17); ctx.font = pf.css; //ctx.fillText(this.logoText,300,520 + (pf.ascent/2)); fill(255, this.textOp); textFont(createFont(tnr,20)); text(this.logoText,300,520); if(this.textOp > 254.8) { this.logoOver(); } popMatrix(); }; this.callSplits = function() { if(this.count < this.max) { this.split(); this.count++; } }; this.copySplits = function() { this.thirdSplit = []; this.thirdSplit2 = []; for(var i = 0; i < this.p.length; i++) { this.thirdSplit.push(this.p[i]); this.thirdSplit2.push(this.p2[i]); if(i < this.p.length-1) { this.thirdSplit.push(this.newSplits[i]); this.thirdSplit2.push(this.newSplits2[i]); } } this.p = []; this.p2 = []; for(var i = 0; i < this.thirdSplit.length; i++) { this.p.push(this.thirdSplit[i]); this.p2.push(this.thirdSplit2[i]); } }; this.split = function() { this.newSplits = []; this.newSplits2 = []; for(var x = 0; x < this.p.length-1; x++) { this.newx = (this.p[x][0] + this.p[x+1][0])/2; this.newy = (this.p[x][1] + this.p[x+1][1])/2; this.newSplits.push([this.newx,this.newy]); this.newx2 = (this.p2[x][0]+this.p2[x+1][0])/2; this.newy2 = (this.p2[x][1]+this.p2[x+1][1])/2; this.newSplits2.push([this.newx2,this.newy2]); } this.copySplits(); }; this.shake = function() { if(this.shakeTime < this.shakeLimit) { translate(random(-this.shakeMag,this.shakeMag),random(-this.shakeMag,this.shakeMag)); } else { resetMatrix(); } }; this.logoOver = function() { fill(0, this.fadeOp); rect(0,0,width,height); this.fadeOp += (255-this.fadeOp)0.04; if(this.fadeOp > 254) { //SCENE = "menu"; trans.to("menu",null); } }; this.run = function() { background(0, 0, 0); this.showP(); }; }; logo = Logo.create(); //} // ￭ Collisions { /* ⬇ Collisions needed in the game / var Collide = { /* ⬇ Square on square collision / rect: function(x,y,s,x2,y2,s2) { noFill(); stroke(255, 0, 0); //rect(x,y,s,s); stroke(0, 255, 0); //rect(x2,y2,s2,s2); return x + s > x2 && y + s > y2 && x < x2 + s2 && y < y2 + s2; //return one.x + one.w > two.x && // one.y + one.h > two.y && // one.x < two.x + two.w && // one.y < two.y + two.h; } }; //} // ￭ Location Handler/Buttons { /* The term I use to convey the type of device is "location" (or local). A device is "local" if it is a desktop, and not "local" if it is mobile. Thus, a "Location Handler" is a class that handles the decision of whether a device is "local" or not. / /* ⬇ Class used to determine device type pre-program / LocationHandler = function() { // • Variables { /* ⬇ Have the buttons been created? / this.created = false; //} // • Functions { /* ⬇ Function to initialize the creation of location buttons / this.init = function() { this.mobileButton = LocateButton.create( "Mobile",450,300,200,60,color(102, 115, 255), color(30, 0, 161)); this.desktopButton = LocateButton.create( "Desktop",150,300,200,60,color(255, 89, 89), color(171, 0, 0)); this.created = true; }; /* ⬇ Render the device selection screen / this.renderOption = function() { if(!this.created) { this.init(); } ctx.fillStyle = "white"; ctx.fillRect(0,0,WIDTH,HEIGHT); ctx.textAlign = "center"; ctx.fillStyle = "black"; ctx.font = "40px " + tnr; ctx.fillText("please select your device", WIDTH/2,HEIGHT/4); this.handleClicks(); this.mobileButton.renderButton(); this.desktopButton.renderButton(); }; /* ⬇ Function to handle the clicking of location buttons / this.handleClicks = function() { if(this.mobileButton.hasBeenSelected() \|\| this.desktopButton.hasBeenSelected()) { this.mobileButton.deactivate(); this.desktopButton.deactivate(); } }; //} }; /* ⬇ Instance variable for the LocationHandler class / locatedevice = LocationHandler.create(); /* ⬇ Location Handler buttons class / LocateButton = function(txt,x,y,w,h,clr,clr2) { // • Variables { /* ⬇ Stroke thicknes of the buttons / this.st = 14; /* ⬇ Variables passed from the creation of the instance variables in LocationHandler / this.txt = txt; this.w = w; this.h = h; this.centerX = x; this.centerY = y; this.x=this.centerX-(this.w/2); this.y=this.centerY-(this.h/2); this.clr = clr; this.clr2 = clr2; this.clickable = true; this.selected = false; //} // • Functions { /* ⬇ Function to render the button / this.renderButton = function() { gradient = ctx.createLinearGradient(this.x, this.y,this.x+this.w,this.y+this.h); gradient.addColorStop(0,Fill(this.clr)); gradient.addColorStop(1,Fill(this.clr2)); ctx.fillStyle = gradient; ctx.fillRect(this.x,this.y,this.w,this.h); ctx.strokeStyle = gradient; ctx.lineWidth = 14; ctx.lineJoin = "round"; ctx.strokeRect(this.x,this.y,this.w,this.h); ctx.lineWidth = 2; ctx.strokeStyle = "white"; ctx.strokeRect(this.x,this.y,this.w,this.h); ctx.fillStyle = "white"; ctx.textAlign = "center"; pf = loadFont(tnr, this.h 0.7); ctx.font = pf.css; ctx.fillText(this.txt,this.centerX, this.centerY + (pf.ascent/2)); this.handleCollision(); }; /** ⬇ Function to determine if the mouse is inside the boundries of the button / this.isIn = function() { return mouseX > this.x-(this.st/2) && mouseX < this.x+this.w+this.st && mouseY > this.y-(this.st/2) && mouseY < this.y+this.h+this.st; }; /* ⬇ Function to handle what happens if the button is clicked / this.handleCollision = function() { if(this.isIn() && this.clickable) { cursor(cursorType.SELECT); if(released) { this.selected = true; local = (this.txt === "Desktop") ? 1 : 0; SCENE = "load"; } } }; /* ⬇ Function to decide if the location button has been selected / this.hasBeenSelected = function() { return this.selected; }; /* ⬇ Function to deactivate the button to protect against double clicking (mostly to protect against the user clicking one then another button / this.deactivate = function() { this.clickable = false; }; //} }; //} // ￭ Animation { /* ⬇ Animation Class / var Animation = function() { /* ⬇ General movement function (smooth move) / this.genMove = function(value,target,speed) { return value += speed(target-value); }; }; /** ⬇ Animation class instance variable / animate = Animation.create(); //} // ￭ Scroll Bar { /* ⬇ Scroll Bar Class (used in level select) / ScrollBar = function(x,y,w,h,min,max) { // • Variables { /* ⬇ x/y/w/h dimensions of the scroll bar / this.x = x; this.y = y; this.w = w; this.h = h; /* ⬇ Tab height, start, finish, and y position / this.tabHeight = this.h/15; this.tabStart = this.y-(this.h/2); this.tabFinish = this.y+(this.h/2); this.tabY = this.tabStart; /* ⬇ Scroll boundries, value, and incrementation / this.scrollMin = min; this.scrollMax = max; this.scrollValue = 0; this.scrollInc = (this.scrollMax-this.scrollMin)/15; /* ⬇ Triggered, direction, and dragging boolean / this.triggered = false; this.direction = ""; this.isDragging = false; /* ⬇ Variable to deterimine which has control, dragging mouse or scrolling wheel / this.control = "wheel"; /* ⬇ Has the visual been created? / this.created = false; //} // • Functions { /* ⬇ Function to create the scroll bar visual graphic / this.init = function() { this.img = createScrollBar( this.x,this.y,this.w,this.h); this.created = true; }; /* ⬇ Function to render the scroll bar (with tab) / this.render = function() { if(!this.created) { this.init(); } image(this.img,this.x-((this.w+15)/2), this.y-(this.h/2)); ctx.shadowBlur = 4; ctx.shadowColor = Fill(color(50)); ctx.shadowOffsetX = 2; ctx.shadowOffsetY = 2; ctx.lineWidth = 10; ctx.lineJoin = "round"; ctx.strokeStyle = "black"; ctx.strokeRect(this.x-(this.w3.5/2),this.tabY, this.w3.5,this.tabHeight); ctx.shadowBlur = 0; ctx.shadowColor = "white"; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; ctx.fillStyle = "lightgrey"; ctx.fillRect(this.x-(this.w3/2),this.tabY+2, this.w3,this.tabHeight-4); this.update(); }; /* ⬇ Function to listen for any updates to the scrolling window / this.update = function() { /* ⬇ Animate the tab if triggered / if(this.triggered) { this.animateTab(this.direction,scrolling); } /* ⬇ If the mouse has control / if(this.isOnTab()) { cursor(cursorType.GRAB); if(clicked) { this.isDragging = true; this.control = "mouse"; } } /* ⬇ When the mouse gives up control / if(released) { this.control = "wheel"; this.isDragging = false; } /* ⬇ When the wheel has control / if(this.control === "wheel") { /* ⬇ Max and min values are based off of a larger pixel scale (i.e. 0-1200). That value is then mapped down to a smaller scale that is represented by the tab height / this.tabY = map( this.scrollValue, this.scrollMin, this.scrollMax, this.tabStart, this.tabFinish); } else if(this.control === "mouse") { /* ⬇ When the mouse has control / if(this.isDragging) { cursor(cursorType.GRABBING); /* ⬇ Mapping just like above, except inverted, since it is the tab that now controls the level bars instead of the other way around / this.scrollValue = map( this.tabY, this.tabStart, this.tabFinish, this.scrollMin, this.scrollMax); /* ⬇ Ensure the tab stays inside its limits / this.tabY = (mouseY < this.tabStart) ? this.tabStart : (mouseY > this.tabFinish) ? this.tabFinish : mouseY; } } /* ⬇ Snap and reset tab / if(this.target !== undefined && this.isClose(this.scrollValue,this.target,0.2)){ this.triggered = false; this.scrollValue = this.target; } }; /* ⬇ Function to return the difference between the target scroll value and the actual scroll value / this.getDifference = function() { return (this.target === undefined) ? 0 : this.target - this.scrollValue; }; /* ⬇ Function to return if one value is close to another one / this.isClose = function(one,two,MOE) { return (abs(one-two) <= MOE) ? true : false; }; /* ⬇ Function to return if the mouse is inside the tab / this.isOnTab = function() { /noFill(); strokeWeight(1); stroke(255, 0, 0); rect(this.x-this.w3.5/2-5,this.tabY-5,this.w3.5+10,this.tabHeight+10);/ return mouseX > this.x-this.w3.5/2-5 && mouseX < this.x-this.w3/2-5 + this.w3.5+10&& mouseY > this.tabY-5 && mouseY < this.tabY-5+this.tabHeight+10; }; /** ⬇ Function to find target scroll value and animate it to that position / this.animateTab = function(dir,update) { /* ⬇ Find the target scroll value (with checking on larger-scale limits / if(update && levelselect.mouseIsIn()) { if(dir === "down") { this.distance = (this.scrollValue+ this.scrollInc > this.scrollMax ? this.scrollMax-this.scrollValue : this.scrollInc); this.target = this.scrollValue + this.distance; } else { this.distance = ( this.scrollValue - this.scrollInc < this.scrollMin ? this.scrollValue-this.scrollMin : this.scrollInc); this.target = this.scrollValue - this.distance; } } /* ⬇ Animate the tab using the animation class / this.scrollValue = animate.genMove( this.scrollValue,this.target,0.2); }; /* ⬇ Function that is called to initiate a movement / this.moveTab = function(deltaY) { this.triggered = true; if(deltaY > 0) { this.direction = "down"; } else if(deltaY < 0) { this.direction = "up"; } }; /* ⬇ Getter fort the scroll value / this.getScrollValue = function() { return this.scrollValue; }; /* ⬇ Reset the scroll value / this.reset = function() { this.scrollValue = 0; }; //} }; //} // ￭ Mobile Scroll Bar { /* ⬇ Mobile Scroll Bar class A wheel scrolling (or a finger on a trackpad) is not the same as a finger swiping on a mobile device. For this reasons, I took the approach of two enlarged direction buttons that function similar to how those on a normal browser work. When pushed, they animate the scrolling window up/down some value. This approach will only be used if mobile is selected at the startup of the program / MobileScrollBar = function(x,y,w,h,min,max) { // • Variables { /* ⬇ x,y,w,h dimensions / this.w = w; this.h = h; this.x = x-(this.w/2); this.y = y; /* ⬇ Scroll limits, value, and incrementation / this.scrollMin = min; this.scrollMax = max; this.scrollInc = (this.scrollMax-this.scrollMin)/10; this.scrollValue = 0; /* ⬇ Scroll target value / this.target = 0; /* ⬇ Scroll triggered / this.triggered = false; //} // • Functions { /* ⬇ Function to render the direction buttons / this.render = function() { ctx.fillStyle = "rgba(0, 0, 0, 0.5)"; ctx.fillRect(this.x,this.y,this.w,this.h/2); ctx.fillRect(this.x,this.y+(this.h/2), this.w,this.h/2); ctx.strokeStyle = "black"; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(this.x,this.y+(this.h/2)); ctx.lineTo(this.x+this.w,this.y+(this.h/2)); ctx.closePath(); ctx.stroke(); ctx.fillStyle = "black"; ctx.font = "25px " + tnr; ctx.fillText("↑",this.x+(this.w/2),this.y+25); ctx.fillText("↓",this.x+(this.w/2),this.y+this.h-15); this.handleCollision(); this.paintHighlights(); ctx.lineJoin = "miter"; ctx.strokeRect(this.x,this.y,this.w,this.h); }; /* ⬇ Function to highlight the button when pushed / this.paintHighlights = function() { if(this.triggered) { if(this.isInUpper()) { ctx.fillStyle = "rgba(255, 255, 255, 0.5)"; ctx.fillRect(this.x,this.y,this.w,this.h/2); } else if(this.isInLower()) { ctx.fillStyle = "rgba(255,255,255,0.5)"; ctx.fillRect(this.x,this.y+(this.h/2), this.w,this.h/2); } } }; /* ⬇ Function to determine of two values are close / this.isClose = function(one,two,MOE) { return abs(one-two) < MOE; }; /* ⬇ Function to determine if the finger is in the upper button / this.isInUpper = function() { return mouseX > this.x && mouseX < this.x+this.w && mouseY > this.y && mouseY < this.y+(this.h/2); }; /* ⬇ Function to determine if the finger is in the lower button / this.isInLower = function() { return mouseX > this.x && mouseX < this.x+this.w && mouseY > this.y+(this.h/2) && mouseY < this.y+this.h; }; /* ⬇ Function to determine the target value of the scroll event / this.animate = function(dir) { if(dir === "down") { this.distance = (this.scrollValue+ this.scrollInc > this.scrollMax ? this.scrollMax-this.scrollValue : this.scrollInc); this.target = this.scrollValue + this.distance; } else { this.distance = ( this.scrollValue - this.scrollInc < this.scrollMin ? this.scrollValue-this.scrollMin : this.scrollInc); this.target = this.scrollValue - this.distance; } }; /* ⬇ Getter for the current scroll value / this.getScrollValue = function() { return this.scrollValue; }; /* ⬇ Function to handle the collision between finger and button and correctly animate the scroll window / this.handleCollision = function() { if(this.isInUpper() && released) { this.triggered = true; this.animate("up"); } else if(this.isInLower() && released) { this.triggered = true; this.animate("down"); } this.scrollValue = animate.genMove( this.scrollValue,this.target,0.2); if(this.isClose(this.scrollValue,this.target,0.15)){ this.triggered = false; } }; /* ⬇ Reset the scrolling values / this.reset = function() { this.scrollValue = 0; this.target = 0; this.triggered = false; }; //} }; //} // ￭ Level Bar { /* ⬇ Level Bar Class / LevelBar = function(lvl,x,y,w,h,clr,done) { /* This is what scrolls in the levels scene / // • Variables { /* ⬇ Level number / this.level = lvl; /* ⬇ The stats of that particular level / this.stats = { moves: 0, deaths: 0, time: { min: 0, sec: 0, mill: 0, } }; /* ⬇ The dimensions of the level bar / this.x = x; this.y = y; this.w = w; this.h = h; /* ⬇ Has the level been finished? / this.finished = done; /* ⬇ Char to represent completion / this.checkChar = (this.finished) ? "✓" : "✗"; /* ⬇ Draw it or not? / this.hideGraphic = false; /* ⬇ Can select it or not? / this.canClick = false; /* ⬇ Has been selected or not? / this.hasBeenClicked = false; /* ⬇ This is a simple if-else to create the alternating color effect when scrolling / if(clr) { this.clr = Fill(color(0)); } else { this.clr = Fill(color(40)); } //} // • Functions { /* ⬇ Disable the ability to click / this.disableClick = function() { this.canClick = false; }; /* ⬇ Enable the ability to click / this.enableClick = function() { this.canClick = true; }; /* ⬇ Render the visual (if able to) / this.render = function() { if(!this.hideGraphic) { ctx.fillStyle = this.clr; ctx.fillRect(this.x,this.y,this.w,this.h); ctx.strokeStyle = "black"; ctx.lineWidth = 2; ctx.strokeRect(this.x,this.y,this.w,this.h); smallWord(" • Level " + this.level,this.x1.05, this.y+(this.h/2)1.4,18,color(0)); smallWord(" Moves: " + this.stats.moves, this.x+(this.w/2)0.38,this.y+(this.h/2)1.4,18, color(0)); smallWord(" Deaths: " + this.stats.deaths, this.x+(this.w/2)0.83,this.y+(this.h/2)1.4,18, color(0)); smallWord(" Time: " + this.stats.time.min + ":" + this.stats.time.sec + ":" + this.stats.time.mill, this.x+(this.w/2)1.23,this.y+(this.h/2)1.4,18, color(0)); smallWord(this.checkChar,this.x+(this.w/2)1.9, this.y+(this.h/2)1.4,18,color(0)); this.handleCollision(); } }; /* ⬇ Handle the collision between the mouse/finger and the level bar / this.handleCollision = function() { if(this.mouseIsIn() && this.canClick) { cursor(HAND); ctx.fillStyle = "rgba(255, 255, 255, 0.35)"; ctx.fillRect(this.x,this.y,this.w,this.h); if(local) { if(clicked) { ctx.fillRect(this.x,this.y,this.w,this.h); this.hasBeenClicked = true; } if(released && this.hasBeenClicked) { this.hasBeenClicked = false; if(playingBoard !== undefined) { playingBoard.reset(); playingBoard.setCompletion(false); } game.setLevel(this.level-1); trans.to("game",null); } } else { if(released) { if(playingBoard !== undefined) { playingBoard.reset(); playingBoard.setCompletion(false); } game.setLevel(this.level-1); trans.to("game",null); } } } }; /* ⬇ Determine if the mouse is inside the level bar display / this.mouseIsIn = function() { return mouseX > this.x && mouseX < this.x+this.w && mouseY > this.y && mouseY < this.y+this.h; }; /* ⬇ Set the y value of this level bar/ this.setY = function(y) { this.y = y; }; /* ⬇ Get the y value of this level bar/ this.getY = function() { return this.y; }; /* ⬇ Get the height of this level bar / this.getH = function() { return this.h; }; /* ⬇ Hide this level bar. This is important for functioning scrolling using my method / this.hide = function() { this.hideGraphic = true; }; /* ⬇ Show this level bar / this.show = function() { this.hideGraphic = false; }; /* ⬇ Set the stats for this level / this.setStats = function (moves, deaths, min, sec, mill) { this.stats.moves = moves; this.stats.deaths = deaths; this.setTime(min,sec,mill); this.checkChar = "✓"; }; this.setTime = function(min,sec,mill) { this.smallTime = (60000min) + (1000sec) + mill; this.currentTime = (60000this.stats.time.min) + (1000this.stats.time.sec) + this.stats.time.mill; //println(this.smallTime + " " + this.currentTime); if(this.smallTime < this.currentTime \|\| this.currentTime === 0) { this.stats.time.min = min; this.stats.time.sec = sec; this.stats.time.mill = mill; } }; /* ⬇ Get the stats for this level / this.getStats = function(type) { switch(type) { case "moves": return this.stats.moves; case "deaths": return this.stats.deaths; case "time": return this.stats.time.mill + this.stats.time.sec1000 + this.stats.time.min60000; } }; //} }; //} // ￭ Level Select { /* ⬇ Leve Select Class / LevelSelect = function() { // • Variables { /* ⬇ x/y/w/h dimensions of the level select box / this.x = 300; this.y = 340; this.w = 515; this.h = 245; /* ⬇ Dimensions for the sub scrolling box / this.subx = (this.x-(this.w/2))1.3; this.suby = (this.y-(this.h/2))1.33; this.subw = this.w0.87; this.subh = this.h0.60; /* ⬇ Number of levels to display / this.numLevels = Levels.length; this.levels = []; /* ⬇ Scrolling Y variable / this.sy = 0; /* ⬇ Create a level bar for every level / for(var i = 0; i < this.numLevels; i++) { this.levels.push(LevelBar.create(i+1,this.subx+1, this.suby+(i25)+2,this.w0.87,25,i%2,0)); } /* ⬇ Have the scroll visuals been created yet? / this.scrollCreated = false; //} // • Functions { /* ⬇ Initialize the creation of the scroll visuals / this.init = function() { if(local) { this.scroller = ScrollBar.create(this.x+ (this.w/2)0.89,this.y1.05,8,130,0, (25this.numLevels)-this.subh+2); } else { this.scroller = MobileScrollBar.create( this.x+(this.w/2)0.91, this.suby,30,this.subh,0,(25this.numLevels)- this.subh+2); } this.scrollCreated = true; }; /** ⬇ Render the level select box with scroll visuals / this.render = function() { if(!this.scrollCreated) { this.init(); } ctx.strokeStyle = "black"; ctx.lineJoin = "round"; ctx.lineWidth = 18; ctx.strokeRect(this.x-(this.w/2),this.y-(this.h/2), this.w,this.h); gradient = ctx.createLinearGradient(this.x- (this.w/2),this.y-(this.h/2), this.x-(this.w/2),this.y+(this.h/2)); gradient.addColorStop(0,"grey"); gradient.addColorStop(0.25,"white"); gradient.addColorStop(0.4,"white"); gradient.addColorStop(1,"grey"); ctx.fillStyle = gradient; ctx.fillRect(this.x-(this.w/2),this.y-(this.h/2), this.w,this.h); ctx.strokeStyle = gradient; ctx.lineWidth = 9; ctx.strokeRect(this.x-(this.w/2),this.y-(this.h/2), this.w,this.h); this.handleLevels(); ctx.lineWidth = 5; ctx.strokeStyle = "black"; ctx.strokeRect(this.subx,this.suby, this.subw,this.subh); ctx.fillStyle = gradient; ctx.fillRect(this.subx-1,this.suby+this.subh+2,this.subw+4,this.subh0.2-1); ctx.fillRect(this.subx-1,this.suby-40,this.subw+4,this.subh-109); ctx.fillStyle = "white"; ctx.textAlign = "center"; ctx.font = "43px " + tnr; ctx.fillText("Select a Level",this.x, this.y-(this.h/2)0.67+2); ctx.fillStyle = "black"; ctx.fillText("Select a Level",this.x, this.y-(this.h/2)0.67); this.handleScroller(); }; /** ⬇ Is the mouse inside the sub scrolling box / this.mouseIsIn = function() { return mouseX > this.subx && mouseX < this.subx+this.subw+50 && mouseY > this.suby && mouseY < this.suby+this.subh; }; /* ⬇ Handle the levels scrolling / this.handleLevels = function() { /* My method of scrolling is more of a get-around than an actual solution. I simply have some extra space underneath my scroll box. Once a level bar has passed a certain point (either above or below) the scrolling box, I change its state to hidden so that it cannot be seen. This creates the illusion of scrolling. / if(this.scroller !== undefined) { this.sy = this.scroller.getScrollValue(); } for(i = 0; i < this.levels.length; i++){ this.levels[i].render(); this.levels[i].setY(this.suby+(i25)+2+-this.sy); if(this.levels[i].getY() < this.y-(this.h/2)0.7 \|\| this.levels[i].getY() > this.y+ (this.h/2)0.80) { this.levels[i].hide(); } else { this.levels[i].show(); } if(this.levels[i].getY()+this.levels[i].getH() - 5 <= this.suby \|\| !this.mouseIsIn()) { this.levels[i].disableClick(); } else { this.levels[i].enableClick(); } } }; /** ⬇ Handler in the event that the user scrolls / this.handleScroller = function() { if(scrolling && this.mouseIsIn() && local) { if(this.scroller !== undefined) { this.scroller.moveTab(deltaY); } } if(this.scroller !== undefined) { this.scroller.render(); } }; /* ⬇ Reset the scroller values (leaving/entering the level scene / this.reset = function() { if(this.scroller !== undefined) { this.scroller.reset(); } }; /* ⬇ Set the stats of a certain level / this.setStats = function (lvl,moves,deaths,min,sec,mill) { this.levels[lvl].setStats(moves,deaths, min,sec,mill); }; /* ⬇ In-between function to get at the stats of a certain level / this.getAtLevel = function(lvl,type) { this.getStats = this.levels[lvl].getStats(type); return this.getStats; }; //} }; /* ⬇ Instance variable of the Level Select class / levelselect = LevelSelect.create(); //} // ￭ Pre-Game Handler { /* ⬇ Handler for the pre-game scene / PreGameHandler = function() { // • Variables { /* ⬇ x/y/w/h dimensions for the box / this.dim = { x: 300, y: 290, w: 400, h: 150, tle: "Current Game State", }; /* ⬇ Current level / this.level = 0; /* ⬇ Has the visual been created? / this.created = false; /* ⬇ Values to pass into createStateBox function / this.passValues = [ "• Level State:","• Levels Completed:", "• Timer State:","• Device Type:"]; this.completed = []; for(i = 0; i < Levels.length; i++) { this.completed.push(false); } //} // • Functions { /* ⬇ Function to initialize the creation of visuals / this.init = function() { this.img = createStateBox(this.dim.x,this.dim.y, this.dim.w,this.dim.h,this.dim.tle, this.passValues); this.dispValues = ["","","Recording best stats", (local) ? "Desktop" : "Mobile", ]; this.created = true; }; /* ⬇ Decide the state of the game (basically what level you are on) / this.pickState = function() { if(abs(this.level-game.currentLevel())>1) { this.level = game.currentLevel(); } this.dispValues[0] = "About to play level " + (this.level + 1); this.dispValues[1] = this.getCompleted() + "/"+Levels.length; }; this.setCompleted = function(lvl) { this.completed[lvl] = true; }; this.getCompleted = function() { this.w = 0; i = 0; while(i < this.completed.length) { if(this.completed[i]) {this.w++;} i++; } return this.w; }; /* ⬇ Render the box / this.render = function() { if(!this.created) { this.init(); } this.pickState(); image(this.img,this.dim.x-( this.dim.w/2)-9,this.dim.y-(this.dim.h/2)-9); for(i = 0; i < this.dispValues.length; i++) { smallWordwAlign( this.dispValues[i], this.dim.x+(this.dim.w/2)-5, this.dim.y-(this.dim.h/2)+60+(i25), 17,"right" ); } //smallWordwAlign(this.state, // this.dim.x+(this.dim.w/2)-9, // this.dim.y-(this.dim.h/2)0.03,17,"right"); //smallWordwAlign("Reccording best stats", // this.dim.x+(this.dim.w/2)-9, // this.dim.y+(this.dim.h/2)0.37,17,"right"); //smallWordwAlign((local === 1) ? "Desktop" : // "Mobile",this.dim.x+(this.dim.w/2)-9, // this.dim.y+(this.dim.h/2)0.77,17,"right"); }; this.levelInc = function() { this.level++; }; /* ⬇ Set the local level variable / this.levelSet = function(lvl) { this.level = lvl+1; }; //} }; pregamehandler = PreGameHandler.create(); //} // ￭ Buttons Data and Related { /* ⬇ Button information. Information is stored here and then used in the Buttons variable to make the variable list in Button easier (data) / var ButtonInfo = { play: { x: 300, y: 375, w: 200, h: 60, txt: "Start", nxt: "main_menu", clr: color(255, 64, 64), clr2: color(189, 0, 0), }, playGame: { x: 300, y: 440, w: 260, h: 65, txt: "Play Game", nxt: "game", clr: color(64, 54, 255), clr2: color(10, 0, 199), }, options: { x: 300, y: 530, w: 140, h: 40, txt: "Options", nxt: "options", clr: color(255, 38, 201), clr2: color(199, 0, 169) }, how: { x: 115, y: 490, w: 160, h: 48, txt: "How", nxt: "how", clr: color(115, 115, 255), clr2: color(0, 0, 176), }, back: { x: 300, y: 530, w: 140, h: 40, txt: "Back", nxt: "menu", clr: color(245, 116, 46), clr2: color(189, 71, 7) }, levels: { x: 485, y: 490, w: 160, h: 48, txt: "Levels", nxt: "levels", clr: color(230, 230, 37), clr2: color(162, 173, 2) }, nextLevel: { x: 300, y: 440, w: 200, h: 60, txt: "Next", nxt: "game", clr: color(79, 255, 82), clr2: color(6, 166, 0) }, backFromGame: { x: 300, y: 530, w: 140, h: 40, txt: "Back", nxt: "main_menu", clr: color(245, 116, 46), clr2: color(189, 71, 7), }, pause: { x: 505, y: 545, w: 112, h: 32, txt: "Pause", nxt: "pause", clr: color(115, 115, 255), clr2: color(0, 0, 176), }, resume: { x: 135, y: 290, w: 112, h: 32, txt: "Resume", nxt: "resume", clr: color(79, 255, 82), clr2: color(6, 166, 0), }, restart: { x: WIDTH/2, y: 290, w: 112, h: 32, txt: "Restart", nxt: "restart", clr: color(230, 230, 37), clr2: color(162, 173, 2), }, exit: { x: WIDTH-135, y: 290, w: 112, h: 32, txt: "Exit", nxt: "exit", clr: color(255, 64, 64), clr2: color(189, 0, 0), }, exitMainMenu: { x: 300, y: 530, w: 140, h: 40, txt: "Exit", nxt: "menu", clr: color(245, 46, 46), clr2: color(189, 7, 7) }, returnToMenu: { x: 300, y: 500, w: 200, h: 60, txt: "Return", nxt: "reset_game", clr: color(79, 255, 82), clr2: color(6, 166, 0), }, }; /* ⬇ Button class: takes one value 'data' which includes all of the data stored in ButtonInfo / var Button = function(data) { // • Variables { /* ⬇ button information (x, y, width, height, text, next scene, and color) / this.data = data; /* ⬇ My buttons move when the mosue is over them. To accomplish this, I use two variables to create an offset by bx in the x direction and by in the y direction when the mouse is over the button/ this.bx = 0; this.by = 0; /* ⬇ This is the same as the above two variables except it is for the shadow / this.sx = 3; this.sy = 4; /* ⬇ When you click on the button, it shrinks. The new width and height are stored in newW and newH and is 90 percent of the size of the original button / this.newW = this.data.w 0.9; this.newH = this.data.h * 0.9; /** ⬇ In order to ensure that the buttons can return to their normal size, the original width and height values are stored in origW and origH / this.origW = this.data.w; this.origH = this.data.h; /* ⬇ Variable to see if the button has been pressed / this.hasBeenPressed = false; /* ⬇ Buttons do not always need to trigger a transition. When they do not, the 'task' that needs enacting is stored in this.data.nxt and is checked later in the code to verify what that task is. It is then assigned to this.task as a string (word) describing the task that needs to be done by the button / this.task = ""; /* ⬇ A button does not always need to be activated. For example, the pause button when the game is paused, or right after it has been clicked. / this.state = "activated"; this.hasAnimation = false; //} // • Functions { /* ⬇ isClose function takes two values one and two and see is they are closer than the MOE (margin of error) / this.isClose = function(one,two,MOE) { return Math.abs(one-two) < MOE; }; /* ⬇ The render function used to paint a button / this.render = function() { /* If statement to determine if the mouse is inside the boundries of the button and the game is not in a transition (meaning the button is activated) / if(mouseX > this.data.x-(this.origW/2 + 15/2) && mouseX < this.data.x+(this.origW/2 + 15/2) && mouseY > this.data.y-(this.origH/2 + 15/2) && mouseY < this.data.y+(this.origH/2 + 15/2) && this.state === "activated") { /* ⬇ Move the shadow to the zero- zero position / this.sx += 0.1(0-this.sx); this.sy += 0.1(0-this.sy); /* ⬇ Move the button to the offset position / this.bx += 0.1(3-this.bx); this.by += 0.1(4-this.by); this.hasAnimation = true; if(local) { /* ⬇ Change the mouse to the pointer / cursor(cursorType.SELECT); /* ⬇ If the mouse is clicked... / if(clicked) { /* ⬇ shrink the button size to indicate the button has been clicked / this.data.w = this.newW; this.data.h = this.newH; this.hasBeenPressed = true; } if(released && this.hasBeenPressed) { this.handleTransition(); } } else { if(released) { this.handleTransition(); } } } else if(this.state === "activated") { /* ⬇ If the mouse is no longer inside the boundries of the button... / this.hasBeenPressed = false; /* ⬇ move the shadow back to a 3x-4y position / this.sx += 0.1(3-this.sx); this.sy += 0.1(4-this.sy); /* ⬇ move the button back to the original 0x-0y position / this.bx += 0.1(0-this.bx); this.by += 0.1(0-this.by); /* ⬇ set the button width back to its original value/ this.data.w = this.origW; this.data.h = this.origH; this.hasAnimation = (this.isClose( this.bx,0,0.15)) ? false : true; } if(this.state === "deactivated" && this.hasAnimation) { cursor(cursorType.LOADING); /* ⬇ move the shadow back to a 3x-4y position / this.sx += 0.1(3-this.sx); this.sy += 0.1(4-this.sy); /* ⬇ move the button back to the original 0x-0y position / this.bx += 0.1(0-this.bx); this.by += 0.1(0-this.by); /* ⬇ set the button width back to its original value/ this.data.w = this.origW; this.data.h = this.origH; this.hasAnimation = (this.isClose( this.bx,0,0.15)) ? false : true; if(!this.hasAnimation && this.data.txt === "Pause") { this.reset(); } } /* ⬇ Paint the button graphics using the data in ButtonInfo and the variables in the class / { gradient = ctx.createLinearGradient(this.data.x,this.data.y,this.data.x+(this.data.w (4/43)),this.data.y + (this.data.h * (18/13))); gradient.addColorStop(0,Fill(this.data.clr)); gradient.addColorStop(1,Fill(this.data.clr2)); ctx.strokeStyle = gradient; ctx.lineJoin = "round"; ctx.lineWidth = 15; ctx.fillStyle = gradient; ctx.shadowColor = "black"; ctx.shadowBlur = 4; ctx.shadowOffsetX = this.sx; ctx.shadowOffsetY = this.sy; ctx.strokeRect(this.bx + this.data.x - (0.5 * this.data.w),this.by + this.data.y - (0.5 * this.data.h),this.data.w,this.data.h); ctx.shadowBlur = 0; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; ctx.fillStyle = null; ctx.fillRect(this.bx + this.data.x - (0.5 * this.data.w),this.by + this.data.y - (0.5 * this.data.h),this.data.w,this.data.h); ctx.shadowOffsetX = 2; ctx.shadowOffsetY = 3; ctx.shadowBlur = 9; ctx.lineJoin = "round"; ctx.strokeStyle = "white"; ctx.lineWidth = 3; ctx.strokeRect(this.bx + this.data.x - (0.5 * this.data.w),this.by + this.data.y - (0.5 * this.data.h),this.data.w,this.data.h); ctx.shadowBlur = 4; ctx.fillStyle = "white"; ctx.textAlign = "center"; pf = loadFont(tnr, this.data.h * 0.7); ctx.font = pf.css; ctx.fillText(this.data.txt,this.bx+this.data.x,this.by+this.data.y + (pf.ascent/2)); ctx.shadowBlur = 0; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; }//paint button this.taskHandler(); }; /** ⬇ Function to handle unique button tasks / this.taskHandler = function() { /* ⬇ If a transition is needed, activate a transition. Otherwise, detemrine what task is needed and activate that / switch(this.task) { case "trans": trans.to(this.data.nxt,this); break; case "pause": timer.pause(); playingBoard.setState("pause"); ingameopp.setState("pause"); break; case "resume": if(!this.hasAnimation) { timer.play(); playingBoard.setState("play"); ingameopp.setState("play"); this.reset(); buttongroup.setState( "pause","activated"); } break; case "restart": if(!this.hasAnimation) { ball.returnSafely(); playingBoard.setState("play"); ingameopp.setState("play"); timer.reset(); timer.logBegin(); this.reset(); buttongroup.setState( "pause","activated"); } break; case "exit": if(!this.hasAnimation) { timer.reset(); ball.returnSafely(); playingBoard.setState("play"); ingameopp.setState("play"); buttongroup.setState( "pause","activated"); trans.to("menu",this); } break; case "reset_game": if(!this.hasAnimation) { if(playingBoard !== undefined) { playingBoard.reset(); playingBoard.setCompletion(false); } game.setLevel(0); pregamehandler.levelSet(-1); trans.to("menu",this); } break; } }; this.handleTransition = function() { /* ⬇ set the task variable to 'trans' if a transition is appropriate / this.task = "trans"; /* ⬇ The current task is to begin a transition. If a different task is needed, this if-chain will find it and override the previous value of this.taks / if(this.data.nxt === "pause") { this.task = "pause"; } else if(this.data.nxt === "resume") { this.task = "resume"; } else if(this.data.nxt === "restart") { this.task = "restart"; } else if(this.data.nxt === "exit") { this.task = "exit"; } else if(this.data.nxt === "reset_game") { this.task = "reset_game"; } /* ⬇ The button will not be deactivated to ensure against spam clicking / this.state = "deactivated"; buttongroup.setState(SCENE,"deactivated"); if(this.task === "resume" \|\| this.task === "restart" \|\| this.task === "exit") { buttongroup.setState("pause","deactivated"); } }; /* ⬇ Function to switch the state of the button. I use a switch statement instead of a blind assignment to protect against typos and incorrect values being passed into this function / this.setState = function(state) { switch(state) { case "activated": this.state = "activated"; break; case "deactivated": this.state = "deactivated"; break; default: if(debug) { println("Invalid state passed in " + "Button --> setState()"); } break; } }; /* ⬇ Reset the Button properties function / this.reset = function() { /* ⬇ set button x and y offset to zero / this.bx = 0; this.by = 0; /* ⬇ set shadow x and y offset to 3x-4y / this.sx = 3; this.sy = 4; /* ⬇ set task to an empty string / this.task = ""; /* ⬇ set state to activated again / this.state = "activated"; this.hasAnimation = false; }; //} }; /* ⬇ Instances of buttons / var Buttons = { play: Button.create(ButtonInfo.play), playGame: Button.create(ButtonInfo.playGame), options: Button.create(ButtonInfo.options), how: Button.create(ButtonInfo.how), back: Button.create(ButtonInfo.back), levels: Button.create(ButtonInfo.levels), nextLevel: Button.create(ButtonInfo.nextLevel), backFromGame: Button.create(ButtonInfo.backFromGame), pause: Button.create(ButtonInfo.pause), resume: Button.create(ButtonInfo.resume), restart: Button.create(ButtonInfo.restart), exit: Button.create(ButtonInfo.exit), returnToMenu: Button.create(ButtonInfo.returnToMenu), exitMainMenu: Button.create(ButtonInfo.exitMainMenu), }; //} // ￭ Timer and Related { /* ⬇ In-game timer / var Timer = function() { // • Variables { /* ⬇ time is made up of minutes, seconds, and millis / this.time = { min: 0, sec: 0, mill: 0 }; /* ⬇ Begin, end, and current time variables / this.begin = 0; this.end = 0; this.currTime = 0; /* ⬇ Begin, end, and total time spent in pause mode / this.beginPause = 0; this.endPause = 0; this.pauseTime = 0; /* ⬇ The state of the timer (play or pause) / this.state = "play"; /* ⬇ Has the timer just been reset? This is prevent the timer from starting up again right after being reset / this.justReset = false; //} // • Functions { /* ⬇ Funnctino to pause the timer / this.pause = function() { this.beginPause = currentTime(); this.setState("pause"); }; /* ⬇ Function to play the timer / this.play = function() { /* ⬇ Play the timer / this.endPause = currentTime(); this.setState("play"); /* ⬇ Keep track of total paused time / this.pauseTime += (this.endPause - this.beginPause); }; /* ⬇ Function to switch the state of the timer. Uses switch state to protect against invalide arguments / this.setState = function(state) { switch(state) { case "play": this.state = "play"; break; case "pause": this.state = "pause"; break; default: if(debug) { println("Invalid state passed in " + "class Timer --> setState()"); } break; } }; /* ⬇ min setter / this.minIs = function(min) { this.time.min = min; }; /* ⬇ sec setter / this.secIs = function(sec) { this.time.sec = sec; }; /* ⬇ millis setter / this.millIs = function(mill) { this.time.mill = mill; }; /* ⬇ begin the time log / this.logBegin = function() { this.justReset = false; this.begin = currentTime(); }; /* ⬇ end the time log / this.logEnd = function(end) { this.end = currentTime(); }; /* ⬇ min getter / this.getMin = function() { if(this.time.min !== undefined \|\| this.time.min !== 0) { return this.time.min; } else { return 0; } }; /* ⬇ sec getter / this.getSec = function() { if(this.time.sec !== undefined \|\| this.time.sec !== 0) { return this.time.sec; } else { return 0; } }; /* ⬇ millis getter / this.getMill = function() { if(this.time.mill !== undefined \|\| this.time.mill !== 0) { return this.time.mill; } else { return 0; } }; /* ⬇ record the time function / this.record = function() { /* ⬇ log the end of the time and calculate the time based on the begin and end time / if(this.state !== "pause" && !this.justReset) { this.logEnd(); this.currTime = this.end - this.begin - this.pauseTime; /* ⬇ calculate the minutes from the current time and adjust the current time for calculating seconds / this.time.min = floor(this.currTime / 60000); this.currTime -= (this.time.min 60000); /** ⬇ calculate the seconds from the current time and adjust the current time for calculating millis / this.time.sec = floor(this.currTime / 1000); this.currTime -= (this.time.sec 1000); /** ⬇ calculate the millis from the current time / this.time.mill = this.currTime % 1000; } }; /* ⬇ reset function / this.reset = function() { /* ⬇ reset the min, sec, and mill values back to zero / this.time = { min: 0, sec: 0, mill: 0 }; /* ⬇ Reset begin, end, and current time back to zero / this.begin = 0; this.end = 0; this.currTime = 0; /* ⬇ Reset pause begin, end, and total time to zero / this.beginPause = 0; this.endPause = 0; this.pauseTime = 0; /* ⬇ Reset state back to play / this.state = "play"; /* ⬇ Set the reset boolean to true / this.justReset = true; }; //} }; /* ⬇ Timer instance for use in the game / timer = Timer.create(); /* ⬇ Timer Handler class. This is a rather missleading name as it handles and paints the stats of each level after the level is over (time, number of deaths, number of moves) / var TimerHandler = function() { /* ⬇ show time function / this.showTime = function() { /* ⬇ paint the info box and the text in that box for the inbetween level stats / ctx.lineJoin = "round"; ctx.fillStyle = "black"; ctx.fillRect(150,220,300,125); ctx.lineWidth = 14; ctx.strokeStyle = "black"; ctx.strokeRect(150,220,299,125); gradient = ctx.createLinearGradient(150,220,150,345); gradient.addColorStop(0,"darkgrey"); gradient.addColorStop(0.3,"white"); gradient.addColorStop(1,"darkgrey"); ctx.strokeStyle = gradient; ctx.lineJoin = "round"; ctx.lineWidth = 8; ctx.strokeRect(150,220,300,125); word("Level "+(playingBoard.getCurrentLevel()+1)+ " Stats",300,254,30,color(10, 10, 10), color(10, 10, 10)); word("• Time:",165,278,17,color(10), color(10),"left"); word(timer.getMin() + ":" + timer.getSec() + ":" + timer.getMill(),435,278,17, color(10),color(10),"right"); word("• Deaths:",165,300,17,color(10), color(10),"left"); word(ball.getDeaths(),435,300,17,color(10), color(10),"right"); word("• Moves:",165,325,17,color(10), color(10),"left"); word(ball.getNummov(),435,325,17,color(10), color(10),"right"); }; }; /* ⬇ timer handler instance / timerHand = TimerHandler.create(); //} // ￭ Transition and Related { /* ⬇ Scene to scene fade out transition class / var Transition = function() { // • Variables { /* ⬇ what stage the transition is in / this.stage = 0; /* ⬇ the next scene to go to after the transition is over / this.nxt = ""; /* ⬇ opacity of the transition must start at 1 and not 0 because it increases by a percentage of its current value and any percentage of 0 is just 0. A value of 1 works just as well as 0 and is not noticable before it changes to a darker value / this.op = 1; /* ⬇ Is the transition running? / this.runTrans = false; /* ⬇ The object button so that button information can be accessed in the transition class / this.obj = null; //} // • Functions { /* ⬇ The to function that is called to start the transition. Two parameters: next scene and button object / this.to = function(nxt,btn) { /* ⬇ set transition next equal to the prameter next / this.nxt = nxt; /* ⬇ transition is now running / this.runTrans = true; /* ⬇ the first stage of the transition is 1 / this.stage = 1; /* ⬇ set obj equal to the button object / this.obj = btn; }; /* Some tasks need to be handled at a unique point in time with regard to the visibility of the screen. handlePreUnique and PostUnique take care of these tasks / this.handlePreUnique = function() { /* ⬇ Reset the playing board and send the game to the next level. Reset the button properties / if(this.obj !== null) { if(this.obj.data.txt === "Next") { playingBoard.reset(); playingBoard.setCompletion(false); game.nextLevel(); } this.obj.reset(); } if(playingBoard !== undefined) { if(this.nxt === "game" && playingBoard.getLevelCompletion()) { this.nxt = "breakgame"; } } buttongroup.setState(SCENE,"activated"); }; this.handlePostUnique = function() { /* ⬇ If you are transitioning into the game not for the first time, reset the time variable to begin the time log / if(SCENE === "game") { //flipBck.instaFlipWhite(); if(playingBoard !== undefined) { playingBoard.resetTime(); } } /* ⬇ If you are transitioning into the in-between scene or the final break, update final stats and set the current level to the correct value / if(SCENE === "breakgame" \|\| SCENE === "final_break"){ finalstats.addMoves(ball.getNummov()); finalstats.addDeaths(ball.getDeaths()); finalstats.addTime(timer.getMin(), timer.getSec(),timer.getMill()); pregamehandler.levelSet( playingBoard.getCurrentLevel() ); } /* ⬇ If transitioning to the menu, reset the level select screen/variables / if(SCENE === "menu") { levelselect.reset(); } }; /* ⬇ Function that actually runs the transition. Renders the rectangle that fades to black, calls pre/post unique and modifies the global variable SCENE / this.run = function() { /* ⬇ Rectangle used to create the fade-to-black effect of the transition / noStroke(); ctx.fillStyle = "rgba(0,0,0,"+(this.op/255)+")"; ctx.fillRect(0,0,WIDTH,HEIGHT); /* ⬇ First stage of the transition: fade to black Also, change the cursor to loading / if(this.stage === 1) { this.op += 0.1(255-this.op); cursor(cursorType.LOADING); } else if(this.stage === 2) { /** ⬇ Second stage of the transition: fade back to 0 opacity / this.op += 0.1(0-this.op); } /** ⬇ Change the stage and the scene when the screen is dark enough / if(this.op > 253) { this.stage = 2; this.handlePreUnique(); SCENE = this.nxt; this.handlePostUnique(); } /* ⬇ Reset variables and cursor back to normal / else if(this.op < 1 && this.stage === 2) { this.stage = 0; this.op = 0; this.runTrans = false; cursor(normal); } }; //} }; /* ⬇ Instance variable for the transition class / trans = Transition.create(); //} // ￭ Keyboard and Related { /* ⬇ Class to find out the current key pressed / Keyboard = function() { // • Variables { /* ⬇ keys array / this.keys = []; /* ⬇ current key pressed / this.currentKey = "none"; //} // • Functions { /* ⬇ Getter for the current key pressed / this.keyDown = function() { return this.currentKey; }; /* ⬇ Listen function to listen for keyboard strokes / this.listen = function() { /* ⬇ Continually set arrow keys to false / this.keys[LEFT] = false; this.keys[RIGHT] = false; this.keys[UP] = false; this.keys[DOWN] = false; /* ⬇ If a key is pressed, set the slot where the key code is to true / if(keyIsPressed) { this.keys[keyCode] = true; } /* ⬇ Set current key equal to the correct text value (arrow pad or "nomove") / if(this.keys[LEFT]) { this.currentKey = "left"; } else if(this.keys[RIGHT]) { this.currentKey = "right"; } else if(this.keys[UP]) { this.currentKey = "up"; } else if(this.keys[DOWN]) { this.currentKey = "down"; } else { this.currentKey = "nomove"; } }; //} }; /* ⬇ Instance variable for the keyboard class / var keyboard = Keyboard.create(); //} // ￭ Mobile Arrow Buttons { /* ⬇ Mobile Arrow Buttons Class / MobileArrowButtons = function() { // • Variables { /* ⬇ Current moving direction / this.currentDir = "nomove"; /* ⬇ Half the dimensions of the buttons (including stroke thickness) / this.halfShort = 84/2; this.halfLong = 134/2; /* ⬇ The direction location / this.locate = "nomove"; /* ⬇ The dimensions of all four buttons / this.dim = { up: { x: 300, y: 65, }, down: { x: 300, y: (HEIGHT-105)-65, }, left: { x: 65, y: (HEIGHT-105)/2, }, right: { x: WIDTH-65, y: (HEIGHT-105)/2, } }; //} // • Functions { /* ⬇ Function to determine which (if any) of the four buttons the user is "in" / this.handleCollision = function() { if( mouseX > this.dim.up.x-this.halfLong && mouseX < this.dim.up.x+this.halfLong && mouseY > this.dim.up.y-this.halfShort && mouseY < this.dim.up.y+this.halfShort) { this.locate = "up"; } else if( mouseX > this.dim.down.x-this.halfLong && mouseX < this.dim.down.x+this.halfLong && mouseY > this.dim.down.y-this.halfShort && mouseY < this.dim.down.y+this.halfShort) { this.locate = "down"; } else if( mouseX > this.dim.left.x-this.halfShort && mouseX < this.dim.left.x+this.halfShort && mouseY > this.dim.left.y-this.halfLong && mouseY < this.dim.left.y+this.halfLong) { this.locate = "left"; } else if( mouseX > this.dim.right.x-this.halfShort && mouseX < this.dim.right.x+this.halfShort && mouseY > this.dim.right.y-this.halfLong && mouseY < this.dim.right.y+this.halfLong) { this.locate = "right"; } else { this.locate = "nomove"; } }; /* ⬇ Handler in the event the user presses a button / this.handlePress = function() { if(released) { this.currentDir = this.locate; } else { this.currentDir = "nomove"; } }; /* ⬇ Listen for collisions and pressing / this.listen = function() { this.handleCollision(); this.handlePress(); }; /* ⬇ Get the current direction the ball should move in / this.getDirection = function() { return this.currentDir; }; /* ⬇ Render all four buttons using continuous function calls, not an image/init() function. The reason for this is because the buttons need to be somewhat opaque, so return get() does not work here / this.render = function() { createMobileArrowButton("up",this.dim.up.x, this.dim.up.y); createMobileArrowButton("down",this.dim.down.x, this.dim.down.y); createMobileArrowButton("left",this.dim.left.x, this.dim.left.y); createMobileArrowButton("right",this.dim.right.x, this.dim.right.y); }; //} }; /* ⬇ Instance variable for buttons display / mobilebuttons = MobileArrowButtons.create(); //} // ￭ Ball { /* ⬇ Ball class (player) / Ball = function() { // • Variables { /* ⬇ X-Y position and size / this.x = 0; this.y = 0; this.s = 0; /* ⬇ Starting X-Y position on the board / this.startX = 0; this.startY = 0; /* ⬇ Distance needed for the ball to move / this.dst = 0; /* ⬇ Boolean-is the ball moving. NOTE: This does moving does not include movements with the platform, only those triggered by keystrokes / this.inMove = false; /* ⬇ New X-Y position when the ball is moved / this.newXPos = 0; this.newYPos = 0; /* ⬇ current move / this.move = "nomove"; /* ⬇ The current color of the ball / this.currentColor = "white"; /* ⬇ Timer for the reseting of the ball / this.returnTime = 0; /* ⬇ Is the ball being returned / this.returnBall = false; /* ⬇ Boolean: display the ball? / this.show = true; /* ⬇ Is the ball on the platform? / this.onPlat = false; /* ⬇ Does the ball have a certain color key / this.hasRedKey = false; this.hasBlueKey = false; this.hasYellowKey = false; this.hasPurpleKey = false; /* ⬇ Is the ball moving? / this.ballIsMoving = false; /* ⬇ Freeze the ball's movement (usually due to a reset about to happen / this.frozen = false; /* ⬇ Number of deaths and moves; used for the statistics after the level is complete / this.deaths = 0; this.nummov = 0; //} // • Functions { /* ⬇ Getter for the number of moves per level / this.getNummov = function() { return this.nummov; }; /* ⬇ Getter for the number of deaths per level / this.getDeaths = function() { return this.deaths; }; /* ⬇ Set the has_clr_key variable to true for that particular key / this.getsKey = function(clr) { switch(clr) { case "red": this.hasRedKey = true; break; case "blue": this.hasBlueKey = true; break; case "yellow": this.hasYellowKey = true; break; case "purple": this.hasPurpleKey = true; break; } }; /* ⬇ Seter for the frozen variable / this.freeze = function() { this.frozen = true; }; /* ⬇ Setter for the ball size / this.defineSize = function(sz) { this.dst = sz; }; /* ⬇ Function to make the ball blink / this.blinky = function() { if((this.returnTime/10) % 2 === 1) { this.show = !this.show; } }; /* ⬇ Return to start function. When called it makes the ball blink, resets the playing board, increases the death counter, and resets the necesary variables / this.returnToStart = function() { if(!this.onPlat) { this.frozen = false; this.returnBall = true; if(this.returnTime < 100) { this.blinky(); this.returnTime += 2; } else { this.x = this.startX; this.y = this.startY; this.newXPos = this.startX; this.newYPos = this.startY; this.currentColor = "white"; this.returnTime = 0; this.show = true; this.returnBall = false; playingBoard.resetBoard(); this.deaths++; } } }; /* ⬇ Function to return the ball to the start without making the blinky animation or incrementing the death counter / this.returnSafely = function() { this.frozen = false; this.returnBall = true; this.x = this.startX; this.y = this.startY; this.newXPos = this.startX; this.newYPos = this.startY; this.currentColor = "white"; this.returnTime = 0; this.show = true; this.returnBall = false; this.onPlat = false; this.nummov = 0; this.deaths = 0; playingBoard.resetBoard(); }; /* ⬇ Getter for the ball is moving variable / this.isInMove = function() { return this.ballIsMoving; }; /* ⬇ Boolean return function to see if the ball has stopped moving / this.isStill = function() { return this.x === this.newXPos && this.y === this.newYPos; }; /* ⬇ Setter for the ball color / this.colorIs = function(clr) { this.currentColor = clr; }; this.getColor = function() { return this.currentColor; }; /* ⬇ The color is not the parameter / this.colorIsNot = function(clr) { return this.currentColor !== clr; }; /* ⬇ Set the position of the ball / this.position = function(x,y,s) { this.s = s; this.x = x - (1/2) this.s; this.y = y - (1/2) * this.s; this.startX = this.x; this.startY = this.y; this.frozen = false; }; /** ⬇ MOE finder function - Looks to see if the value of one and two is less than err. Returns true if it is and false otherwise (MOE = margin of error) / this.valueClose = function(one,two,err) { return abs(one-two) <= err; }; /* ⬇ Smooth move is a function that smoothly moves the ball a certain distance in a certain direction. A 'smooth move' is a move that starts out at a certain speed and then slows down smoothly into its destination / this.smoothMove = function(dir) { if(this.inMove && !this.returnBall && !this.onPlat && !this.frozen) { switch(dir) { case "left": this.x -= 0.15abs(this.newXPos-this.x); break; case "right": this.x += 0.15abs(this.newXPos-this.x); break; case "up": this.y -= 0.15abs(this.newYPos-this.y); break; case "down": this.y += 0.15abs(this.newYPos-this.y); break; } if(this.valueClose(this.x,this.newXPos,2) && this.valueClose(this.y,this.newYPos,2)) { this.x = this.newXPos; this.y = this.newYPos; this.inMove = false; this.ballIsMoving = false; playingBoard.resetFlipSwitchDial(); } } //println( // "x: " + this.x + // "\ny: " + this.y + // "\nnewXPos: " + this.newXPos + // "\nnewYPos: " + this.newYPos + "\n\n"); }; /* ⬇ Calculates the new position of the ball and stores it in the proper variables / this.calculateNewPos = function(x,y,dir) { if(!this.returnBall) { switch(dir) { case "left": this.newXPos = x - this.dst; this.newYPos = y; break; case "right": this.newXPos = x + this.dst; this.newYPos = y; break; case "up": this.newXPos = x; this.newYPos = y - this.dst; break; case "down": this.newXPos = x; this.newYPos = y + this.dst; break; } } }; /* ⬇ Setter for if the ball is on the platform / this.onPlatform = function() { this.onPlat = true; }; /* ⬇ Getter for if the ball is on the platform / this.isOnPlatform = function() { return this.onPlat; }; /* ⬇ Getter for the direction of the ball / this.directionIs = function() { return this.move; }; /* ⬇ Updates every frame to see if any new keyboard strokes have been made. If they are, the proper variables are set and functions called Or, if in mobile mode, if a button is pressed...do the same thing. / this.update = function() { if(local) { if(playingBoard.getState() !== "pause") { keyboard.listen(); } if(keyboard.keyDown() !== "nomove" && !this.inMove) { if(!this.inMove) { this.calculateNewPos(this.x,this.y,keyboard.keyDown()); if(!this.frozen && !this.returnBall) { this.nummov++; } } this.inMove = true; this.onPlat = false; if(keyboard.keyDown() === "left") { this.move = "left"; } else if(keyboard.keyDown() === "right") { this.move = "right"; } else if(keyboard.keyDown() === "up") { this.move = "up"; } else if(keyboard.keyDown() === "down") { this.move = "down"; } this.ballIsMoving = true; } } else { if(playingBoard.getState() !== "pause") { mobilebuttons.listen(); } if(mobilebuttons.getDirection() !== "nomove" && !this.inMove) { if(!this.inMove) { this.calculateNewPos(this.x,this.y, mobilebuttons.getDirection()); if(!this.frozen) { this.nummov++; } } this.inMove = true; this.onPlat = false; this.move = mobilebuttons.getDirection(); this.ballIsMoving = true; } } if(this.move === "left") { this.smoothMove("left"); } else if(this.move === "right") { this.smoothMove("right"); } else if(this.move === "up") { this.smoothMove("up"); } else if(this.move === "down") { this.smoothMove("down"); } }; /* ⬇ Renders the ball / this.render = function() { this.update(); if(this.show) { switch(this.currentColor) { case "white": image(CanvasGraphics.playerWhite,floor(this.x),floor(this.y), floor(this.s), floor(this.s)); break; case "red": image(CanvasGraphics.playerRed,floor(this.x),floor(this.y), floor(this.s), floor(this.s)); break; case "blue": image(CanvasGraphics.playerBlue,floor(this.x),floor(this.y),floor(this.s),floor(this.s)); break; case "yellow": image(CanvasGraphics.playerYellow,floor(this.x),floor(this.y),floor(this.s),floor(this.s)); break; case "purple": image(CanvasGraphics.playerPurple,floor(this.x),floor(this.y),floor(this.s),floor(this.s)); break; } } }; /* ⬇ Resets the ball properties/variables / this.reset = function() { this.x = this.startX; this.y = this.startY; this.newXPos = this.startX; this.newYPos = this.startY; this.currentColor = "white"; this.returnTime = 0; this.show = true; this.returnBall = false; this.frozen = false; this.deaths = 0; this.nummov = 0; this.ballIsMoving = false; this.inMove = false; }; //} }; ball = Ball.create(); //} // ￭ Flip Color Background{ Quad = function(x,y,s) { this.x = x; this.y = y; this.s = 50; this.rand = random(-15,15); this.shade = s; this.flip = 0; this.setShade = function(s) { switch(this.shade) { case 0: this.c = color(255+this.rand,160+this.rand, 160+this.rand); break; case 1: this.c = color(169+this.rand, 166+this.rand, 255+this.rand); break; case 2: this.c = color(255+this.rand, 251+this.rand, 171+this.rand); break; case 3: this.c = color(251+this.rand, 173+this.rand, 255+this.rand); break; case 4: this.c = color(179+this.rand, 179+this.rand, 179+this.rand); } }; this.setShade(this.shade); this.render = function() { noStroke(); fill(this.c); quad(this.x+this.flip,this.y+this.flip,this.x, this.y+this.s,this.x+this.s-this.flip, this.y+this.s-this.flip,this.x+this.s,this.y); if(this.activate) { if(this.flip === 0) { this.dir = true; } else if(this.flip === 50) { this.dir = false; } if(Math.abs(this.flip-25) < 4) { this.setShade(this.shade); } if(this.dir) { this.flip += 0.15(50-this.flip); } else { this.flip += 0.15(0-this.flip); } if(Math.abs(this.flip-50) < 0.05) { this.flip = 50; this.activate = false; } else if(Math.abs(this.flip) < 0.05) { this.flip = 0; this.activate = false; } } }; this.flipQuad = function(s) { this.activate = true; this.shade = s; }; }; FlipBackground = function() { this.init = false; this.q = []; this.temp = []; this.shade = 4; this.textShade = "white"; this.run = false; for(i = 0; i < 600; i += 50) { for(j = 0; j < 600; j += 50) { this.temp.push(Quad.create(i,j,this.shade)); } this.q.push(this.temp); this.temp = []; } this.render = function() { for(i = 0; i < this.q.length; i++) { for(j = 0; j < this.q[i].length; j++) { this.q[i][j].render(); } } switch(ball.getColor()) { case "red": if(this.textShade !== "red") { this.flip(0); this.textShade = "red"; } break; case "blue": if(this.textShade !== "blue") { this.flip(1); this.textShade = "blue"; } break; case "yellow": if(this.textShade !== "yellow") { this.flip(2); this.textShade = "yellow"; } break; case "purple": if(this.textShade !== "purple") { this.flip(3); this.textShade = "purple"; } break; case "white": if(this.textShade !== "white") { this.flip(4); this.textShade = "white"; } break; } if(this.run) { this.realFlip(); this.activate(); } }; this.flip = function(col) { if(this.run === false) { this.setShade = col; this.run = true; this.one = 0; this.two = 0; this.sum = 0; } }; this.realFlip = function() { if(this.sum < 12) { this.one = 0; this.two = this.sum; } else { this.two = 11; this.one = this.sum-this.two; } if(this.sum > 22) { this.run = false; } }; this.activate = function(i,j) { while(this.one <= this.two) { this.q[this.one][this.two].flipQuad(this.setShade); if(this.one !== this.two) { this.q[this.two][this.one].flipQuad(this.setShade); } this.one++; this.two--; } this.sum++; }; }; flipBck = FlipBackground.create(); //} // ￭ Platform and Related { /* ⬇ Platform class / Platform = function(sz,sx,sy,si,sj) { // • Variables { /* ⬇ Size of the platform (square size) / this.sz = sz; /* ⬇ X-Y position of the platform / this.x = 0; this.y = 0; /* / this.sx = sx; this.sy = sy; this.si = si; this.sj = sj; /* ⬇ Is the platform created? Is the platform active / this.created = false; this.active = false; /* ⬇ The direction of the platform / this.dir = "unknown"; /* ⬇ Used to trigger the finding of the initial direction of the platform / this.decideInit = false; /* ⬇ Speed of the platform / this.speed = (1/100) this.sz; /** ⬇ Is the platform on delay at a corner or end of the route / this.onDelay = "null"; /* ⬇ The time in which the platform needs to be on delay / this.delayTime = 0; /* ⬇ The state of the platform, play or pause / this.state = "play"; //} // • Functions { /* ⬇ Freeze the platform by changing the direction to "stop" to freeze movement / this.freeze = function() { this.dir = "stop"; }; /* ⬇ Resets the variables of the platform / this.reset = function() { this.x = 0; this.y = 0; this.dir = "unkown"; this.delayTime = 0; this.decideInit = false; this.active = false; this.onDelay = "null"; }; /* ⬇ Setter for the delay variable / this.delay = function() { this.onDelay = "true"; }; /* ⬇ Creates and stores the image of the platform and sets this.created to true so no futher graphic- creation function calls are made / this.init = function() { this.img = createPlatform(); this.created = true; }; /* ⬇ Turns the platform on. If the platform is not active (first time its turned on) delay to give time for the player to get onto the platform before starting / this.turnOn = function() { if(!this.active) { this.delay(); } this.active = true; }; /* ⬇ Getter for if the platform is active / this.isActive = function() { return this.active; }; /* ⬇ Function to find the initial direction of the platform. There is a heiarchy of directions which goes: 1) North 2) East 3) South 4) West / this.findInitDir = function(n,e,s,w) { if(n === ".") { this.dir = "north"; } else if(e === ".") { this.dir = "east"; } else if(s === ".") { this.dir = "south"; } else if(w === ".") { this.dir = "west"; } else { if(debug) { println("No track found for platform"); } } }; /* ⬇ Function that can be called to find the end of the track and move the platform in the correct direction / this.direction = function(north,east,south,west,i,j) { if(!this.decideInit) { this.findInitDir(north,east,south,west); this.decideInit = true; } this.findEnd(this.dir,north,east,south,west,i,j); this.move(this.dir); }; /* ⬇ Function to find the options of the platform. When the platform reaches a corner or an end, a decision must be made as to which direction to go. This requires two things: 1) Find out which direction the track goes 2) Make sure the platform is not going back the way it came at a corner / this.options = function(n,e,s,w,cancel,i,j) { if((n === "." \|\| n === "p") && cancel !== "north") { this.canGo = "north"; } else if((e === "." \|\| e === "p") && cancel !== "east") { this.canGo = "east"; } else if((s === "." \|\| s === "p") && cancel !== "south") { this.canGo = "south"; } else if((w === "." \|\| w === "p") && cancel !== "west") { this.canGo = "west"; } else { this.canGo = cancel; } if(this.onDelay === "false") { this.x = this.sz ( j - this.sj ); this.y = this.sz * ( i - this.si ); this.dir = this.canGo; } this.delay(); }; /** ⬇ Function to find out which direction NOT to go by finding out where the platform just came from / this.evalDir = function(n,e,s,w,dir,i,j) { this.prevDir = dir; if(this.prevDir === "north") { this.noGo = "south"; } else if(this.prevDir === "east") { this.noGo = "west"; } else if(this.prevDir === "south") { this.noGo = "north"; } else if(this.prevDir === "west") { this.noGo = "east"; } //println(this.noGo); this.options(n,e,s,w,this.noGo,i,j); }; /* ⬇ Find the end of the track if the platform is either at the end or beginning of its path / this.findEnd = function(dir,n,e,s,w,i,j) { switch(dir) { case "north": if(n !== "." && n !== "p") { this.evalDir(n,e,s,w,dir,i,j); } break; case "east": if(e !== "." && e !== "p") { this.evalDir(n,e,s,w,dir,i,j); } break; case "south": if(s !== "." && s !== "p") { this.evalDir(n,e,s,w,dir,i,j); } break; case "west": if(w !== "." && w !== "p") { this.evalDir(n,e,s,w,dir,i,j); } break; default: if(debug) { println("default case in platform function \"this.findEnd()\""); } break; } }; /* ⬇ Set the state of the platform (play/pause) Uses switch statement to ensure against invalid arguments / this.setState = function(state) { switch(state) { case "play": this.state = "play"; break; case "pause": this.state = "pause"; break; default: if(debug) { println("Invalid state passed in " + "class Platform --> setState()"); } break; } }; /* ⬇ Function to move the platform at a speed of this.speed in the proper direction. If onDelay is true, delay for 150 frames / this.move = function(dir) { if(this.onDelay === "false" && this.state === "play") { switch(dir) { case "north": this.y -= this.speed; break; case "east": this.x += this.speed; break; case "south": this.y += this.speed; break; case "west": this.x -= this.speed; break; } } if(this.onDelay === "true" && this.state === "play") { this.delayTime++; if(this.delayTime >= 150) { this.delayTime = 0; this.onDelay = "false"; } } }; /* ⬇ Render the platform / this.render = function() { if(!this.created) { this.init(); } image(this.img,this.x,this.y,this.sz,this.sz); }; //} }; /* ⬇ Lever class (used to activate the platform) / Lever = function(sz) { // • Variables { /* ⬇ Size of the lever square / this.sz = sz; /* ⬇ Has it been created? / this.created = false; /* ⬇ Is the lever activated? / this.active = false; //} // • Functions { /* ⬇ Function to reset the lever back to the 'off' position / this.reset = function() { this.active = false; }; /* ⬇ Create two levers, one in the 'off' position and one in the 'on' position and set this.created to true / this.init = function() { this.imgOn = createLever(true); this.imgOff = createLever(false); this.created = true; }; /* ⬇ Turn the lever on. NOTE: there is not way to turn the lever off after it has been triggered except by dying and reseting the board. There is no 'turnOff' function, as a result. / this.turnOn = function() { this.active = true; }; /* ⬇ Render the lever; if it is active, display the 'on' lever image; if it is not active, display the 'off' lever image / this.render = function() { if(!this.created) { this.init(); } if(!this.active) { image(this.imgOff,0,0,this.sz,this.sz); } else { image(this.imgOn,0,0,this.sz,this.sz); } }; //} }; //} // ￭ Square Shaped board pieces { /* ⬇ Square (main game piece) class / var Square = function(sz,clr,clr2,paint,key,block) { // • Variables { /* ⬇ Size of the square (width/height) / this.sz = sz; /* ⬇ Two colors, to create the gradient of the square / this.clr = clr; this.clr2 = clr2; /* ⬇ Does the square have a paint spill on it? / this.paint = paint; /* ⬇ Does the square have a key on it? / this.key = key; /* ⬇ Does the square have a block on it? (key to open) / this.block = block; /* ⬇ Has the square image been created? / this.created = false; //} // • Functions { /* ⬇ Function to create the image of the square with the proper element on it (or perhaps no element) / this.init = function() { this.img = createSquare(this.clr,this.clr2); if(this.key !== undefined && this.key !== "none") { this.keyImg = createKey(this.key); } else if(this.block !== undefined && this.block !== "none") { this.blockImg = createBlockedSquare(this.block); } this.created = true; }; /* ⬇ Render the square / this.render = function() { if(!this.created) { this.init(); } image(this.img,0,0,this.sz,this.sz); if(this.paint !== undefined \|\| this.paint !== "none") { switch(this.paint) { case "red": image(CanvasGraphics.redSpot,0,0,this.sz,this.sz); break; case "blue": image(CanvasGraphics.blueSpot,0,0,this.sz,this.sz); break; case "yellow": image(CanvasGraphics.yellowSpot,0,0,this.sz,this.sz); break; case "purple": image(CanvasGraphics.purpleSpot,0,0,this.sz,this.sz); break; default: break; } } if(this.key !== undefined) { switch(this.key) { case "red": if(playingBoard.keys.red) { image(this.keyImg,0,0,this.sz,this.sz); } break; case "blue": if(playingBoard.keys.blue) { image(this.keyImg,0,0,this.sz,this.sz); } break; case "yellow": if(playingBoard.keys.yellow) { image(this.keyImg,0,0,this.sz,this.sz); } break; case "purple": if(playingBoard.keys.purple) { image(this.keyImg,0,0,this.sz,this.sz); } break; default: break; } } if(this.blockImg !== undefined && this.block !== "none") { switch(this.block) { case "red": if(playingBoard.keys.red) { image(this.blockImg,0,0,this.sz,this.sz); } break; case "blue": if(playingBoard.keys.blue) { image(this.blockImg,0,0,this.sz,this.sz); } break; case "yellow": if(playingBoard.keys.yellow) { image(this.blockImg,0,0,this.sz,this.sz); } break; case "purple": if(playingBoard.keys.purple) { image(this.blockImg,0,0,this.sz,this.sz); } break; default: break; } } }; //} }, /* ⬇ Checkered target (end square) class / Target = function(sz) { // • Variables { /* ⬇ Size of the square / this.sz = sz; /* ⬇ Color of the target (green undercolor square) / this.clr = color(69, 255, 69); this.clr2 = color(0, 117, 0); /* ⬇ Has the image been created? / this.created = false; //} // • Functions { /* ⬇ Function to create the image of the target / this.init = function() { this.img = createSquare(this.clr,this.clr2); this.img2 = createSquare(color(255),color(210)); pushMatrix(); resetMatrix(); image(this.img,0,0); for(var i = 0; i < 150; i += 150/3) { for(var j = 0; j < 150; j += 150/3) { image(this.img2,i,j,150/6,150/6); image(this.img2,i+150/6,j+150/6,150/6,150/6); } } this.finalImg = get(0,0,150,150); this.created = true; popMatrix(); }; /* ⬇ Render the function / this.render = function() { if(!this.created) { this.init(); } image(this.finalImg,0,0,this.sz,this.sz); }; //} }, /* ⬇ Switch Tile class / SwitchTile = function(sz,clr) { // • Variables { /* ⬇ Size of the square / this.sz = sz; /* ⬇ color of the switch tile / this.clr = clr; /* ⬇ Is the switch tile on or off / this.on = false; /* ⬇ Has the image been created yet? / this.created = false; //} // • Functions { /* ⬇ Turn the switch tile on? / this.turnOn = function() { this.on = true; }; /* ⬇ Reset the switch tile / this.reset = function() { this.on = false; }; /* ⬇ Create the switch tile square / this.backup = function() { this.img = createBackup(this.clr); this.created = true; }; /* ⬇ Getter for the color of the switch tile / this.colorIs = function() { return this.clr; }; /* ⬇ Render the switch tile / this.render = function() { if(!this.created) { this.backup(); } if(this.on) { image(this.img,0,0,this.sz,this.sz); } switch(this.clr) { case "red": image(CanvasGraphics.redSwitchTile,0,0,this.sz,this.sz); break; case "blue": image(CanvasGraphics.blueSwitchTile,0,0,this.sz,this.sz); break; case "yellow": image(CanvasGraphics.yellowSwitchTile,0,0,this.sz,this.sz); break; case "purple": image(CanvasGraphics.purpleSwitchTile,0,0,this.sz,this.sz); break; } }; //} }, /* ⬇ Switch Tile activator (this is the actual switch) / Switch = function(sz,clr) { // • Variables { /* ⬇ Size of the square / this.sz = sz; /* ⬇ The color that the switch will activate / this.clr = clr; /* ⬇ Has the image been created? / this.created = false; /* ⬇ Is the switch on? / this.on = true; /* ⬇ Variable used in changing the switch / this.flipped = false; //} // • Functions { /* ⬇ Function to change the switch / this.change = function() { if(!this.flipped) { this.on = !this.on; } this.flipped = true; }; /* ⬇ Reset the variables of the class / this.reset = function() { this.flipped = false; this.on = true; }; /* ⬇ Create the images of the switch, both the on image and off image / this.init = function() { this.imgOn = createSwitchOn(this.clr); this.imgOff = createSwitchOff(this.clr); this.created = true; }; /* ⬇ Render the image (on/off) / this.render = function() { if(!this.created) { this.init(); } if(this.on) { image(this.imgOn,0,0,this.sz,this.sz); } else { image(this.imgOff,0,0,this.sz,this.sz); } }; //} }, /* ⬇ Flip Switch activator (this is the dial that 'spins' to pick either the red or blue faded tiles / FlipSwitch_RedBlue = function(sz) { // • Variables { /* ⬇ The size of the FlipSwitch 'dial' / this.sz = sz; /* ⬇ The color (text) of the FlipSwitch 'dial' / this.clr = "red"; /* ⬇ Have the two images been created? / this.created = false; this.canSwitch = true; //} // • Functions { /* ⬇ Function to switch the dial from red to blue or from blue to red / this.switchColor = function() { if(this.canSwitch) { if(this.clr === "red") { this.clr = "blue"; } else { this.clr = "red"; } this.canSwitch = false; } }; this.resetAbility = function() { this.canSwitch = true; }; /* ⬇ Getter for the current color that the 'dial is set to / this.getColor = function() { return this.clr; }; this.getAbility = function() { return this.canSwitch; }; /* ⬇ The init() function to create the images for rendering / this.init = function() { this.imgRed = createFlipSwitch_RedBlue("red"); this.imgBlue = createFlipSwitch_RedBlue("blue"); this.created = true; }; this.resetDial = function() { this.clr = "red"; this.canSwitch = true; }; /* ⬇ Function to render the 'dial' / this.render = function() { if(!this.created) { this.init(); } if(this.clr === "red") { image(this.imgRed,0,0,this.sz,this.sz); } else { image(this.imgBlue,0,0,this.sz,this.sz); } }; //} }, /* ⬇ Flip Switch activator (this is the dial that 'spins' to pick either the yellow or purple faded tiles / FlipSwitch_YellowPurple = function(sz) { // • Variables { /* ⬇ The size of the FlipSwitch 'dial' / this.sz = sz; /* ⬇ The color (text) of the FlipSwitch 'dial' / this.clr = "yellow"; /* ⬇ Have the two images been created? / this.created = false; this.canSwitch = true; //} // • Functions { /* ⬇ Function to switch the dial from red to blue or from blue to red / this.switchColor = function() { if(this.canSwitch) { if(this.clr === "yellow") { this.clr = "purple"; } else { this.clr = "yellow"; } this.canSwitch = false; } }; /* ⬇ Reset the ability to flip the dial / this.resetAbility = function() { this.canSwitch = true; }; /* ⬇ Getter for the current color that the 'dial is set to / this.getColor = function() { return this.clr; }; /* ⬇ Getter for the ability to flip the dial to the other side / this.getAbility = function() { return this.canSwitch; }; /* ⬇ The init() function to create the images for rendering / this.init = function() { this.imgYellow = createFlipSwitch_YellowPurple("yellow"); this.imgPurple = createFlipSwitch_YellowPurple("purple"); this.created = true; }; /* ⬇ Reset the dial variables / this.resetDial = function() { this.clr = "yellow"; this.canSwitch = true; }; /* ⬇ Function to render the 'dial' / this.render = function() { if(!this.created) { this.init(); } if(this.clr === "yellow") { image(this.imgYellow,0,0,this.sz,this.sz); } else { image(this.imgPurple,0,0,this.sz,this.sz); } }; //} }, /* ⬇ Flip Switch tile (this is the tile used in junction with the FlipSwitch 'dial' / FlipSwitchTile = function(sz,clr) { this.sz = sz; this.clr = clr; if(this.clr === "red" \|\| this.clr === "yellow") { this.isFaded = false; } else { this.isFaded = true; } this.created = false; this.init = function() { this.imgFaded = createFlipSwitchTile(this.clr,true); this.imgClear = createFlipSwitchTile(this.clr,false); }; this.activate = function() { this.isFaded = false; }; this.deactivate = function() { this.isFaded = true; }; this.resetTile = function() { if(this.clr === "red") { this.isFaded = false; } else if(this.clr === "blue") { this.isFaded = true; } if(this.clr === "yellow") { this.isFaded = false; } else if(this.clr === "purple") { this.isFaded = true; } }; this.getFaded = function() { return this.isFaded; }; this.render = function() { if(!this.created) { this.init(); this.created = true; } if(this.isFaded) { image(this.imgFaded,0,0,this.sz,this.sz); } else { image(this.imgClear,0,0,this.sz,this.sz); } }; }, /* ⬇ FourColorTile class: a square that has the ability to change the ball color into all four colors based upon the direction from which the ball is coming / FourColorTile = function(sz) { // • Variables { /* ⬇ The size of the square / this.sz = sz; /* ⬇ Has the image been created yet? / this.created = false; //} // • Functions { /* ⬇ Function to initialize the image variable by calling the createFoutColorSquare() function / this.init = function() { this.img = createFourColorSquare(); this.created = true; }; /* ⬇ Function to render the image (and call init() if necessary) / this.render = function() { if(!this.created) { this.init(); } image(this.img,0,0,this.sz,this.sz); }; //} }, /* ⬇ Teleporter class: a class to create the squares that will teleport the ball from the first teleport square to the second teleport square of matching color provided the player is the same color / Teleporter = function(sz,clr) { // • Variables { /* ⬇ The size of the square / this.sz = sz; /* ⬇ The color of the square / this.clr = clr; /* ⬇ Has the square been created yet? / this.created = false; //} // • Functions { /* ⬇ Function to initialize the creating of the image / this.init = function() { this.img = createTeleporterSquare(this.clr); this.created = true; }; /* ⬇ Calls init if not yet created; paints the square otherwise / this.render = function() { if(!this.created) { this.init(); } image(this.img,0,0,this.sz,this.sz); }; //} }; //} // ￭ Game Board { /* ⬇ The Board Class / Board = function(master) { // • Variables { /* ⬇ this.master is passed the data in Levels so Board class has access to it / this.master = master; /* ⬇ this.current is the current level array stored as a sub-part in the master / this.current = []; /* ⬇ this.currentLevel stores the current level as an integer value 0-final / this.currentLevel = 0; /* ⬇ this.currentCreator stores the creator of the level for the in-game-opp display / this.currentCreator = ""; /* ⬇ this.currentHard stores the difficulty of the current level / this.currentHard = ""; /* ⬇ this.ctrX/Y is the center of the playing screen NOTE: this is not necessarily the center of the canvas as the center of the playing board is offset by 50 pixels to make room for the in-game-opp display / this.ctrX = WIDTH/2; this.ctrY = (HEIGHT/2) - 50; /* ⬇ The starting X/Y position of the ball. NOTE: this is not the same startX/startY in Levels The startX/startY in levels is the double array index value on which the ball starts (for example, [0][1] The startX/startY here is the actual X-Y coordinates of the ball as measured from the 0-0 top left corner / this.startX = 0; this.startY = 0; /* ⬇ Size of the ball (in pixels) / this.size = 0; /* ⬇ this.current(i/j) is used to keep track of the current platform i and j position where i is the vertical component of the double array and j is the horizontal component of the array / this.currenti = 0; this.currentj = 0; /* ⬇ Array to store the required objects for use in game play. Also contains count variables which are used to make sure the correct number of istances of each class is created (and not more, as then they would go unused and could slow game play down. / this.parts = { nom: [], prim: [], sec: [], third: [], fourth: [], paintRed: [], paintBlue: [], paintYellow: [], paintPurple: [], redKey: [], blueKey: [], yellowKey: [], purpleKey: [], redBlock: [], blueBlock: [], yellowBlock: [], purpleBlock: [], end: [], redSwitchTile: [], blueSwitchTile: [], yellowSwitchTile: [], purpleSwitchTile: [], redSwitch: [], blueSwitch: [], yellowSwitch: [], purpleSwitch: [], platform: [], lever: [], flipSwitchTileRed: [], flipSwitchTileBlue: [], flipSwitchTileYellow: [], flipSwitchTilePurple: [], flipSwitchRedBlue: [], flipSwitchYellowPurple: [], allColorTile: [], teleporterRed: [], teleporterBlue: [], teleporterYellow: [], teleporterPurple: [], nomCount: 0, primCount: 0, secCount: 0, thirdCount: 0, fourthCount: 0, paintRedCount: 0, paintBlueCount: 0, paintYellowCount: 0, paintPurpleCount: 0, redKeyCount: 0, blueKeyCount: 0, yellowKeyCount: 0, purpleKeyCount: 0, redBlockCount: 0, blueBlockCount: 0, yellowBlockCount: 0, purpleBlockCount: 0, endCount: 0, redSwitchTileCount: 0, blueSwitchTileCount: 0, yellowSwitchTileCount: 0, purpleSwitchTileCount: 0, redSwitchCount: 0, blueSwitchCount: 0, yellowSwitchCount: 0, purpleSwitchCount: 0, platformCount: 0, leverCount: 0, flipSwitchTileRedCount: 0, flipSwitchTileBlueCount: 0, flipSwitchTileYellowCount: 0, flipSwitchTilePurpleCount: 0, flipSwitchRedBlueCount: 0, flipSwitchYellowPurpleCount: 0, allColorTileCount: 0, teleporterRedCount: 0, teleporterBlueCount: 0, teleporterYellowCount: 0, teleporterPurpleCount: 0, }; /* ⬇ this.keys is used to keep track of when to render the keys and to keep track of if the player has collected a key yet. A boolean value of true means the key is being displayed (and thus the player has NOT collected it yet). A boolean value of false means the key is NOT being displayed (and thus the player has collected it). Default values are true. See programming notes about true/false vs. 1/0 / this.keys = { red: true, blue: true, yellow: true, purple: true, }; /* ⬇ The platform position which has sub-sets of ivalue (y) and the jvalue (x) / this.platPos = { ival: [], jval: [], }; /* ⬇ Stores the zero indexed array (i,j) values of the both teleporter squares. Used to calculate the exact position of where the player is and where they need to be / this.teleporter = { redOne: [], redTwo: [], blueOne: [], blueTwo: [], yellowOne: [], yellowTwo: [], purpleOne: [], purpleTwo: [], }; /* ⬇ Has the game been loaded? / this.loaded = false; /* ⬇ What is the state of the game: play/pause / this.state = "play"; /* ⬇ Does the game have a working time yet? / this.hasTime = false; /* ⬇ Is the current level the last one? / this.lastLevel = false; this.levelComplete = false; //} // • Functions { /* ⬇ Reset the switchs variables / this.resetSwitchs = function() { /* ⬇ The pattern here is if this.parts.redSwitch is not undefined, reset / if(this.parts.redSwitch[0] !== undefined) { //for(i = 0; i < this.parts.redSwitch.length; i++){ this.parts.redSwitch[0].reset(); //} } if(this.parts.blueSwitch[0] !== undefined) { //for(i = 0; i < this.parts.blueSwitch.length;i++){ this.parts.blueSwitch[0].reset(); //} } if(this.parts.yellowSwitch[0] !== undefined) { //for(i = 0; i < this.parts.yellowSwitch.length; i++){ this.parts.yellowSwitch[0].reset(); //} } if(this.parts.purpleSwitch[0] !== undefined) { //for(i = 0; i < this.parts.purpleSwitch.length; i++) { this.parts.purpleSwitch[0].reset(); //} } if(this.parts.redSwitchTile[0] !== undefined) { for(q=0;q<this.parts.redSwitchTile.length;q++){ this.parts.redSwitchTile[q].reset(); } } if(this.parts.blueSwitchTile[0] !== undefined) { for(q=0;q<this.parts.blueSwitchTile.length;q++){ this.parts.blueSwitchTile[q].reset(); } } if(this.parts.yellowSwitchTile[0] !== undefined) { for(q=0;q<this.parts.yellowSwitchTile.length;q++){ this.parts.yellowSwitchTile[q].reset(); } } if(this.parts.purpleSwitchTile[0] !== undefined) { for(q=0;q<this.parts.purpleSwitchTile.length;q++){ this.parts.purpleSwitchTile[q].reset(); } } }; /* ⬇ Reset the platform and lever / this.resetPlatformAndRelated = function() { /* ⬇ Reset the platform using the reset() function in the platform class / if(this.parts.platform[0] !== undefined) { this.parts.platform[0].reset(); } /* ⬇ Reset the lever using the reset() function in the lever class / if(this.parts.lever[0] !== undefined) { this.parts.lever[0].reset(); } }; /* ⬇ Reset the dials and tiles of the dials / this.resetDial = function() { if(this.parts.flipSwitchRedBlue[0] !== undefined) { for(q = 0; q < this.parts.flipSwitchRedBlue.length; q++) { this.parts.flipSwitchRedBlue[q].resetDial(); } } if(this.parts.flipSwitchTileRed[0] !== undefined) { for(q = 0; q < this.parts.flipSwitchTileRed.length; q++) { this.parts.flipSwitchTileRed[q].resetTile(); } } if(this.parts.flipSwitchTileBlue[0] !== undefined) { for(q = 0; q < this.parts.flipSwitchTileBlue.length; q++) { this.parts.flipSwitchTileBlue[q].resetTile(); } } if(this.parts.flipSwitchYellowPurple[0] !== undefined) { for(q = 0; q < this.parts.flipSwitchYellowPurple.length; q++) { this.parts.flipSwitchYellowPurple[q].resetDial(); } } if(this.parts.flipSwitchTileYellow[0] !== undefined){ for(q = 0; q < this.parts.flipSwitchTileYellow.length; q++) { this.parts.flipSwitchTileYellow[q].resetTile(); } } if(this.parts.flipSwitchTilePurple[0] !== undefined) { for(q = 0; q < this.parts.flipSwitchTilePurple.length; q++) { this.parts.flipSwitchTilePurple[q].resetTile(); } } }; /* ⬇ Reset the hasTime variable used in conjunction with the timer in ingameopp/ this.resetTime = function() { this.hasTime = false; }; /* ⬇ Reset the board values / this.resetBoard = function() { /* ⬇ Reset the keys to default true / this.keys.red = true; this.keys.blue = true; this.keys.yellow = true; this.keys.purple = true; /* ⬇ Call the reset switches function above / this.resetSwitchs(); /* ⬇ Call the reset platform/related function above / this.resetPlatformAndRelated(); this.resetDial(); }; /* ⬇ Function to calculate the bounds of the board / this.calculateBounds = function(w,h) { /* ⬇ Calculate bounds based on the largest demension. It is unlikely that the size of the board will make a perfect square, so bounds must be calculated based off of the largest value so the board doesn't overflow / if(w > h) { this.size = 500/w; } else { this.size = 450/h; } /* ⬇ Calculate the starting X/Y position of the ball (in pixels) / this.startX = this.ctrX - ( (w/2) this.size ); this.startY = this.ctrY - ( (h/2) * this.size ); }; /** ⬇ Function to load game pieces into this.parts / this.loadPeices = function(arr,lvl) { /* ⬇ The pattern here is if the count of the part is NOT undefined, loop through until the corrent number of parts have been made / if(arr[lvl].normal !== 0 && this.parts.nom.length === 0) { for(i = 0; i < arr[lvl].normal; i++) { this.parts.nom.push(Square.create(this.size,color(166), color(71))); } } if(arr[lvl].end !== undefined) { for(i = 0; i < arr[lvl].end; i++) { this.parts.end.push(Target.create(this.size)); } } if(arr[lvl].primary !== undefined) { for(i = 0; i < arr[lvl].primary; i++) { this.parts.prim.push(Square.create(this.size,Clrs.clr,Clrs.clr2)); } } if(arr[lvl].secondary !== undefined) { for(i = 0; i < arr[lvl].secondary; i++) { this.parts.sec.push(Square.create(this.size,Clrs.secondclr,Clrs.secondclr2)); } } if(arr[lvl].third !== undefined) { for(i = 0; i < arr[lvl].third; i++) { this.parts.third.push(Square.create(this.size,Clrs.thirdclr,Clrs.thirdclr2)); } } if(arr[lvl].fourth !== undefined) { for(i = 0; i < arr[lvl].fourth; i++) { this.parts.fourth.push(Square.create(this.size,Clrs.fourthclr,Clrs.fourthclr2)); } } if(arr[lvl].paintRed !== undefined) { for(i = 0; i < arr[lvl].paintRed; i++) { this.parts.paintRed.push(Square.create(this.size,color(166),color(71),"red")); } } if(arr[lvl].paintBlue !== undefined) { for(i = 0; i < arr[lvl].paintBlue; i++) { this.parts.paintBlue.push(Square.create(this.size,color(166),color(71),"blue")); } } if(arr[lvl].paintYellow !== undefined) { for(i = 0; i < arr[lvl].paintYellow; i++) { this.parts.paintYellow.push(Square.create(this.size,color(166),color(71),"yellow")); } } if(arr[lvl].paintPurple !== undefined) { for(i = 0; i < arr[lvl].paintPurple; i++) { this.parts.paintPurple.push(Square.create(this.size,color(166),color(71),"purple")); } } if(arr[lvl].redKey !== undefined) { for(i = 0; i < arr[lvl].redKey; i++) { this.parts.redKey.push(Square.create(this.size,color(166),color(71),"none","red")); } } if(arr[lvl].blueKey !== undefined) { for(i = 0; i < arr[lvl].blueKey; i++) { this.parts.blueKey.push(Square.create(this.size,color(166),color(71),"none","blue")); } } if(arr[lvl].yellowKey !== undefined) { for(i = 0; i < arr[lvl].yellowKey; i++) { this.parts.yellowKey.push(Square.create(this.size,color(166),color(71),"none","yellow")); } } if(arr[lvl].purpleKey !== undefined) { for(i = 0; i < arr[lvl].purpleKey; i++) { this.parts.purpleKey.push(Square.create(this.size,color(166),color(71),"none","purple")); } } if(arr[lvl].redBlock !== undefined) { for(i = 0; i < arr[lvl].redBlock; i++) { this.parts.redBlock.push(Square.create(this.size,color(166),color(71),"none","none","red")); } } if(arr[lvl].blueBlock !== undefined) { for(i = 0; i < arr[lvl].blueBlock; i++) { this.parts.blueBlock.push(Square.create(this.size,color(166),color(71),"none","none","blue")); } } if(arr[lvl].yellowBlock !== undefined) { for(i = 0; i < arr[lvl].yellowBlock; i++) { this.parts.yellowBlock.push(Square.create(this.size,color(166),color(71),"none","none","yellow")); } } if(arr[lvl].purpleBlock !== undefined) { for(i = 0; i < arr[lvl].purpleBlock; i++) { this.parts.purpleBlock.push(Square.create(this.size,color(166),color(71),"none","none","purple")); } } if(arr[lvl].redSwitchTile !== undefined) { for(i = 0; i < arr[lvl].redSwitchTile; i++) { this.parts.redSwitchTile.push(SwitchTile.create(this.size,"red")); } } if(arr[lvl].blueSwitchTile !== undefined) { for(i = 0; i < arr[lvl].blueSwitchTile; i++) { this.parts.blueSwitchTile.push(SwitchTile.create(this.size,"blue")); } } if(arr[lvl].yellowSwitchTile !== undefined) { for(i = 0; i < arr[lvl].yellowSwitchTile; i++) { this.parts.yellowSwitchTile.push(SwitchTile.create(this.size,"yellow")); } } if(arr[lvl].purpleSwitchTile !== undefined) { for(i = 0; i < arr[lvl].purpleSwitchTile; i++) { this.parts.purpleSwitchTile.push(SwitchTile.create(this.size,"purple")); } } if(arr[lvl].redSwitch !== undefined) { for(i = 0; i < arr[lvl].redSwitch; i++) { this.parts.redSwitch.push(Switch.create(this.size,"red")); } } if(arr[lvl].blueSwitch !== undefined) { for(i = 0; i < arr[lvl].blueSwitch; i++) { this.parts.blueSwitch.push(Switch.create(this.size,"blue")); } } if(arr[lvl].yellowSwitch !== undefined) { for(i = 0; i < arr[lvl].yellowSwitch; i++) { this.parts.yellowSwitch.push(Switch.create(this.size,"yellow")); } } if(arr[lvl].purpleSwitch !== undefined) { for(i = 0; i < arr[lvl].purpleSwitch; i++) { this.parts.purpleSwitch.push(Switch.create(this.size,"purple")); } } if(arr[lvl].platform !== undefined) { for(i = 0; i < arr[lvl].platform; i++) { this.parts.platform.push(Platform.create(this.size,this.startX,this.startY,arr[lvl].pi,arr[lvl].pj)); this.platPos.ival.push(0); this.platPos.jval.push(0); } } if(arr[lvl].lever !== undefined) { for(i = 0; i < arr[lvl].lever; i++) { this.parts.lever.push(Lever.create(this.size)); } } if(arr[lvl].flipTileRed !== undefined) { for(i = 0; i < arr[lvl].flipTileRed; i++) { this.parts.flipSwitchTileRed.push( FlipSwitchTile.create(this.size,"red") ); } } if(arr[lvl].flipTileBlue !== undefined) { for(i = 0; i < arr[lvl].flipTileBlue; i++) { this.parts.flipSwitchTileBlue.push( FlipSwitchTile.create(this.size,"blue") ); } } if(arr[lvl].flipTileYellow !== undefined) { for(i = 0; i < arr[lvl].flipTileYellow; i++) { this.parts.flipSwitchTileYellow.push( FlipSwitchTile.create(this.size,"yellow") ); } } if(arr[lvl].flipTilePurple !== undefined) { for(i = 0; i < arr[lvl].flipTilePurple; i++) { this.parts.flipSwitchTilePurple.push( FlipSwitchTile.create(this.size,"purple") ); } } if(arr[lvl].flipSwitchRB !== undefined) { for(i = 0; i < arr[lvl].flipSwitchRB; i++) { this.parts.flipSwitchRedBlue.push( FlipSwitch_RedBlue.create(this.size) ); } } if(arr[lvl].flipSwitchYP !== undefined) { for(i = 0; i < arr[lvl].flipSwitchYP; i++) { this.parts.flipSwitchYellowPurple.push( FlipSwitch_YellowPurple.create(this.size) ); } } if(arr[lvl].fourColorTile !== undefined) { for(i = 0; i < arr[lvl].fourColorTile; i++) { this.parts.allColorTile.push( FourColorTile.create(this.size) ); } } if(arr[lvl].teleporterRed !== undefined) { for(i = 0; i < arr[lvl].teleporterRed; i++) { this.parts.teleporterRed.push( Teleporter.create(this.size,"red") ); } this.teleporter.redOne = arr[lvl].redij[0]; this.teleporter.redTwo = arr[lvl].redij[1]; } if(arr[lvl].teleporterBlue !== undefined) { for(i = 0; i < arr[lvl].teleporterBlue; i++) { this.parts.teleporterBlue.push( Teleporter.create(this.size,"blue") ); } this.teleporter.blueOne = arr[lvl].blueij[0]; this.teleporter.blueTwo = arr[lvl].blueij[1]; } if(arr[lvl].teleporterYellow !== undefined) { for(i = 0; i < arr[lvl].teleporterYellow; i++) { this.parts.teleporterYellow.push( Teleporter.create(this.size,"yellow") ); } this.teleporter.yellowOne = arr[lvl].yellowij[0]; this.teleporter.yellowTwo = arr[lvl].yellowij[1]; } if(arr[lvl].teleporterPurple !== undefined) { for(i = 0; i < arr[lvl].teleporterPurple; i++) { this.parts.teleporterPurple.push( Teleporter.create(this.size,"purple") ); } this.teleporter.purpleOne = arr[lvl].purpleij[0]; this.teleporter.purpleTwo = arr[lvl].purpleij[1]; } /* ⬇ Set the position of the ball using the position function defined in the ball class / ball.position( (this.startX + ((1/2) this.size) + (arr[lvl].startX * this.size)), this.startY + ((1/2) * this.size) + (arr[lvl].startY * this.size), (2/3) * this.size); }; /** ⬇ Function the load the whole level / this.loadLevel = function(arr,lvl) { /* ⬇ Set this.current to the level array / this.current = arr.level; /* ⬇ Set this.currentLevel to the correct level / this.currentLevel = lvl; /* ⬇ Call the calculate bounds function using the width of length/width of the array (small values, for example 5,7) / this.calculateBounds(this.current[0].length,this.current.length); /* ⬇ Define the size of the ball / ball.defineSize(this.size); /* ⬇ Call the loadPeices function / this.loadPeices(this.master,this.currentLevel); /* ⬇ Set the current creator to the creator value from Levels / this.currentCreator = arr.creator; /* ⬇ Set this.currentHard to the difficulty value from Levels / this.currentHard = arr.hard; if(arr.last !== undefined && arr.last) { this.lastLevel = true; } }; /* ⬇ Function to control platform collisions between the ball and the platform / this.platformCollisions = function (bx,by,bs,px,py,ps,delay) { px += this.startX + (this.size this.master[this.currentLevel].pj); py += this.startY + (this.size * this.master[this.currentLevel].pi); if(Collide.rect(bx,by,bs,px,py,ps) && ball.isStill() && delay === "true") { ball.onPlatform(); } else if(Collide.rect(bx,by,bs,px,py,ps) && delay === "false" && !ball.isOnPlatform()) { this.parts.platform[0].freeze(); ball.returnToStart(); } //println("Collide: " + Collide.rect(bx,by,bs,px,py,ps)); //println("Delay: " + delay); //println("Ball.isOnPlat: " + ball.isOnPlatform()); if(ball.isOnPlatform()) { ball.x = px + ((1/3) * ps) /2; ball.y = py + ((1/3) * ps) /2; } }; /** ⬇ Function to control the platform (calls the above platformCollisions function) / this.platformHandler = function(arr,i,j) { var n, s, e, w; if(this.parts.platform[0].isActive()) { if(i-1 < 0) { n = "null"; } else { n = this.current[i-1][j]; } if(i+1 > this.current.length-1) { s = "null"; } else { s = this.current[i+1][j]; } if(j-1 < 0) { w = "null"; } else { w = this.current[i][j-1]; } if(j+1 > this.current[0].length-1) { e = "null"; } else { e = this.current[i][j+1]; } if(this.loaded) { this.parts.platform[0].direction( n, e, s, w, i, j ); } } this.platformCollisions( ball.x, ball.y, ball.s, this.parts.platform[0].x, this.parts.platform[0].y, this.parts.platform[0].sz, this.parts.platform[0].onDelay ); }; /* ⬇ Reset the flip-switch dial to allow for the dial to flip only once and then reset when the player moves to another square / this.resetFlipSwitchDial = function() { if(this.parts.flipSwitchRedBlue !== undefined) { for(q = 0; q < this.parts.flipSwitchRedBlue.length; q++) { this.parts.flipSwitchRedBlue[q].resetAbility(); } } if(this.parts.flipSwitchYellowPurple !== undefined) { for(q = 0; q < this.parts.flipSwitchYellowPurple.length; q++) { this.parts.flipSwitchYellowPurple[q].resetAbility(); } } }; /* ⬇ Upon sensing collision with the end square, an abnormally large number of tasks need to take place. To prevent cluttering in the collision handler function, I have placed them in the onCompletion function which is called when the ball comes to rest on the final square / this.onCompletion = function() { ball.freeze(); this.levelMoves = levelselect.getAtLevel( this.currentLevel,"moves"); this.levelDeaths=levelselect.getAtLevel( this.currentLevel,"deaths"); this.levelTime=levelselect.getAtLevel( this.currentLevel,"time"); if(this.levelMoves !== 0) { if(ball.getNummov() < this.levelMoves) { this.sendMoves=ball.getNummov(); } } else { this.sendMoves = ball.getNummov(); } if(this.levelDeaths !== 0) { if(ball.getDeaths() < this.levelDeaths) { this.sendDeaths=ball.getDeaths(); } } else { this.sendDeaths = ball.getDeaths(); } levelselect.setStats(this.currentLevel, this.sendMoves, this.sendDeaths, timer.getMin(), timer.getSec(), timer.getMill()); pregamehandler.setCompleted(this.currentLevel); pregamehandler.levelInc(); this.levelComplete = true; if(ball.getColor() !== "white") { flipBck.flip(4); } if(!this.lastLevel) { trans.to("breakgame",null); } else { trans.to("final_break",null); } }; /* ⬇ Function to control the collisions between the ball and various game objects / this.collisionHandler = function (x,y,s,x2,y2,s2,type) { if(Collide.rect(x,y,s,x2,y2,s2)) { if(type === "e") { if(ball.isStill() && this.state!=="pause") { this.onCompletion(); } } else if(type === "o") { if(ball.colorIsNot("red")) { ball.returnToStart(); } } else if(type === "s") { if(ball.colorIsNot("blue")){ ball.returnToStart(); } } else if(type === "t") { if(ball.colorIsNot("yellow")){ ball.returnToStart(); } } else if(type === "f") { if(ball.colorIsNot("purple")){ ball.returnToStart(); } } else if(type === "a") { if(ball.isStill()) { ball.colorIs("red"); } } else if(type === "b") { if(ball.isStill()) { ball.colorIs("blue"); } } else if(type === "c") { if(ball.isStill()) { ball.colorIs("yellow"); } } else if(type === "d") { if(ball.isStill()) { ball.colorIs("purple"); } } else if(type === " ") { if(ball.isStill()) { ball.returnToStart(); } } else if(type === "1") { if(this.keys.red) { ball.returnToStart(); } } else if(type === "2") { if(this.keys.blue) { ball.returnToStart(); } } else if(type === "3") { if(this.keys.yellow) { ball.returnToStart(); } } else if(type === "4") { if(this.keys.purple) { ball.returnToStart(); } } else if(type === "5") { if(ball.isStill()) { ball.getsKey("red"); this.keys.red = false; } } else if(type === "6") { if(ball.isStill()) { ball.getsKey("blue"); this.keys.blue = false; } } else if(type === "7") { if(ball.isStill()) { ball.getsKey("yellow"); this.keys.yellow = false; } } else if(type === "8") { if(ball.isStill()) { ball.getsKey("purple"); this.keys.purple = false; } } else if(type === "!") { if(ball.colorIsNot("red") \|\| !this.parts.redSwitchTile[0].on) { ball.returnToStart(); } } else if(type === "@") { if(ball.colorIsNot("blue") \|\| !this.parts.blueSwitchTile[0].on) { ball.returnToStart(); } } else if(type === "#") { if(ball.colorIsNot("yellow") \|\| !this.parts.yellowSwitchTile[0].on) { ball.returnToStart(); } } else if(type === "$") { if(ball.colorIsNot("purple") \|\| !this.parts.purpleSwitchTile[0].on) { ball.returnToStart(); } } else if(type === "%") { if(ball.isStill()) { this.parts.redSwitch[0].change(); for(var i = 0; i < this.parts.redSwitchTile.length; i++) { this.parts.redSwitchTile[i].turnOn(); } } } else if(type === "^") { if(ball.isStill()) { this.parts.blueSwitch[0].change(); for(var i = 0; i < this.parts.blueSwitchTile.length; i++) { this.parts.blueSwitchTile[i].turnOn(); } } } else if(type === "&") { if(ball.isStill()) { this.parts.yellowSwitch[0].change(); for(var i = 0; i < this.parts.yellowSwitchTile.length; i++) { this.parts.yellowSwitchTile[i].turnOn(); } } } else if(type === "") { if(ball.isStill()) { this.parts.purpleSwitch[0].change(); for(var i = 0; i < this.parts.purpleSwitchTile.length; i++) { this.parts.purpleSwitchTile[i].turnOn(); } } } else if(type === "p") { if(ball.isStill() && (this.parts.platform[0].x !== 0 \|\| this.parts.platform[0].y !== 0)) { ball.returnToStart(); } } else if(type === "l") { if(ball.isStill()) { this.parts.lever[this.parts.leverCount].turnOn(); this.parts.platform[0].turnOn(); } } else if(type === ".") { if(ball.isStill() && !ball.isOnPlatform()) { ball.returnToStart(); } } else if(type === "(") { if(ball.colorIsNot("red") \|\| this.parts.flipSwitchTileRed[0].getFaded()) { ball.returnToStart(); } } else if(type === ")") { if(ball.colorIsNot("blue") \|\| this.parts.flipSwitchTileBlue[0].getFaded()) { ball.returnToStart(); } } else if(type === "-") { if(ball.colorIsNot("yellow") \|\| this.parts.flipSwitchTileYellow[0].getFaded()) { ball.returnToStart(); } } else if(type === "_") { if(ball.colorIsNot("purple") \|\| this.parts.flipSwitchTilePurple[0].getFaded()) { ball.returnToStart(); } } else if(type === "=") { if(ball.isStill()) { for(t = 0; t < this.parts.flipSwitchRedBlue.length; t++) { if(this.parts.flipSwitchRedBlue[t].getAbility()) { if(this.parts.flipSwitchRedBlue[t].getColor() === "red") { for(q = 0; q < this.parts.flipSwitchTileBlue.length; q++) { this.parts.flipSwitchTileBlue[q].activate(); } for(q = 0; q < this.parts.flipSwitchTileRed.length; q++) { this.parts.flipSwitchTileRed[q].deactivate(); } } else { for(q = 0; q < this.parts.flipSwitchTileRed.length; q++) { this.parts.flipSwitchTileRed[q].activate(); } for(q = 0; q < this.parts.flipSwitchTileBlue.length; q++) { this.parts.flipSwitchTileBlue[q].deactivate(); } } } this.parts.flipSwitchRedBlue[t].switchColor(); } } } else if(type === "+") { if(ball.isStill()) { for(t = 0; t < this.parts.flipSwitchYellowPurple.length; t++) { if(this.parts.flipSwitchYellowPurple[t].getAbility()) { if(this.parts.flipSwitchYellowPurple[t].getColor() === "yellow") { for(q = 0; q < this.parts.flipSwitchTilePurple.length; q++) { this.parts.flipSwitchTilePurple[q].activate(); } for(q = 0; q < this.parts.flipSwitchTileYellow.length; q++) { this.parts.flipSwitchTileYellow[q].deactivate(); } } else { for(q = 0; q < this.parts.flipSwitchTileYellow.length; q++) { this.parts.flipSwitchTileYellow[q].activate(); } for(q = 0; q < this.parts.flipSwitchTilePurple.length; q++) { this.parts.flipSwitchTilePurple[q].deactivate(); } } } this.parts.flipSwitchYellowPurple[t].switchColor(); } } } else if(type === "<") { if(ball.isStill()) { if(ball.directionIs() === "right") { ball.colorIs("red"); } else if(ball.directionIs() === "down") { ball.colorIs("blue"); } else if(ball.directionIs() === "left") { ball.colorIs("yellow"); } else if(ball.directionIs() === "up") { ball.colorIs("purple"); } } } else if(type === "?") { if(ball.isStill() && ball.getColor() ==="red") { this.teleXOne = this.startX + (this.teleporter.redOne[1]this.size)+ (this.size/2)-(ball.s/2); this.teleYOne = this.startY + (this.teleporter.redOne[0]this.size)+ (this.size/2)-(ball.s/2); this.teleXTwo = this.startX + (this.teleporter.redTwo[1]this.size)+ (this.size/2)-(ball.s/2); this.teleYTwo = this.startY + (this.teleporter.redTwo[0]this.size)+ (this.size/2)-(ball.s/2); if(abs(ball.x-this.teleXOne) < this.size/2 && abs(ball.y-this.teleYOne) < this.size/2) { ball.x = this.teleXTwo; ball.y = this.teleYTwo; } else if(abs(ball.x-this.teleXTwo) < this.size/2&& abs(ball.y-this.teleYTwo) < this.size/2) { ball.x = this.teleXOne; ball.y = this.teleYOne; } } else if(ball.isStill() && ball.colorIsNot("red")) { ball.returnToStart(); } } else if(type === ">") { if(ball.isStill() && ball.getColor() ==="blue") { this.teleXOne = this.startX + (this.teleporter.blueOne[1]this.size)+ (this.size/2)-(ball.s/2); this.teleYOne = this.startY + (this.teleporter.blueOne[0]this.size)+ (this.size/2)-(ball.s/2); this.teleXTwo = this.startX + (this.teleporter.blueTwo[1]this.size)+ (this.size/2)-(ball.s/2); this.teleYTwo = this.startY + (this.teleporter.blueTwo[0]this.size)+ (this.size/2)-(ball.s/2); if(abs(ball.x-this.teleXOne) < this.size/2 && abs(ball.y-this.teleYOne) < this.size/2) { ball.x = this.teleXTwo; ball.y = this.teleYTwo; } else if(abs(ball.x-this.teleXTwo) < this.size/2&& abs(ball.y-this.teleYTwo) < this.size/2) { ball.x = this.teleXOne; ball.y = this.teleYOne; } } else if(ball.isStill() && ball.colorIsNot("blue")) { ball.returnToStart(); } } else if(type === "/") { if(ball.isStill() && ball.getColor() ==="yellow") { this.teleXOne = this.startX + (this.teleporter.yellowOne[1]this.size)+ (this.size/2)-(ball.s/2); this.teleYOne = this.startY + (this.teleporter.yellowOne[0]this.size)+ (this.size/2)-(ball.s/2); this.teleXTwo = this.startX + (this.teleporter.yellowTwo[1]this.size)+ (this.size/2)-(ball.s/2); this.teleYTwo = this.startY + (this.teleporter.yellowTwo[0]this.size)+ (this.size/2)-(ball.s/2); if(abs(ball.x-this.teleXOne) < this.size/2 && abs(ball.y-this.teleYOne) < this.size/2) { ball.x = this.teleXTwo; ball.y = this.teleYTwo; } else if(abs(ball.x-this.teleXTwo) < this.size/2&& abs(ball.y-this.teleYTwo) < this.size/2) { ball.x = this.teleXOne; ball.y = this.teleYOne; } } else if(ball.isStill() && ball.colorIsNot("yellow")) { ball.returnToStart(); } } else if(type === ";") { if(ball.isStill() && ball.getColor() ==="purple") { this.teleXOne = this.startX + (this.teleporter.purpleOne[1]this.size)+ (this.size/2)-(ball.s/2); this.teleYOne = this.startY + (this.teleporter.purpleOne[0]this.size)+ (this.size/2)-(ball.s/2); this.teleXTwo = this.startX + (this.teleporter.purpleTwo[1]this.size)+ (this.size/2)-(ball.s/2); this.teleYTwo = this.startY + (this.teleporter.purpleTwo[0]this.size)+ (this.size/2)-(ball.s/2); if(abs(ball.x-this.teleXOne) < this.size/2 && abs(ball.y-this.teleYOne) < this.size/2) { ball.x = this.teleXTwo; ball.y = this.teleYTwo; } else if(abs(ball.x-this.teleXTwo) < this.size/2&& abs(ball.y-this.teleYTwo) < this.size/2) { ball.x = this.teleXOne; ball.y = this.teleYOne; } } else if(ball.isStill() && ball.colorIsNot("purple")) { ball.returnToStart(); } } } if(this.parts.redSwitch[0] !== undefined && !this.parts.redSwitch[0].on) { this.parts.redSwitchTile[0].turnOn(); } if(this.parts.blueSwitch[0] !== undefined && !this.parts.blueSwitch[0].on) { this.parts.blueSwitchTile[0].turnOn(); } if(this.parts.yellowSwitch[0] !== undefined && !this.parts.yellowSwitch[0].on) { this.parts.yellowSwitchTile[0].turnOn(); } if(this.parts.purpleSwitch[0] !== undefined && !this.parts.purpleSwitch[0].on) { this.parts.purpleSwitchTile[0].turnOn(); } }; /** ⬇ Function to log values for the platform / this.logStats = function(i,j,count) { this.currenti = i; this.currentj = j; if(abs(i-floor(i)) < this.size 0.00015) { this.platPos.ival[count] = floor(i); } if(abs(j-floor(j)) < this.size * 0.00015) { this.platPos.jval[count] = floor(j); } }; /** ⬇ Function to render the current level / this.renderCurrentLevel = function() { /* ⬇ If the level does not have time, reset and begin the timer. Set hasTime to false to ensure the timer does not continually reset / if(!this.hasTime) { timer.reset(); timer.logBegin(); this.hasTime = true; } //Function uses count variables to continually //paint the objects in a loop //Also renders the ball outside the loop and //runs timer record() function this.drawX = this.startX; this.drawY = this.startY; this.parts.nomCount = 0; this.parts.primCount = 0; this.parts.secCount = 0; this.parts.thirdCount = 0; this.parts.fourthCount = 0; this.parts.endCount = 0; this.parts.paintRedCount = 0; this.parts.paintBlueCount = 0; this.parts.paintYellowCount = 0; this.parts.paintPurpleCount = 0; this.parts.redKeyCount = 0; this.parts.blueKeyCount = 0; this.parts.yellowKeyCount = 0; this.parts.purpleKeyCount = 0; this.parts.redBlockCount = 0; this.parts.blueBlockCount = 0; this.parts.yellowBlockCount = 0; this.parts.purpleBlockCount = 0; this.parts.redSwitchTileCount = 0; this.parts.blueSwitchTileCount = 0; this.parts.yellowSwitchTileCount = 0; this.parts.purpleSwitchTileCount = 0; this.parts.redSwitchCount = 0; this.parts.blueSwitchCount = 0; this.parts.yellowSwitchCount = 0; this.parts.purpleSwitchCount = 0; this.parts.platformCount = 0; this.parts.leverCount = 0; this.parts.flipSwitchTileRedCount = 0; this.parts.flipSwitchTileBlueCount = 0; this.parts.flipSwitchTileYellowCount = 0; this.parts.flipSwitchTilePurpleCount = 0; this.parts.flipSwitchRedBlueCount = 0; this.parts.flipSwitchYellowPurpleCount = 0; this.parts.allColorTileCount = 0; this.parts.teleporterRedCount = 0; this.parts.teleporterBlueCount = 0; this.parts.teleporterYellowCount = 0; this.parts.teleporterPurpleCount = 0; if(this.current[0][0] === undefined) { return; } else { if(this.parts.platform[0] !== undefined) { this.platformHandler(this.current,this.platPos.ival[0],this.platPos.jval[0]); } for(i = 0; i < this.current.length; i++) { for(j = 0; j < this.current[i].length; j++) { this.collisionHandler(ball.x,ball.y,ball.s,this.drawX,this.drawY,this.size,this.current[i][j]); pushMatrix(); translate(this.drawX,this.drawY); switch(this.current[i][j]) { case "n": this.parts.nom[this.parts.nomCount].render(); this.parts.nomCount++; break; case "e": this.parts.end[this.parts.endCount].render(); this.parts.endCount++; break; case "o": this.parts.prim[this.parts.primCount].render(); this.parts.primCount++; break; case "s": this.parts.sec[this.parts.secCount].render(); this.parts.secCount++; break; case "t": this.parts.third[this.parts.thirdCount].render(); this.parts.thirdCount++; break; case "f": this.parts.fourth[this.parts.fourthCount].render(); this.parts.fourthCount++; break; case "a": this.parts.paintRed[this.parts.paintRedCount].render(); this.parts.paintRedCount++; break; case "b": this.parts.paintBlue[this.parts.paintBlueCount].render(); this.parts.paintBlueCount++; break; case "c": this.parts.paintYellow[this.parts.paintYellowCount].render(); this.parts.paintYellowCount++; break; case "d": this.parts.paintPurple[this.parts.paintPurpleCount].render(); this.parts.paintPurpleCount++; break; case " ": break; case "1": this.parts.redBlock[this.parts.redBlockCount].render(); this.parts.redBlockCount++; break; case "2": this.parts.blueBlock[this.parts.blueBlockCount].render(); this.parts.blueBlockCount++; break; case "3": this.parts.yellowBlock[this.parts.yellowBlockCount].render(); this.parts.yellowBlockCount++; break; case "4": this.parts.purpleBlock[this.parts.purpleBlockCount].render(); this.parts.purpleBlockCount++; break; case "5": this.parts.redKey[this.parts.redKeyCount].render(); this.parts.redKeyCount++; break; case "6": this.parts.blueKey[this.parts.blueKeyCount].render(); this.parts.blueKeyCount++; break; case "7": this.parts.yellowKey[this.parts.yellowKeyCount].render(); this.parts.yellowKeyCount++; break; case "8": this.parts.purpleKey[this.parts.purpleKeyCount].render(); this.parts.purpleKeyCount++; break; case "!": this.parts.redSwitchTile[this.parts.redSwitchTileCount].render(); this.parts.redSwitchTileCount++; break; case "@": this.parts.blueSwitchTile[this.parts.blueSwitchTileCount].render(); this.parts.blueSwitchTileCount++; break; case "#": this.parts.yellowSwitchTile[this.parts.yellowSwitchTileCount].render(); this.parts.yellowSwitchTileCount++; break; case "$": this.parts.purpleSwitchTile[this.parts.purpleSwitchTileCount].render(); this.parts.purpleSwitchTileCount++; break; case "%": this.parts.redSwitch[this.parts.redSwitchCount].render(); this.parts.redSwitchCount++; break; case "^": this.parts.blueSwitch[this.parts.blueSwitchCount].render(); this.parts.blueSwitchCount++; break; case "&": this.parts.yellowSwitch[this.parts.yellowSwitchCount].render(); this.parts.yellowSwitchCount++; break; case "": this.parts.purpleSwitch[this.parts.purpleSwitchCount].render(); this.parts.purpleSwitchCount++; break; case "p": this.parts.platform[0].render(); this.logStats( i + (this.parts.platform[this.parts.platformCount].y)/this.size, j + (this.parts.platform[this.parts.platformCount].x)/this.size, this.parts.platformCount ); this.parts.platformCount++; break; case "l": this.parts.lever[this.parts.leverCount].render(); this.parts.leverCount++; break; case "(": this.parts.flipSwitchTileRed[this.parts.flipSwitchTileRedCount].render(); this.parts.flipSwitchTileRedCount++; break; case ")": this.parts.flipSwitchTileBlue[this.parts.flipSwitchTileBlueCount].render(); this.parts.flipSwitchTileBlueCount++; break; case "-": this.parts.flipSwitchTileYellow[this.parts.flipSwitchTileYellowCount].render(); this.parts.flipSwitchTileYellowCount++; break; case "_": this.parts.flipSwitchTilePurple[this.parts.flipSwitchTilePurpleCount].render(); this.parts.flipSwitchTilePurpleCount++; break; case "=": this.parts.flipSwitchRedBlue[this.parts.flipSwitchRedBlueCount].render(); this.parts.flipSwitchRedBlueCount++; break; case "+": this.parts.flipSwitchYellowPurple[this.parts.flipSwitchYellowPurpleCount].render(); this.parts.flipSwitchYellowPurpleCount++; break; case "<": this.parts.allColorTile[this.parts.allColorTileCount].render(); this.parts.allColorTileCount++; break; case "?": this.parts.teleporterRed[this.parts.teleporterRedCount].render(); this.parts.teleporterRedCount++; break; case ">": this.parts.teleporterBlue[this.parts.teleporterBlueCount].render(); break; case "/": this.parts.teleporterYellow[this.parts.teleporterYellowCount].render(); break; case ";": this.parts.teleporterPurple[this.parts.teleporterPurpleCount].render(); break; case ".": break; default: if(this.current[i][j] !== ".") { if(debug) { println("Undefined character on level " + this.currentLevel + " char \"" + this.current[i][j] + "\""); } } break; } popMatrix(); this.drawX += this.size; } this.drawX = this.startX; this.drawY += this.size; } if(ball.x < this.startX \|\| ball.x > (this.startX + (this.current[0].length * this.size)) \|\| ball.y < this.startY \|\| ball.y > (this.startY + (this.current.length * this.size))) { if(ball.isStill()) { ball.returnToStart(); } } ball.render(); if(!this.levelComplete) { timer.record(); } } if(!local) { mobilebuttons.render(); } if(this.state === "pause") { pauser.pauseGame(); } this.loaded = true; }; /** ⬇ Sets the state of the game (play/pause) NOTE: The platform is currently the only piece that moves independent of interactions with the player. When in pause mode, the platform should stop where it is, regardless of whether the player is on it or not / this.setState = function(state) { switch(state) { case "play": /* ⬇ If play, set state to play and the platform to play / this.state = "play"; if(this.parts.platform[0] !== undefined) { for(i = 0; i < this.parts.platform.length; i++) { this.parts.platform[i].setState("play"); } } break; case "pause": /* ⬇ If pause, set state to pause and the platform to pause (which stops it) / this.state = "pause"; if(this.parts.platform[0] !== undefined) { for(i = 0; i < this.parts.platform.length; i++) { this.parts.platform[i].setState("pause"); } } break; default: if(debug) { println("Invalid game state passed in" + " Game Class --> setState()"); } break; } }; /* ⬇ Getter for the state of the game currently / this.getState = function() { return this.state; }; /* ⬇ Resets board values / this.reset = function() { /* ⬇ Reset the plat i/j values to zero / this.currenti = 0; this.currentj = 0; this.lastLevel = false; /* ⬇ Reset this.parts to original empty value / this.parts = { nom: [], prim: [], sec: [], third: [], fourth: [], paintRed: [], paintBlue: [], paintYellow: [], paintPurple: [], redKey: [], blueKey: [], yellowKey: [], purpleKey: [], redBlock: [], blueBlock: [], yellowBlock: [], purpleBlock: [], end: [], redSwitchTile: [], blueSwitchTile: [], yellowSwitchTile: [], purpleSwitchTile: [], redSwitch: [], blueSwitch: [], yellowSwitch: [], purpleSwitch: [], platform: [], lever: [], space: [], flipSwitchTileRed: [], flipSwitchTileBlue: [], flipSwitchTileYellow: [], flipSwitchTilePurple: [], flipSwitchRedBlue: [], flipSwitchYellowPurple: [], allColorTile: [], teleporterRed: [], teleporterBlue: [], teleporterYellow: [], teleporterPurple: [], nomCount: 0, primCount: 0, secCount: 0, thirdCount: 0, fourthCount: 0, paintRedCount: 0, paintBlueCount: 0, paintYellowCount: 0, paintPurpleCount: 0, redKeyCount: 0, blueKeyCount: 0, yellowKeyCount: 0, purpleKeyCount: 0, redBlockCount: 0, blueBlockCount: 0, yellowBlockCount: 0, purpleBlockCount: 0, endCount: 0, redSwitchTileCount: 0, blueSwitchTileCount: 0, yellowSwitchTileCount: 0, purpleSwitchTileCount: 0, redSwitchCount: 0, blueSwitchCount: 0, yellowSwitchCount: 0, purpleSwitchCount: 0, platformCount: 0, leverCount: 0, spaceCount: 0, flipSwitchTileRedCount: 0, flipSwitchTileBlueCount: 0, flipSwitchTileYellowCount: 0, flipSwitchTilePurpleCount: 0, flipSwitchRedBlueCount: 0, flipSwitchYellowPurpleCount: 0, allColorTileCount: 0, teleporterRedCount: 0, teleporterBlueCount: 0, teleporterYellowCount: 0, teleporterPurpleCount: 0, }; this.teleporter = { redOne: [], redTwo: [], blueOne: [], blueTwo: [], yellowOne: [], yellowTwo: [], purpleOne: [], purpleTwo: [], }; /* ⬇ Reset this.keys to original true value / this.keys = { red: true, blue: true, yellow: true, purple: true, }; /* ⬇ Reset the i and j values of the platform position back to empty arrays / this.platPos = { ival: [], jval: [], }; /* ⬇ Call the ball reset function to reset the ball values / ball.reset(); }; /* ⬇ Getter for the creator of the level / this.getCreator = function() { return this.currentCreator; }; /* ⬇ Getter for the difficulty of the level / this.getDifficulty = function() { return this.currentHard; }; this.getCurrentLevel = function() { return this.currentLevel; }; this.getLevelCompletion = function() { return this.levelComplete; }; this.setCompletion = function(state) { this.levelComplete = state; }; //} }; //} // ￭ Pause Game Handler { /* ⬇ Pauser Handler to handle pausing the game / PauseHandler = function() { // • Functions { /* ⬇ Function that paints the pause box / this.pauseGame = function() { image(CanvasGraphics.pauseScreen,0,0); image(CanvasGraphics.pauseMenu,50-(15/2),200-(15/2)); //Buttons.resume.render(); //Buttons.restart.render(); //Buttons.exit.render(); buttongroup.renderButtons("pause"); }; //} }; /* ⬇ Instance variable for the PauseHandler class / pauser = PauseHandler.create(); //} // ￭ Game Loader and Manager { /* ⬇ Class to load the game levels / var LoadGame = function() { this.loaded = false; // • Functions { /* ⬇ Initalize the game and load the first level / this.initGame = function() { playingBoard = Board.create(Levels); this.loaded = true; }; this.hasLoaded = function() { return this.loaded; }; /* ⬇ Load function: loads the level stored in the parameter 'lvl' / this.load = function(lvl) { if(playingBoard === undefined) { this.initGame(); } playingBoard.loadLevel(Levels[lvl],lvl); }; //} }; /* ⬇ LoadGame instance variable 'loader' / loader = LoadGame.create(); /* ⬇ Class to manage the game (uses the loader) / GameManager = function() { // • Variables { /* ⬇ Current game level / this.level = 0; //} // • Functions { /* ⬇ Function to send the game to the next level / this.nextLevel = function() { this.level++; loader.load(this.level); }; /* ⬇ The play function; runs the game and renders it / this.play = function() { if(!loader.hasLoaded()) { loader.initGame(); if(this.level === 0) { loader.load(0); } //this.level = LEVEL_TEST; } playingBoard.renderCurrentLevel(); }; this.setLevel = function(lvl) { this.level = lvl; loader.load(lvl); }; this.pureSetLevel = function(lvl) { this.level = lvl; }; /* ⬇ Getter for the current level / this.currentLevel = function() { return this.level; }; //} }; game = GameManager.create(); //} // ￭ In-Game Options Menu Bar { /* ⬇ Class to render the in-game options bar / InGameOptions = function() { // • Variables { /* ⬇ The state of the ingameopp bar (play or pause) / this.state = "play"; //} // • Functions { /* ⬇ Render the in-game options / this.render = function() { image(CanvasGraphics.inGameOpp,0,495); Buttons.pause.render(); /* NOTE: because levels are stored in an array, they are zero indexed, so current level is array index + 1 / smallWord("Current Level: " + (game.currentLevel()+1),30,525,17); smallWord("Difficulty: " + playingBoard.getDifficulty(),30,550,17); smallWord("Level Creator: " + playingBoard.getCreator(),30,575,17); smallWord("Time: " + timer.getMin() + ":" + timer.getSec(),300,525,17); smallWord("Deaths: " + ball.getDeaths(), 300,550,17); smallWord("Moves: " + ball.getNummov(), 300,575,17); if(this.state === "pause") { ctx.fillStyle = "rgba(0, 0, 0, 0.4)"; ctx.fillRect(0,495,WIDTH,105); Buttons.pause.setState("deactivated"); } }; /* ⬇ Sets the state of the ingameopp bar. Uses switch statements to ensure against invalid arguments / this.setState = function(state) { switch(state) { case "play": this.state = "play"; Buttons.pause.setState("activated"); break; case "pause": this.state = "pause"; break; default: if(debug) { println("Invalid state passed in " + "In-GameOpp --> setState()"); } break; } }; //} }; /* ⬇ Instance variable for the In Game Options class / ingameopp = InGameOptions.create(); //} // ￭ Final Stats Class Handler { FinalStats = function() { this.totalTime = { min: 0, sec: 0, mill: 0, }; this.totalDeaths = 0; this.totalMoves = 0; this.render = function() { image(CanvasGraphics.final_stats,300-(350/2)-7,340-(125/2)); word("• Total Time:",140,343,17,color(10),color(10),"left"); word(this.totalTime.min + ":" + this.totalTime.sec + ":" + this.totalTime.mill,463,343,17,color(10),color(10),"right"); word("• Total Deaths:",140,369,17,color(10),color(10),"left"); word(this.totalDeaths,463,369,17,color(10),color(10),"right"); word("• Total Moves",140,393,17,color(10),color(10),"left"); word(this.totalMoves,463,393,17,color(10),color(10),"right"); }; this.addTime = function(min,sec,mill) { this.totalTime.min += min; this.totalTime.sec += sec; this.totalTime.mill += mill; }; this.addDeaths = function(value) { this.totalDeaths += value; }; this.addMoves = function(value) { this.totalMoves += value; }; this.getTime = function() { return this.totalTime; }; this.getDeaths = function() { return this.totalDeaths; }; this.getMoves = function() { return this.totalMoves; }; }; finalstats = FinalStats.create(); //} // ￭ ButtonGroup Class { /* ⬇ Class for when multiple buttons are on display at the same time / ButtonGroup = function() { /* The sole purpose of the class is to protect against multiple clicking on different buttons. Buttons are stored in variables and displayed, activated, or deactivated as a group This approach is only used if multiple buttons are in the same scene. Otherwise normal rendering method is used / // • Variables { /* ⬇ Button groups / this.group = { "menu": { btns: [ Buttons.play, Buttons.how, Buttons.levels ], }, "breakgame": { btns: [ Buttons.nextLevel, Buttons.backFromGame, ], }, "main_menu": { btns: [ Buttons.playGame, Buttons.exitMainMenu, ], }, "pause": { btns: [ Buttons.resume, Buttons.restart, Buttons.exit, ], }, }; //} // • Functions { /* ⬇ Set the state of a certain group of buttons / this.setState = function(scene,type) { switch(scene) { case "menu": for(q=0;q<this.group.menu.btns.length;q++){ this.group.menu.btns[q].setState( type); } break; case "breakgame": for(q=0;q<this.group.breakgame.btns.length; q++){ this.group.breakgame.btns[q].setState( type); } break; case "main_menu": for(q=0;q<this.group.main_menu.btns.length; q++) { this.group.main_menu.btns[q].setState( type); } break; case "pause": for(q=0;q<this.group.pause.btns.length; q++) { this.group.pause.btns[q].setState( type); } break; } }; /* ⬇ Render the buttons in a certain scene / this.renderButtons = function(scene) { switch(scene) { case "menu": for(t=0;t<this.group.menu.btns.length;t++){ this.group.menu.btns[t].render(); } break; case "breakgame": for(t=0;t<this.group.breakgame.btns.length; t++){ this.group.breakgame.btns[t].render(); } break; case "main_menu": for(t=0;t<this.group.main_menu.btns.length; t++) { this.group.main_menu.btns[t].render(); } break; case "pause": for(t=0;t<this.group.pause.btns.length; t++) { this.group.pause.btns[t].render(); } break; } }; //} }; /* ⬇ Instance variable for Button Group All button groups are rendered/handled through this instance variable / buttongroup = ButtonGroup.create(); //} //} // ⬟ Execution { // ￭ Display Scene Function { /* ⬇ Handle Output function: displays the scenes of the program / var handleOutput = (function() { return function() { /* ⬇ continually set the cursor to normal / cursor(cursorType.NORMAL); /* ⬇ display the proper scene / switch(SCENE) { case "pre-game": /* Paint the pre-game prompt / createPreGamePrompt(); /* ⬇ If the mouse is clicked, set the SCENE to "load" / if(released) { SCENE = "locatedevice"; this.loadTime = 0; this.loadTxt = ""; if(debug) { beginTaskTime = currentTime(); } } cursor(cursorType.SELECT); break; case "locatedevice": locatedevice.renderOption(); break; case "load": /* ⬇ Loading scene / colorMode(RGB, 255); background(0, 0, 0, 0); CanvasGraphics[Object.keys( CanvasGraphics)[curLoad]] = CanvasGraphics [Object.keys(CanvasGraphics)[curLoad]](); curLoad++; ctx.fillStyle = "white"; ctx.fillRect(0,0,WIDTH,HEIGHT); ctx.fillStyle = "black"; ctx.textAlign = "center"; ctx.font = "25px " + tnr; this.loadTime = ( this.loadTime < 22)?this.loadTime+=1:0; //@KWC for how to get moving dots this.loadTxt = "loading"+(".").repeat( (this.loadTime%20)/5\|0); ctx.fillText(this.loadTxt,WIDTH/2, HEIGHT0.9); ctx.restore(); /** ⬇ Set cursor to loading / cursor(cursorType.LOADING); /* ⬇ Once all the graphics have been loaded, trans to "menu" / if (curLoad === Object.keys( CanvasGraphics).length) { if(debug) { println("Loading graphics took " + (currentTime() - beginTaskTime) + " ms"); } SCENE = "postload"; } break; case "logo": logo.run(); break; case "postload": trans.to("logo",null); break; case "menu": /* ⬇ Paint the menu background and the three buttons / image(CanvasGraphics.menuBck,0,0); buttongroup.renderButtons(SCENE); break; case "main_menu": image(CanvasGraphics.main_menuBck,0,0); pregamehandler.render(); buttongroup.renderButtons(SCENE); break; case "game": /* ⬇ Paint the game background, call the play function, and render the in-game options bar / //image(CanvasGraphics.gameBck,0,0); flipBck.render(); game.play(); ingameopp.render(); break; case "breakgame": /* ⬇ Paint the in-between level break scene / image(CanvasGraphics.breakBck,0,0); timerHand.showTime(); buttongroup.renderButtons(SCENE); break; case "how": /* ⬇ Paint the how scene / image(CanvasGraphics.howBck,0,0); Buttons.back.render(); break; case "levels": /* ⬇ Paint the levels scene / image(CanvasGraphics.levelSelectBck,0,0); levelselect.render(); Buttons.back.render(); break; case "final_break": /* ⬇ Final break screen (winning!) / image(CanvasGraphics.final_break,0,0); finalstats.render(); Buttons.returnToMenu.render(); break; } /* ⬇ Frames per second percentage for debugging / if(debug) { if (then === undef) { then = millis(); beginFrame = frameCount; } fill(0); text("fps: " + floor(((floor(1000 (frameCount - beginFrame) / (millis() - then)))/60)100) + "%", 50, 50); } /* ⬇ Run the transition if the transition should be running / if(trans.runTrans) { trans.run(); } /* ⬇ continually set scrolling to false / scrolling = false; released = false; }; })(); //} // ￭ Draw Function { /* ⬇ Draw function / this.draw = function() { /* ⬇ Try to run the handleOutput() function / try { handleOutput(); } /* ⬇ If this fails, cancel the main loop / catch (err) { this.cancelMainLoop(); } }; //} //} }; startup(0); /**********************************************************/
Folds	42,105,106,136,137,141,142,148,149,243,244,261,262,285,286,292,293,302,306,9307
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgP36y-qwCAw
Votes	195
Spin-Offs	1
Type
Width	600
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	ѕнєяℓσ¢к нσℓмєѕ
Author Name	JohnHWatsonMD
Author ID	kaid_173937876131831563599968
Author Profile Access	COACH

Archive Data

Added	1 years ago, 1707881075479
Updated	10 months ago, 1739366819235
Source Deleted	unknown