Viewing Program

Program Data

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

Title	Fil-It
ID	6661810544787456
Created	5 years ago, 1596299482035
Updated	5 years ago, 1596336890838
Code	/** Fil-It August 1, 2020 Loyalty Entry for TCO Challenge #3 / / NOTE: You will not be able to play 'Levels Mode' more than once. This was intentional. / / CREDITS KWC - 'construct' function to avoid the 'new' keyword OOPS! Studios - Loading Algorithm / /Presets/ textFont(createFont('Pixel by Loyalty')); rectMode(CENTER); imageMode(CENTER); /*Misc. Variables/ var clicked = false; var curLoad = 0; var loaded = false; var keys = []; var page = 'load'; var loadFade = 255; var screenCol = [200, 200, 200]; var transparency = 0; var mode = ''; var timer = 60; var t = millis(); var dispTime = 0; var levelsCompleted = 0; var endPhrases = [ 'Come on, you can do better!', 'Nice job!', 'Hmmmm, try again.', 'Seriously?' ]; var selectPhrase = random(endPhrases.length); /*Prevent Oh Noes from popping up too much/ var resetTimer = function(n){ var setInf = "KAInfiniteLoopSetTimeout"; if(setInf in this) { if(typeof this[setInf] === "function"){ this[setInf](n); } } }; /*For Smooth animations/ var Smooth = function(pos, dest, tme){ return (dest-pos)/tme; }; /*Avoids the 'new' keyword/ var construct = function(target, args, newTarget){ var result = Object.create((newTarget \|\| target).prototype); target.apply(result, args); return result; }; /*My custom pixel font/ var drawTxt = function(txt, x, y, s){ var bitmap = []; pushMatrix(); translate(x, y); switch(txt){ case 'A': bitmap = [ ' XXX ', 'X X', 'X X', 'XXXXX', 'X X', 'X X', 'X X' ]; break; case 'B': bitmap = [ 'XXXX ', 'X X', 'X X', 'XXXX', 'X X', 'X X', 'XXXX' ]; break; case 'C': bitmap = [ ' XXX', ' X ', 'X ', 'X ', 'X ', ' X ', ' XXX' ]; break; case 'D': bitmap = [ 'XXX ', 'X X ', 'X X', 'X X', 'X X', 'X X ', 'XXX ' ]; break; case 'E': bitmap = [ 'XXXXX', 'X ', 'X ', 'XXX ', 'X ', 'X ', 'XXXXX' ]; break; case 'F': bitmap = [ 'XXXXX', 'X ', 'X ', 'XXX ', 'X ', 'X ', 'X ' ]; break; case '': bitmap = [ ' ', ' ', ' ', ' ', ' ', ' ', ' ' ]; break; case 'G': bitmap = [ ' XXX', ' X ', 'X ', 'X XX', 'X X', ' X X', ' XXX' ]; break; case 'H': bitmap = [ 'X X', 'X X', 'X X', 'XXXXX', 'X X', 'X X', 'X X' ]; break; case 'I': bitmap = [ 'XXXXX', ' X ', ' X ', ' X ', ' X ', ' X ', 'XXXXX' ]; break; case 'J': bitmap = [ 'XXXXX', ' X ', ' X ', ' X ', ' X ', 'X X ', ' X ' ]; break; case 'K': bitmap = [ 'X X', 'X X ', 'X X ', 'XX ', 'X XX ', 'X X', 'X X' ]; break; case 'L': bitmap = [ 'X ', 'X ', 'X ', 'X ', 'X ', 'X ', 'XXXXX' ]; break; case 'M': bitmap = [ ' X X ', 'X X X', 'X X X', 'X X X', 'X X', 'X X', 'X X' ]; break; case 'N': bitmap = [ 'X X', 'XX X', 'X X X', 'X X X', 'X X X', 'X XX', 'X X' ]; break; case 'O': bitmap = [ ' XXX ', 'X X', 'X X', 'X X', 'X X', 'X X', ' XXX ' ]; break; case 'P': bitmap = [ ' XXX ', 'X X', 'X X', 'XXXX ', 'X ', 'X ', 'X ' ]; break; case 'Q': bitmap = [ ' XXX ', 'X X', 'X X', 'X X', 'X X X', 'X XX', ' XXX ' ]; break; case 'R': bitmap = [ ' XXX ', 'X X', 'X X', 'XXXX ', 'X X ', 'X X ', 'X X' ]; break; case 'S': bitmap = [ ' XXXX', 'X ', 'X ', ' XXX ', ' X', ' X', 'XXXX' ]; break; case 'T': bitmap = [ 'XXXXX', ' X ', ' X ', ' X ', ' X ', ' X ', ' X ' ]; break; case 'U': bitmap = [ 'X X', 'X X', 'X X', 'X X', 'X X', 'X X', ' XXX ' ]; break; case 'V': bitmap = [ 'X X', 'X X', 'X X', 'X X', 'X X', ' X X ', ' X ' ]; break; case 'W': bitmap = [ 'X X', 'X X', 'X X', 'X X', 'X X X', 'X X X', ' X X ' ]; break; case 'X': bitmap = [ 'X X', 'X X', ' X X ', ' X ', ' X X ', 'X X', 'X X' ]; break; case 'Y': bitmap = [ 'X X', 'X X', ' X X', ' X ', ' X ', ' X ', ' X ' ]; break; case 'Z': bitmap = [ 'XXXXX', ' X', ' X ', ' X ', ' X ', 'X ', 'XXXXX' ]; break; case 'a': bitmap = [ ' ', ' ', ' XXX ', 'X X', 'X X', 'X X', ' XXX ' ]; break; case 'b': bitmap = [ 'X ', 'X ', 'X ', 'X XX ', 'XX X', 'X X', ' XXX ' ]; break; case 'c': bitmap = [ ' ', ' ', ' XXX ', 'X X', 'X ', 'X X', ' XXX ' ]; break; case 'd': bitmap = [ ' X', ' X', ' X', ' XX X', 'X XX', 'X X', ' XXX ' ]; break; case 'e': bitmap = [ ' ', ' ', ' XXX ', 'X X', 'XXXX ', 'X ', ' XXXX' ]; break; case 'f': bitmap = [ ' XXX ', 'X X', 'X ', 'XXX ', 'X ', 'X ', 'X ' ]; break; case 'g': bitmap = [ ' ', ' ', ' XXX ', 'X X', 'X X', ' XXXX', ' X', ' X', 'X X ', ' XXX' ]; break; case 'h': bitmap = [ 'X ', 'X ', 'X XX ', 'XX X', 'X X', 'X X', 'X X' ]; break; case 'i': bitmap = [ ' ', ' ', ' X ', ' ', ' X ', ' X ', ' X ' ]; break; case 'j': bitmap = [ ' ', ' ', ' X', ' ', ' X', ' X', ' X' , ' X', 'X X', ' XX ' ]; break; case 'k': bitmap = [ 'X ', 'X ', 'X X ', 'X X ', 'XX ', 'X X ', 'X X' ]; break; case 'l': bitmap = [ ' X ', ' X ', ' X ', ' X ', ' X ', ' X ', ' X ' ]; break; case 'm': bitmap = [ ' ', ' ', ' X X ', 'X X X', 'X X ', 'X X', 'X X' ]; break; case 'n': bitmap = [ ' ', ' ', ' XXX ', 'X X ', 'X X ', 'X X', 'X X' ]; break; case 'o': bitmap = [ ' ', ' ', ' XXX ', 'X X', 'X X ', 'X X', ' XXX' ]; break; case 'p': bitmap = [ ' ', ' ', 'XXXX ', 'X X', 'XX X', 'X XX ', 'X ', 'X', 'X' ]; break; case 'q': bitmap = [ ' ', ' ', ' XXXX', 'X X', 'X XX', ' XX X', ' X', ' X', ' X' ]; break; case 'r': bitmap = [ ' ', ' ', ' XXX ', 'X X', 'X ', 'X ', 'X' ]; break; case 's': bitmap = [ ' ', ' ', ' XXXX', 'X ', ' XXX', ' X', 'XXXX' ]; break; case 't': bitmap = [ ' X ', ' X ', ' XXX ', ' X ', ' X ', ' X ', ' X' ]; break; case 'u': bitmap = [ ' ', ' ', 'X X', 'X X', 'X X ', 'X X', ' XXX' ]; break; case 'v': bitmap = [ ' ', ' ', 'X X ', 'X X', 'X X ', ' X X', ' X ' ]; break; case 'w': bitmap = [ ' ', ' ', 'X X ', 'X X', 'X X ', 'X X X', ' X X' ]; break; case 'x': bitmap = [ ' ', ' ', 'X X', ' X X ', ' X ', ' X X ', 'X X' ]; break; case 'y': bitmap = [ ' ', ' ', 'X X ', 'X X', 'X X ', 'X X', ' XXXX', ' X', 'X X', ' XXX' ]; break; case 'z': bitmap = [ ' ', ' ', 'XXXXX', ' X ', ' X ', ' X ', 'XXXXX' ]; break; case '1': bitmap = [ ' XX ', 'X X ', ' X ', ' X ', ' X ', ' X ', 'XXXXX' ]; break; case '2': bitmap = [ ' XXX ', 'X X', ' X', ' X ', ' X ', ' X ', 'XXXXX' ]; break; case '3': bitmap = [ ' XXX ', 'X X', ' X', ' XX ', ' X', 'X X', ' XXX ' ]; break; case '4': bitmap = [ 'X X ', 'X X', 'X X ', 'XXXXX ', ' X ', ' X ', ' X ' ]; break; case '5': bitmap = [ 'XXXXX', 'X ', 'X ', 'XXXX ', ' X', ' X', 'XXXX ' ]; break; case '6': bitmap = [ ' XXX ', 'X X', 'X ', 'X XX ', 'XX X', 'X X', ' XXX ' ]; break; case '7': bitmap = [ 'XXXXX', ' X', ' X ', ' X', ' X ', ' X ', ' X' ]; break; case '8': bitmap = [ ' XXX ', 'X X', 'X X', ' XXX ', 'X X', 'X X', ' XXX ' ]; break; case '9': bitmap = [ ' XXX ', 'X X', 'X X', ' XXX ', ' X', 'X X', ' XXX ' ]; break; case '0': bitmap = [ ' XXX ', 'X X', 'X XX', 'X X X ', 'XX X', 'X X', ' XXX ' ]; break; case ',': bitmap = [ ' ', ' ', ' ', ' ', ' ', ' X ', ' X ', ' X ' ]; break; case '.': bitmap = [ ' ', ' ', ' ', ' ', ' ', ' XX ', ' XX ' ]; break; case '>': bitmap = [ ' ', 'XX ', ' XX ', ' X', ' XX ', 'XX ', ' ' ]; break; case '<': bitmap = [ ' ', ' XX ', ' XX ', 'X ', ' XX ', ' XX', ' ' ]; break; case '/': bitmap = [ ' X', ' X ', ' X ', ' X ', ' X ', 'X ', 'X ' ]; break; case '?': bitmap = [ ' XXX ', 'X X', ' X ', ' X ', ' X ', ' ', ' X ' ]; break; case ':': bitmap = [ ' ', ' XX ', ' XX ', ' ', ' XX ', ' XX ', ' ' ]; break; case ';': bitmap = [ ' ', ' XX ', ' XX ', ' ', ' X ', ' X ', ' x ' ]; break; case '\"': bitmap = [ ' X X ', ' X X ', ' ', ' ', ' ', ' ', ' ' ]; break; case '\'': bitmap = [ ' X ', ' X ', ' ', ' ', ' ', ' ', ' ' ]; break; case '~': bitmap = [ ' ', ' ', ' X ', 'X X X ', ' X ', ' ', ' ' ]; break; case '!': bitmap = [ ' X ', ' X ', ' X ', ' X ', ' ', ' ', ' X ' ]; break; case '@': bitmap = [ ' XXX ', 'X X', 'X XXX', 'X X X', 'X XX ', 'x ', ' XXXX' ]; break; case '#': bitmap = [ ' X X', ' X X', 'XXXXX ', ' X X ', 'XXXXX', 'X X ', 'X X ' ]; break; case '$': bitmap = [ ' X ', ' XXX ', 'X X ', ' XXX ', ' X X', ' XXX', ' X ' ]; break; case '%': bitmap = [ 'XX X', 'XX X ', ' X ', ' X ', ' X ', 'X XX', 'X XX' ]; break; case '^': bitmap = [ ' X ', ' X X ', ' ', ' ', ' ', ' ', ' ' ]; break; case '&': bitmap = [ ' XX ', 'X X ', 'X X', ' XX ', 'X X X', 'X X ', ' XX X' ]; break; case '': bitmap = [ ' ', ' ', ' X X ', ' X ', ' X X ', ' ', ' ' ]; break; case '(': bitmap = [ ' X ', ' X ', 'X ', 'X ', 'X ', ' X ', ' X ' ]; break; case ')': bitmap = [ ' X ', ' X ', ' X', ' X', ' X', ' X ', ' X ' ]; break; case '-': bitmap = [ ' ', ' ', ' ', ' XXX ', ' ', ' ', ' ' ]; break; case '_': bitmap = [ ' ', ' ', ' ', ' ', ' ', ' ', 'XXXXX' ]; break; case '=': bitmap = [ ' ', ' ', ' XXX ', ' ', ' XXX ', ' ', ' ' ]; break; case '+': bitmap = [ ' ', ' ', ' X ', ' XXX ', ' X ', ' ', ' ' ]; break; case '{': bitmap = [ ' X ', ' X ', ' X ', 'X ', ' X ', ' X ', ' X ' ]; break; case '}': bitmap = [ ' X ', ' X ', ' X ', ' X', ' X ', ' X ', ' X ' ]; break; case '[': bitmap = [ 'XXX ', 'X ', 'X ', 'X ', 'X ', 'X ', 'XXX ' ]; break; case ']': bitmap = [ ' XXX', ' X', ' x', ' x', ' x', ' x', ' xxX ' ]; break; case '\\': bitmap = [ 'X ', 'X ', ' X ', ' X ', ' X ', ' x', ' X ' ]; break; } for(var col = 0; col < bitmap.length; col++){ for(var row = 0; row < bitmap[col].length; row++){ if(bitmap[col][row]!==' '){ noStroke(); rect((rows), (cols), s, s); } } } popMatrix(); }; var pixelText = function(txt, x, y, s, align){ var space = 0; var lineDis = 0; if(align==='center'){ for(var i = 0; i < txt.length; i++){ var c = txt[i]; if(c!=='\n'){ drawTxt(c, (space + x) - ((s6)txt.length/2-i), lineDis+y, s); space+=s6; } if(c==='\n'){ lineDis+=s9; space = 0; } } } else{ for(var i = 0; i < txt.length; i++){ var c = txt[i]; if(c!=='\n'){ drawTxt(c, space+x, lineDis+y, s); space+=s6; } if(c==='\n'){ lineDis+=s9; space = 0; } } } }; /Draw the gameboard/ var drawGrid = function(){ stroke(0, 50); strokeWeight(1); fill(230); for(var i = 100; i < 550; i+=50){ for(var j = 95; j < 550; j+=50){ rect(i, j, 50, 50); } } noFill(); strokeWeight(10); stroke(100); rect(300, 320, 460, 510); }; /*Draw 'shaded' rectangle for the title/ var sRect = function(x, y, w, h, c){ fill(c); rect(x, y, w, h); fill(255, 25); rect(x-w/2+(w/12), y-h/12, w/6, h-h/6); rect(x, y-h/2+(h/12), w-w/3.1, h/6); triangle(x+w/2, y-h/2, x+w/2-w/6, y-h/2, x+w/2-w/6, y-h/2+h/6); triangle(x-w/2, y+h/2, x-w/2, y+h/2-h/6, x-w/2+w/6, y+h/2-h/6); fill(0, 25); rect(x+w/2-(w/12), y+h/12, w/6, h-h/6); rect(x, y+h/2-(h/12), w-w/3.1, h/6); triangle(x+w/2, y-h/2, x+w/2, y-h/2+h/6, x+w/2-w/6, y-h/2+h/6); triangle(x-w/2, y+h/2, x-w/2+w/6, y+h/2, x-w/2+w/6, y+h/2-h/6); }; //Axis-Aligned Bounding Box - 2D Rect-Rect collision var AABB = function(obj1, obj2){ return obj1.x<obj2.x+obj2.w&& obj1.x+obj1.w>obj2.x&& obj1.y<obj2.y+obj2.h&& obj1.y+obj1.h>obj2.y; }; //Point-Bounding Box - 2D Point-Rect collision var PBB = function(px, py, x, y, w, h){ return px<x+w/2&& px>x-w/2&& py<y+h/2&& py>y-h/2; }; /*Cache images/ var imgs = { 'bk': function(){ //Save the flying squares in an image because //The blur filter makes them laggy fill(150, 50); noStroke(); rect(80, 80, 100, 100); filter(BLUR, 6); return get(0, 0, 140, 140); }, //Because the background page lagged otherwise 'help': function(){ fill(230); strokeWeight(7); stroke(100); rect(300, 74, 560, 132); fill(0); pushMatrix(); translate(306, 31); scale(0.53, 1); pixelText('INSTRUCTIONS', 0, 0, 14, 'center'); popMatrix(); pixelText('Use the arrow keys to slide pieces into their\ncorrect positions.\n\nTry to complete each puzzle in as little moves\nas possible. A move is counted any time\nyou press an arrow key when you\'re not moving\n\nTimed mode will count how many puzzles you manage\nto complete within one minute\n\nBlocks will run into walls that have been placed\nin each puzzle. Use these to your advantage\n\nPress \'R\' at any time to restart the level.\n\nHave fun, and good luck!', 12, 184, 2); return get(0, 0, 600, 600); } }; /*Create grid of rectangles for transition/ var rcts = []; for(var i = 0; i < 10; i++){ for(var j = 0; j < 10; j++){ rcts.push( { x: iwidth/10, y: jheight/10 } ); } } /*Run the transition/ var transition = { active: false, out: false, next: '', t: 0, f: 0, run: function(){ if(this.active){ if(!this.out){ this.t+=12; //Draw rectangle grid for(var i = 0; i < rcts.length; i++){ fill(100, this.t-(rcts[i].x+rcts[i].y)/2); rect(rcts[i].x+width/10/2, rcts[i].y+height/10/2, width/10, height/10); } /* Void expression that tells the computer what happens when `this.t` is greater than 800 / void(this.t>800&&(this.out = true, page = this.next)); } //What happens when the transition is fading out if(this.out){ this.f+=10; for(var i = 0; i < rcts.length; i++){ fill(100, 255-(this.f-(rcts[i].x+rcts[i].y)/2)); rect(rcts[i].x+width/10/2, rcts[i].y+height/10/2, width/10, height/10); } //Reset everything if the transition is done if(this.f>=800){ this.f = 0; this.t = 0; this.active = false; this.out = false; this.next = ''; } } } } }; //For background var Shape = function(){ //Choose position for the shape this.pos = ['top', 'bottom']; this.picked = (random(this.pos.length)\|0); / `(val\|0)` achieves the same result as the double tilde ~~ it's just slightly more efficient. The double tilde can be used as shorthand for `floor` ONLY if the value is positive. It's actually shorthand for `Math.trunc`, which will simply remove all decimals from the value / //Set x and y position this.x = random(width); this.y = 0; //Methods to update the object this.spd = random(0.1, 0.6); this.xSpd = random(-0.5, 0.5); this.sze = random(50, 100); //Set y position based on chosen location, top or bottom void(this.pos[this.picked]==='top'&&(this.y = -100)); void(this.pos[this.picked]==='bottom'&&(this.y = 700)); }; Shape.prototype.update = function(){ //Update the shape position this.x+=this.xSpd; / increase y position if 'top' was picked, otherwise decrease it. / this.y+=(this.picked===0)?this.spd:-this.spd; }; Shape.prototype.display = function(){ //Draw the previously saved blurred rectangle image(imgs.bk, this.x, this.y, this.sze, this.sze); }; var shapes = []; /Create a button constructor/ var Button = function(x, y, w, h, label, next){ //Set position of the rectangle this.x = x; this.y = y; this.w = w; this.h = h; //Width and height of inner rectangle this.w2 = 0; this.h2 = 0; //Opacity this.opac = 100; //Label and target page this.label = label; this.next = next; //Is the mouse over the button? this.over = false; }; Button.prototype.checkMouse = function(){ //Return the result of a point-rect collision function return PBB(mouseX, mouseY, this.x, this.y, this.w, this.h); }; Button.prototype.update = function(){ //Default `this.over` this.over = false; /* Voiding expressions that state what happens when `this.checkMouse` is true and what happens if the button is clicked / void(this.checkMouse()&&(this.over = true)); void(this.over&&(cursor(HAND), clicked&&(transition.active = true, transition.next = this.next))); //Increase width and height of inner rectangle this.w2+=Smooth(this.w2, this.over?this.w:0, 10); this.h2+=Smooth(this.h2, this.over?this.h:0, 10); / Change opacity based on whether or not the mouse is over the button / this.opac+=Smooth(this.opac, this.over?150:100, 10); }; Button.prototype.display = function(){ //Draw the outer rectangle noFill(); strokeWeight(5); stroke(100, this.opac); rect(this.x, this.y, this.w, this.h); //Draw the inner rectangle fill(0, 15); noStroke(); rect(this.x, this.y, this.w2, this.h2); //Display the label of the button fill(0, this.opac); pixelText(this.label, this.x, this.y-this.h/5.5, 4, 'center'); }; Button.prototype.pack = function(){ //Easier to keep everything organized this.update(); this.display(); }; //Create an object that stores the buttons var buttons = { playLevels: construct(Button, [300, 300, 300, 75, 'Play Levels', 'Levels']), playTimed: construct(Button, [300, 400, 300, 75, 'Play Timed', 'Timed']), instructions: construct(Button, [300, 500, 330, 75, 'Instructions', 'instructions']), back: construct(Button, [100, 540, 150, 75, 'Back', 'menu']) }; /Create Block (player) constructor/ var Block = function(x, y, c){ //position and color this.x = x; this.y = y; this.c = c; //Width and height (Necessary for the collision function this.w = 50; this.h = 50; //Can we add a move to the 'move' counter? this.addMove = false; this.addMoveTime = 0; //X and y velocity (required for the `.applyCollision` method this.xVel = 0; this.yVel = 0; //left right up down this.move = [false, false, false, false]; }; Block.prototype.update = function(walls){ /* Determine what happens if the keys are pressed and the block is NOT moving / if(keys[LEFT]&&!this.move[1]&&!this.move[2]&&!this.move[3]){ this.move[0] = true; this.addMoveTime++; } if(keys[RIGHT]&&!this.move[0]&&!this.move[2]&&!this.move[3]){ this.move[1] = true; this.addMoveTime++; } if(keys[UP]&&!this.move[0]&&!this.move[1]&&!this.move[3]){ this.move[2] = true; this.addMoveTime++; } if(keys[DOWN]&&!this.move[0]&&!this.move[1]&&!this.move[2]){ this.move[3] = true; this.addMoveTime++; } //Reset the move timer if the block is not moving if(!keys[LEFT]&&!keys[RIGHT]&&!keys[UP]&&!keys[DOWN]){ this.addMoveTime = 0; } //Allow us to add a move if the move timer is 1 this.addMove = (this.addMoveTime===1)?true:false; / Void expressions that set the x and y velocity of the block when it's cooresponding index of `move` is true / void(this.move[0]&&(this.xVel = -7)); void(this.move[1]&&(this.xVel = 7)); void(this.move[2]&&(this.yVel = -7)); void(this.move[3]&&(this.yVel = 7)); //If the block isn't moving, reset the `move` array if(this.yVel===0){ this.move[2] = false; this.move[3] = false; } if(this.xVel===0){ this.move[0] = false; this.move[1] = false; } //Update the x position and apply the collsion function this.x+=this.xVel; this.applyCollision(walls, this.xVel, 0); //Update the y position and apply the collision function this.y+=this.yVel; this.applyCollision(walls, 0, this.yVel); }; Block.prototype.applyCollision = function(obj, velX, velY){ //Loop through the object for(var i = 0; i < obj.length; i++){ / If AABB collision is detected between 'this' and the object, / if(AABB(this, obj[i])){ //Is the block coming from the top? if(velY>0){ this.yVel = 0; this.y = obj[i].y-this.h; this.move[3] = false; } //The bottom? if(velY<0){ this.yVel = 0; this.y = obj[i].y+obj[i].h; this.move[2] = false; } //The right? if(velX<0){ this.xVel = 0; this.x = obj[i].x+obj[i].w; this.move[0] = false; } //The left? if(velX>0){ this.xVel = 0; this.x = obj[i].x-this.w; this.move[1] = false; } } } }; Block.prototype.display = function(){ //Draw the player fill(this.c); noStroke(); rect(this.x, this.y, this.w, this.h); //Create the lighter highlight fill(255, 20); rect(this.x-21, this.y-4, 8, 42); rect(this.x, this.y-21, 34, 8); triangle(this.x-25, this.y+25, this.x-25, this.y+17, this.x-17, this.y+17); triangle(this.x+17, this.y-25, this.x+25, this.y-25, this.x+17, this.y-17); //Create the darker highlight fill(0, 15); rect(this.x+21, this.y+4, 8, 42); rect(this.x, this.y+21, 34, 8); triangle(this.x-25, this.y+25, this.x-17, this.y+25, this.x-17, this.y+17); triangle(this.x+25, this.y-17, this.x+25, this.y-25, this.x+17, this.y-17); }; var blocks = []; blocks.add = function(x, y, c){ //Add blocks to the array this.push(construct(Block, [x, y, c])); }; blocks.pack = function(walls){ //Light the candle! for(var i = 0; i < this.length; i++){ this[i].update(walls); this[i].display(); } }; /Create Goal constructor/ var Goal = function(x, y, c){ //X and y positon this.x = x; this.y = y; //Width and height - required for collision function this.w = 50; this.h = 50; //Color this.c = c; //Has the player landed in the goal? this.filled = false; }; Goal.prototype.update = function(blocks){ //Loop through the array of blocks for(var i = 0; i < blocks.length; i++){ /* If AABB collision is detected between 'this' and the 'player', AND `this.filled` is not true / if(AABB(this, blocks[i])&&!this.filled){ //If the block isn't moving if(!blocks[i].move[0]&&!blocks[i].move[1]&&!blocks[i].move[2]&&!blocks[i].move[3]){ //change the transparency of the screen screenCol = [200, 200, 200, transparency]; transparency+=Smooth(transparency, 260, 15); if(transparency>=255){ //Now the player has filled the goal this.filled = true; } } } if(!AABB(this, blocks[i])&&!this.filled){ if(transparency>0){ transparency+=Smooth(transparency, -5, 10); } } } }; Goal.prototype.display = function(){ //Create outline over the grid where the //Goal is strokeWeight(2); stroke(this.c); noFill(); rect(this.x, this.y, this.w, this.h); }; var goals = []; goals.add = function(x, y, c){ //Add new instances of Goal to the array this.push(construct(Goal, [x, y, c])); }; goals.pack = function(blocks){ //Light the candle! for(var i = 0; i < this.length; i++){ this[i].update(blocks); this[i].display(); } }; var Wall = function(x, y){ //X and y position this.x = x; this.y = y; //Width and height - required for collision function this.w = 50; this.h = 50; }; Wall.prototype.display = function(){ //Display the grey rectangle fill(156); noStroke(); rect(this.x, this.y, this.w, this.h); //Draw the lighter highlight fill(255, 20); rect(this.x-21, this.y-4, 8, 42); rect(this.x, this.y-21, 34, 8); triangle(this.x-25, this.y+25, this.x-25, this.y+17, this.x-17, this.y+17); triangle(this.x+17, this.y-25, this.x+25, this.y-25, this.x+17, this.y-17); //Draw the darker highlight fill(0, 15); rect(this.x+21, this.y+4, 8, 42); rect(this.x, this.y+21, 34, 8); triangle(this.x-25, this.y+25, this.x-17, this.y+25, this.x-17, this.y+17); triangle(this.x+25, this.y-17, this.x+25, this.y-25, this.x+17, this.y-17); }; var walls = []; walls.add = function(x, y){ //Add new instances of 'Wall' to the array this.push(construct(Wall, [x, y])); }; walls.pack = function(){ //Light the candle! for(var i = 0; i < this.length; i++){ this[i].display(); } }; //These are all defined objects that will be in the levels var Objects = [blocks, goals, walls]; Objects.remove = function(){ //Remove all objects in the array for(var i = 0; i < Objects.length; i++){ for(var j = 0; j < Objects[i].length; j++){ Objects[i].splice(j, Objects[i].length); } } }; /Game constructor/ var LevelsMode = function(){ //What level are we on? this.level = 0; //How many moves has the player made? this.moves = 0; //Create level arrays this.levels = [ [ 'A ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', 'a ', ], [ 'A ', ' ', 'XXXXX ', ' ', ' ', ' ', ' ', ' ', ' ', ' a ', ], [ 'A ', ' ', 'X XX', ' XX ', ' ', ' ', ' ', ' ', ' ', ' a X', ], [ 'a ', ' ', 'X ', ' XXX ', 'X X ', 'A ', ' X ', ' ', ' ', 'X ', ], [ 'a ', ' ', ' X ', ' X X X', 'X X ', 'A ', ' X ', 'X ', ' X ', ' X', ], [ 'a ', 'XX ', ' X ', ' X X ', ' AX ', ' X ', ' X ', ' X ', 'X ', ' X', ], [ ' X ', ' ', ' X ', ' X ', ' X ', ' ', ' X ', 'X X ', ' X ', 'AXa X', ], [ 'XX XX A', 'X X X', 'X XX X', 'X X ', 'XX a X ', ' ', ' X X XX', ' X X ', ' ', ' X ', ], [ 'XXX X', ' ', ' XX ', 'X X X ', ' ', ' X X ', ' X ', 'X AXa ', ' X ', ' X ', ], [ 'a X ', ' X ', 'X XX ', ' XX XX ', 'X X ', 'A X ', ' XX X ', ' ', ' ', 'XX X ', ], [ 'a XA X X', 'X X ', ' X X X ', ' X XX ', ' X X ', ' X X ', ' X X ', ' X X ', ' X X ', ' X', ], [ ' XX XXX', ' XXX', ' XX X ', ' X ', ' X X ', 'X XA ', ' aXXX ', ' X ', 'X XX', 'XX XX', ], [ 'A X X ', ' XX ', 'XX X ', ' XX ', 'a X ', 'X ', 'XX ', ' X X ', ' X ', ' X ', ], [ ' X X X', ' a ', ' X', 'X X ', 'X XX ', ' XA ', ' X X ', ' X XX', ' X ', ' X ', ], [ 'A X XX', ' X X', 'X X X', ' XX X', ' X ', 'X X', ' X ', ' XX ', ' X X', ' a', ], [ ' ', ' XX ', ' AX', 'XX X ', ' ', 'X ', ' X ', ' ', ' ', 'a ', ], [ ' X ', ' ', ' X ', ' X', ' ', ' XX X ', ' X X', ' X', ' X X ', 'a XXA ', ], [ ' X X ', ' ', ' X X X', 'X X ', ' X X', ' ', ' X X ', ' X X ', 'A X', 'aX X X', ], [ ' X ', ' XXX ', ' X ', 'X a ', ' X ', ' X X ', ' ', ' XX X ', ' X X', ' XXA ', ], [ 'XXX X', 'X ', ' X XX ', 'X X X ', ' ', ' X ', ' X ', 'X AXa ', ' X X ', ' XX ', ], [] ]; //Messages displayed at the start of each level this.messages = [ 'Starting Simple', 'First Obstacles', 'A few moves...', 'More Challenging', 'Stepping it up', 'The Journey Begins', 'Starting to get crazy', 'Lots going on', '', 'Kind of a mess', 'Is this mean?', '', 'Scrambled', '', 'Easier than it looks', 'I need more walls', '', '', '', 'Deja vu... or not?', '' ]; //Current opacity of the message this.messageFade = 300; }; LevelsMode.prototype.loadLevel = function(){ //Loop through the level array for(var i = 0; i < this.levels[this.level].length; i++){ for(var j = 0; j < this.levels[this.level][i].length; j++){ var index = this.levels[this.level][i][j]; /* Change the block depending on what value is encountered in the array / switch(index){ case 'a': blocks.add(j50+100, i50+95, color(222, 158, 158)); break; case 'A': goals.add(j50+100, i50+95, color(207, 116, 116)); break; case 'b': blocks.add(j50+100, i50+95, color(127, 172, 207)); break; case 'X': walls.add(j50+100, i50+95); break; } } } }; LevelsMode.prototype.create = function(){ / `self` is a property of `window` in HTML. It makes sense to me to use it for the constructor that takes up the whole canvas, or JavaScript window / var self = this; //'pack' each value that has been pushed into the //respective array walls.pack(); goals.pack(blocks); blocks.pack(walls); //If we're playing 'levels' mode if(mode==='levels'){ //Decrease opacity of the messages self.messageFade-=2; //Loop through all goals in the level (only one) for(var i = 0; i < goals.length; i++){ //If it's filled if(goals[i].filled){ if(self.level<19){ //Remove all objects and load next level Objects.remove(); self.level++; self.loadLevel(); } else{ //If we exceed the last level, //return to menu transition.active = true; transition.next = 'menu'; } //Reset the moves and the message opacity self.moves = 0; self.messageFade = 300; } } //Draw the message according to the current level fill(0, self.messageFade); pixelText(self.messages[self.level], 300, 279, 4, 'center'); } //If we're playing 'timed' mode if(mode==='timed'){ //Loop through goals... for(var i = 0; i < goals.length; i++){ //If the goal is filled if(goals[i].filled){ //Remove all objects, select a random level, and //Load it Objects.remove(); self.level = (random(8, 19)\|0); self.loadLevel(); self.moves = 0; //Increase the number of levels we've completed levelsCompleted++; } } } //If 'r' is pressed, reset the level if(keys[82]){ Objects.remove(); self.moves = 0; self.messageFade = 300; self.loadLevel(); } //Keep the player within the bounds of the grid for(var i = 0; i < blocks.length; i++){ if(blocks[i].x<107){ blocks[i].x = 100; blocks[i].xVel = 0; blocks[i].move[0] = false; } if(blocks[i].x>493){ blocks[i].x = 500; blocks[i].xVel = 0; blocks[i].move[1] = false; } if(blocks[i].y<102){ blocks[i].y = 95; blocks[i].yVel = 0; blocks[i].move[2] = false; } if(blocks[i].y>538){ blocks[i].y = 545; blocks[i].yVel = 0; blocks[i].move[3] = false; } if(blocks[i].addMove){ self.moves++; } } //Draw a rectangle over the entire screen fill(screenCol[0], screenCol[1], screenCol[2], transparency); noStroke(); rect(300, 300, 600, 600); }; /Create a new instance of the game/ var levelsMode = construct(LevelsMode, []); //Load the levels levelsMode.loadLevel(); /*Pages/ var load = function(){ var obj = Object.keys(imgs); background(255, 0); imgs[obj[curLoad]] = imgs[obj[curLoad]](); curLoad++; background(255); stroke(0); if(curLoad<obj.length){ pixelText(' Loading:', 300, 210, 8, 'center'); pixelText(' ' + ((curLoad/obj.length100)\|0) + '% Complete', 300, 350, 5, 'center'); loaded = false; } else{ loaded = true; page = 'menu'; } }; var menu = function(){ background(230); //Reset items having to do with the gameplay levelsCompleted = 0; timer = 60; levelsMode.moves = 0; //Add a new shape every 50 frames void(frameCount%50===0&&(shapes.push(construct(Shape, [])))); //Draw the shapes for(var i = 0; i < shapes.length; i++){ shapes[i].update(); shapes[i].display(); } //Remove them if they go off the screen for(var i = shapes.length; i--;){ if(shapes[i].x<=-100\|\|shapes[i].x>700\|\|shapes[i].y>700\|\|shapes[i].y<-100){ shapes.splice(i, 1); } } //'pack' the buttons buttons.playLevels.pack(); buttons.playTimed.pack(); buttons.instructions.pack(); //Draw the rectangle to hold the title fill(230); strokeWeight(7); stroke(100); rect(300, 74, 560, 132); //'deceptively simple' strokeWeight(4); rect(300, 163, 501, 48); //Draw the words in my custom text fill(0); pixelText('d e c e p t i v e l y s i m p l e ', 294, 156, 2, 'center'); pixelText('A game by Loyalty', 5, 586, 1); pushMatrix(); translate(38, 0); //Draw the title noStroke(); /F/ sRect(57, 37, 35, 35, color(235, 115, 115)); sRect(57, 71, 35, 35, color(235, 115, 115)); sRect(57, 106, 35, 35, color(235, 115, 115)); sRect(87, 32, 25, 25, color(235, 115, 115)); sRect(112, 32, 25, 25, color(235, 115, 115)); sRect(87, 74, 25, 25, color(235, 115, 115)); /*I/ sRect(152, 37, 35, 35, color(235, 115, 115)); sRect(152, 71, 35, 35, color(235, 115, 115)); sRect(152, 106, 35, 35, color(235, 115, 115)); /*L/ sRect(202, 37, 35, 35, color(235, 115, 115)); sRect(202, 71, 35, 35, color(235, 115, 115)); sRect(202, 106, 35, 35, color(235, 115, 115)); sRect(232, 111, 25, 25, color(235, 115, 115)); sRect(257, 111, 25, 25, color(235, 115, 115)); /*-/ sRect(294, 74, 25, 25, color(235, 115, 115)); sRect(319, 74, 25, 25, color(148)); /*I/ sRect(367, 37, 35, 35, color(148)); sRect(367, 71, 35, 35, color(148)); sRect(367, 106, 35, 35, color(148)); /*T/ sRect(451, 37, 35, 35, color(148)); sRect(451, 71, 35, 35, color(148)); sRect(451, 106, 35, 35, color(148)); sRect(421, 32, 25, 25, color(148)); sRect(481, 32, 25, 25, color(148)); popMatrix(); //Fade the page in if all images have been loaded if(loaded){ loadFade+=Smooth(loadFade, -5, 10); fill(255, loadFade); noStroke(); rect(300, 300, 600, 600); } }; var help = function(){ background(230); //Add a new shape every 50 frames void(frameCount%50===0&&(shapes.push(construct(Shape, [])))); //Draw the shapes for(var i = 0; i < shapes.length; i++){ shapes[i].update(); shapes[i].display(); } //If it goes off the screen, remove it for(var i = shapes.length; i--;){ if(shapes[i].x<=-100\|\|shapes[i].x>700\|\|shapes[i].y>700\|\|shapes[i].y<-100){ shapes.splice(i, 1); } } //Had to save this in an image because it was laggy image(imgs.help, 300, 300); //'pack' the back button buttons.back.pack(); }; var Levels = function(){ background(230); mode = 'levels';//Set the mode //Add new shape every 50 frames void(frameCount%50===0&&(shapes.push(construct(Shape, [])))); //Draw the shapes for(var i = 0; i < shapes.length; i++){ shapes[i].update(); shapes[i].display(); } //if the shape goes off the screen, remove it for(var i = shapes.length; i--;){ if(shapes[i].x<=-100\|\|shapes[i].x>700\|\|shapes[i].y>700\|\|shapes[i].y<-100){ shapes.splice(i, 1); } } //Draw the 'playing field' drawGrid(); //Display current level and current moves at the //top of the page fill(0); pixelText('Level: ' + (levelsMode.level+1), 67, 20, 3); pixelText('Moves: ' + levelsMode.moves, 390, 20, 3); }; var Timed = function(){ background(230); mode = 'timed';//Set the game mode //Add a new shape every 50 frames void(frameCount%50===0&&(shapes.push(construct(Shape, [])))); //Draw the shapes for(var i = 0; i < shapes.length; i++){ shapes[i].update(); shapes[i].display(); } //If it goes off the screen, remove it for(var i = shapes.length; i--;){ if(shapes[i].x<=-100\|\|shapes[i].x>700\|\|shapes[i].y>700\|\|shapes[i].y<-100){ shapes.splice(i, 1); } } //Display the grid for the game drawGrid(); //Decrease the timer timer-=1/this.__frameRate; //End the game if it reaches 0 if(timer<0){ transition.active = true; transition.next = 'timer over'; } //Display timer and number of levels completed fill(0); pixelText('Time Left: ' + (timer\|0), 300, 20, 3, 'center'); pixelText(levelsCompleted + '', 8, 8, 3); }; var endTimed = function(){ background(230); //Add a new shape every 50 frames void(frameCount%50===0&&(shapes.push(construct(Shape, [])))); //Draw the shapes for(var i = 0; i < shapes.length; i++){ shapes[i].update(); shapes[i].display(); } //If one goes off the screen, remove it for(var i = shapes.length; i--;){ if(shapes[i].x<=-100\|\|shapes[i].x>700\|\|shapes[i].y>700\|\|shapes[i].y<-100){ shapes.splice(i, 1); } } //Rectangle to hold the title fill(230); strokeWeight(7); stroke(100); rect(300, 74, 560, 132); //'subtitle' strokeWeight(4); rect(300, 163, 501, 48); //Display the words fill(0); pixelText('GAME OVER', 307, 39, 10, 'center'); pixelText('You completed ' + levelsCompleted + ' levels', 294, 156, 2, 'center'); //Pick a random phrase to be displayed when //the game is over pixelText(endPhrases[(selectPhrase\|0)], 300, 300, 3, 'center'); //'pack' the back button buttons.back.pack(); }; /*Pack it all up/ var pages = function(){ //Default the cursor cursor(ARROW); //Switch the page we're on switch(page){ case 'load': load(); break; case 'menu': menu(); break; case 'instructions': help(); break; case 'Levels': Levels(); levelsMode.create();//Create the game break; case 'Timed': Timed(); levelsMode.create(); break; case 'timer over': endTimed(); break; } //Default clicked and run the transtion clicked = false; transition.run(); }; /*Required for animation/ draw = function() { try{ //Try running function `pages` pages(); } catch(e){ //Send any errors to the console debug(e); } finally{ //Run this no matter what rectMode(CENTER); textFont(createFont('Pixels by Loyalty')); imageMode(CENTER); fill(0); pixelText(this.__frameRate.toFixed(3) + ' FPS', 538, 591, 1); resetTimer(Infinity); } }; //Set `clicked` to true mouseClicked = function(){ clicked = true; }; //Determine whether or not keys are being pressed keyPressed = function(){ keys[keyCode] = true; keys[key.toString()] = true; }; keyReleased = function(){ keys[keyCode] = false; keys[key.toString()] = false; };
Folds	48,53,57,64,67,69,72,76,79,1132,1133,1162,1165,1178,1181,1197,1200,1205,1208,1213,1216,1244,1248,1257,1260,1304,1307,1333,1334,1343,1344,1347,1351,1371,1372,1375,1376,1397,1398,1413,1414,1418,1420,1425,1428,1448,1449,1505,1506,1542,1543,1562,1564,1567,1568,1574,1577,1591,1592,1617,1618,1626,1628,1631,1632,1638,1640,1648,1649,1668,1670,1673,1674,1679,1683,1690,1693,1972,1973,1999,2000,2107,2115,2132,2133,2227,2228,2252,2253,2281,2282,2318,2319,2359,2362,2393,2396,2414,2417,2419,2422,2425,2426,2429
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgNWYmtzqCww
Votes	185
Spin-Offs	1
Type	PJS
Width	600
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Cavan P
Author Name	loyaltyKA
Author ID	kaid_716488551714127278797372
Author Profile Access	PUBLIC

Archive Data

Added	10 months ago, 1739460437100
Updated	10 months ago, 1739460446505
Source Deleted	unknown