Viewing Program

Program Data

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

Title	Multi Click
ID	4619327133
Created	9 years ago, 1460945463976
Updated	9 years ago, 1461089283621
Code	/** * Multi Click * By Chester Banks * April 17 2016 * * Thanks to my subscribers! * This program's LUCKY SUBSCRIBER is BANANA PEEL! Check out this friendly programmer's awesome programs here: khanacademy.org/profile/BananaPeel123 * Subscribe to me here: khanacademy.org/cs/subscribe/4790207744704512 / / Instructions: The point of the game is to survive as long as possible. Hit the mouse button (or tap the screen if on mobile) to switch a ball's direction. Avoid the edges and bombs. Then enjoy! It's THAT simple! / var PLAYER_SPEED = 0.5; / The scene, score, and graphics scheme (which can be changed in settings) / var scene = "Logo"; var score = 0; var scheme = 0; / A variable that does the same thing as mouseClicked(), but can be used in if statements and in functions / var clicked = false; / Set the text font and align the text & rects / textFont(createFont("Trebuchet MS")); textAlign(CENTER, CENTER); rectMode(CENTER); / For the rainbow background / var textureRects = []; for(var i = 0; i < width; i += 20){ for(var j = 0; j < height; j += 20){ textureRects.push({x: i, y: j, hue: (i+j)%255}); } } / Circle to circle collision code / var circleCollide = function(a, b){ if(dist(a.x, a.y, b.x, b.y) < ((a.w+a.h)/2 + (b.w+b.h)/2)/2){ return true; } }; / Everything about the 5 dudes / var dude = function(y){ this.x = random(100, 300); this.y = y; this.w = 30; this.h = 30; this.possibleSpeeds = [-PLAYER_SPEED, PLAYER_SPEED]; this.speed = this.possibleSpeeds[floor(random(0, this.possibleSpeeds.length))] + random(-0.2, 0.2); this.possibleHues = [ color(222, 44, 44), color(38, 111, 171), color(119, 24, 196), color(221, 224, 22), color(20, 199, 58), color(230, 134, 25), ]; this.hue = this.possibleHues[floor(random(0, this.possibleHues.length))]; }; dude.prototype.draw = function() { strokeWeight(1); stroke(0, 0, 0, 50); noFill(); if(mouseY > this.y-40 && mouseY < this.y+40){ fill(0, 0, 0, 50); } rect(width/2, this.y, width, 80); pushMatrix(); translate(this.x, this.y); pushMatrix(); translate(0, 25); rotate(atan2(this.y, this.x - 200)); fill(105, 54, 0); for(var i = 0; i < 220; i += 5){ strokeCap(SQUARE); strokeWeight(5); stroke(0, 0, 0, 105 - i); line(i, 15, i, -15); } noStroke(); popMatrix(); colorMode(HSB); fill(this.hue); ellipse(0, 25, 30, 30); colorMode(RGB); fill(0, 0, 0, 30); arc(0, 25, 30, 30, -90, 90); fill(0, 0, 0); if(this.speed < 0){ ellipse(-8, 30, 3, 5); ellipse(-2, 30, 3, 5); } else { ellipse(8, 30, 3, 5); ellipse(2, 30, 3, 5); } popMatrix(); this.x += this.speed; if(/this.x > width - 15 \|\| this.x < 15 \|\| /clicked && mouseY > this.y-40 && mouseY < this.y+40){ this.speed = -this.speed; } if(this.x > width - 15 \|\| this.x < 15){ scene = "Lose"; } }; var dudes = [ new dude(40), new dude(120), new dude(200), new dude(280), new dude(360), ]; / Everything about the falling bombs / var bomb = function(){ this.x = random(400); this.y = random(-400, -800); this.speed = random(1, 3); this.w = 30; this.h = 30; }; bomb.prototype.draw = function() { if(this.y > 0){ pushMatrix(); translate(this.x, this.y); pushMatrix(); translate(0, 25); rotate(atan2(this.y, this.x - 200)); for(var i = 0; i < 220; i += 5){ strokeCap(SQUARE); strokeWeight(5); stroke(0, 0, 0, 105 - i); line(i, 15, i, -15); } noStroke(); popMatrix(); noStroke(); fill(64, 64, 64); rect(0, 8, 10, 5); ellipse(0, 25, 30, 30); fill(0, 0, 0, 30); arc(0, 25, 30, 30, -90, 90); strokeWeight(2); stroke(238, 255, 0); beginShape(); vertex(0, 5); vertex(5, 0); //vertex(10, 2); endShape(); popMatrix(); } else { strokeWeight(3); stroke(179, 179, 38); fill(235, 235, 52); rect(this.x, 30, 30, 30, 5); fill(0); textSize(25); text("!", this.x, 30); } for(var i in dudes){ if(circleCollide(this, dudes[i])){ scene = "Lose"; } } this.y += 5; }; var bombs = []; / Button function, prototype & array / var button = function(x, y, txt, w, h, n, tSize, settings){ this.x = x; this.y = y; this.txt = txt; this.trans = 20; this.tSp = 20; this.txtColor = 255; this.w = w; this.h = h; this.n = n; this.tSize = tSize; this.settings = settings; }; button.prototype.draw = function() { stroke(255); // White stroke strokeWeight(2); // Thin stroke fill(255, 255, 255, this.trans); // Fill it white with the current transparency (20) (rect)(this.x, this.y, this.w, this.h, 0, 15, 0, 15); // Draw button this.trans += this.tSp; // Transparency rising with the transparency speed (which is -20) fill(this.txtColor, this.txtColor, this.txtColor); // Text color this.txtColor -= this.tSp; // Text color decreasing with the transparency speed (which is -20) textSize(this.tSize); // Text size text(this.txt, this.x, this.y); / Checks if mouse is in button / 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.tSp = 10; // If mouse is in button, then set transparency speed to +10 if(clicked){ // If mouse is clicked, this.trans = 0; // Transparency is zero this.txtColor = 255; // Text color is white if(this.txt === "PLAY AGAIN"){ score = 0; dudes = [ new dude(40), new dude(120), new dude(200), new dude(280), new dude(360), ]; bombs = []; } if(this.settings){ scheme = this.n; } else { scene = this.n; // And we're off the current page. } } } else { // If mouse isn't in button this.tSp = -10; // Set transparency speed to -10 this.txtColor = 255; // And text color to white } if(this.trans > 255){ // If transparency is any more than 255, this.trans = 255; // Then it will return back to 255. } if(this.trans < 20){ // If transparency is any less than 20, this.trans = 20; // Then it will return back to 20. } }; var buttons = [ new button(200, 240, "START", 180, 60, "Play", 30), new button(200, 300, "INSTRUCTIONS", 180, 40, "How", 20), new button(200, 350, "SETTINGS", 180, 40, "Settings", 20), new button(60, 370, "BACK", 50, 20, "Home", 13), new button(200, 325, "PLAY AGAIN", 180, 60, "Home", 20), new button(200, 100, "NORMAL", 180, 60, 0, 20, true), new button(200, 200, "DARK", 180, 60, 1, 20, true), new button(200, 300, "RAINBOW", 180, 60, 2, 20, true), ]; / The three backgrounds, depending on the scheme variable / var BG = function(){ switch(scheme){ case 1: for(var i = 0; i < width+5; i += 5){ strokeWeight(5); stroke(lerpColor( color(0, 0, 0), color(61, 61, 61), i/height)); line(i, 0, i, height); } for(var i = -250; i < 275; i += 100){ pushMatrix(); translate(width/2, height/2); rotate(15); strokeWeight(10); stroke(255, 255, 255, 60); line(-250, i, 250, i); line(i, -250, i, 250); noStroke(); fill(255, 255, 255, 30); for(var j = -250; j < 250; j += 100){ triangle(i, j, i, j+100, i-100, j); } popMatrix(); } break; case 2: for(var i in textureRects){ colorMode(HSB); noStroke(); fill(textureRects[i].hue, 205, 100); rect(textureRects[i].x+10, textureRects[i].y+10, 20, 20); colorMode(RGB); } break; default: for(var i = 0; i < width+5; i += 5){ strokeWeight(5); stroke(lerpColor( color(10, 140, 123), color(12, 173, 93), i/height)); line(i, 0, i, height); } for(var i = -250; i < 275; i += 100){ pushMatrix(); translate(width/2, height/2); rotate(15); strokeWeight(10); stroke(255, 255, 255, 60); line(-250, i, 250, i); line(i, -250, i, 250); noStroke(); fill(255, 255, 255, 30); for(var j = -250; j < 250; j += 100){ triangle(i, j, i, j+100, i-100, j); } popMatrix(); } break; } }; / The Chester Banks logo / var logoFinish = -100; var logo = function(x, y, sz){ var logoColors = [ color(17, 67, 138), color(87, 156, 217), color(56, 179, 255), color(69, 192, 230), ]; pushMatrix(); translate(x, y); scale(sz); noFill(); strokeCap(SQUARE); stroke(0, 0, 0, 30); strokeWeight(30); arc(10, 20, 160, 160, 30, 330); strokeWeight(11); // Outer layer stroke(logoColors[0]); arc(0, 0, 200, 200, -85, -30); arc(0, 0, 180, 180, -75, -30); arc(0, 0, 200, 200, -300, -240); arc(0, 0, 180, 180, -285, -250); stroke(logoColors[1]); arc(0, 0, 200, 200, -125, -85); arc(0, 0, 180, 180, -115, -75); arc(0, 0, 200, 200, -200, -160); arc(0, 0, 180, 180, -200, -150); stroke(logoColors[2]); arc(0, 0, 200, 200, -160, -125); arc(0, 0, 180, 180, -150, -116); arc(0, 0, 200, 200, -330, -300); arc(0, 0, 180, 180, -330, -286); stroke(logoColors[3]); arc(0, 0, 200, 200, -240, -200); arc(0, 0, 180, 180, -250, -200); // Inner layer stroke(logoColors[0]); arc(0, 0, 160, 160, -200, -160); arc(0, 0, 140, 140, -200, -150); stroke(logoColors[1]); arc(0, 0, 160, 160, -300, -240); arc(0, 0, 140, 140, -285, -250); stroke(logoColors[2]); arc(0, 0, 160, 160, -240, -200); arc(0, 0, 140, 140, -250, -200); arc(0, 0, 160, 160, -125, -85); arc(0, 0, 140, 140, -115, -75); stroke(logoColors[3]); arc(0, 0, 160, 160, -85, -30); arc(0, 0, 140, 140, -75, -30); arc(0, 0, 160, 160, -330, -300); arc(0, 0, 140, 140, -330, -286); arc(0, 0, 160, 160, -160, -125); arc(0, 0, 140, 140, -150, -116); stroke(0, 0, 0, 50); strokeWeight(20); arc(0, 0, 150, 150, 30, 330); popMatrix(); }; / The draw function / draw = function() { if(scene === "Logo"){ background(255, 255, 255); for(var i = 0; i < 360; i += 24){ for(var j = 0; j < 360; j += 61){ pushMatrix(); noStroke(); translate(200, 200); rotate(frameCount2); rotate(i); fill(0, 187, 255, -j + 200); arc(0, -325 + j, 100, 77, -307, 16); popMatrix(); } } logo(200, 200, 1 + sin(frameCount20)/40); noStroke(); fill(255, 255, 255, logoFinish); rect(200, 200, 405, 405); logoFinish += 7; if(logoFinish > 270){ scene = "Home"; } } // The logo if(scene === "Home"){ / The background and title / BG(); textSize(100); textLeading(55); for(var angle = 0; angle < 360; angle += 40){ fill(0, 0, 0, 20); if(scheme === 1){fill(0, 255, 247, 40);} text("multi \n click", sin(angle)10 + 200, cos(angle)10 + 100); fill(0, 0, 0); //text("game \n name", sin(angle)3 + 200, cos(angle)3 + 100); } fill(255, 255, 255); text("multi \n click", width/2, 100); / Draw the start, instructions, and settings buttons / buttons[0].draw(); buttons[1].draw(); buttons[2].draw(); } // The home page if(scene === "How"){ BG(); // The background / The instructions / fill(25); if(scheme === 1){ fill(133, 228, 245); } textSize(40); text("How to Play", 200, 50); // Title strokeWeight(2); stroke(25); line(90, 75, 310, 75); // Underline textSize(15); text("he point of the game is to survive as long\nas possible.\n\nit the mouse button or tap the screen to\nchange a ball's direction.\n\nvoid the edges and the falling bombs.\n\nhen enjoy!\n\nIt's THAT simple!", 200, 220); // Instructions textSize(24); / Make the THAT text bigger than the rest / text("T", 57, 135); text("H", 57, 187); text("A", 67, 237); text("T", 160, 271); buttons[3].draw(); // The back button } // The instructions page if(scene === "Settings"){ / The background / BG(); / The schemechanger buttons / buttons[5].draw(); buttons[6].draw(); buttons[7].draw(); / The back button / buttons[3].draw(); } // The settings page if(scene === "Play"){ / If the frameCount went back to 0 every time it reached 500, when it was 250 make a new bomb. / if(frameCount % 500 === 250){ bombs.push(new bomb()); } / The background / BG(); / The large score in the background / fill(0, 0, 0, 60); if(scheme === 1){ fill(0, 238, 255, 150); } textSize(55); text(score.toFixed(0), 200, 200); // .toFixed(0) makes it rounded to 0 decimals. If I had the 0 changed to a 2, than it would be rounded to 2 decimals. / Draw the 5 dudes and the bombs / for(var i in bombs){ bombs[i].draw(); } for(var i in dudes){ dudes[i].draw(); } / Increase the score by 1 about every 3 seconds / score += 0.01; } // The game if(scene === "Lose"){ / The background / BG(); / The final score / fill(255); textSize(30); text("your final score was:", 200, 100); textSize(150); text(score.toFixed(0), 200, 200); / The play again button / buttons[4].draw(); } // The lose page clicked = false; }; / The clicked variable inside the mouseClicked function */ mouseReleased = function(){ clicked = true; };
Folds	61,79,80,126,127,133,136,143,144,190,194,206,207,250,251,262,265,327,331,392,396,418,419,438,439,461,462,473,475,502,503,516
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIUCxIKU2NyYXRjaHBhZBidrdWaEQw
Votes	444
Spin-Offs	14
Type	PJS
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Chester Banks
Author Name	chesterbanks
Author ID	kaid_910220310264858588057640
Author Profile Access	PUBLIC

Archive Data

Added	10 months ago, 1739288354737
Updated	8 months ago, 1744828262116
Source Deleted	unknown