Viewing Program

Program Data

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

Title	Halloween \| Khantest Entry
ID	4531796470972416
Created	3 years ago, 1667225554378
Updated	3 years ago, 1667225587841
Code	/ Contest: Magic I have completed 100% of Khan Academy's 'Intro to JS' and have been programming for too many months. I would prefer to be placed in the [Advanced] bracket Note: Some levels were added after the deadline, No actual code was created after the deadline Just a small game that I created for Khantober/Magic Khantest Make sure to subscribe: https://www.khanacademy.org/cs/i/6652809926492160 / var scene = 'load'; var new_ = (function() { /* Replace the new function because KAs new function sucks @author KWC @example of usage new Object(param1, param2) vs new_.call(Object, param1, param2) / var obj = Object.create(this.prototype); this.apply(obj, arguments); return obj; }); var imgs = (function(){ / images are stored as objects. The loading algorithm loops through and turns them into PImages based on information. @example key:{ w: width, h: height, d: function(){ //Draw the graphic } }, outside of this scope, use the loaded images like: image(imgs.key, x, y); / return({ //Backdrops libraryBackdrop:{ w:600, h:600, d:function(){ background(178,188,214); //Draw the shadows noStroke(); fill(144,149,178); beginShape(); vertex(0,200); vertex(125,500); vertex(500,525); vertex(600,200); vertex(600,600); vertex(0,600); endShape(); quad(0,0,600,0,600,100,0,80); //Draw some texture fill(255,30); for(var i = 0; i < 1200; i ++){ ellipse(random(0,600),random(0,600),5,5); } filter(BLUR,2); //Draw the tile effect stroke(0,20); strokeWeight(3); for(var i = 0; i < 600; i += 100){ line(i + random(-10,10),0,i+random(-10,10),600); } for(var i = 0; i < 600; i += 80){ line(0,i+random(-10,10),600,i+random(-10,10)); } //Draw the closest tables noStroke(); fill(79,78,97); rect(0,475,175,125); rect(650,475,-175,125); fill(65,65,83); quad(0,450,175,475,125,600,0,600); quad(650,450,475,475,525,600,650,600); //Draw back of the book shelves noStroke(); fill(133,138,163); quad(200,0,200,160,210,120,210,0); quad(400,0,400,160,390,120,390,0); fill(71,76,96); rect(0,0,200,140); rect(600,0,-200,140); //Reading is cool var book = function(x,y,r,w){ pushMatrix(); translate(x,y); rotate(r); stroke(35,36,50); strokeWeight(1); fill(55,57+random(-5,5),77); rect(0,0,w, 51,1); noStroke(); fill(35,36,50); rect(0,40,w+1,5); fill(95,86,114); rect(0,5,w+1,5); popMatrix(); }; book(0,19,0,15); book(16,19,0,12); book(29,20,-4,13); book(45,20,-8,12); book(61,34,-44,11); book(107,20,0,10); book(118,20,-1,15); book(137,20,0,10); book(150,20,0,10); book(170,20,10,10); for(var i = 0; i < 170; i += 15){ book(427+i,90+random(-1,1),random(-5,5),random(10,14)); book(i,90+random(-1,1),random(-5,5),random(10,14)); book(427+i,20+random(-1,1),random(-5,5),random(10,14)); } //Draw the bookshelves fill(111,113,137); rect(600,0,-200,20); rect(600,73,-200,15); rect(600,140,-200,20); rect(0,0,200,20); rect(0,73,200,15); rect(0,140,200,20); rect(180,0,20,140); rect(400,0,20,140); filter(BLUR,1); } }, kitchenBackdrop:{ w:600, h:600, d:function(){ //Pot mask background(0); fill(255,0,0); rect(0,0,100,100); fill(255); noStroke(); beginShape(); vertex(15,15); vertex(50,30); vertex(85,15); vertex(80,30); bezierVertex(120,80,80,100,50,100); bezierVertex(20,100,-20,80,20,30); endShape(); var mask = get(0,0,100,100); //Pot texture background(71,75,89); fill(158,97,61); for(var i = 0; i < 35; i ++){ for(var j = 0; j < i0.5; j ++){ var s = (random(2,5) + i)/5; ellipse(random(0,100),i+65+random(5,-5),s,s); } } filter(BLUR,1); var pot = get(0,0,100,100); if(pot){ pot.mask(mask); } //Stuff inside background(255,0); fill(43,44,55); triangle(15,35,50,57,85,35); fill(241,118,106); rect(20,42,60,10); image(pot,0,20); //Handle on Pot noFill(); stroke(71,75,89); strokeWeight(3); arc(50,50,75,80,200,340); noStroke(); fill(114,124,144); rect(47,0,6,15); var pot = get(0,0,100,120); //Frying pan mask background(0); noStroke(); fill(255); ellipse(50,60,50,50); beginShape(); vertex(50,50); bezierVertex(55,15,55,0,50,0); bezierVertex(45,0,45,15,50,75); endShape(); fill(0); ellipse(50,5,3,4); var mask = get(0,0,100,100); //Frying pan texture background(81,90,116); fill(43,47,56); ellipse(57,60,50,50); fill(81,90,116); for(var i = 0; i < 25; i ++){ for(var j = 0; j < i0.5; j ++){ var s = (random(2,5) + i)/5; ellipse(i+55,random(30,90),s,s); } } filter(BLUR,1); var fryingPan = get(0,0,100,100); if(fryingPan){ fryingPan.mask(mask); } //Table mask background(0); fill(255); noStroke(); quad(0,500,0,600,200,600,225,500); var mask = get(0,500,250,100); //Table texture background(68,57,64); for(var i = 0; i < 250; i += 2){ for(var j = 0; j < 100; j += 2){ fill(95,89,101,i/2+(100-j) + random(-70,-30)); rect(i,j,2,2); } } stroke(44,44,55,100); strokeWeight(3); var table = get(0,0,250,100); if(table){ table.mask(mask); } background(255,0); image(table,0,500); //Table legs fill(44,44,55); quad(199,600,210,600,225,530,225,500); quad(215,537,225,530,225,600,215,600); table = get(0,500,250,100); background(181,162,156); //back wall noStroke(); fill(163,161,166); rect(0,0,600,200); //Glow from fire for(var i = 125; i < 475; i += 2){ for(var j = 0; j < 200; j += 2){ var d = dist(i,j,300,200); fill(252,200,157,255-d1.25 + random(-30,20)); rect(i,j,2,2); } } //Back stones fill(143,150,159); rect(0,60,70,40,3); rect(20,110,80,30,3); rect(10,160,40,30,3); rect(90,150,60,40,3); rect(118,76,50,20,3); rect(185,132,30,50,3); pushMatrix(); translate(205,104); rotate(-45); rect(0,0,40,20,3); popMatrix(); pushMatrix(); translate(367,78); rotate(45); rect(0,0,40,20,3); popMatrix(); rect(254,71,50,20,3); rect(314,63,30,30,3); rect(384,150,30,50,3); rect(384,127,20,15,3); rect(490,100,60,40,3); rect(543,159,50,30,3); rect(467,170,60,30,3); rect(425,125,50,30,3); rect(525,64,50,20,3); rect(424,64,40,30,3); rect(500,15,60,30,3); rect(359,15,70,30,3); rect(250,25,60,20,3); rect(174,25,40,40,3); rect(50,15,60,30,3); //Fire place fill(252,200,157); beginShape(); vertex(225,200); vertex(375,200); vertex(375,125); vertex(350,100); vertex(250,100); vertex(225,125); endShape(); //Shading inside of fireplace fill(255,238,192); beginShape(); vertex(225,125); vertex(250,100); vertex(265,100); vertex(240,125); vertex(240,200); vertex(225,200); endShape(); var c1 = color(247, 227, 175); var c2 = color(252,200,157); for(var i = 0; i < 50; i ++){ fill(lerpColor(c1,c2,i/50)); rect(240,199-i,135,1); } //Shading on Floor fill(227,196,172,100); quad(225,200,375,200,550,550,0,560); //Floor texture fill(255,15); for(var i = 0; i < 1500; i ++){ ellipse(random(0,600),random(200,600),5,5); } filter(BLUR,1); //Floor Boards strokeWeight(3); stroke(152,146,148,150); for(var i = 0; i < 600; i += 30){ line(i+random(-3,3),200,map(i,0,600,-200,800)+random(-3,3),600); } //Draw tables image(table,-25,500); pushMatrix(); translate(300,0); scale(-1,1); translate(-300,0); image(table,-50,500); popMatrix(); //Draw frying pans image(fryingPan,500,50); image(fryingPan,400,50); image(fryingPan,450,75); //Draw the firepit fill(153,122,104); noStroke(); for(var i = 0; i < 10; i ++){ rect(250 + i * 10+random(-1,1), 185+random(-1,1),5,15+random(-1,1),2); } image(pot,260,99,80,96); //Tray fill(61,50,46); stroke(46, 40, 40); strokeWeight(3); quad(50,525,150,525,135,575,35,575); //Spoon stroke(120,127,148); strokeWeight(2.5); line(60,555,67,535); line(60,555,66,535); noStroke(); fill(99,103,121); pushMatrix(); translate(60,555); rotate(10); ellipse(0,0,12,15); popMatrix(); //Cup var c1 = color(99,103,121); var c2 = color(120,127,148); for(var i = 0; i < 25; i ++){ fill(lerpColor(c1,c2,i/25)); rect(90 + i,535,1,25+sin(i7.2)3); } noFill(); strokeWeight(3); stroke(120,127,148); arc(115,547,15,15,-90,90); strokeWeight(1); fill(40,40,44); ellipse(102,535,24,6); filter(BLUR,1); } }, classroomBackdrop:{ w:600, h:600, d:function(){ background(214,148,133); //Floor Shading fill(155,131,125); noStroke(); beginShape(); vertex(0,300); vertex(300,500); vertex(600,300); vertex(600,600); vertex(0,600); endShape(); //Floor texture noStroke(); fill(173,129,122,30); for(var i = 0; i < 3000; i ++){ ellipse(random(0,600),random(200,600),5,5); } fill(214,148,133,30); for(var i = 0; i < 3000; i ++){ ellipse(random(0,600),random(300,600),5,5); } filter(BLUR,1); //Stones on floor randomSeed(1); noFill(); stroke(0,50); strokeWeight(2); for(var i = 0; i < 15; i ++){ rect(random(0,600),random(200,600),40+random(-2,2),20+random(-2,2),4); } //Back counter noStroke(); fill(106,101,104); rect(0,0,600,200); fill(87,90,96); rect(0,0,600,100); //Cabinets in back for(var i = 0; i < 600; i += 150){ fill(81,87,96); rect(i+15,110,120,80); fill(59,69,76); rect(i+73,110,4,80); ellipse(i+65,150,7,7); ellipse(i+85,150,7,7); } //Desk function function desk(){ fill(83,90,98); rect(0,400,200,100); fill(80,81,87); rect(0,500,200,20); rect(100,500,100,100); fill(58,61,72); rect(110,530,80,60); fill(41,43,56); rect(149,530,3,60); ellipse(142,560,6,6); ellipse(158,560,6,6); } //Draw the desks desk(); pushMatrix(); translate(300,0); scale(-1,1); translate(-300,0); desk(); popMatrix(); //Beaker function function beaker(x,y,s){ pushMatrix(); translate(x,y); scale(s); stroke(151,171,200); noFill(); line(0,0,0,20); line(20,0,20,20); arc(10,20,20,10,0,180); arc(10,20,20,7,0,180); arc(10,0,20,10,0,180); arc(10,0,20,5,180,360); arc(10,10,20,10,0,60); arc(10,5,20,10,0,60); popMatrix(); } //Graduated cylinder function function cylinder(x,y,s){ pushMatrix(); translate(x,y); scale(s); stroke(151,171,200); strokeWeight(2); noFill(); line(0,0,0,35); line(8,0,8,35); arc(4,35,8,6,0,180); arc(4,0,8,6,0,180); arc(4,0,8,4,180,360); noStroke(); fill(220); ellipse(6,25,3,5); popMatrix(); } beaker(35,435,0.6); beaker(25,460,0.8); beaker(50,450); beaker(570,420); beaker(545,440); //Graduated cylinders cylinder(105,415); cylinder(120,423); cylinder(135,424); //Cylinder holder noFill(); stroke(55,53,55); strokeWeight(5); quad(100,425,150,435,150,470,100,460); //Cauldron noStroke(); pushMatrix(); translate(450,400); scale(0.75); fill(0); triangle(15,15,50,37,85,15); fill(241,118,106); rect(20,22,60,15); fill(35,38,56); beginShape(); vertex(15,15); vertex(50,35); vertex(85,15); vertex(80,30); bezierVertex(120,80,80,100,50,100); bezierVertex(20,100,-20,80,20,30); endShape(); popMatrix(); // filter(BLUR,1); } }, //Animated Candle foreground stuff candle:{ w:600, h:600, d:function(){ pushMatrix(); translate(20,530); rotate(-5); translate(-20,-530); strokeWeight(4); //The candle wax noStroke(); fill(200,174,165); rect(30,480,70,51); arc(65,530,70,30,0,180); fill(238,211,192); arc(65,480,70,30,0,180); //The wick stroke(61, 35, 13); line(65,470,65,485); //the glass holder stroke(255,150); noFill(); line(20,530,20,430); line(110,530,110,430); line(20,430,110,430); arc(65,430,90,60,0,180); arc(65,530,90,50,0,180); popMatrix(); } }, candleLight:{ w:100, h:100, d:function(){ //The candleLight under the candle noStroke(); for(var i = 0; i < 100; i += 3){ for(var j = 0; j < 100; j += 3){ var d = dist(i,j,50,50); fill(135, 94, 113,min(map(d,0,50,30,0),30)+random(-5,5)); rect(i,j,3,3); } } filter(BLUR,1); } }, //Menu backdrops stars:{ w:600, h:600, d:function(){ background(72,72,81); //Background gradient noStroke(); var c1 = color(50, 50, 56); var c2 = color(143, 130, 124); for(var i = 0; i < 600; i ++){ fill(lerpColor(c1,c2,i/600)); rect(0,i,600,1); } //Texture for(var i = 0; i < 200; i ++){ fill(255,2); ellipse(random(0,600),random(0,600),100,100); } //Stars for(var i = 0; i < 50; i ++){ var x = random(0,600); var y = random(0,random(200,300)); var s = random(2,3); fill(255,10); ellipse(x,y,s+5,s+5); fill(255,100); ellipse(x,y,s,s); } } }, menuBackdrop:{ w:600, h:600, d:function(){ //Head background(0); noStroke(); fill(255); beginShape(); vertex(242,488); bezierVertex(280,488,310,498,334,417); bezierVertex(355,353,366,329,287,355); bezierVertex(273,347,253,347,250,345); bezierVertex(240,265,203,311,175,352); bezierVertex(122,455,207,474,207,474); endShape(); //Hands ellipse(378,424,50,50); ellipse(243,575,50,50); noStroke(); fill(0); triangle(345,423,353,421,371,457); var mask = get(0,300,600,600); //Glow on head background(10,10,15); stroke(255,40); strokeWeight(15); pushMatrix(); translate(3,3); noFill(); beginShape(); vertex(317,464); vertex(334,417); bezierVertex(355,353,366,329,287,355); bezierVertex(273,347,253,347,250,345); bezierVertex(240,265,203,311,175,352); endShape(); //Glow on hands strokeWeight(10); ellipse(378,427,50,50); popMatrix(); filter(BLUR,2); var img = get(0,300,600,600); if(img){ img.mask(mask); } background(255,0); //Eyes Mask background(0); fill(255); noStroke(); beginShape(); vertex(222,374); vertex(263,404); vertex(310,392); bezierVertex(340,470,251,439,258,422); bezierVertex(190,460,182,392,222,374); endShape(); fill(0); ellipse(235,397,30,30); ellipse(289,407,30,30); var mask = get(0,300,600,300); //Eyes Texture background(234,187,53); for(var i = 0; i < 50; i ++){ fill(235, 222, 188,30); ellipse(random(200,400),random(300,450),20,20); } var eyes = get(0,300,600,300); if(eyes){ eyes.mask(mask); } background(255,0); //Shirt Mask background(0); noStroke(); fill(255); beginShape(); vertex(353,421); bezierVertex(415,499,315,583,289,581); vertex(287,600); vertex(182,600); vertex(197,463); endShape(); var mask = get(0,300,600,300); //Shirt Texture background(66,67,77); for(var i = 0; i < 200; i ++){ fill(255,5); ellipse(random(100,400),random(300,600),30,30); } filter(BLUR,2); var shirt = get(0,300,600,300); if(shirt){ shirt.mask(mask); } //Front Arm Mask background(0); fill(255); beginShape(); vertex(174,456); bezierVertex(107,462,152,600,167,600); vertex(217,600); vertex(231,550); bezierVertex(167,523,206,475,206,475); endShape(); var mask = get(0,300,600,300); //Front Arm texture background(50,51,66); for(var i = 0; i < 100; i ++){ fill(255,5); ellipse(random(100,400),random(300,600),30,30); } filter(BLUR,2); var arm = get(0,300,600,300); if(arm){ arm.mask(mask); } image(imgs.stars,0,0); //Wand Glow fill(206, 220, 240,10); for(var i = 0; i < 10; i ++){ ellipse(310,334,10+i5,10+i5); } //Stars function from wand function star(x,y,s){ pushMatrix(); translate(x,y); rotate(random(0,360)); scale(s); beginShape(); for(var i = 0; i < 10; i ++){ if(i % 2 === 0){ vertex(cos(i36)5,sin(i36)5); } else{ vertex(cos(i36)10+random(-1,1),sin(i36)10+random(-1,1)); } } endShape(); popMatrix(); } //Draw the stars fill(206, 220, 240); star(300,300,0.7); star(330,305,0.4); star(332,340,0.5); star(310,334); filter(BLUR,1); //Wand fill(147,113,93); quad(280,402,287,408,311,335,308,333); //Draw it all image(shirt,-100,300); image(img,-100,300); image(eyes,-100,300); image(arm,-100,300); } }, title:{ w:600, h:300, d:function(){ strokeCap(ROUND); stroke(206, 220, 240); strokeWeight(10); noFill(); //H line(50,280,50,50); line(90,240,90,50); arc(300,200,500,200,180,212); //A line(110,230,110,50); line(150,50,150,215); line(150,50,110,50); arc(300,200,500,200,222,232); //L line(170,50,170,210); arc(300,296,500,200,240,247); //L line(220,50,220,200); arc(300,296,500,200,253,261); //O arc(300,296,500,200,267,274); line(280,195,280,50); line(320,195,320,50); line(320,50,280,50); //W line(340,50,340,197); line(380,50,380,201); line(380,201,360,150); line(340,198,360,150); //E line(400,50,400,203); line(400,50,435,50); arc(300,296,500,200,295,302); arc(300,200,500,200,295,302); //E line(455,50,450,215); line(455,50,490,50); arc(300,296,500,200,308,320); arc(300,200,500,200,310,320); //N line(550,50,550,280); line(510,50,510,240); line(510,50,550,280); popMatrix(); } }, //Buttons button:{ w:450, h:75, d:function(){ //Mask of the button noStroke(); background(0); fill(255); arc(225,75,400,100,181,360); //Gradient for(var i = 0; i < 50; i ++){ fill(0,map(i,0,50,220,255)); rect(0,25 + i,450,1); } filter(BLUR,4); var mask = get(0,0,450,75); background(255,255,255); var button = get(0,0,450,75); //Mask it if(button){ button.mask(mask); } background(255,0); image(button,0,0); } }, buttonHighlight:{ w:60, h:20, d:function(){ background(0,0,0,0); noStroke(); fill(255,100); ellipse(30,10,30,5); //Highlight fill(255,10); for(var i = 0; i < 20; i ++){ ellipse(30,10,30+i1.7,5+i); } } }, //Player health heart:{ w:60, h:60, d:function(){ //Heart Shadow noStroke(); fill(0,200); beginShape(); vertex(27,23); bezierVertex(51,2,55,33,47,38); vertex(27,58); vertex(7,38); bezierVertex(-1,33,3,2,27,23); endShape(); //Heart fill(226,45,88); beginShape(); vertex(30,20); bezierVertex(54,-1,58,30,50,35); vertex(30,55); vertex(10,35); bezierVertex(2,30,6,-1,30,20); endShape(); //Highlight fill(255,200); ellipse(44,22,7,7); } }, heartEmpty:{ w:60, h:60, d:function(){ //Heart noFill(); stroke(226,45,88); strokeWeight(5); beginShape(); vertex(30,20); bezierVertex(54,-1,58,30,50,35); vertex(30,55); vertex(10,35); bezierVertex(2,30,6,-1,30,20); endShape(); } }, }); })(); var Particles = (function(){ / Create a basic particle function @constructor @params {object} config - configuration @property {number} config.x - x position in pixels @property {number} config.y - y poisition in pixels @property {number} config.s - size (width and height) of particle @property {number} config.clr - color(r,g,b) @property {number} config.xv - x velocity in pixels for frame @property {number} config.yv - y velocity in pixels per frame @property {number} config.rotateSpeed - in degrees per frame @property {number} config.fadeSpeed - how quickly it fades away @property {number} config.fade - starting opacity @property {string} config.shape - "rect", "circle", "leaf", or "ellipse" @property {boolean} config.grav - should gravity impact the particle / var _Particle = function(config){ //properties mostly defined above ^^^ this.x = config.x; this.y = config.y; this.s = config.s; this.clr = config.clr; this.xv = config.xv; this.yv = config.yv; this.r = random(0,360); this.rotateSpeed = config.rotateSpeed; this.fadeSpeed = config.fadeSpeed \|\| 5; this.fade = config.fade \|\| 255; this.splicing = false; this.shape = config.shape \|\| 'rect'; this.grav = config.grav \|\| false; }; / Render the particle/ _Particle.prototype.display = function(){ noStroke(); pushMatrix(); //transformations translate(this.x,this.y); rotate(this.r); //color fill(this.clr,this.fade); //pretty intuitive. Draw the correct shape switch(this.shape){ case 'rect': rectMode(CENTER); rect(0,0,this.s,this.s); rectMode(CORNER); break; case 'circle': case 'ellipse': ellipse(0,0,this.s,this.s); break; } popMatrix(); }; / Update the x and y positions, rotation/ _Particle.prototype.update = function(){ //update x and y this.x += this.xv; this.y += this.yv; //update rotation this.r += this.rotateSpeed; //gravity logic if(this.grav){ this.yv += 0.1; } //fade out the particle this.fade -= this.fadeSpeed; if(this.fade < 0){ this.splicing = true; } }; / An array of Particles / var _Particles = []; / Push a particle onto the array / _Particles.create = function(config){ this.push(new_.call(_Particle,config)); }; / Display and update all particles / _Particles.run = function(){ //Draw loop for(var i = 0; i < this.length; i ++){ this[i].update(); this[i].display(); } //Splicing loop for(var i = 0; i < this.length; i ++){ if(this[i].splicing){ this.splice(i,1); } } }; return _Particles; })(); var Trans = (function(){ var _Trans = { //Is it currently transitioning? running:false, //x value of animation x:600, //Which scene to switch to to:'', //What to do on change onChange:function(){}, }; / Start the transition @params [string] to - which scene to switch to / _Trans.start = function(to,onChange){ this.running = true; this.to = to; this.onChange = onChange \|\| function(){}; }; //Reset all variables _Trans.end = function(){ this.running = false; this.x = 600; }; //Draw and update the transition _Trans.run = function(){ noStroke(); fill(20,20,25); rect(this.x,0,600,600); if(this.running){ //Update x position this.x -= 15; //Check if covers the screen if(this.x === 0){ scene = this.to; this.onChange(); } //Check if over if(this.x < -600){ this.end(); } } }; return _Trans; })(); var Mouse = (function(){ / An object for User Interaction / var _Mouse = { //Listeners press:false, click:false, release:false, //Points of drawing points:[], //The shape direction:'', //The color toClr:color(0), clr:color(0), }; / Check which shape is being drawn / _Mouse.check = function(){ var rots = []; var dir = 0; var am = this.points.length - 1; this.direction = ""; / Go through all of the points and assign an angle between it and the next point / for(var i = 0; i < this.points.length - 1; i ++){ var v = this.points[i]; var v2 = this.points[i+1]; var a; if(v[2] === undefined){ a = atan2(v2[1] - v[1],v2[0] - v[0]); v[2] = a; } else{ a = v[2]; } dir += a; rots.push(a); } //Round it to the nearest 45 degrees dir = round((dir/am)/45)45; //Find the average angle of all points var avg = 0; for(var i = 0; i < rots.length; i ++){ var a = round(rots[i]/45)45; rots[i] = a; if(abs(a - dir) < 15 \|\| abs(a - dir) > 345){ avg ++; } } / Calculate the fraction of points that are all in the same direction / avg /= (this.points.length-5); //Check if 80% of all of the points are in the same direction if(avg >= 0.8){ switch(dir){ //Is it Up and Down? case -90: case 90: this.direction = "\|"; break; //Is it left to right? case 0: case 180: case -180: this.direction = '-'; break; } } / Is it less than 80%, or not vertical or horizontal? If so, check if it has a up than down pattern like ^ or a general down than up pattern like v / else if(this.direction === "" \|\| avg < 0.8){ var ind = 0; var avg = 0; //Is the first direction up (-1) or down (+1) var start = rots[0]/abs(rots[0]); / Find the point where it switches from going up to down, or vice versa / for(var i = 0; i < rots.length; i ++){ if(abs(rots[i]) < 170){ if(rots[i]/abs(rots[i]) === start){ ind = i; } else if(rots[i + 1]/abs(rots[i + 1]) !== start){ break; } } } //Find the number of points generally going up for(var i = 0; i < ind; i ++){ if(abs(rots[i]) < 170){ if(rots[i]/abs(rots[i]) === start){ avg ++; } } } //and the number generally going down for(var i = ind; i < rots.length; i ++){ if(abs(rots[i]) < 170){ if(rots[i]/abs(rots[i]) === -start){ avg ++; } } } //Calculate the fraction that follow this pattern avg /= rots.length; //If it mostly follows this pattern if(avg >= 0.6 && ind < rots.length-1){ switch(start){ //Did it start down? case 1: this.direction = 'v'; break; //Or did it start up? case -1: this.direction = '^'; break; } } } }; / Add points, update colors, etc. / _Mouse.update = function(){ //Define the last point that you drew var lastX,lastY; if(this.points.length > 0){ lastX = this.points[this.points.length-1][0] \|\| pmouseX; lastY = this.points[this.points.length-1][1] \|\| pmouseY; } else{ lastX = pmouseX; lastY = pmouseY; } //Check to see that you actually moved your mouse if(this.press && dist(mouseX,mouseY,lastX,lastY) >= 3){ this.points.push([mouseX,mouseY]); } //Every 6 frames, check which shape is drawn if(frameCount % 6 === 0 && this.points.length > 4){ this.check(); } //Update the color based on shape drawn switch(this.direction){ case '-': this.toClr = color(255,0,0); break; case '\|': this.toClr = color(0,0,255); break; case "v": this.toClr = color(255,255,0); break; case '^': this.toClr = color(0,255,0); break; default: this.toClr = color(255); break; } this.clr = lerpColor(this.clr,this.toClr,0.2); //Set event listener this.release = false; }; / Draw all of the points/ _Mouse.display = function(){ //Display your drawing stroke(this.clr); strokeJoin(ROUND); strokeWeight(10); noFill(); beginShape(); for(var i = 0; i < this.points.length; i ++){ var v = this.points[i]; vertex(v[0],v[1]); } vertex(mouseX,mouseY); endShape(); //Draw a circle on the mouse if(this.press){ noStroke(); fill(255); ellipse(mouseX,mouseY,20,20); Particles.create({ x:mouseX, y:mouseY, s:random(2,5), clr:color(255), xv:random(-0.5,0.5), yv:random(-0.5,0.5), shape:"ellipse", fade:200, fadeSpeed:5, }); } }; / Event listeners / mousePressed = function(){ _Mouse.press = true; }; mouseClicked = function(){ _Mouse.click = true; }; mouseReleased = function(){ _Mouse.click = false; _Mouse.press = false; _Mouse.release = true; _Mouse.check(); _Mouse.points = []; }; return _Mouse; })(); var Player = (function(){ / Cat player function @constructor / var _Player = function(){ //Animation time this.time = 0; this.toTime = 180; //Which animation to run this.state = 'drawing'; //X and Y position in pixels this.x = 300; this.y = 300; //width and height this.w = 120; this.h = 100; //Arm value for animation this.armY = 0; //Which color are your particles? this.drawColor = color(255); //Health this.health = 5; }; / Health stats / _Player.prototype.healthBar = function(){ for(var i = 0; i < 5; i ++){ //Draw whole hearts if(i < this.health - 1){ image(imgs.heart,i 60 + 20,10,50,50); } //Current hearts else if(i === this.health - 1){ pushMatrix(); translate(i60 + 45, 35); scale(1 + cos(frameCount 10)0.05); translate(-25,-25); image(imgs.heart,0,0,50,50); popMatrix(); } //And lost hearts else{ image(imgs.heartEmpty,i60 + 20,10,50,50); } } }; /* Increment animation time Change animations based on user input / _Player.prototype.update = function(){ //Increment time if(this.time < this.toTime){ this.time += 4; } else{ this.time -= 4; } if(this.time <= 1){ this.toTime = 180; } else if(this.time > 179){ this.toTime = 0; } //Raise arm above head if(Mouse.release && Mouse.direction !== ""){ this.armY = 20; this.drawColor = Mouse.clr; } //And move it back down this.armY = lerp(this.armY,0,0.2); //Which animation is it? if(mouseIsPressed \|\| this.armY > 1){ this.state = 'drawing'; } else{ this.state = 'static'; this.drawColor = color(255); } }; / Draw the player / _Player.prototype.display = function(){ //so we dont have 20 of the same cos run var ct = cos(this.time); var st = sin(this.time); //Translate to its place pushMatrix(); translate(this.x - this.w/2,this.y - this.h/2); //Which animation? switch(this.state){ case "static": //Tail strokeWeight(5); stroke(20); noFill(); beginShape(); vertex(90,90); curveVertex(90,87); curveVertex(101,80+ct2); curveVertex(100+ct4,65); curveVertex(100+ct4,65); endShape(); //Shirt noStroke(); fill(71); beginShape(); vertex(54-ct2,63); vertex(43-ct2,72-st); vertex(47,90); vertex(90,90); vertex(85-ct2,71-st); vertex(73-ct2,59); endShape(); //Shadows on shirt noFill(); stroke(20); strokeWeight(1); arc(43-ct2,72-st,20,22,0,70); arc(85-ct2,71-st,20,22,90,180); strokeWeight(2); beginShape(); vertex(52-ct2,65); vertex(63-ct2,72); vertex(74-ct2,63); endShape(); //Wand stroke(105,73,44); line(85-ct2,71-st,100-ct2,50-st); //Hands noStroke(); fill(20); ellipse(85-ct3,71-st,15,15); ellipse(43-ct3,72-st,15,15); //Head noStroke(); pushMatrix(); translate(-ct2,0); fill(20); beginShape(); vertex(51,16); bezierVertex(95,8,88,34,88,43); bezierVertex(80,61,70,59,62,64); bezierVertex(24,67,21,20,51,16); endShape(); //Eyes fill(191,154,36); beginShape(); vertex(40,37); vertex(60,42); vertex(76,31); bezierVertex(90,56,66,53,60,45); bezierVertex(49,75,30,37,40,37); endShape(); //Ears fill(20); beginShape(); vertex(33,46); bezierVertex(18,35,18,25+ct3,18,25+ct4); vertex(44,20); endShape(); beginShape(); vertex(65,16); vertex(87-ct4,9); bezierVertex(94,37,85,37,85,37); endShape(); st = sin(this.time/4); //Pupils ellipse(45+st8,42,5,10); ellipse(65+st8,42-st4,5,10); popMatrix(); break; case "drawing": var ct2 = cos(this.time2); var st2 = sin(this.time2); //Tail strokeWeight(5); stroke(20); noFill(); beginShape(); vertex(90,90); curveVertex(90,87); curveVertex(101,80+ct2); curveVertex(100+ct4,65); curveVertex(100+ct4,65); endShape(); //Shirt noStroke(); fill(71); beginShape(); vertex(54,63-ct22); vertex(43,72); vertex(47,90); vertex(90,90); vertex(85-ct22,71+st22-this.armY); vertex(73,59-ct22); endShape(); //Shadows on shirt noFill(); stroke(20); strokeWeight(1); arc(43,72+ct2,20,22,0,70); arc(85-ct22,71+st22-this.armY,20,22,90,180); strokeWeight(2); beginShape(); vertex(52,65-ct22); vertex(63,72-ct22); vertex(74,63-ct22); endShape(); //Wand stroke(105,73,44); line(85-ct22,71+st22-this.armY,100-ct22,50+st22-this.armY); //Add particles Particles.create({ x:this.x + 100-ct22 - this.w/2, y:this.y + 50+st22-this.armY-this.h/2, s:random(2,5), clr:this.drawColor, xv:random(-0.1,0.1), yv:random(-0.4,-0.5), shape:"ellipse", fade:200, fadeSpeed:5, }); //Hands noStroke(); fill(20); ellipse(85-cos(this.time2)2,71+sin(this.time2)2-this.armY,15,15); ellipse(43,72+ct2,15,15); //Head noStroke(); pushMatrix(); translate(0,-cos(this.time2)2); fill(20); beginShape(); vertex(51,16); bezierVertex(95,8,88,34,88,43); bezierVertex(80,61,70,59,62,64); bezierVertex(24,67,21,20,51,16); endShape(); //Eyes fill(191,154,36); beginShape(); vertex(40,37); vertex(60,42); vertex(76,31); bezierVertex(90,56,66,53,60,45); bezierVertex(49,75,30,37,40,37); endShape(); //Ears fill(20); beginShape(); vertex(33,46); bezierVertex(18,35,18,25,18,25); vertex(44,20); endShape(); beginShape(); vertex(65,16); vertex(87,9); bezierVertex(94,37,85,37,85,37); endShape(); //Pupils noFill(); stroke(20); strokeWeight(2); arc(50,32,20,40,60,120); arc(72,40,15,15,40,120); popMatrix(); break; } popMatrix(); this.healthBar(); }; return new_.call(_Player); })(); var Ghost = (function(){ /* One of the ghosts that is attacking you @constructor @params {} config @property [number] config.x - x pos in pixels @property [number] config.y - y pos in pixels @property [number] config.speed - how fast it moves at you @property [string] config.drawings - shapes to draw "v-\|^" / var _Ghost = function(config){ //The symbols to draw this.drawings = config.drawings; //set x and y position in pixels this.x = config.x; this.y = config.y; //Width and height this.w = 60; this.h = 90; //Stuff for animations this.animState = 1; this.opac = 1; this.scl = 1; this.rot = 0; //Speed and direction this.speed = config.speed \|\| 0.5; this.r = atan2(Player.y - this.y, Player.x-this.x); //Distance from player; this.dist = dist(this.x,this.y,300,300); this.distTravelled = 0; //calculate velocity this.xv = cos(this.r)this.speed; this.yv = sin(this.r)this.speed; //Is it moving this.moving = true; //Damaged or dead this.damaged = false; this.dead = false; //Remove from array? this.splicing = false; }; //Run the take damage animation _Ghost.prototype.takeDamage = function(){ if(this.damaged && !this.dead){ //Make the ghost take damage if(this.animState === 1){ this.opac = lerp(this.opac,100,0.2); this.scl = lerp(this.scl,1.2,0.2); this.rot = lerp(this.rot,10,0.2); if(this.opac < 105){ this.animState = 2; } } //And then undo the animation else{ this.opac = lerp(this.opac,200,0.2); this.scl = lerp(this.scl,1,0.2); this.rot = lerp(this.rot,0,0.2); if(this.scl < 1.01){ this.damaged = false; this.scl = 1; this.opac = 200; this.animState = 1; } } } }; //Run the death animation _Ghost.prototype.die = function(){ if(this.dead){ this.scl += 0.01; this.opac -= 10; this.rot += 5; if(this.opac <= 0){ this.splicing = true; } } }; / Move it towards the Player Check for shapes drawn / _Ghost.prototype.update = function(drawings){ //Make it visible if(this.opac < 200 && !this.dead && !this.damaged){ this.opac += 10; } //Move it else if((!this.dead \|\| this.damaged) && this.moving){ this.x += this.xv; this.y += this.yv; this.distTravelled += this.speed; } //Did you draw one of its shapes? if(Mouse.release && Mouse.direction === drawings[0] && this.moving){ drawings = drawings.slice(1,drawings.length); this.damaged = true; if(typeof this.drawings === "object"){ this.drawings[this.drawingInd] = drawings; } else{ this.drawings = drawings; } } //Check for dead if(drawings.length <= 0){ this.dead = true; } }; / Draw the shapes floating above its head/ _Ghost.prototype.shapes = function(drawings){ //Display all drawings if(this.moving){ for(var i = 0; i < drawings.length; i ++){ pushMatrix(); translate(this.x + i12 -drawings.length5,this.y+sin(frameCount4)10-this.h/2-10); strokeWeight(2); //Check which shape it is switch(drawings[i]){ //Draw a 'v' shape case 'v': stroke(100); line(1,0,6,10); line(6,10,11,0); stroke(255,255,0); line(0,0,5,10); line(5,10,10,0); break; //draw a verical line case '\|': stroke(100); line(6,0,6,10); stroke(0,0,255); line(5,0,5,10); break; //Draw the horizontal line case "-": stroke(100); line(0,6,10,6); stroke(255,0,0); line(0,5,10,5); break; //The almighty carrot key case "^": stroke(100); line(1,10,6,0); line(6,0,11,10); stroke(0,255,0); line(0,10,5,0); line(5,0,10,10); break; } popMatrix(); } } }; / Draw the general Ghost shape/ _Ghost.prototype.display = function(){ pushMatrix(); translate(this.x-this.w/2,this.y+sin(frameCount4)10-this.h/2); scale(this.scl); //Make it face the player if(this.x < Player.x){ translate(this.w/2,0); scale(-1,1); translate(-this.w/2,0); } translate(0,this.h/2); rotate(this.rot); translate(0,-this.h/2); //The actual outline noStroke(); fill(255,this.opac); beginShape(); vertex(70,95); bezierVertex(4,95,3,99,3,50); bezierVertex(3,-5,58,-5,58,50); bezierVertex(57,81,61,85,70,95); endShape(); //The mouth fill(30,this.opac/10); for(var i = 20; i < 160; i += 3){ ellipse(27+cos(i)7,41+sin(i)5,5,5); } //Eyes fill(30,this.opac); beginShape(); vertex(11,23); vertex(23,31); bezierVertex(18,37,10,42,11,23); endShape(); beginShape(); vertex(28,30); vertex(43,24); bezierVertex(37,46,29,34,28,30); endShape(); //Pupils fill(255,this.opac); ellipse(16,31,4,4); ellipse(33,32,4,4); fill(100,this.opac); triangle(43,24,38,26,40,33); triangle(11,23,15,26,11,31); popMatrix(); }; / Check to see if it's close enough to the player to damage it/ _Ghost.prototype.checkDamage = function(){ if(this.distTravelled > this.dist && this.moving){ this.moving = false; this.dead = true; Player.health --; } }; //Put it all together _Ghost.prototype.run = function(){ this.update(this.drawings); this.takeDamage(); this.die(); this.display(); this.shapes(this.drawings); this.checkDamage(); }; return _Ghost; })(); var Boss = (function(){ / The Bosses at the end of each level @constructor @extends Ghost @params {} config @property [number] config.x - x pos in pixels @property [number] config.y - y pos in pixels @property [number] config.speed - how fast it moves at you @property [array] config.drawings - array to draw ["^","-"] / var _Boss = function(config){ //Extend from Ghost Ghost.call(this, config); //Cache the starting x and y coords this.startX = this.x; this.startY = this.y; //Which boss is it? this.type = config.type; //Width this.w = config.w; //Which set of shapes to draw this.drawingInd = 0; //Reference to the Waves object this.Waves = config.Waves; //Is it between this.summoning = false; }; //Extend from Ghost _Boss.prototype = Object.create(Ghost.prototype); //Draw the Boss _Boss.prototype.display = function(){ //Transformations pushMatrix(); translate(this.x-this.w/2,this.y+sin(frameCount4)10-this.h/2); scale(this.scl); //Make it face the player if(this.x < Player.x){ translate(this.w/2,0); scale(-1,1); translate(-this.w/2,0); } translate(0,this.h/2); rotate(this.rot); translate(0,-this.h/2); //Which type is it? switch(this.type){ case "Boss1": //Body noStroke(); fill(255,this.opac); beginShape(); vertex(70,80); bezierVertex(70,95,50,95,40,95); bezierVertex(4,85,3,67,3,50); bezierVertex(3,-5,58,-5,58,50); bezierVertex(57,81,61,85,70,80); endShape(); //The mouth fill(30,this.opac/10); for(var i = 20; i < 160; i ++){ ellipse(27+cos(i)15,29-sin(i5)2+sin(i)10,5,5); } //Eyes fill(30,this.opac); beginShape(); vertex(11,18); vertex(23,26); bezierVertex(18,32,10,26,11,18); endShape(); beginShape(); vertex(28,25); vertex(43,19); bezierVertex(37,34,29,29,28,25); endShape(); //Pupils fill(255,this.opac); ellipse(16,23,4,4); ellipse(33,24.5,4,4); //Eye shading fill(100,this.opac); triangle(43,19,38,21,40,26); triangle(11,18,15,21,11,25); //Glasses noFill(); stroke(42,126,233,this.opac1.2); strokeWeight(3); line(6,34,5,19); beginShape(); vertex(5,19); bezierVertex(15,13,20,20,25,23); bezierVertex(20,43,10,30,5,19); endShape(); line(25,23,30,19); beginShape(); vertex(30,19); bezierVertex(30,9,37,1,42,1); bezierVertex(49,29,32,19,30,19); endShape(); beginShape(); vertex(42,1); bezierVertex(47,15,52,1,59,15); endShape(); break; case "Boss2": pushMatrix(); translate(40,0); scale(-1,1); translate(-40,0); noStroke(); fill(255,this.opac); //Body beginShape(); vertex(23,28); bezierVertex(-24,51,18,102,50,100); bezierVertex(111,103,90,50,80,43); vertex(89,35); bezierVertex(70,9,24,0,21,20); endShape(CLOSE); //Lid fill(0,this.opac); beginShape(); vertex(27,20); bezierVertex(40,7,69,18,81,35); bezierVertex(60,38,40,35,27,20); endShape(); //Eyes beginShape(); vertex(22,47); bezierVertex(13,78,40,79,48,66); endShape(CLOSE); beginShape(); vertex(53,68); bezierVertex(60,80,84,85,82,57); endShape(); //Pupils fill(255,this.opac); ellipse(35,61,12,12); ellipse(68,67,12,12); //Mouth fill(30,this.opac/5); noStroke(); for(var i = 20; i < 160; i ++){ ellipse(48+cos(i)15,442-sin(i7)3-i/30,5,5); } //Legs strokeCap(ROUND); strokeWeight(8); stroke(255,this.opac); line(13,83,6,84); strokeWeight(10); line(30,94,27,102); line(63,100,69,104); popMatrix(); break; case "Boss3": //Cache sine for animation var st = sin(frameCount2) 3; //Main Body noStroke(); fill(255,this.opac); ellipse(80,86,80,75); //Eyes fill(0,this.opac); beginShape(); vertex(49,87); bezierVertex(60,120,70,107,74,105); endShape(); beginShape(); vertex(79,103); bezierVertex(81,113,100,110,107,85); endShape(); //Pupils fill(255,this.opac); ellipse(63,101,4,8); ellipse(88,101,4,8); //Mouth noFill(); stroke(0,this.opac); strokeWeight(3); beginShape(); vertex(48,100); bezierVertex(49,110,65,118,71,116); vertex(75,114); vertex(80,117); bezierVertex(104,110,111,100,113,89); endShape(); //little planet bodies noStroke(); fill(255,this.opac); ellipse(19,72+st,27,27); ellipse(27,118-st,27,27); ellipse(134,115-st,27,27); ellipse(131,46+st,35,35); //Little Planet Eyes fill(0,this.opac); ellipse(20,70+st,3,3); ellipse(27,65+st,3,3); ellipse(19,116-st,4,4); ellipse(30,118-st,5,5); ellipse(135,113-st,3,3); ellipse(142,109-st,3,3); noFill(); strokeWeight(2); stroke(0,this.opac); arc(133,34+st,13,10,90,160); arc(145,38+st,13,10,100,150); //Little Planet mouths arc(137,34+st,30,30,78,147); line(26,73+st,31,69+st); arc(23,131-st,15,15,243,314); arc(142,121-st,12,12,220,280); //Arms stroke(0,this.opac); strokeWeight(3); line(29,133-st,34,140-st); line(34,140-st,61,120); line(40,95,28,95+st); line(28,95+st,23,86+st); line(101,120,124,137-st); line(124,137-st,130,129-st); line(120,79,135,80+st); line(135,80+st,136,64+st); break; } popMatrix(); }; //Check if dead _Boss.prototype.onDeath = function(){ //Check if its the end of the wave or not if(this.drawingInd < this.drawings.length - 1 && this.dead){ this.dead = false; this.summoning = true; this.drawingInd ++; } }; //Summon other Ghosts _Boss.prototype.summon = function(){ if(this.summoning){ switch(this.type){ case 'Boss1': case 'Boss3': //Reset its x and y position this.x = lerp(this.x,this.startX,0.1); this.y = lerp(this.y,this.startY,0.1); this.moving = false; //Check to stop summoning if(abs(this.x - this.startX) < 5){ this.summoning = false; this.moving = true; this.distTravelled = 0; //Reset X and y this.x = this.startX; this.y = this.startY; //Increase Speed this.xv = this.xv / this.speed * (this.speed + 0.2); this.yv = this.yv / this.speed * (this.speed + 0.2); this.speed += 0.2; } break; case "Boss2": //Array of shapes var toPush = ["","---,\|\|\|","-\|-,\|-\|,v","\|v,v-,-^,^"][this.drawingInd].split(","); //Stop movement this.moving = false; //Create a ghost for each set of shapes if(!this.added){ for(var i = 0; i < toPush.length; i ++){ this.Waves.push(new_.call(Ghost,{ x:random(400,500), y:random(0,600), speed:random(0.4,0.6), drawings:toPush[i] })); } this.added = true; } //Make it move back if it damaged the player if(this.distTravelled > this.dist){ this.x = lerp(this.x,this.startX,0.1); this.y = lerp(this.y,this.startY,0.1); if(abs(this.x - this.startX) < 5){ this.x = this.startX; this.y = this.startY; this.distTravelled = 0; } } //Check to see if they're all dead if(this.Waves.length === 1){ this.summoning = false; this.added = false; this.moving = true; } break; } } }; //Put it all together _Boss.prototype.run = function(){ this.shapes(this.drawings[this.drawingInd]); this.update(this.drawings[this.drawingInd]); this.summon(); this.takeDamage(); this.onDeath(); this.die(); this.display(); this.checkDamage(); }; return _Boss; })(); var Waves = (function(){ //The array of ghosts var _Waves = []; //Which level/wave are you on? _Waves.level = 2; _Waves.wave = 0; //How much time has elapsed? _Waves.time = 0; /* Array of Objects that store information on each level Each level has multiple waves of enemies In the following format { backdrop:function(){ //The backdrop code here }, waves:[ [ [x, y, drawings, time], [x, y, drawings, time], ], [ [x, y, drawings, time], [x, y, drawings, time], ], ] } / _Waves.levels = [ { backdrop:function(){ image(imgs.libraryBackdrop,0,0); fill(247,203,168); noStroke(); beginShape(); vertex(60,465); bezierVertex(50,458,57,446,60,438-sin(frameCount10)2); bezierVertex(63,446,70,458,60,468); endShape(); for(var i = 0; i < sin(frameCount10) * 3 + 6; i ++){ image(imgs.candleLight,0,490,125,100); } image(imgs.candle,0,0); }, waves:[ [ [500, 300, "-",0], ], [ [500, 300, "\|",0], ], [ [500, 100, "\|",0], [500, 200, "-",30], [100, 500, "-",60], ], [ [100, 500, "\|",0], [500, 200, "\|",30], [150, 400, "-",60], ], [ [100,400,"-",0], [100,500,"\|",30], [500,100,"^",60], [500,200,"v",90], ], [ [100,300,"-\|",0], [500,300,"\|^-",30], ], [ [500,375,"-",0], [500,300,"\|",30], [500,150,"^",60], [500,225,"v",90], [100,375,"v",0], [100,300,"^",30], [100,150,"\|",60], [100,225,"-",90], ], [ [100, 100, "^-^\|^-^\|,v-^-v-^-,\|-\|--\|",0,0.3,"Boss1",60], ] ] }, { backdrop:function(){ image(imgs.kitchenBackdrop,0,0); }, waves:[ [ [300, 100, "--",0], [300, 500, "\|-",15], [100, 300, "v-",30], [500, 300, "^-",45], ], [ [300, 100, "\|-",0], [300, 500, "-v",0], [100, 300, "v^",0], [500, 300, "^\|",0], [100, 100, "--",0], [500, 500, "\|-",15], [100, 500, "v-",30], [500, 100, "^-",45], ], [ [300,100,"-",0], [100,200,"\|",0], [500,200,"-",0], [150,500,"\|",0], [450,500,"-",0], [300,100,"v--",120], [100,200,"^--",120], [500,200,"\|--",120], [150,500,"v-\|",120], [450,500,"^-\|",120], ], [ [300,100,"-",0], [400,200,"\|",60], [500,300,"-v",90], [400,400,"\|^",120], [300,500,"v-",150], [200,400,"^\|",180], [100,300,"-\|",210], [200,200,"^v",240], ], [ [100, 100, "--^--,\|\|v\|\|,\|-^-\|",0,0.3,"Boss2",60], ] ] }, { backdrop:function(){ image(imgs.classroomBackdrop,0,0); }, waves:[ [ [100, 400, "v-^",0], [500, 200, "\|-^",30], ], [ [575, 50, "-^-v-^-v",0], [575, 550, "\|^\|v\|^\|v",30], ], [ [100,100,"\|v\|-",0], [500,500,"-v^-",30], [100,300,"\|-\|^",60] ], [ [500,500,"^^\|",0], [500,100,"vv\|",0], [100,300,"-",120,1.5], [100,100,"\|v\|-",250], [500,500,"v\|v-",250], [100,300,"\|-\|^",250], [100,100,"-",350,1.5], [100,300,"-",350,1.5], ], [ [100,100,"-",0], [500,500,"-",0], [400,400,"\|-",0], [200,200,"v-",0], [100,500,"v\|-",0], [500,100,"^-",0], [500,300,"^\|-",0], ], [ [100,200,"-\|v^",0], [100,100,"-",0,1.5], [500,100,"-",0,1.5], [500,500,"-",0,1.5], [100,500,"-",0,1.5], [100,100,"\|",60,1.5], [500,100,"\|",60,1.5], [500,500,"\|",60,1.5], [100,500,"\|",60,1.5], [100,100,"v",120,1.5], [500,100,"v",120,1.5], [500,500,"v",120,1.5], [100,500,"v",120,1.5], [100,100,"^",180,1.5], [500,100,"^",180,1.5], [500,500,"^",180,1.5], [100,500,"^",180,1.5], ], [ [450, 450, "-^v,v\|-,-^v,-\|v,\|^\|",30,0.9,"Boss3",150], ], ] } ]; //Push enemies in current wave onto the screen _Waves.add = function(){ var wave = this.levels[this.level].waves[this.wave]; for(var i = 0; i < wave.length; i ++){ if(wave[i][3] === this.time){ //Add bosses if(wave[i].length >= 6){ this.push(new_.call(Boss,{ type:wave[i][5], x:wave[i][0], y:wave[i][1], drawings:wave[i][2].split(","), speed:wave[i][4] \|\| 0.5, Waves:this, w:wave[i][6] })); } //Add ghosts else{ this.push(new_.call(Ghost,{ x:wave[i][0], y:wave[i][1], drawings:wave[i][2], speed:wave[i][4] \|\| 0.5, })); } } } }; //Draw the backdrop _Waves.backdrop = function(){ this.levels[this.level].backdrop(); }; //Text animation variables _Waves.opac = 255; _Waves.textIndex = 0; //Is it starting the animation? _Waves.starting = true; //Ready set draw animation _Waves.start = function(){ var txt = ["Level "+(this.level+1),"Ready","Set","Draw"]; if(this.starting){ //Draw the text fill(255,this.opac); textFont(createFont('Calibri Bold'),200); text(txt[this.textIndex],300,300); //Decrease opacity if(!Trans.running){ this.opac -= 5; } //Check if next word if(this.opac < 0){ this.textIndex ++; this.opac = 255; //Check over if(this.textIndex === txt.length){ this.starting = false; this.textIndex = 0; } } } }; //Check to see if all enemies have been defeated _Waves.checkOver = function(){ if(!Trans.running){ var waves = this.levels[this.level].waves[this.wave]; //Check if the wave is over if(this.length < 1 && this.time > waves[waves.length-1][3]){ this.wave ++; this.time = 0; //Check if the level is over if(this.wave === this.levels[this.level].waves.length){ //Check for win if(this.level === this.levels.length - 1){ Trans.start('win'); } //Or go to next level else{ Trans.start('play',function(){ _Waves.level ++; _Waves.wave = 0; _Waves.starting = true; }); } } } if(Player.health <= 0){ Trans.start('lose'); } } }; //Display and update Ghosts _Waves.run = function(){ //Draw loop for(var i = 0; i < this.length; i ++){ if(!this.starting){ this[i].run(); } } //Splice loop for(var i = 0; i < this.length; i ++){ if(this[i].splicing){ this.splice(i,1); } } //Add ghosts if(!this.starting && !Trans.running){ this.add(); this.time ++; } //Check if wave is completed this.checkOver(); //Starting animation this.start(); }; return _Waves; })(); var Buttons = (function(){ /* Buttons for menus and such. Click on them to switch scenes. @constructor @params {object} config @property {number} config.x - top left x position in pixels @property {number} config.y - top left y position in pixels @property {string} config.txt - Text displayed on the button @property {string} config.to - Scene to switch to @property {function} config.onClick - Ran on change of page. / var _Button = function(config){ //X and y this.x = config.x; this.y = config.y; //Variables for hover this.opac = 0; this.txtY = 1; //text to display this.txt = config.txt; this.to = config.to; //Anything special to do if clicked this.onClick = config.onClick \|\| function(){}; }; //Render the button _Button.prototype.display = function(){ pushMatrix(); translate(this.x,this.y); //The bright highlight at the top imageMode(CENTER); pushMatrix(); scale(3.2,max((~~this.opac)/100,0.01)); image(imgs.buttonHighlight,31,0); popMatrix(); imageMode(CORNER); //Draw the button noStroke(); fill(255,40); rect(0,0,200,50,10); image(imgs.button,4,-this.txtY,200,50); //Make whiter hover effect stroke(255,75 + this.opac2); strokeWeight(1); fill(255,this.opac); rect(0,0,200,50,10); //Text fill(255,200 + this.opac); textFont(createFont('Calibri Bold'),22); text(this.txt,100,25-this.txtY); popMatrix(); }; /* Check for collision and clicks Do hover effects / _Button.prototype.update = function(){ //Check for collision if(mouseX > this.x && mouseX < this.x + 200 && mouseY > this.y && mouseY < this.y + 50){ //Hover Effects cursor('pointer'); this.opac = lerp(this.opac,50,0.1); this.txtY = lerp(this.txtY,-3,0.1); //Check for click if(mouseIsPressed && !Trans.running){ Trans.start(this.to, this.onClick); } } else{ //Unhover the effects this.opac = lerp(this.opac,0,0.1); this.txtY = lerp(this.txtY,1,0.1); } }; //Run .display and .update together _Button.prototype.run = function(){ this.update(); this.display(); }; / Create an object of buttons for easy rendering @returns {object} - in the following format "key": new_.call(_Button,{ x:x, y:y, txt:"text", to:"sceneName" }), In the scene, render a button like this. `Buttons.key.run(); / return({ 'play':new_.call(_Button,{ x:350, y:350, txt:'Begin', to:'play', onClick:function(){ Waves.level = 0; Waves.wave = 0; Waves.time = 0; var w = Waves.length; for(var i = 0; i < w; i ++){ Waves.pop(); } Player.health = 5; Waves.textIndex = 0; Waves.opac = 255; Waves.starting = true; }, }), 'how':new_.call(_Button,{ x:350, y:425, txt:'Instructions', to:'how', }), 'credits':new_.call(_Button,{ x:350, y:500, txt:'Credits', to:'credits', }), 'home':new_.call(_Button,{ x:200, y:500, txt:'Home', to:'menu', }), 'replay':new_.call(_Button,{ x:200, y:425, txt:'Replay', to:'play', onClick:function(){ Waves.wave = 0; Waves.time = 0; var w = Waves.length; for(var i = 0; i < w; i ++){ Waves.pop(); } Player.health = 5; Waves.textIndex = 0; Waves.opac = 255; Waves.starting = true; }, }), }); })(); var Scenes = (function(){ //which image to load var curLoad = 0; / @returns - an object of functions that represent each scene Running `Scenes[key]();` anywhere will run that specific scene / return({ load:function(){ if(curLoad < Object.keys(imgs).length){ background(255,0); //Draw the graphic var img = imgs[Object.keys(imgs)[curLoad]]; img.d(); //Get an image of it imgs[Object.keys(imgs)[curLoad]] = get(0,0,img.w,img.h); //Increment the current graphic to load curLoad++; //Check if done loading if(curLoad === Object.keys(imgs).length){ Trans.start('menu'); } } //Loading screen overlay background(0); fill(255); textAlign(CENTER,CENTER); textFont(createFont('Calibri Bold'),width/15); text("Loading... "+~~(curLoad / +Object.keys(imgs).length100)+'%',width/2,height/2); }, play:function(){ //Backdrop Waves.backdrop(); //Run player Player.update(); Player.display(); //Run Ghosts Waves.run(); //User Interaction Mouse.update(); Mouse.display(); //Run particles Particles.run(); }, menu:function(){ //Background image(imgs.menuBackdrop,0,0); image(imgs.title,0,0); //Buttons Buttons.play.run(); Buttons.how.run(); Buttons.credits.run(); }, how:function(){ //Backdrop image(imgs.stars,0,0); //Title fill(255); textFont(createFont('Calibri Bold'),100); text('Instructions',300,100); //Instruction text fill(255,200); textAlign(LEFT,TOP); textFont(createFont('Calibri'),25); text('Ghosts have overtaken your school! Use your mouse to draw four unique shapes. Draw the shapes floating above Ghost\'s heads to destroy them before they can damage you. Be careful, 3 unique bosses haunt these halls.',100,200,400,400); textAlign(CENTER,CENTER); //Menu Button Buttons.home.run(); }, credits:function(){ //Backdrop image(imgs.stars,0,0); //Title fill(255); textFont(createFont('Calibri Bold'),100); text('Credits',300,100); //Instruction text fill(255,200); textAlign(LEFT,TOP); textFont(createFont('Calibri'),25); text('Thanks to Google for the original game. Many of the graphics found in this game are based on them. Credit to Liam K for all graphics, gameplay and code. Credit to KWC for the new function replacement.',100,200,400,400); textAlign(CENTER,CENTER); //Menu Button Buttons.home.run(); }, win:function(){ //Backdrop image(imgs.stars,0,0); //Title fill(255); textFont(createFont('Calibri Bold'),100); text('Victory',300,100); //Instruction text fill(255,200); textAlign(LEFT,TOP); textFont(createFont('Calibri'),25); text('You have defeated all of the ghosts that haunt your school.\n\nDon\'t forget to subscribe for more awesome content.\n\nHappy Halloween!',100,200,400,400); textAlign(CENTER,CENTER); //Menu Button Buttons.home.run(); }, lose:function(){ //Backdrop image(imgs.stars,0,0); //Title fill(255); textFont(createFont('Calibri Bold'),100); text('Defeat',300,100); //Instruction text fill(255,200); textAlign(LEFT,TOP); textFont(createFont('Calibri'),25); text('The ghosts overran your school, and you were defeated. Don\'t worry, you still have another chance to try to retake the school.\n\nHappy Halloween',100,200,400,400); textAlign(CENTER,CENTER); //Buttons Buttons.replay.run(); Buttons.home.run(); }, }); })(); draw = function(){ try{ Scenes[scene](); Trans.run(); } catch(e){ if (!e.infiniteLoopNodeType) { println(e.stack.slice(0, e.stack.indexOf("at Processing"))); //Program.restart(); noLoop(); } } };
Folds	24,38,40,1051,1053,1177,1179,1236,1238,1488,1490,1809,1811,2080,2082,2459,2461,2809,2811,2976,2978,3126,3128,3140
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgOO20bSGCAw
Votes	254
Spin-Offs	10
Type	PJS
Width	600
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Liam K.
Author Name	liamk.ka
Author ID	kaid_160653079463992085090428
Author Profile Access	PUBLIC

Archive Data

Added	10 months ago, 1739363116017
Updated	8 months ago, 1744845515939
Source Deleted	unknown