Viewing Program

Program Data

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

Title	Marbles [Beta]
ID	6447553690861568
Created	10 years ago, 1447195442350
Updated	10 years ago, 1447255904224
Code	/** * Marbles * by SimplifiedBanana101 * Started Tuesday, November 3, 2015 * Beta Version Released November 10, 2015 * Inspired by Scratch project "Marbles", by Scratch user Silverdroid: * https://scratch.mit.edu/projects/58915178/ * Thanks to Chester Banks for showing me this user. ;) * * INSTRUCTIONS: * * Use the left and right arrow keys to move your cup. Catch the white marbles, avoid the red. You have three lives; try to survive as long as possible! Have fun! * * CREDITS: * * - Bob Lyon (@boblyon) for polygon and circle collision functions: * https://www.khanacademy.org/cs/-/5567955982876672 * - Larry Serflaten (@LarrySerflaten) for fixing a bug with changing states * - Jake (@bookworm1202) for fixing the click-and-restart bug * * NOTES: * - This is a beta version. There will definitely be some minor bugs, and some room for improvement with graphics (Ex: fading transition between play and lose) * - Post highscores under the tips & thanks post by me. Please give a link to a spin-off so I can look at your screenshot for proof. * - Post bugs under the tips & thanks post by me. I will add them to this list: * @BUGS: * - Every time you click, the marbles disappear (FIXED -- credit to Jake) * - Red marbles make you lose a life no matter what you do (not fixed) * - * @TODO: * - Fix bugs * - Add high scores */ var WHITE = color(255, 255, 255); var BLACK = color(0, 0, 0); var BLUE = color(0, 161, 235); var LIGHT_RED = color(255, 94, 94); var CUP_COLOR = WHITE; var BACKGROUND_COLOR = BLUE; var MARBLE_GOOD_COLOR = WHITE; var MARBLE_BAD_COLOR = LIGHT_RED; var keys = []; keyPressed = function() { keys[keyCode] = true; }; keyReleased = function() { keys[keyCode] = false; }; var fps = 60; { var coords2Points = function(x1, y1) { var i, j, points = []; for (i = j = 0; i < arguments.length; j++) { points[j] = { x: arguments[i++], y: arguments[i++] }; } return points; }; var isInPolygon = function(x, y, poly) { var isIn = false; for (var i = 0, j = poly.length - 1; i < poly.length; j = i++) { var xi = poly[i].x, yi = poly[i].y; var xj = poly[j].x, yj = poly[j].y; var intersect = yi > y !== yj > y && x < (xj - xi) (y - yi) / (yj - yi) + xi; if (intersect) { isIn = !isIn; } } return isIn; }; var isBetween = function(c, a, b) { return (a - c) * (b - c) <= 0; }; var isInCircle = function(x, y, cx, cy, diam) { var dx = x - cx; var dy = y - cy; return dx * dx + dy * dy <= diam * diam / 4; }; var lineCircleCollide = function(x1, y1, x2, y2, cx, cy, diam) { var m = (y2 - y1) / (x2 - x1); if (abs(m) > 1024) { return lineCircleCollide(y1, x1, y2, x2, cy, cx, diam); } if (isInCircle(x2, y2, cx, cy, diam)) { return true; } x1 -= cx; x2 -= cx; y1 -= cy; y2 -= cy; var r = diam * diam / 4; var k = y1 - m * x1; var a = (1 + m * m) / r; var b = 2 * m * k / r; var c = k * k / r - 1; var discrim = b * b - 4 * a * c; if (discrim < 0) { return false; } discrim = sqrt(discrim); a = 2; return isBetween((-b - discrim) / a, x1, x2) \|\| isBetween((-b + discrim) / a, x1, x2); }; var polygonCircleCollide = function(poly, cx, cy, diam) { var collide = isInPolygon(cx, cy, poly); for (var i = 0, j = poly.length - 1; !collide && i < poly.length; j = i, i++) { collide = lineCircleCollide(poly[j].x, poly[j].y, poly[i].x, poly[i].y, cx, cy, diam); } return collide; }; } // Polygon and circle collision functions, HUGE credit goes to Bob Lyon's "Handbook of Collisions and Interiors" : // https://www.khanacademy.org/cs/-/5567955982876672 // Thank you, Bob! var state = "mainMenu"; var name = "Marbles"; // Don't you dare. var creator = "SimplifiedBanana101"; var font = "Century Gothic"; textFont(createFont(font)); var score = 0; var highScore = 0; var lives = 3; var marbles = []; var marbleRate = 6; var firstGoodMarbles = 4; var Marble = function(x, y, r, goodColor, badColor, good) { this.x = x; this.y = y; this.r = r; this.goodColor = goodColor; this.badColor = badColor; this.good = good; this.speed = 2; this.hasCollided = false; this.hasAdded = false; }; Marble.prototype.move = function() { this.y += this.speed; }; Marble.prototype.draw = function() { noStroke(); if (this.good) { fill(this.goodColor); // I know I could just do `else`, but I'm just making sure nothing crazy happens and `this.good` is neither `true` nor `false`... :P } else if (!this.good) { fill(this.badColor); } ellipse(this.x, this.y, this.r 2, this.r * 2); }; Marble.prototype.display = function() { this.draw(); this.move(); }; var Cup = function(x, y, w, h, slopeSpacing, color) { this.x = x; this.y = y; this.w = w; this.h = h; this.slopeSpacing = slopeSpacing; this.color = color; this.xVel = 0; this.speed = 1; this.maxVel = 8; this.border = width/20; }; Cup.prototype.collidedWithMarble = function(marble) { return polygonCircleCollide(coords2Points(this.x, this.y, this.x + this.w, this.y, this.w - this.slopeSpacing, this.y + this.h, this.x + this.slopeSpacing, this.y + this.h), marble.x, marble.y, marble.r * 2); }; Cup.prototype.move = function() { if (keys[RIGHT]) { if (this.xVel < this.maxVel) { this.xVel += this.speed; } } if (keys[LEFT]) { if (this.xVel > -this.maxVel) { this.xVel -= this.speed; } } if (!keyIsPressed) { if (this.xVel !== 0) { if (this.xVel > 0) { this.xVel -= this.speed / 2; } else if (this.xVel < 0) { this.xVel += this.speed / 2; } } } this.x += this.xVel; this.x = constrain(this.x, -this.w + this.border, width - this.border); }; Cup.prototype.draw = function() { noStroke(); fill(this.color); pushMatrix(); translate(this.x + (this.w / 2), this.y + (this.h / 2)); rotate(this.xVel); quad(-this.w / 2, -this.h / 2, this.w / 2, -this.h / 2, (this.w - this.slopeSpacing) - this.w / 2, this.h / 2, this.slopeSpacing - this.w / 2, this.h / 2); popMatrix(); }; Cup.prototype.display = function() { this.draw(); this.move(); }; var cup = new Cup(width/2 - (width/12), height - (height/5), min(width/6, height/6), min(width/6, height/6), width/25, CUP_COLOR); var Play = function(x, y, r) { this.x = x; this.y = y; this.r = r; }; Play.prototype.mouseInside = function() { return dist(mouseX, mouseY, this.x, this.y) < this.r; }; Play.prototype.draw = function() { noStroke(); fill(red(BLACK), green(BLACK), blue(BLACK), 100); arc(this.x, this.y, this.r * 2, this.r * 2, -45, 135); fill(red(BLACK), green(BLACK), blue(BLACK), 50); arc(this.x, this.y, this.r * 2, this.r * 2, -225, -45); if (state === "mainMenu") { if (this.mouseInside()) { fill(red(BLACK), green(BLACK), blue(BLACK), 50); ellipse(this.x, this.y, this.r * 2, this.r * 2); cursor(HAND); mouseClicked = function() { if (state === "mainMenu") { marbles = []; score = 0; lives = 3; cup.x = width/2 - (width/12); cup.xVel = 0; state = "play"; } }; } else if (!this.mouseInside()) { cursor(); } } fill(WHITE); triangle(this.x - this.r / 3, this.y - this.r / 2, this.x + this.r / 2, this.y, this.x - this.r / 3, this.y + this.r / 2); }; var playButton = new Play(width/2, height * 3/4, min(width/8, height/8)); var logoX = width/2 - min(width/12, height/12); var logoCup; var logo = function(x, y, w, h, color, rot) { logoCup = new Cup(x, y, w, h, width/25, color); logoCup.xVel = rot; logoCup.draw(); fill(color); ellipse(x + w, y - (h - (height/40)), min(width/16, height/16), min(width/16, height/16)); }; var titleX = width; var playX = width * 2; var authorHSOpacity = 0; var title = function(x, y, size) { fill(WHITE); textAlign(CENTER, CENTER); textSize(size); text(name.toLowerCase(), x, y); }; var displayAuthor = function(x, y, size) { fill(red(WHITE), green(WHITE), blue(WHITE), authorHSOpacity); textAlign(LEFT, BASELINE); textSize(size); text("A game by " + creator, x, y); }; var displayHighScore = function(x, y, size) { fill(red(WHITE), green(WHITE), blue(WHITE), authorHSOpacity); textAlign(RIGHT, BASELINE); textSize(size); text("High Score: " + highScore, x, y); }; var displayScore = function(x, y, size) { fill(WHITE); textAlign(CENTER, CENTER); textSize(size); text(score, x, y); }; var displayLives = function() { for (var i = 0; i < lives; i++) { fill(MARBLE_GOOD_COLOR); ellipse(width - (i * width/16 + min(width/20, height/20)), min(width/20, height/20), min(width/20, height/20), min(width/20, height/20)); } }; var createMarbles = function() { if ((frameCount / (fps / 10)) % marbleRate === 0) { var newMarble = new Marble(floor(random(width/10, (width - (width/10)) + 1)), height/4, min(width/20, height/20), MARBLE_GOOD_COLOR, MARBLE_BAD_COLOR, floor(random(0, 2)) === 0 ? true : false); if (marbles.length < firstGoodMarbles) { newMarble.good = true; } marbles.push(newMarble); } }; var displayMarblesAndOtherStuff = function() { for (var i = 0; i < marbles.length; i++) { if (cup.collidedWithMarble(marbles[i])) { marbles[i].hasCollided = true; } if (!marbles[i].hasCollided) { marbles[i].display(); } else if (marbles[i].hasCollided) { if (!marbles[i].hasAdded) { if (marbles[i].good) { score++; marbles[i].hasAdded = true; } else { if (lives > 1) { lives--; } else if (lives === 1) { titleX = width; playX = width * 2; if (score > highScore) { highScore = score; } state = "mainMenu"; } marbles[i].hasAdded = true; } } } } }; var mainMenu = function() { logo(logoX + (width/2 - min(width/12, height/12)), height/4.5, min(width/8, height/8), min(width/8, height/8), WHITE, 10); title(titleX + width/2, height/2, min(width/4, height/4)); playButton.x = playX + width/2; playButton.draw(); displayAuthor(5, height - 5, min(width/30, height/30)); displayHighScore(width - 5, height - 5, min(width/30, height/30)); logoX -= logoX / 6; titleX -= titleX / 6; playX -= playX / 6; if (authorHSOpacity < 255) { authorHSOpacity++; } }; var play = function() { cup.display(); createMarbles(); displayMarblesAndOtherStuff(); displayScore(width/2, min(width/10, height/10), min(width/8, height/8)); displayLives(); }; var game = function() { background(BACKGROUND_COLOR); switch (state) { case "mainMenu": mainMenu(); break; case "play": play(); break; } }; frameRate(fps); draw = function() { game(); };
Folds	44,46,47,49,53,118,138,154,155,157,158,168,169,172,174,192,193,195,196,219,220,229,230,233,237,242,243,245,246,281,289,297,303,309,311,317,319,325,327,333,335,341,343,353,355,383,385,398,400,406,408,419,423,425
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgKibwYC6Cww
Votes	170
Spin-Offs	5
Type	PJS
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	SimplifiedBanana101
Author Name	SimplifiedB
Author ID	kaid_1162013241964895044354096
Author Profile Access	COACH

Archive Data

Added	10 months ago, 1739458003758
Updated	8 months ago, 1745303094630
Source Deleted	unknown