Viewing Program

Program Data

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

Title	Stars & Shadow: The Game \| An Endless Runner Game
ID	4746618242007040
Created	8 years ago, 1505848226327
Updated	8 years ago, 1506768685155
Code	/** * * Whoohoo! 187 votes! It's now officially my best project yet! :P * So here it is, the sequel to my first game Leslie's Lights, that I should have released it two days ago. :P Thanks to Max Pelic for the save function without using localStorage. ;) So yeah, you won't see me as much as before now, but I'll try to answer as much questions as I can. :) Oh, and this is not the end yet, a sequel will be released. :P Credit to M.Gh for the idea of the colored stars. to Talha Muhib for the shadowballs and the Dark Shadow Wall @Story So originally, Leslie's gender is not specified, but since many of you called her a she, I decided to make her a "she". :P Check out Leslie's Lights here: https://www.khanacademy.org/computer-programming/leslies-lights-the-game-a-dodge-game/6518540875923456 The story is coming soon. And just like Leslie's Lights, I finished this in hurry, so please tell me any bugs you find, and I'll try my best to fix them. Thank you all for the nice feedback! And thanks to anyone who gave me nice tips to improve the game. :) The loading screen is real, if you want to know how to make one, check out this program: https://www.khanacademy.org/computer-programming/a-real-loading-screen/4916655655419904 It's all thanks to Element118 :) COMING SOON: * Shop :P * Story :P :P * What do you want to see more? :P :P :P / smooth(); /Game Variables/ var keys = []; //for key control, used to check what key is pressed var scene = "Load"; //current scene [WARNING: DO NOT CHANGE THIS VARIABLE] var clicked = false; //checks if mouse is being clicked /*transition animation/ var trans = { active: false, //is the transition active? out: false, //is it fade in or out? fade: 255, //transperancy next: "", //the next scene }; /*Text Settings/ textAlign(CENTER, CENTER); //align text /Fonts/ var times = createFont("Times New Roman"); var timesItalic = createFont("Times New Roman Italic"); /Text Function/ var glowText = function(txt, x, y, s, txtColor, italic, glow, glowColor, glowAmt) { //if the text color is undefined, set color to white txtColor = txtColor \|\| color(255); //if italic is true, make font italic, else, use normal font if (italic) { textFont(timesItalic, s); } else { textFont(times, s); } //if glow is not defined, set glow to true glow = glow \|\| true; var a; //used for the glow's transperancy //if glowColor is not specified, the glow color is same as the text color and the transperancy (alpha) is set to 10, otherwise, it's set to 5 if (glowColor === undefined) { glowColor = txtColor; a = 10; } else { a = 5; } //if glowAmt is not defined, set it to 2, glowAmt = glowAmt \|\| 2; //draw text fill(txtColor); text(txt, x, y); //draw glow when glow is set to true if (glow) { for (var i = 0; i < 20; i++) { (fill)(glowColor, a); text(txt, x + cos(i * 360 / 20) * glowAmt, y + sin(i * 360 / 20) * glowAmt); //draw transperant text around the text } } }; /*Graphic functions/ //draw the character var square = function(x, y, size, dark, squareColor, eyeX, eyeY, eyeColor, eyeLength) { rectMode(CENTER); //draw square from center noStroke(); //if eyeX and or eyeY is undefined, set them to 0 eyeX = eyeX \|\| 0; eyeY = eyeY \|\| 0; if (eyeLength === undefined) { eyeLength = 13; } if(eyeColor === undefined) { eyeColor = color(0); } //if dark is false, draw glowing cube if (!dark) { //the original size is 30, but scale it according to the specified size fill(255); rect(x, y, size, size, 10 / 30 * size); fill(eyeColor); rect(x - 8 / 30 * size + eyeX, y - 3 / 30 * size + eyeY, 5 / 30 * size, eyeLength / 30 * size, 20); rect(x + 1 / 30 * size + eyeX, y - 3 / 30 * size + eyeY, 5 / 30 * size, eyeLength / 30 * size, 20); //draw the glow for (var i = 0; i < 26; i++) { (fill)(squareColor, 4); rect(x, y, size + i * 1.5 / 30 * size, size + i * 1.5 / 30 * size, 50 / 30 * size); } } else { //if it's dark, draw a black cube fill(0); rect(x, y, size, size, 10 / 30 * size); fill(102); rect(x - 8 / 30 * size + eyeX, y - 3 / 30 * size + eyeY, 5 / 30 * size, 13 / 30 * size, 20); rect(x + 1 / 30 * size + eyeX, y - 3 / 30 * size + eyeY, 5 / 30 * size, 13 / 30 * size, 20); } }; var S = function(x, y, s) { //here I draw the large fancy S in the title, using complex shapes /*The White Part/ { noStroke(); fill(255); pushMatrix(); translate(x, y); scale(s / 100); beginShape(); vertex(64, -44); bezierVertex(116, -108, -1, -135, -44, -92); bezierVertex(-72, -65, -84, -12, -23, 27); bezierVertex(73, 68, 66, 99, 59, 55); bezierVertex(36, 21, -62, 2, -49, -53); bezierVertex(-42, -95, 55, -139, 57, -44); endShape(); popMatrix(); for (var j = 0; j < 20; j++) { fill(184, 244, 255, 5); pushMatrix(); translate(x + cos(j * 360 / 20) * 5, y + sin(j * 360 / 20) * 5); scale(s / 100); beginShape(); vertex(64, -44); bezierVertex(116, -108, -1, -135, -44, -92); bezierVertex(-72, -65, -84, -12, -23, 27); bezierVertex(73, 68, 66, 99, 59, 60); bezierVertex(36, 21, -62, 2, -49, -53); bezierVertex(-42, -95, 55, -139, 57, -44); endShape(); popMatrix(); } } /*The Black Part/ { fill(0); pushMatrix(); translate(x, y); scale(s / 100); beginShape(); vertex(73, 64); bezierVertex(33, 13, -60, 18, -11, 37); bezierVertex(85, 85, 51, 144, 10, 152); bezierVertex(-32, 159, -55, 129, -58, 111); bezierVertex(-61, 80, -17, 66, -18, 105); vertex(-12, 103); bezierVertex(2, 78, -27, 56, -58, 76); bezierVertex(-94, 112, -49, 193, 27, 174); bezierVertex(102, 156, 93, 84, 73, 64); endShape(); popMatrix(); for (var j = 0; j < 20; j++) { fill(0, 0, 0, 25); pushMatrix(); translate(x + cos(j * 360 / 20) * 2, y + sin(j * 360 / 20) * 2); scale(s / 100); beginShape(); vertex(73, 64); bezierVertex(33, 13, -60, 18, -11, 37); bezierVertex(85, 85, 51, 144, 10, 152); bezierVertex(-32, 159, -55, 129, -58, 111); bezierVertex(-61, 80, -17, 66, -18, 105); vertex(-12, 103); bezierVertex(2, 78, -27, 56, -58, 76); bezierVertex(-94, 112, -49, 193, 27, 174); bezierVertex(102, 156, 93, 84, 73, 64); endShape(); popMatrix(); } } filter(BLUR); }; //letter S in the title /*Load Graphics/ var hasLoaded = hasLoaded \|\| false; //used to when all the images are loaded /Variables To Store Images/ var block, blockCorner, rock, star, mountains, trees, S_img, and, deadTrees, backgroundImg, logoLight, logoPic, pinkStar, blueStar, yellowStar, greenStar, redStar, purpleStar, goldenStar, silverStar, shadowBall, tars, hadow, darkShadow, starShield, darkBall, help, credits; var thingsToLoad = [{ draw: function() { rectMode(CORNER); //draw ground noStroke(); fill(20, 18, 15); rect(0, 0, 40, 40); //grass strokeJoin(ROUND); strokeWeight(2); fill(27, 54, 25); stroke(27, 54, 25); beginShape(); vertex(0, 0); vertex(40, 0); vertex(40, 20); vertex(36, 8); vertex(32, 19); vertex(27, 10); vertex(23, 21); vertex(21, 10); vertex(16, 14); vertex(14, 9); vertex(7, 18); vertex(6, 8); vertex(0, 22); endShape(); }, //draw the imnage width: 40, //width of the image height: 30 //height of the image }, //block { draw: function() { background(0, 0, 0, 0); //clear background //draw ground noStroke(); fill(20, 18, 15); rect(0, 0, 40, 30, 10, 0, 0, 10); //grass strokeJoin(ROUND); strokeWeight(2); fill(27, 54, 25); stroke(27, 54, 25); rect(0, 0, 40, 10, 10, 0, 0, 10); beginShape(); vertex(0, 7); vertex(40, -1); vertex(40, 14); vertex(36, 2); vertex(32, 17); vertex(27, 8); vertex(23, 20); vertex(21, 4); vertex(16, 14); vertex(14, 9); vertex(9, 16); vertex(6, 2); vertex(2, 16); endShape(); }, width: 40, height: 30 }, //corner block { draw: function() { background(0, 0, 0, 0); //clear background //draw rock pushMatrix(); translate(42, 2); scale(0.8); fill(100); noStroke(); beginShape(); vertex(0, 0); vertex(-26, 6); vertex(-48, 40); vertex(-47, 69); vertex(33, 69); vertex(38, 51); vertex(24, 9); endShape(); arc(-7, 66, 79, 50, 0, 180); //light shade fill(255, 255, 255, 20); beginShape(); vertex(0, 0); vertex(-26, 6); vertex(-48, 40); vertex(-47, 69); vertex(0, 69); endShape(); arc(0, 46, 35, 89, -90, 90); arc(0, 69, 91, 50, 90, 180); popMatrix(); }, width: 77, height: 77 }, //rock { draw: function() { background(0, 0, 0, 0); //clear background noStroke(); fill(255, 255, 255); //draw star ;) pushMatrix(); translate(70, 70); scale(0.5); for (var i = 0; i < 360; i += 90) { //the large part pushMatrix(); rotate(i); beginShape(); vertex(0, -85); bezierVertex(0, -15, 0, 0, -85, 0); vertex(0, 0); endShape(); popMatrix(); //the small part pushMatrix(); rotate(45 + i); beginShape(); vertex(0, -55); bezierVertex(0, -40, 0, 0, -55, 0); vertex(2, 0); endShape(); popMatrix(); } //the glow for (var i = 0; i < 18; i++) { fill(184, 244, 255, 5); ellipse(0, 0, i * 16, i * 16); } popMatrix(); }, width: 142, height: 142 }, //star { draw: function() { rectMode(CORNER); background(31, 36, 82); //sky noStroke(); //draw gradient for (var i = 0; i < 255; i++) { fill(0, 0, 0, 255 - i); rect(0, 0 + i, width, 1); } //mountains fill(61, 61, 61); triangle(32, height, 218, 157, 473, height); fill(51, 51, 51); triangle(208, height, 386, 128, 608, height); triangle(0, height, 135, 192, 342, height); fill(41, 41, 41); triangle(-149, height, 27, 126, 302, height); triangle(124, height, 282, 257, 460, height); triangle(width - 149, height, width + 27, 120, width + 302, height); filter(BLUR, 3); rectMode(CENTER); fill(17, 38, 20); rect(width / 2, height / 2 + 205, width, 90); }, width: 500, height: 500 }, //mountains for game background #1 { draw: function() { background(0, 0, 0, 0); //clear background pushMatrix(); translate(18, 0); noStroke(); //draw the trees using for loop for (var i = 0; i < 16; i++) { fill(random(10, 30), random(0, 10), random(0, 10)); if (i < 15) { triangle(20 + i * 30, 352, 10 + i * 30, 415, 30 + i * 30, 415); triangle(37 + i * 30, 373, 6 + i * 30, 402, 41 + i * 29, 396); } fill(random(0, 20), random(20, 40), random(10, 20)); ellipse(0 + i * 30, 353, 31, 25); ellipse(17 + i * 30, 363, 25, 20); } for (var i = 0; i < 16; i++) { fill(random(20, 30), random(0, 20), random(0, 20)); triangle(0 + i * 30, 371, -10 + i * 30, 420, 10 + i * 30, 420); triangle(25 + i * 30, 383, -4 + i * 30, 402, 10 + i * 30, 402); fill(random(0, 20), random(20, 50), random(10, 20)); ellipse(0 + i * 30, 373, 31, 25); ellipse(17 + i * 30, 383, 25, 20); } pushMatrix(); translate(-28, 13); for (var i = 0; i < 16; i++) { fill(random(10, 30), random(0, 20), random(0, 20)); triangle(0 + i * 30, 371, -10 + i * 30, 420, 10 + i * 30, 420); triangle(25 + i * 30, 383, -4 + i * 30, 402, 10 + i * 30, 402); fill(random(0, 10), random(20, 50), random(10, 20)); ellipse(0 + i * 30, 373, 31, 25); ellipse(17 + i * 30, 383, 25, 20); } popMatrix(); popMatrix(); }, width: 500, height: 500 }, //trees for game background #1 { draw: function() { background(0, 0, 0, 0); //clear background S(71, 111, 73); //draw the fancy S }, width: 500, height: 500 }, //title's big S { draw: function() { background(0, 0, 0, 0); //clear background glowText("&", 312, 118, 148, color(133, 133, 133), false, true, color(244), 4); //draw the gray & }, width: 500, height: 500 }, //the gray big (&) (it was causing lag) { draw: function() { background(0, 0, 0, 0); /*First Tree/ { pushMatrix(); translate(-23, -121); scale(1, 1.15); noStroke(); fill(15, 15, 15); beginShape(); //first branch vertex(40, 523); vertex(60, 497); vertex(85, 486); vertex(81, 500); vertex(79, 521); vertex(89, 502); vertex(103, 490); vertex(130, 500); vertex(145, 515); vertex(152, 533); vertex(152, 510); vertex(147, 495); vertex(138, 484); vertex(137, 457); vertex(128, 419); vertex(134, 403); vertex(157, 394); vertex(180, 395); vertex(203, 404); vertex(232, 390); // vertex(205, 395); vertex(188, 386); vertex(177, 382); //s vertex(194, 369); //s// vertex(168, 378); //s vertex(153, 376); vertex(132, 380); vertex(125, 377); //second branch vertex(125, 366); vertex(143, 347); vertex(153, 332); vertex(188, 304); vertex(219, 298); vertex(198, 296); vertex(206, 282); vertex(228, 269); vertex(250, 243); // vertex(261, 236); vertex(246, 240); vertex(222, 261); vertex(200, 268); vertex(180, 290); vertex(147, 308); vertex(133, 321); vertex(122, 325); vertex(112, 324); //third branch vertex(105, 316); vertex(99, 303); vertex(116, 274); //m vertex(134, 262); //m vertex(148, 241); //m vertex(164, 236); //m vertex(149, 234); //m vertex(169, 212); //m vertex(172, 195); //m// vertex(163, 211); //m vertex(146, 223); //m vertex(139, 232); //m vertex(140, 203); //m vertex(133, 234); //m vertex(122, 244); //m vertex(111, 245); //m vertex(87, 276); vertex(78, 273); vertex(74, 259); vertex(70, 249); vertex(83, 226); //s vertex(65, 243); vertex(58, 228); vertex(58, 215); vertex(75, 200); vertex(57, 207); vertex(62, 177); // vertex(49, 198); //ss vertex(37, 190); //ss vertex(44, 204); //ss vertex(43, 225); vertex(46, 236); //s vertex(32, 233); vertex(19, 221); vertex(26, 236); //s// vertex(50, 250); //s vertex(56, 260); vertex(55, 282); vertex(67, 309); vertex(69, 327); vertex(65, 335); //fourth vertex(56, 344); vertex(42, 341); vertex(26, 326); vertex(19, 311); vertex(21, 305); vertex(31, 298); vertex(21, 300); vertex(27, 284); vertex(17, 297); vertex(10, 314); vertex(9, 322); vertex(1, 317); vertex(-12, 317); vertex(1, 322); vertex(13, 334); vertex(20, 348); vertex(31, 358); vertex(44, 369); vertex(52, 377); //5th branch vertex(55, 387); vertex(51, 393); vertex(42, 387); vertex(25, 379); vertex(8, 364); vertex(14, 377); vertex(10, 374); vertex(-4, 365); vertex(-17, 363); vertex(-5, 369); vertex(5, 378); vertex(13, 384); vertex(25, 392); vertex(36, 405); vertex(52, 422); vertex(57, 431); vertex(56, 443); vertex(58, 465); vertex(52, 479); vertex(45, 492); endShape(); popMatrix(); } filter(BLUR); //blur image /*Second tree/ { pushMatrix(); translate(337, -196); scale(1.3, 1.4); fill(15, 15, 15); beginShape(); //first branch vertex(140, 500); vertex(136, 484); vertex(137, 457); vertex(128, 419); vertex(134, 403); vertex(157, 394); vertex(180, 395); vertex(203, 404); vertex(232, 390); // vertex(205, 395); vertex(188, 386); vertex(177, 382); //s vertex(194, 369); //s// vertex(168, 378); //s vertex(153, 376); vertex(132, 380); vertex(125, 377); //second branch vertex(125, 366); vertex(143, 347); vertex(153, 332); vertex(188, 304); vertex(219, 298); vertex(198, 296); vertex(206, 282); vertex(228, 269); vertex(250, 243); // vertex(261, 236); vertex(246, 240); vertex(222, 261); vertex(200, 268); vertex(180, 290); vertex(147, 308); vertex(133, 321); vertex(122, 325); vertex(112, 324); //third branch vertex(105, 316); vertex(99, 303); vertex(116, 274); //m vertex(134, 262); //m vertex(148, 241); //m vertex(164, 236); //m vertex(149, 234); //m vertex(169, 212); //m vertex(172, 195); //m// vertex(163, 211); //m vertex(146, 223); //m vertex(139, 232); //m vertex(140, 203); //m vertex(133, 234); //m vertex(122, 244); //m vertex(111, 245); //m vertex(87, 276); vertex(78, 273); vertex(74, 259); vertex(70, 249); vertex(83, 226); //s vertex(65, 243); vertex(58, 228); vertex(58, 215); vertex(75, 200); vertex(57, 207); vertex(62, 177); // vertex(49, 198); //ss vertex(37, 190); //ss vertex(44, 204); //ss vertex(43, 225); vertex(46, 236); //s vertex(32, 233); vertex(19, 221); vertex(26, 236); //s// vertex(50, 250); //s vertex(56, 260); vertex(55, 282); vertex(67, 309); vertex(69, 327); vertex(65, 335); //fourth vertex(56, 344); vertex(42, 341); vertex(26, 326); vertex(19, 311); vertex(21, 305); vertex(31, 298); vertex(21, 300); vertex(27, 284); vertex(17, 297); vertex(10, 314); vertex(9, 322); vertex(1, 317); vertex(-12, 317); vertex(1, 322); vertex(13, 334); vertex(20, 348); vertex(31, 358); vertex(44, 369); vertex(52, 377); //5th branch vertex(55, 387); vertex(51, 393); vertex(42, 387); vertex(25, 379); vertex(8, 364); vertex(14, 377); vertex(10, 374); vertex(-4, 365); vertex(-17, 363); vertex(-5, 369); vertex(5, 378); vertex(13, 384); vertex(25, 392); vertex(36, 405); vertex(52, 422); vertex(57, 431); vertex(56, 443); vertex(58, 465); vertex(52, 479); vertex(49, 500); endShape(); popMatrix(); } }, width: 500, height: 500 }, //the dead trees in the menu background { draw: function() { //draw the light for the candle (because it causes so much lag when drawn inside draw function) background(0, 0, 0, 0); //clear background noStroke(); fill(245, 172, 63, 2); for (var i = 0; i < 66; i++) { ellipse(200, 200, 110 + i * 4, 115 + i * 4); } }, width: 400, height: 400 }, //candle's light (for the logo) { draw: function() { background(0, 0, 0, 0); //clear background //candle thread noFill(); strokeWeight(2); stroke(43, 24, 18); arc(200, 142, 3, 11, -80, 70); /Candle Holder (Back)/ //candle holder's handle stroke(10, 10, 10); strokeWeight(5); bezier(225, 229, 213, 204, 296, 230, 208, 257); noStroke(); fill(0, 0, 0); ellipse(228, 233, 11, 11); //the holder fill(13, 13, 13); arc(200, 230, 61, 8, 180, 360); /The candle/ //the melted part of the wax rectMode(CENTER); stroke(255, 210, 74); ellipse(208, 161, 5, 31); noStroke(); fill(0, 0, 0, 50); ellipse(208, 161, 10, 36); //candle wax fill(255, 210, 74, 255); rect(200, 188, 20, 83); //shadow for (var i = 0; i < 50; i++) { fill(0, 0, 0, 3); rect(200, 188 + i / 2, 20, 83 - i); fill(0, 0, 0, 1); if (i <= 16) { rect(200 + i / 2, 188, 20 - i, 83); } } /Candle Holder (front)/ fill(0, 0, 0, 255); arc(200, 200 + 30, 60, 28, 0, 180); rect(200, 200 + 51.1, 16, 17); arc(200, 200 + 66, 46, 15, 180, 360); }, width: 400, height: 400 }, //draw candle (for logo) { draw: function() { background(0, 0, 0, 0); //clear background noStroke(); fill(255, 255, 255); pushMatrix(); translate(70, 70); scale(0.5); //draw star for (var i = 0; i < 360; i += 90) { pushMatrix(); rotate(i); beginShape(); vertex(0, -75); bezierVertex(0, -15, 0, 0, -75, 0); vertex(0, 0); endShape(); popMatrix(); pushMatrix(); rotate(45 + i); beginShape(); vertex(0, -50); bezierVertex(0, -40, 0, 0, -50, 0); vertex(2, 0); endShape(); popMatrix(); } //star's colored glow for (var i = 0; i < 65; i++) { fill(255, 46, 182, 6); ellipse(0, 0, 20 + i * 3, 20 + i * 3); } //star's white glow at the center for (var i = 0; i < 90; i++) { fill(255, 255, 255, 2); ellipse(0, 0, i, i); } popMatrix(); }, width: 142, height: 142 }, //draw colored star (pink) { draw: function() { background(0, 0, 0, 0); //clear background noStroke(); fill(255, 255, 255); pushMatrix(); translate(70, 70); scale(0.5); //draw star for (var i = 0; i < 360; i += 90) { pushMatrix(); rotate(i); beginShape(); vertex(0, -75); bezierVertex(0, -15, 0, 0, -75, 0); vertex(0, 0); endShape(); popMatrix(); pushMatrix(); rotate(45 + i); beginShape(); vertex(0, -50); bezierVertex(0, -40, 0, 0, -50, 0); vertex(2, 0); endShape(); popMatrix(); } //star's colored glow for (var i = 0; i < 65; i++) { fill(10, 255, 243, 6); ellipse(0, 0, 20 + i * 3, 20 + i * 3); } //the white glow in the middle for (var i = 0; i < 90; i++) { fill(255, 255, 255, 2); ellipse(0, 0, i2, i2); } popMatrix(); }, width: 142, height: 142 }, //draw colored star (blue) { draw: function() { background(0, 0, 0, 0); //clear background noStroke(); fill(255, 255, 255); pushMatrix(); translate(70, 70); scale(0.5); //draw star for (var i = 0; i < 360; i += 90) { pushMatrix(); rotate(i); beginShape(); vertex(0, -75); bezierVertex(0, -15, 0, 0, -75, 0); vertex(0, 0); endShape(); popMatrix(); pushMatrix(); rotate(45 + i); beginShape(); vertex(0, -50); bezierVertex(0, -40, 0, 0, -50, 0); vertex(2, 0); endShape(); popMatrix(); } //star's colored glow for (var i = 0; i < 65; i++) { fill(255, 238, 48, 6); ellipse(0, 0, 20 + i * 3, 20 + i * 3); } //the white glow for (var i = 0; i < 90; i++) { fill(255, 255, 255, 2); ellipse(0, 0, i2, i2); } popMatrix(); }, width: 142, height: 142 }, //draw colored star (yellow) { draw: function() { background(0, 0, 0, 0); //clear background noStroke(); fill(255, 255, 255); pushMatrix(); translate(70, 70); scale(0.5); //draw star for (var i = 0; i < 360; i += 90) { pushMatrix(); rotate(i); beginShape(); vertex(0, -75); bezierVertex(0, -15, 0, 0, -75, 0); vertex(0, 0); endShape(); popMatrix(); pushMatrix(); rotate(45 + i); beginShape(); vertex(0, -50); bezierVertex(0, -40, 0, 0, -50, 0); vertex(2, 0); endShape(); popMatrix(); } //draw the colored glow for (var i = 0; i < 65; i++) { fill(48, 255, 48, 6); ellipse(0, 0, 20 + i * 3, 20 + i * 3); } //the white glow inthe center for (var i = 0; i < 90; i++) { fill(255, 255, 255, 2); ellipse(0, 0, i2, i2); } popMatrix(); }, width: 142, height: 142 }, //draw colored star (green) { draw: function() { background(0, 0, 0, 0); //clear background noStroke(); fill(255, 255, 255); pushMatrix(); translate(70, 70); scale(0.5); //draw star for (var i = 0; i < 360; i += 90) { pushMatrix(); rotate(i); beginShape(); vertex(0, -75); bezierVertex(0, -15, 0, 0, -75, 0); vertex(0, 0); endShape(); popMatrix(); pushMatrix(); rotate(45 + i); beginShape(); vertex(0, -50); bezierVertex(0, -40, 0, 0, -50, 0); vertex(2, 0); endShape(); popMatrix(); } //colored glow for (var i = 0; i < 65; i++) { fill(250, 10, 10, 6); ellipse(0, 0, 20 + i * 3, 20 + i * 3); } //the white glow in the middle for (var i = 0; i < 90; i++) { fill(255, 255, 255, 2); ellipse(0, 0, i2, i2); } popMatrix(); }, width: 142, height: 142 }, //draw colored star (red) { draw: function() { background(0, 0, 0, 0); //clear background noStroke(); fill(255, 255, 255); pushMatrix(); translate(70, 70); scale(0.5); //draw star for (var i = 0; i < 360; i += 90) { pushMatrix(); rotate(i); beginShape(); vertex(0, -75); bezierVertex(0, -15, 0, 0, -75, 0); vertex(0, 0); endShape(); popMatrix(); pushMatrix(); rotate(45 + i); beginShape(); vertex(0, -50); bezierVertex(0, -40, 0, 0, -50, 0); vertex(2, 0); endShape(); popMatrix(); } //colored glow for (var i = 0; i < 65; i++) { fill(183, 0, 255, 6); ellipse(0, 0, 20 + i * 3, 20 + i * 3); } //the white glow in the middle for (var i = 0; i < 90; i++) { fill(255, 255, 255, 2); ellipse(0, 0, i2, i2); } popMatrix(); }, width: 142, height: 142 }, //draw colored star (purple) { draw: function() { background(0, 0, 0, 0); //clear background noStroke(); fill(255, 255, 255); pushMatrix(); translate(70, 70); scale(0.5); //draw star for (var i = 0; i < 360; i += 90) { pushMatrix(); rotate(i); beginShape(); vertex(0, -75); bezierVertex(0, -15, 0, 0, -75, 0); vertex(0, 0); endShape(); popMatrix(); pushMatrix(); rotate(45 + i); beginShape(); vertex(0, -50); bezierVertex(0, -40, 0, 0, -50, 0); vertex(2, 0); endShape(); popMatrix(); } //the colored glow for (var i = 0; i < 65; i++) { fill(242, 177, 48, 6); ellipse(0, 0, 20 + i * 3, 20 + i * 3); } //the white glow in the middle for (var i = 0; i < 90; i++) { fill(255, 255, 255, 2); ellipse(0, 0, i2, i2); } popMatrix(); }, width: 142, height: 142 }, //draw colored star (gold) { draw: function() { background(0, 0, 0, 0); //clear background noStroke(); fill(255, 255, 255); pushMatrix(); translate(70, 70); scale(0.5); //draw star for (var i = 0; i < 360; i += 90) { pushMatrix(); rotate(i); beginShape(); vertex(0, -75); bezierVertex(0, -15, 0, 0, -75, 0); vertex(0, 0); endShape(); popMatrix(); pushMatrix(); rotate(45 + i); beginShape(); vertex(0, -50); bezierVertex(0, -40, 0, 0, -50, 0); vertex(2, 0); endShape(); popMatrix(); } //draw colored glow for (var i = 0; i < 65; i++) { fill(163, 163, 163, 6); ellipse(0, 0, 20 + i * 3, 20 + i * 3); } //draw white glow in the middle for (var i = 0; i < 90; i++) { fill(255, 255, 255, 2); ellipse(0, 0, i2, i2); } popMatrix(); }, width: 142, height: 142 }, //draw colored star (silver) { draw: function() { background(0, 0, 0, 0); //clear background //light purple glow noStroke(); for(var i = 0; i < 65; i++) { fill(43, 0, 155, i * -2 + 30); ellipse(20, 20, i * 3, i * 3); } //The black outer shell fill(0, 0, 0, 150); ellipse(20, 20, 25, 25); }, width: 55, height: 55 }, //shadow ball { draw: function() { background(0, 0, 0, 0); //clear background glowText("tars", 70, 32, 87, color(255), true, true, color(184, 244, 255), 3); }, width: 138, height: 74 }, //title "tars" { draw: function() { background(0, 0, 0, 0); //clear background glowText("hadow", 125, 36, 87, color(0), true, true); }, width: 244, height: 74 }, //title "hadow" { draw: function() { background(0, 0, 0, 0); noStroke(); rectMode(CORNER); for(var i = 0; i < 60; i++) { fill(5, 0, 10, 25); rect(-362 + i * 6, 0, width, height); } }, width: 500, height: 500 }, //the shadow that follows the cube { draw: function() { background(0, 0, 0, 0); //clear background noStroke(); { pushMatrix(); translate(-38, -88); fill(214, 214, 214); beginShape(); vertex(100, 100); bezierVertex(111, 115, 130, 130, 150, 130); bezierVertex(143, 166, 130, 196, 100, 217); endShape(); translate(200, 0); scale(-1, 1); beginShape(); vertex(100, 100); bezierVertex(111, 115, 130, 130, 150, 130); bezierVertex(143, 166, 130, 196, 100, 217); endShape(); popMatrix(); } //the outer silver part { pushMatrix(); translate(-38, -88); fill(40, 79, 235); beginShape(); vertex(100, 110); bezierVertex(105, 121, 119, 135, 143, 137); bezierVertex(136, 170, 118, 199, 100, 206); endShape(); translate(200, 0); scale(-1, 1); beginShape(); vertex(100, 110); bezierVertex(105, 121, 119, 135, 143, 137); bezierVertex(136, 170, 118, 199, 100, 206); endShape(); popMatrix(); } //the blue part { pushMatrix(); translate(-38, -88); fill(255, 255, 255, 20); beginShape(); vertex(100, 90); bezierVertex(111, 108, 130, 124, 160, 124); bezierVertex(144, 186, 128, 208, 100, 227); endShape(); translate(200, 0); scale(-1, 1); beginShape(); vertex(100, 90); bezierVertex(111, 108, 130, 124, 160, 124); bezierVertex(144, 186, 128, 208, 100, 227); endShape(); popMatrix(); } //the glow }, width: 125, height: 142 }, //star shield icon { draw: function() { background(0, 0, 0, 0);//clear background pushMatrix(); translate(8, 27); //light purple glow noStroke(); for(var i = 0; i < 65; i++) { fill(43, 0, 155, i * -2 + 40); ellipse(20, 20, i * 3, i * 3); } //The black outer shell fill(0, 0, 0, 180); ellipse(20, 20, 25, 25); fill(43, 2, 133, 60); ellipse(35, 12, 10, 10); ellipse(26, 14, 8, 8); ellipse(19, 5, 5, 5); ellipse(30, 10, 5, 5); ellipse(27, 1, 7, 7); ellipse(38, 1, 3, 3); ellipse(33, -6, 4, 4); ellipse(38, -7, 2, 2); popMatrix(); }, width: 60, height: 72 }, //shadowBall design { draw: function() { background(38, 42, 71); //draw the sky noStroke(); rectMode(CORNER); //sky gradient for (var i = 0; i < 255; i++) { fill(0, 0, 0, 255 - i); rect(0, 0 + i, width, 1); } //mountains fill(110, 110, 110); triangle(32, height, 218, 157, 473, height); fill(82, 82, 82); triangle(208, height, 386, 128, 608, height); triangle(0, height, 135, 192, 342, height); fill(66, 66, 66); triangle(-149, height, 27, 126, 302, height); triangle(124, height, 282, 257, 460, height); triangle(width - 149, height, width + 27, 120, width + 302, height); filter(BLUR); //blur drawing fill(54, 54, 54); rect(0, 403, width, 165); //ground filter(BLUR, 2); //blur drawing //stars far away image(star, 307, 381, 35, 41); image(star, 199, 392, 45, 53); image(star, 107, 387, 29, 35); image(star, 177, 367, 25, 33); image(star, 157, 287, 25, 33); filter(BLUR); //blur drawing square(355, 426, 73, true, 0, 5); //draw Leslie image(star, 369, 404, 60, 66); //draw star image(purpleStar, 140, 330, 70, 70); image(yellowStar, 120, 360, 80, 80); image(pinkStar, 60, 300, 130, 130); image(deadTrees, 0, 0); //draw trees image(darkBall, 270, 160, 170, 200); //stars that are in the front image(star, 73, 158, 62, 69); image(star, 311, 125, 130, 148); image(star, 165, 292, 53, 59); image(star, 44, 411, 54, 61); image(star, 128, 427, 75, 88); image(star, 251, 426, 61, 69); //the biggest star image(star, 100, 154, 198, 205); //the biggest star's glow fill(171, 255, 207, 2); for (var i = 0; i < 46; i++) { ellipse(186, 218, i * 5 + 195, i * 6.4 + 200); } }, width: 500, height: 500 }, //menu background { draw: function() { background(0,0,0,0); glowText("Instructions", width/2, 44, 62); glowText("Use ARROW keys to move. Press UP to jump and\nDOWN to go down a block.\n\nCollect as many stars as you can, but be careful, the\nroad is not safe, and full of random holes in the ground.\n\nTry to avoid rocks, they stop you, but if you\never run into one, jump or press RIGHT key.\n\nDon't let colored stars trick you, they're dangerous, and\nwatch out for falling shadowballs. Beware of the Dark\nShadow behind you.\n\nStar shield will protect you from everything\n(even the hole) except the Dark Shadow.", width/2, height/2 + 20, 20); }, width: 500, height: 500 }, //help text { draw: function() { background(0,0,0,0); glowText("Credits", width/2, 44, 62); glowText("First, I want to thank Talha Muhib who helped me\nand encouraged me all the way to make this game,\n and I won't be exaggerating if I say that this game\nwould never have been half as good if it wasn't for him.\n\nSpecial Thanks To:\n\nM. Gh for the idea of making colored stars.\n\nScusX for player collisions.\n\nKendra Sorenson and Awesomecookie1000 for\ntheir support.\n\nElement118 for teaching me how to do a\nreal loading function.", width/2, height/2 + 30, 22); }, width: 500, height: 500 }, //credits text ]; // array of functions (that draws the image), and the image's size (put together as an object) var curIndex = curIndex \|\| 0; //used when drawing the images var loaded = loaded \|\| []; // array to store the loaded things var loadImages = function() { //if the current index is less than the array length of thingsTolad, draw the images if (curIndex < thingsToLoad.length) { thingsToLoad[curIndex].draw(); //draw the image loaded.push(get(0, 0, thingsToLoad[curIndex].width, thingsToLoad[curIndex].height)); //get the image, then add it to the loaded arary } //Assign these images earlier because they are used in other images as well if (curIndex === 3) { star = loaded[3]; } if (curIndex === 8) { deadTrees = loaded[8]; } if (curIndex === 11) { pinkStar = loaded[11]; } if (curIndex === 13) { yellowStar = loaded[13]; } if (curIndex === 16) { purpleStar = loaded[16]; } if (curIndex === 24) { darkBall = loaded[24]; } // Assign things in loaded to variables when all drawings are loaded if (curIndex === thingsToLoad.length) { block = loaded[0]; blockCorner = loaded[1]; rock = loaded[2]; mountains = loaded[4]; trees = loaded[5]; S_img = loaded[6]; and = loaded[7]; logoLight = loaded[9]; logoPic = loaded[10]; blueStar = loaded[12]; greenStar = loaded[14]; redStar = loaded[15]; goldenStar = loaded[17]; silverStar = loaded[18]; shadowBall = loaded[19]; tars = loaded[20]; hadow = loaded[21]; darkShadow = loaded[22]; starShield = loaded[23]; backgroundImg = loaded[25]; help = loaded[26]; credits = loaded[27]; hasLoaded = true; } else { curIndex++; //if there are still images to load, go to the next image } background(0); //background hiding the loaded images glowText("Loading images...", width / 2, height / 2, 25); glowText(round(curIndex / thingsToLoad.length * 100) + "%", width / 2, height / 2 + 40, 23); //write the percentage of loaded images }; /*Button Function/ var Button = function(x, y, w, h, txt, txtSize, nxt, animate, delay, direction) { this.x = x; //the buton's x position this.y = y; //y position this.w = w; //width this.h = h; //height this.txt = txt; //button's text this.txtSize = txtSize; //button's text size this.nxt = nxt; //the next scene this.b = 0; //the black shade's transperancy this.wh = 0; //the white glow's transperancy this.animate = typeof animate !== undefined ? animate : false; //if animate is not defined, set animate to false //if this.animate is true, set fluid motion to 1000, else set to 0 if (this.animate) { this.motion = 1000; } else { this.motion = 0; } //delay animation, if it's undefined, set to 0 this.delay = typeof delay !== undefined ? delay : 0; this.direction = direction; //direction of the animation, from left or right? this.t = 0; //timer for animation delay this.mouseIn = false; //is the mouse in? //arrays holding the x and y coordinates of the stars that appear while the mouse is over the button this.rx = []; this.ry = []; //add (push) random x to this.rx array and random y to this.ry array 5 times for (var i = 0; i < 5; i ++){ this.rx.push(random(this.x - this.w / 2 - random(15), this.x + this.w / 2 + random(15))); //set random x for the stars this.ry.push(random(this.y - this.h / 2 - random(10), this.y + this.h / 2 + random(10))); //set random y for the stars } }; Button.prototype.draw = function() { //constrain values so it doesn't go too much or too low this.b = constrain(this.b, -150, 0); this.wh = constrain(this.wh, 0, 155); //checks mouse collision if (mouseX > this.x - this.w / 2 && mouseX < this.x + this.w / 2 && mouseY > this.y - this.h / 2 && mouseY < this.y + this.h / 2 && this.motion <= 10) { this.mouseIn = true; //if it's in, set this.mouseIn to true } else { this.mouseIn = false; //otherwise, keep it false } //if the cursor is over the button if (this.mouseIn) { cursor(HAND); //change cursor to pointer this.b -= 5; //decrease the black shadow transperancy this.wh += 5; //increase the white glow //if clicked, activate transiton go to the next scene if (clicked) { trans.active = true; trans.next = this.nxt; } } else { //if the cursor is out of the button: this.wh -= 5; //decrease white glow this.b += 10; //increase shadow } pushMatrix(); //if the direction is reversed, button comes from the right, otherwise it comes from the left side if (this.direction === "reversed") { translate(this.motion, 0); } else { translate(-this.motion, 0); } textFont(times, this.txtSize); //text font and size //shadow fill(0, 0, 0, 250 + this.b); text(this.txt, this.x + 2, this.y + 3); //the white glowing part fill(224, 255, 255, 100 + this.wh); text(this.txt, this.x, this.y); popMatrix(); //animate button, divide this.motion by speed if time equals the delay amount if (this.t >= this.delay && this.motion > 1) { this.motion /= 1.05; } //draw the star in front of the text (that's why I made this.mouseIn in the first place) if (this.mouseIn) { //draw random stars over the button here, i is 1 for (var i = 0; i < this.rx.length; i ++){ image(star, this.rx[i], this.ry[i], 15, 15); //draw star at a random point //if the value of i equals the divided if (frameCount % (i + 4) === 0) { this.rx[i] = random(this.x - this.w / 2 - random(15), this.x + this.w / 2 + random(15)); //set random x this.ry[i] = random(this.y - this.h / 2 - random(10), this.y + this.h / 2 + random(10)); //set random y } } } this.t ++; //increase timer }; //store the buttons //start - how - credits - back to menu - story - menu var buttons = [ new Button(86, 304, 127, 58, "Start", 69, "Game", true, 40), new Button(138, 379, 110, 55, "How", 58, "How", true, 46), new Button(198, 440, 160, 55, "Credits", 55, "Credits", true, 52), new Button(430, 460, 100, 50, "Back", 40, "Menu"), new Button(420, 280, 110, 55, "Story", 53, "Story", true, 56, "reversed"), new Button(138, 379, 110, 54, "Menu", 50, "Menu"), new Button(338, 379, 190, 54, "Try Again", 50, "Game"), ]; /*Background Animation Variables/ var mx = 0; //the mountains' x coordinate var tx = 0; //the trees' x coordinate /*Player Data & Control/ var p = { x: 150, //player's x coordinate y: 300, //player's y coordinate previous: { x: 150, y: 300, }, //player's previous x and y coordinates, used for handling collisions (thanks to ScusX) w: 30, //player's width h: 30, //player's height xVel: 0, //player's x velocity yVel: 0, //player's y velocity speed: 1, //player's speed (block's speed) canJump: false, //is the player on the ground? closeEyes: false, //are the eyes closing? openEyes: false, //are the eyes opening? eyeLength: 13, //eye's height isDead: false, //is the player dead? score: 0, //player's score highscore: this.highscore \|\| 0, //player's highscore stars: 0, //number of stars collected totalStars: 0, //number of total stars collected coloredStars: 0, shield: false, shieldTime: 600, shieldTimer: 0, shieldCount: 0, /Draw the player/ draw: function() { if (!this.shield) { noStroke(); fill(0); rectMode(CORNER); //draw rectangle from corner, for collisions rect(this.x, this.y, this.w, this.h, 10); //draw the player rectMode(CENTER); //draw the eyes from center, because it's easier to animate //draw the eyes, they move according to y velocity fill(102); rect(this.x + 22, this.y + 12 + constrain(this.yVel, -2, 2), 5, this.eyeLength, 4); //right eye rect(this.x + 12, this.y + 12 + constrain(this.yVel, -2, 2), 5, this.eyeLength, 4); //left eye } else { square(this.x + 15, this.y + 15, 30, false, color(255), 8, constrain(this.yVel, -2, 2), color(0), this.eyeLength); } /closing eyes animation/ //Whenever the frameCount is divisible by 500, close its eyes if (frameCount % 500 === 0) { this.closeEyes = true; } //if the eyes are closing if (this.closeEyes) { //when the eyes aren't opening if (!this.openEyes) { this.eyeLength -= 0.5; //decrease the length //when the eyes are fully closed, open them if (this.eyeLength <= 1) { this.eyeLength = 1; this.openEyes = true; } } else { this.eyeLength += 0.5; //if the eyes are fully open, end the animation if (this.eyeLength >= 13) { this.eyeLength = 13; this.closeEyes = false; this.openEyes = false; } } } }, /Control and update the player/ update: function() { //set previous x and y, for collision purposes this.previous.x = this.x; this.previous.y = this.y; /Arrow/WASD keys control/ //if UP or W key is pressed if ((keys[UP]) && p.canJump) { this.yVel = -15; //decrease y velocity } //if LEFT or A key is pressed if (keys[65] \|\| keys[LEFT]) { this.xVel -= 0.3; } //if RIGHT or D key is pressed if (keys[68] \|\| keys[RIGHT]) { this.xVel += 0.3; } //increase gravity this.yVel += 0.5; //set the maximum speed for y velocity if (this.yVel > 13) { this.yVel = 13; } //increase x by its velocity this.xVel = constrain(this.xVel, -4, 4); this.x += round(this.xVel); //increase y by its velocity this.y += this.yVel; //prevents double jumping this.canJump = false; //restores x velocity to zero if (this.xVel > 0) { this.xVel -= 0.1; } if (this.xVel < 0) { this.xVel += 0.1; } //if the player goes out of the screen, it dies... dramatic music in the background if (this.y > height) { if (!this.shield) { this.isDead = true; } else { this.yVel = -20; } } //prevents the player from advancing too much (right) if (this.x > width - this.w) { this.x = width - this.w; } }, /reset all player data/ reset: function() { this.x = 150; this.y = 350; this.isDead = false; this.speed = 2; this.yVel = 0; this.xVel = 0; this.score = 0; this.stars = 0; this.coloredStars = 0; this.shield = false; this.shieldTimer = 0; this.shieldCount = 0; }, }; /*Collision Detect/ var collide = function(player, collideObj) { //detect collision, if it collides, then return true, else, return false return (player.x + player.w > collideObj.x && player.y + player.h > collideObj.y && player.x < collideObj.x + collideObj.w && player.y < collideObj.y + collideObj.h); }; /*Blcoks/ var Blocks = function(x, y, blockNum, roundCorners) { //the block's x and y coordinates this.x = x; this.y = y; //the width of the block, this.width is the actual length, multiplied by the blockNum, the number of block images used this.blockNum = blockNum; this.width = this.blockNum * 40; this.roundCorners = roundCorners; //are the corners rounded? //if the corners are round, add 80 to the whole length (because that means we're adding 2 more block images that has the width of 40) if (this.roundCorners) { this.w = this.width + 80; } else { this.w = this.width; } this.h = 25; //the height of the block var x = random(0, 1); //random number either one or zero, used when spawning the rocks this.randomTrueFalse = function() { if (x <= 0.5) { return true; } else { return false; } }; //if x is less than 0.5, return true, otherwise return false //rock object that stores its data this.rock = { x: random(40, this.width), //x coordinate, any number between 40 and the block's width y: this.y - this.h - 8, //y coordinate w: 34, //rock's width h: 34, //rock's height }; }; Blocks.prototype.draw = function() { imageMode(CORNER); //use for loop to put the block images together and draw a block for (var i = 0; i < this.width; i += 40) { //if the corners are round, add 40 to the blocks, to leave place for the blockCorner image if (this.roundCorners) { image(block, 40 + this.x + i, this.y, 40, 25); //draw the block image, also, change height to 25 } else { //else, if the corners are not rounded,draw the block image, without changing height (because I'll only use the not round cornered blocks for the ground) image(block, this.x + i, this.y); } } //draw the blockCorner images if the corners are rounded if (this.roundCorners) { image(blockCorner, this.x, this.y, 40, 25); //the left corner pushMatrix(); //translate to the end of the block and scale it so it's mirrored (because it's the other corner) translate(this.x + this.w, this.y); scale(-1, 1); image(blockCorner, 0, 0, 40, 25); //the right corner popMatrix(); } //here, if the randomTrueFalse is set to true (so the rocks don't show up on all blocks), and the corners are rounded (basically the ones used for if (this.randomTrueFalse() && this.roundCorners) { image(rock, this.rock.x + this.x, this.rock.y, this.rock.w, this.rock.h); //draw rock //if the distance (dist) between the player and the rock is less than 20, decrease the player's speed by its speed, making speed 0 if (dist(this.rock.x + this.x, this.rock.y, p.x, p.y) < 20 && !p.shield) { p.x -= p.speed; } } //first it checks if the player and the block collide, if it's coming from up, hold the player if (collide(p, this)) { if (p.previous.y + p.h <= this.y && this.roundCorners && !keys[DOWN]) { p.y = this.y - p.h; p.canJump = true; //player can jump, since it's on the ground p.yVel = 0; //set y velocity to 0 } else if(p.previous.y + p.h <= this.y && !this.roundCorners) { p.y = this.y - p.h; p.canJump = true; //player can jump, since it's on the ground p.yVel = 0; //set y velocity to 0 } } }; var blocks = []; //array that'll soon hold the Block objects var ground = [new Blocks(-30, 470, 11, false), new Blocks(390, 470, 11, false)]; //draw ground var blocksT = 45; //spawn blocks /*Stars/ var Stars = function(x, y) { this.x = x + 5; //star's x coordinates this.y = y + 5; //star's y coordinates this.w = 59 - 5; //star's width this.h = 72 - 5; //star;s height this.taken = false; //is the star taken? }; Stars.prototype.draw = function() { imageMode(CORNER); //draw image from corner, so whenever I use CENTER mode the image doesn't get affected image(star, this.x - 5, this.y - 5, this.w + 5, this.h + 5); //draw star //checks collision, if they collide, take the star (by setting this.taken to true) if (collide(p, this)) { this.taken = true; } }; var stars = []; //array that will hold the Star objects var shieldBar = 0; var barShine = 10; /*Colored Stars/ var ColoredStars = function(x, y) { this.x = x + 25; //x coordinates this.y = y; //y coordinates this.w = 39; //width this.h = 42; //height this.taken = false; //is the star taken by the player? this.images = [pinkStar, blueStar, yellowStar, greenStar, redStar, purpleStar, goldenStar, silverStar]; //array holding the images of the coloredStars this.img = round(random(7)); //a random whole number from 0 to 7, used to choose a random picture from this.images array }; ColoredStars.prototype.draw = function() { imageMode(CORNER); //draw image from corner image(this.images[this.img], this.x - 18, this.y - 18, this.w + 40, this.h + 40); //draw a random colored star image from this.images array //if the colored star and the player collide, take the star (by setting this.taken to true) if (collide(p, this)) { this.taken = true; } }; var coloredStars = []; //array that will hold the ColoredStars objects /*Shadow Balls/ var ShadowBall = function(x, y) { this.x = x; //x coordinate this.y = y; //y coordinate this.particles = []; //used to store the shadowball's particles //Use OOP to draw the particle (it's a single particle) this.Particle = function(px, py, pf, ps) { this.px = px; //the particle's x coordinate this.py = py; //the particle's y coordinate this.pf = pf; //the particle's fade amount this.ps = ps; //the particle's size }; //Draw Particle this.Particle.prototype.draw = function() { noStroke(); fill(10, 0, 10, this.pf); ellipse(this.px, this.py, this.ps, this.ps); //draw particle }; for(var i = 0; i < 16; i++) { this.particles.push(new this.Particle(this.x + random(-5, 5), this.y - (i * 13), random(30, 160), random(7))); //add (push) Particle objects to this.particles array } this.sl = random(0.1, 2); //the slope of the falling shadowballs }; ShadowBall.prototype.draw = function() { noStroke(); imageMode(CENTER); //Dark ball image(shadowBall, this.x + 10, this.y + 9, 75, 75); if (dist(p.x, p.y, this.x, this.y - 9) <= 20 && this.y > 55 && !p.shield) { p.isDead = true; } //loop through this.particles array for(var i = 0; i < this.particles.length; i++) { this.particles[i].draw(); //draw particle this.particles[i].py -= 2; //decrease y (go up) this.particles[i].pf -= 5; //decrease transperancy //when the particle is transparent if(this.particles[i].pf <= 0) { //start with another random x and y coordinates and random transparency this.particles[i].py = random(this.y - 18, this.y + 18); this.particles[i].px = random(this.x - 15, this.x + 15); this.particles[i].pf = random(30, 165); } } }; var shadowBalls = []; //store ShadowBall objects var shT = 170; //shadowBall spawn timer /*The Dark Shadow Following The Player/ var DarkShadow = function(x) { this.x = x; //x coordinates }; DarkShadow.prototype.draw = function() { imageMode(CORNER); //draw image from corner image(darkShadow, this.x, 0, 850, 500); if (this.x + 700 > p.x) { p.isDead = true; } }; var darkWall = new DarkShadow(-800); //initialize new darkShadow variable /*Game/ var gameUpdate = function() { /Draw Background Images/ imageMode(CORNER); //draw images from corner, so it's not affected when the mode is set to CENTER somewhere else //draw two images so when the one disappears the other shows up //mountains image(mountains, mx, 0); image(mountains, width + mx, 0); //trees image(trees, tx, -20, 600, 600); image(trees, width + tx, -20, 600, 600); //move the mountains image to the left mx -= 0.3 + p.speed / 10; //when the whole image is hidden, start over if (mx < -width) { mx = 0; } //move the trees image tx-= 1 + p.speed / 10; //when the whole image is hidden, start over if (tx < -width) { tx = 0; } //increase speed each time the current frame is divisible by 40 if (frameCount % 40 === 0 && p.speed < 8) { p.speed += 0.05; } //add blocks, stars, and colored stars each time the current frame is divisible by blocksT and decrease blocksT each time they are added if (frameCount % blocksT === 0 && blocks.length < 6) { blocks.push(new Blocks(width + random(10, 50), (round(random(1, 6)) * 70) - 10, round(random(1, 10)), true)); //add a new Block object to the blocks array with random y (multiplied by 70 so there are spaces between them), random x (make sure it's outside the canvas view by adding the canvas width), and rounded corners (the last parameter) //make sure blocksT is not too low (so the game is not too fast) if (blocksT > 7) { blocksT--; } } //if current frame is divisible by 20, add a star if (frameCount % 20 === 0 && stars.length < 5) { stars.push(new Stars(width + random(10, 50), (round(random(1, 5)) * 70) - 10)); //add or "push" (used to add stuff to an array) a new Star object, with random x and y } //if the current frame is divisible by 30, add a colored star if (frameCount % 30 === 0 && coloredStars.length < 2) { coloredStars.push(new ColoredStars(width + random(10, 50), (round(random(1, 3)) * 70) - 10)); //add a new ColoredStars object to the coloredStars array } //if frameCount is divisible by ShadowballTimer if (frameCount % shT === 0) { shadowBalls.push(new ShadowBall(random(0, 500), -50)); //add a new shadowBall shT = round(random(260, 400)); //randomize shadow timer, it causes two or more balls fall together } /Draw Blocks/ //loop through the blocks array, starting from the last element first it loops backwards to get rid of a flash that appears when using splice for (var i = blocks.length - 1; i >= 0; i--) { blocks[i].draw(); //draw block blocks[i].x -= p.speed; //move blocks to the left depending on speed //if the current block gets out of the view, remove the block if (blocks[i].x + blocks[i].w <= -10) { blocks.splice(i, 1); //delete the current block from the blocks array } } /// //loop through the stars array, the same way as the blocks array for (var i = stars.length - 1; i >= 0; i--) { stars[i].draw(); //draw the stars stars[i].x -= p.speed; //decrease x (move left) depending on speed //if a star is taken, remove the current star object and add score if (stars[i].taken \|\| stars[i].x < -30) { if (stars[i].taken) { p.score += 10; //add 10 to the player score p.stars ++; //add one to the star count if (!p.shield) { p.shieldCount ++; } } stars.splice(i, 1); //remove current star } } //loop through the coloredStars array for (var i = coloredStars.length - 1; i >= 0; i--) { coloredStars[i].draw(); //draw the colored stars coloredStars[i].x -= p.speed; //decrease x depending on speed //if a player catches a colored ball if(coloredStars[i].taken \|\| coloredStars[i].x < -30){ if (!p.shield && coloredStars[i].taken) { p.coloredStars ++; //add one to the coloredStarCount } coloredStars.splice(i, 1); //remove the current coloredStars from the array. } } //if coloredStarCount is more than 2 (three colored stars are taken), kill the player if (p.coloredStars > 3) { p.isDead = true; } //loop through the ground array for (var i = ground.length - 1; i >= 0; i--) { ground[i].draw(); //draw ground var hole = 40; //size of the gap ground[i].x -= p.speed; //let ground move according to player's speed //if ground is out of the canvas start over if (ground[i].x + ground[i].w < -hole) { ground[i].x = width + hole; } } //loop throgh the shadowBalls array for(var j = shadowBalls.length - 1; j >= 0; j --){ shadowBalls[j].draw();//draw ShadowBalls shadowBalls[j].y += 3; //increase y (since they're falling) //when the shadowBalls falls down the canvas, remove (splice) it from the array if(shadowBalls[j].y > 510){ shadowBalls.splice(j, 1); } } p.draw(); //draw player p.update(); //control player darkWall.draw(); //draw the shadow that's following the player //increase x of the shadow wall if(darkWall.x < -400 + 250 && !p.isDead && !p.shield) { darkWall.x += 0.05; } if (shieldBar < p.shieldCount 10 && !p.shield) { shieldBar += 2; barShine = 5; } else if (p.shield && shieldBar > 0) { shieldBar -= 0.25; barShine = 15; } rectMode(CORNER); imageMode(CORNER); strokeWeight(9); stroke(255, 255, 255, barShine); fill(255, 255, 255); rect(470, 350, 15, -300 * shieldBar/150 - 5); image(starShield, 460, 360, 40, 45); image(star, 460, 360, 40, 45); //Text for player status glowText("Score: " + p.score, 90, 50, 27); glowText("Highscore: " + p.highscore, 110, 90, 27); glowText("Stars Collected: " + p.stars, 110, 130, 27); glowText("Colored Stars: " + p.coloredStars + " / 4", 110, 170, 27); //when 10 stars are taken, activate shield mode if (p.shieldCount === 15) { p.shield = true; } //if the player is in shield mode, start shield timer if (p.shield) { p.shieldTimer ++; if (p.shieldTimer >= p.shieldTime) { //if the timer is larger than the shield time, end shield mode and reset shield data p.shield = false; p.shieldTimer = 0; p.shieldCount = 0; } } //if player's high score is less than the score, update highscore if (p.highscore < p.score) { p.highscore = p.score; } //runs when the player dies if (p.isDead) { if(darkWall.x <= -10) { darkWall.x += 10; } else { trans.active = true; //start transition trans.next = "Lose";//go to lose screen } } else { p.score++; //increase score } }; /*Logo/ var Logo = function() { this.motion = [100, 200, 100]; //fluid motion this.t = 255; //fading amount this.skip = false; //is logo skipped? this.finished = false; //is logo finished? this.n = 0; //for noise this.m = 1.2; //wind force this.fire = 0; //fire movement when the candle is blown out this.lit = true; //is the candle lit? }; Logo.prototype.draw = function() { imageMode(CENTER); rectMode(CORNER); pushMatrix(); scale(width / 400, height / 400); //scale to the desirable width and height //if the logo is not finished if (!this.finished) { noStroke(); fill(2, 36, 34); rect(0, 0, width, height); //if the candle is lit if (this.lit) { //draw light image(logoLight, 200 + sin((millis() / 30) * noise(this.n)) * this.m + this.fire, 131 + this.motion[0], 400 - this.fire * 3, 400 - this.fire * 7); pushMatrix(); translate(0, this.motion[0]); //for fluid motion //the orange part of the fire fill(255, 144, 59, 100); beginShape(); vertex(200, 143); bezierVertex(190, 145, 174, 131, 200 + this.fire + sin((millis() / 30) * noise(this.n)) * this.m, 110 + constrain(this.fire, 0, 20)); bezierVertex(226, 131, 210, 145, 200, 143); endShape(); //draw the white part of the fire fill(255, 255, 255, 70); beginShape(); vertex(200, 143); bezierVertex(204, 145, 183, 137, 200 + constrain(this.fire, 0, 22) + sin((millis() / 30) * noise(this.n)) * this.m, 121 + constrain(this.fire, 0, 14)); bezierVertex(217, 137, 196, 145, 200, 143); endShape(); popMatrix(); } //draw the candle image(logoPic, 200, 200 + this.motion[0]); //Logo Text textAlign(CENTER, CENTER); textFont(createFont("Times New Roman Bold Italic")); fill(232, 163, 44); textSize(103); text("C", 121, 312 + this.motion[1]); textFont(createFont("Times New Roman Italic")); fill(255, 156, 56); textSize(40); text("andlelight", 207, 316 + this.motion[1]); fill(255, 247, 158); textSize(25); text("programming", 207, 356 + this.motion[2]); popMatrix(); this.n += 0.01; //for noise this.m += 0.01; //increase wind //fading if (this.t > 1) { this.t -= 2; } /Here, I'm just dividing the number by its speed as long as the number is larger than 0.5 (to reduce unnecessary lag)/ //fluid motion timing //the candle if (this.motion[0] > 0.5) { this.motion[0] /= 1.05; //start first motion } //"Candlelight" if (this.t <= 1 && this.motion[1] > 0.5) { this.motion[1] /= 1.05; //if the fade in is complete, start motion } //"Programming" if (this.motion[1] < 5 && this.motion[2] > 0.5) { this.motion[2] /= 1.03; //when the second motion is finished, start next motion } //after the "programming part gets to its place, the fire is blown out if (this.motion[2] < 0.5) { this.fire += 30; if (this.fire > 75) { this.lit = false; //blow out the candle } } //if mouse is clicked, skip the logo if (clicked) { this.skip = true; } //if the logo is skipped, fade out if (this.skip) { this.t += 10; if (this.t > 305) { this.t = 305; this.finished = true; //finish the logo } } //when the candle is blown out, fade out if (this.fire >= 85) { if (this.t <= 10) { this.t = 150; } else { this.t += 10; } if (this.t > 855) { this.t = 255; this.finished = true; //finish logo } } } //if the logo is finished, fae in to the next scene (in this case, Main Menu) else { trans.active = true; trans.next = "Menu"; } //the black square for fading animation fill(0, 0, 0, 0 + this.t); rect(0, 0, width, height); }; var logo = new Logo(); //initialize a new Logo variable frameRate(63); //set frame rate to 63 frames per second var motion = [1000, 1000, 1000, 1000]; //used for fluid motion draw = function() { cursor(ARROW); //when the cursor is not over the button, cursor is normal background(0); //switch between scenes switch (scene) { case "Load": if (!hasLoaded) { loadImages(); //draw and load images } else { scene = "Logo"; //once all the images are loaded, change scene to Logo } break; case "Logo": logo.draw(); //draw Logo break; case "Menu": imageMode(CORNER); //draw image from corner, so it's not affected by CENTER mode used somewhere else image(backgroundImg, 0, 0); //draw background image //loop through the buttons array only the first three elements for (var i = 0; i < 3; i++) { buttons[i].draw(); //draw buttons } buttons[4].draw(); //Title images image(S_img, 0, 0 - motion[0]); image(tars, 106 + motion[1], 65, 143, 78); image(and, -13, -motion[2]); image(hadow, 120 + motion[2], 152, 250, 78); //fluid motion /Here, I'm just dividing the number by its speed as long as the number is larger than 1 (to reduce unnecessary lag)/ if (motion[0] > 1) { motion[0] /= 1.07; //as long as motion[0] is larger than 1, keep dividing it by 1.07 (speed) } if (motion[0] < 200 && motion[1] > 1) { motion[1] /= 1.1; //if the first motion is less than 200, start animation } if (motion[1] < 400 && motion[2] > 1) { motion[2] /= 1.1; //if the second motion is less than 400, start the third animation } break; case "Game": //in try, it checks if the code is right, if there's an error, run the code that are in catch try{ gameUpdate(); //run game code } catch(e){ //if there's an error, throw Oh Noes with the error throw{ message: "Something went wrong, please restart the program. If this is not the first time, reprot in the Tips & Thanks tab.", }; } break; case "Lose": imageMode(CORNER); //draw image from corner image(backgroundImg, 0, 0); //draw background rectMode(CORNER); fill(0, 0, 0, 130); //draw transparent black rect rect(0, 0, width, height); glowText("Score: " + p.score, 250, 100, 40); glowText("Highscore: " + p.highscore, 250, 150, 40); glowText("Stars Collected: " + p.stars, 250, 200, 40); buttons[5].draw(); buttons[6].draw(); if (clicked) { } break; case "How": image(backgroundImg, 0, 0); rectMode(CORNER); fill(0, 0, 0, 150); rect(0, 0, width, height); image(help, 0, 0); buttons[3].draw(); break; case "Credits": image(backgroundImg, 0, 0); rectMode(CORNER); fill(0, 0, 0, 150); rect(0, 0, width, height); image(credits, 0, 0); buttons[3].draw(); break; case "Story": image(backgroundImg, 0, 0); rectMode(CORNER); fill(0, 0, 0, 150); rect(0, 0, width, height); glowText("Story", width/2, 74, 62); glowText("Coming Soon. :)", width/2, height/2, 22); buttons[3].draw(); break; } if (trans.active) { noStroke(); rectMode(CORNER); (fill)(255 - trans.fade, 255 - trans.fade); rect(0, 0, width, height); if (!trans.out) { trans.fade -= 8; if (trans.fade < 1) { scene = trans.next; trans.fade = 1; trans.out = true; if(trans.next === "Game") { p.reset(); //reset player data blocksT = 45; blocks = []; stars = []; coloredStars = []; shadowBalls = []; shieldBar = 0; darkWall.x = -800; ground = [new Blocks(-30, 470, 11, false), new Blocks(390, 470, 11, false)]; } } } if (trans.out) { trans.fade += 8; if (trans.fade >= 255) { trans.fade = 255; trans.active = false; trans.out = false; } } } clicked = false; //always set back clicked to false }; //if key is pressed, check the key that's pressed keyPressed = function() { keys[keyCode] = true; }; //if key is released, reset keys array keyReleased = function() { keys[keyCode] = false; }; //once the mouse is released, clicked is set to true mouseReleased = function() { clicked = true; }; //poor editor, the canvas gets most of the attention while all work is done here... :\
Folds	44,51,62,115,120,174,176,284,293,1855,1859,1946,1950,1998,2000,2098,2102,2111,2120,2336,2340,2345,2349,2400,2402,2475,2484,2494,2496,2509,2517,2531,2533,2546,2552,2587,2589,2624,2631,2635,2637,2648,2654,2929,2933,2948,3139,3361
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgMzx4qC3CAw
Votes	225
Spin-Offs	6
Type	PJS
Width	500
Height	500
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Lin Gh.
Author Name	ammarLin
Author ID	kaid_378942875418356474240899
Author Profile Access	PUBLIC

Archive Data

Added	10 months ago, 1739369108611
Updated	10 months ago, 1739369118988
Source Deleted	unknown