Viewing Program

Program Data

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

Title	Circles
ID	4680135723745280
Created	7 years ago, 1522683494695
Updated	7 years ago, 1538273499871
Code	/** * Circles * Chester Banks * April 2 2018 * * If my on-screen graphic did not make sense, you are supposed to move with the arrow keys and match the smaller circles to their respective color. * * T&T SUGGESTION: Don't just tell me "nice" or "eh". Tell me WHY. Telling me that it is good or bad is not helpful if you don't tell me why! :) / / ----- Table of Contents ----- for the diligent code readers CONTENT LINE # Text settings ..... 37 Color scheme ...... 41 Basic variables ... 50 Mouse properties .. 58 Key properties .... 62 Title text......... 65 Incoming circles .. 109 Constructor.... 109 Prototype...... 147 Array.......... 232 Game scene ........ 235 Constructor.... 235 Prototype...... 275 Variable....... 492 (& 52) Draw function ..... 495 Event handlers..... 508 / / Text settings / textAlign(CENTER, CENTER); textFont(createFont('Avenir Light')); / Color scheme / var colors = [ color(222, 27, 76), // Red color(227, 68, 161), // Pink color(240, 116, 74), // Orange color(205, 209, 75) // Yellow // Feel free to mess with the above colors to make your own theme! ], / Basic variables / state = 'home', // There are two states to the program: 'home' (waiting for the game to start) or 'playing' (the game). game, // Define the game function early so I can call it anywhere score = 0, / Current score / highScore = 0, / Highest score / lives = 3, / Number of lives / / Mouse properties / clicked = false, // Is the mouse being clicked? overButton = false, // Is the mouse over a button? / Key properties / keys = [], // Which keys are being pressed? / Title text / titleText = function(x, y){ pushMatrix(); translate(x, y); noFill(); strokeWeight(2); stroke(255); // C arc(-96, 0, 30, 30, -315, -40); // I line(-68, -15, -68, 15); // R line(-48, -15, -48, 15); arc(-42, -2.5, 25, 25, -90, 90); line(-43, -15, -47, -15); line(-43, 10, -47, 10); line(-32, 15, -36, 9); // C arc(0, 0, 30, 30, -315, -40); // L line(30, -15, 30, 15); line(40, 15, 30, 15); // E line(55, -15, 55, 15); line(65, 15, 55, 15); line(65, -3, 55, -3); line(65, -15, 55, -15); // S (obviously the hardest letter to make.) beginShape(); vertex(92, -14); bezierVertex(80, -17, 78, -9, 84, -3); bezierVertex(104, 14, 84, 18, 80, 15); endShape(); popMatrix(); }, / Incoming circles: Constructor / Circle = function(){ // In here are the variables that each incoming circle needs. This way each circle can have its own properties. // Position this.angle = random(360); this.howFarOut = 300; // Appearance this.type = floor(random(4)); this.trans = 255; // Particles this.Particle = function(x, y, type){ this.x = x; this.y = y; this.trans = 200; this.type = type; this.sz = 15; }; this.Particle.prototype.draw = function() { // Pretty straightforward. Draw the particle, decrease its transparency and size until it is gone. (fill)(colors[this.type], this.trans); ellipse(this.x, this.y, this.sz, this.sz); this.trans /= 1.1; this.sz /= 1.05; }; this.Particles = []; // Status this.collected = false; this.rejected = false; }; / Incoming circles: Prototype / Circle.prototype.draw = function() { // Determine x and y coordinates. this.x = 200 + sin(this.angle) this.howFarOut; this.y = 200 + cos(this.angle) * this.howFarOut; // Create new particles every fifth frame if(frameCount % 5 === 0 && !this.rejected && !this.collected){ this.Particles.push(new this.Particle(this.x, this.y, this.type)); } // Draw particles for(var i = this.Particles.length - 1; i >= 0; i --){ this.Particles[i].draw(); // Delete particles if they are no longer visible if(this.Particles[i].trans < 1){ this.Particles.splice(i, 1); } } // What you can see of the circle noStroke(); (fill)(colors[this.type], this.trans); ellipse(this.x, this.y, 20, 20); // When the right arrow key is pressed, move the circle to the right by increasing its angle value. if(keys[RIGHT]){ this.angle += 2; } // When the left arrow key is pressed, move the circle to the right by decreasing its angle value. if(keys[LEFT]){ this.angle -= 2; } // Decrease the circle's distance from the center. this.howFarOut --; // Make the angle "wrap" so -2 would be 358, or 369 would be 9. if(this.angle < 0){ this.angle = 360; } if(this.angle > 360){ this.angle = 0; } // Determine which 'zone' the circle is in. Each zone is a quadrant of the canvas. Detect zones in this order: Bottom right, top right, top left, bottom left. if(this.angle > 0 && this.angle < 90){ this.zone = 0; } if(this.angle > 90 && this.angle < 180){ this.zone = 1; } if(this.angle > 180 && this.angle < 270){ this.zone = 2; } if(this.angle > 270 && this.angle < 360){ this.zone = 3; } // COLLISIONS! :o // If the circle is within 60 pixels of the center... if(this.howFarOut < 60){ // If the circle is not collected yet, but it is in the correct zone... if(!this.collected && this.zone === this.type){ score ++; // Increase the score game.jump = true; // Make the big circle 'bounce' this.collected = true; // It's been collected } // If the circle is not collected (so the circle is not in the correct zone) if(!this.collected){ lives --; // Decrease lives game.shakeColor = colors[this.type]; // Set color of the death rect to match the color of this circle. game.shake = 5; // Make the screen shake. this.rejected = true; // It's been rejected } } // Rejected animation if(this.rejected){ this.howFarOut += 2; // go the other way this.trans /= 1.1; // fade out } // Collected animation if(this.collected){ this.trans /= 1.1; // just fade out } }; /* Incoming circles: Array / var Circles = [], / Game scene: Constructor / Game = function(){ // Background this.r = 0; // rotation this.footerY = 0; // The y position of the footer // Random flashing rectangles this.randomRect = function(x, y){ // Find a random spot on the background. By finding a random integer* and then multiplying it, we can get a multiple of 15. this.x = 5 + floor(random(-12, 12)) * 15; this.y = 5 + floor(random(-12, 12)) * 15; this.type = floor(random(4)); // Color this.trans = 50; // Transparency this.sz = 15; // Size }; this.randomRect.prototype.draw = function() { // Draw the rectangle, and decrease its transparency. noStroke(); (fill)(colors[this.type], this.trans); rect(this.x, this.y, 15, 15); this.trans /= 1.05; }; this.randomRects = []; // Variables for the big circle's 'jump' or 'bounce' this.jump = false; // Is the circle bouncing? this.fat = 0; // The amount the circle should be scaled up by this.fatSpeed = 0.05; // The speed this.fat should increase by // Variables for the shake when a life is lost this.shake = 0; // The scale of the shake this.shakeColor = colors[0]; // Which color the flash should be // How long has the game been running? this.gameTimer = 0; }; /* Game scene: Prototype / Game.prototype.draw = function() { / Background / background(25); // dark backdrop // Place a random flashing rectangle every fifth frame. if(frameCount % 5 === 0){ this.randomRects.push(new this.randomRect()); } pushMatrix(); translate(200, 200); rotate(this.r); // So the background rotates when the keys are pressed. // The grid strokeWeight(1); stroke(255, 255, 255, 10); for(var i = -400; i < 400; i += 15){ line(i, -400, i, 400); line(-400, i, 400, i); } // Draw the rectangles for(var i = this.randomRects.length - 1; i >= 0; i --){ this.randomRects[i].draw(); // Delete the rectangles when they are no longer visible. if(this.randomRects[i].trans < 1){ this.randomRects.splice(i, 1); } } popMatrix(); // along with momMatrix() and babyMatrix() // Rotate the background according to the key presses. if(keys[RIGHT]){ this.r -= 2; } if(keys[LEFT]){ this.r += 2; } / The inner circle (that looks suspiciously like a beach ball) / pushMatrix(); translate(200 + random(-this.shake, this.shake), 200 + random(-this.shake, this.shake)); scale(1.0 + this.fat); noStroke(); // Draw the beach ball and its colored "glow" for(var i = 0; i < 4; i ++){ (fill)(colors[(i === 0 \|\| i === 2) ? i + 1 : i - 1], 30); // This uses a Ternary Operator - they're very useful, you should try using one! for(var j = 12; j < 27; j += 4){ arc(0, 0, 90 + j, 90 + j, (i 90) - 89, i * 90); // Glow } fill(colors[(i === 0 \|\| i === 2) ? i + 1 : i - 1]); arc(0, 0, 100, 100, (i * 90) - 89, i * 90); // Ball } // Shadow on ball fill(66, 22, 26, 10); for(var i = 0; i < 80; i += 6){ ellipse(7, 25, i, i); } // Highlight on ball fill(255, 255, 255, 13); for(var i = 0; i < 80; i += 6){ ellipse(-13, -7, i, i); } // Hearts textSize(21); for(var i = -1; i <= (lives - 2); i ++){ pushMatrix(); rotate(i * 20); // So the hearts are always centered if(lives === 2){ rotate(10); } if(lives === 1){ rotate(20); } // The actual hearts (fill)(colors[i + 1], 160); text('\u2665', 0, -72); popMatrix(); } // Would've used this if I wanted the high score text going around the beach ball. I took it out because it looked like too much was going on. /var myText = 'HIGH SCORE:' + highScore; pushMatrix(); for(var i = -myText.length / 2; i <= myText.length / 2; i ++){ pushMatrix(); rotate(11 + i 12); (fill)(255, 100); textSize(13); text(myText[i + myText.length / 2], 0, -69); popMatrix(); } popMatrix(); / if(state === 'playing'){ // Display score text if the game is being played fill(25); textSize(39); text(score, 0, 0); } else if (state === 'home'){ // Display play button if the game is not being played fill(245); triangle(-12, -21, -12, 21, 24, 0); // Button mechanics if(dist(mouseX, mouseY, 200, 200) < 50){ overButton = true; if(clicked){ state = 'playing'; this.jump = true; // make the beach ball bounce } } } popMatrix(); // The bounce/jump if(this.jump){ // this.fat increases at this.fatspeed, which gets smaller every frame. So, a frame by frame analysis of this.fat could look like: start, 0, 0.05, 0.09, 0.12, 0.14, 0.15, 0.14, 0.12, 0.09, 0.05, 0, reset. this.fat += this.fatSpeed; this.fatSpeed -= 0.01; // When the ball is done jumping, reset all the variables. if(this.fat < 0){ this.fat = 0; this.fatSpeed = 0.05; this.jump = false; } } // Count the frames since the game has started. if(state === 'playing'){ this.gameTimer ++; } // Add a new incoming circle every hundredth frame, roughly every 3 seconds. Only add new ones if the game is being played. if(frameCount % 100 === 0 && state === 'playing'){ Circles.push(new Circle()); } // Draw the circles for(var i = Circles.length - 1; i >= 0; i --){ Circles[i].draw(); // If the circle has faded out, delete it. if(Circles[i].trans < 1){ Circles.splice(i, 1); } } // Footer title fill(25); rect(0, 350 + this.footerY, 400, 50); // Draw the title text titleText(130, 375 + this.footerY); // High score text fill(235); textSize(16); text('HIGH SCORE: ' + highScore, 315, 375 + this.footerY); // Arrow key instructional diagram. Only show when the game is not being played or has only just started. if(this.gameTimer < 100){ noFill(); stroke(255, 255, 255, (80 - this.gameTimer) + sin(frameCount 2) * 80); rect(300, 185, 40, 40); rect(300, 225, 40, 5); rect(60, 185, 40, 40); rect(60, 225, 40, 5); fill(255, 255, 255, (80 - this.gameTimer) + sin(frameCount * 2) * 80); textSize(21); text('\u2192', 320, 205); text('\u2190', 80, 205); } // The DEATH FLASH :o noStroke(); (fill)(this.shakeColor, this.shake * 50); rect(0, 0, 400, 400); // Make the shaking get smaller and smaller this.shake /= 1.1; // If the current score beats the high score, the high score is set as the current score. if(score > highScore){ highScore = score; } // Move the footer this.footerY += ((state === 'home' ? 0 : 50) - this.footerY) / 15; // When the player has lost... if(lives <= 0 && state !== 'home'){ // Make all the circles fade out for(var i = Circles.length - 1; i >= 0; i --){ Circles[i].collected = true; } // Reset all game variables this.gameTimer = 0; lives = 3; score = 0; // Go home state = 'home'; } }; /* Game scene: Variable (pre-declared) / game = new Game(); / Draw function / draw = function() { // Draw the game game.draw(); // Set the cursor cursor(overButton ? 'pointer' : 'default'); // Reset mouse properties overButton = false; clicked = false; }; / Event handlers */ keyPressed = function(){ keys[keyCode] = true; }; keyReleased = function(){ keys[keyCode] = false; }; mouseClicked = function(){ clicked = true; };
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgMKa8JGoCAw
Votes	229
Spin-Offs	13
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, 1739366306354
Updated	10 months ago, 1739366306354
Source Deleted	unknown