Viewing Program

Program Data

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

Title	The Little Hexagon
ID	4827564127682560
Created	9 years ago, 1468683765552
Updated	8 years ago, 1485477332924
Code	/** * The Little Hexagon * Chester Banks * July 16 2016 * * @INSTRUCTIONS Press to duck Release to jump Avoid buzzsaws and overhangs Grab coins Buy more characters with coins * @CHARACTERS Zipp (0$) - Single jump Jag (10$) - Triple jump Max (50$) - Triple jump, and temporary shield (any key for shield) / / Thanks to my 50 subscribers! Subscribe to my programs here: khanacademy.org/cs/subscribe/4790207744704512 This program's LUCKY SUBSCRIBER is SKETCHGAMES! See cool 3D programs and more here: khanacademy.org/profile/Sketchgames/projects / textAlign(CENTER, CENTER); / Credit to Eric Balingit for Google Font code! / var loadGoogleFont = (function () { return this.Function ( "gfName", "gfName = gfName.replace ( /\\s+/g, '+' );var subsets = Array.prototype.slice.call ( arguments, 1, arguments.length - 1 ), url = 'https://fonts.googleapis.com/css?family=' + gfName + ( subsets.length > 0 ? '&subset=' + subsets : '' ), callback = arguments [ arguments.length - 1 ], gfs = document.querySelectorAll('link[href=\"'+url+'\"]');if(!gfs.length){var f=document.createElement('link');f.setAttribute('rel','stylesheet');f.setAttribute('type','text/css');f.onload=callback;f.setAttribute('href',url);document.head.appendChild(f);}else if ( typeof callback === 'function' ) { callback.call ( gfs [ 0 ] ); }"); })(); var fontloaded = false; var scene = "Logo"; var howManyCoins = 0; var distance = 0; var distanceRecord = 0; var character = 'Zipp'; var clicked = false, overButton = false; var obstacleFactor = 200; var colorScheme = [ color(255, 255, 255), color(201, 222, 40), ]; var hexagon = function(x, y, sz){ pushMatrix(); translate(x, y); rotate(30); beginShape(); for(var i = 0; i < 360; i += 60){ vertex(sin(i)sz, cos(i)sz); } endShape(CLOSE); popMatrix(); }; var circleCollide = function(a, b){ if(dist(a.x, a.y, b.x, b.y) < (a.sz + b.sz)/2){ return true; } }; var hexButton = function(x, y, sz, txt, next){ this.x = x; this.y = y; this.sz = sz; this.txt = txt; this.next = next; }; var hexButtons = { how: new hexButton(100, 340, 35, "?", "How"), play: new hexButton(200, 340, 50, "Play", "Game"), shop: new hexButton(300, 340, 35, "Shop", "Shop"), back: new hexButton(45, 360, 30, "\u2190", "Home"), }; hexButton.prototype.draw = function() { stroke(255); strokeWeight(5); if(dist(mouseX, mouseY, this.x, this.y) < this.sz){ overButton = true; fill(255, 255, 255, 100); pushMatrix(); translate(this.x, this.y); rotate(frameCount 2); hexagon(0, 0, this.sz + sin(frameCount15)2); popMatrix(); if(clicked){ scene = this.next; } } else { noFill(); hexagon(this.x, this.y, this.sz); } fill(255); textSize(40); if(this.txt === "Play"){ noStroke(); fill(255); triangle(this.x-10, this.y - 15, this.x-10, this.y + 15, this.x + 15, this.y); } else if (this.txt === "Shop"){ noStroke(); fill(255); hexagon(this.x, this.y, this.sz/2); fill(135, 135, 135); ellipse(this.x, this.y, 5, 5); ellipse(this.x + 7, this.y, 5, 5); } else if (this.txt === "Settings"){ noFill(); stroke(255); strokeWeight(5); ellipse(this.x, this.y, this.sz/2, this.sz/2); for(var i = 0; i < 360; i += 60){ pushMatrix(); translate(this.x, this.y); rotate(i); rect(8, 0, 1, 1); popMatrix(); } } else { text(this.txt, this.x, this.y); } }; var player = function(){ this.x = 60; this.sz = 60; this.y = 350; this.yvel = -10; this.jumping = false; this.howManyJumps = 0; this.possibleJumps = 3; this.hasShield = false; this.shield = false; this.shieldTimer = 60; this.particle = function(x){ this.x = x; this.y = 375; this.xSpeed = random(-3, -7); this.ySpeed = random(-1); this.sz = random(3, 10); }; this.particle.prototype.draw = function() { noStroke(); fill(colorScheme[0]); ellipse(this.x, this.y, this.sz, this.sz); this.x += this.xSpeed; this.y += this.ySpeed; }; this.particles = []; }; player.prototype.draw = function() { switch(character){ case 'Zipp': this.possibleJumps = 1; break; case 'Jag': this.possibleJumps = 3; break; case 'Max': this.possibleJumps = 3; this.hasShield = true; break; } if(frameCount % 2 === 0 && !this.jumping){ this.particles.push(new this.particle(this.x)); } for(var i in this.particles){ this.particles[i].draw(); if(this.particles[i].x < -50){ this.particles.splice(i, 1); } } pushMatrix(); if(!this.ducking){ translate(this.x, this.y); } else { translate(this.x, this.y+10); scale(0.6); this.sz = 36; } noStroke(); if(this.hasShield){ if(this.shield){ for(var i = 100; i > 0; i -= 5){ noFill(); strokeWeight(5); stroke(255, 255, 255, (i * 2) - 100); ellipse(0, 0, i, i); } this.shieldTimer --; if(this.shieldTimer <= 0){ this.shield = false; } } if(!this.shield && this.shieldTimer < 60){ this.shieldTimer += 0.5; } if(keyIsPressed && !this.shield && this.shieldTimer > 5){ this.shield = true; } stroke(255, 255, 255, 10); fill(255, 255, 255, 100); rect(-30, -50, 60, 5); fill(255, 255, 255); rect(-30, -50, this.shieldTimer, 5); } fill(colorScheme[0]); hexagon(0, 0, 30); fill(0); ellipse(0, 0, 8, 8); ellipse(10, 0, 8, 8); popMatrix(); if(this.jumping){ this.y += this.yvel; this.yvel += 0.5; } if(this.y > 350 && this.jumping){ this.y = 350; this.howManyJumps = 0; this.jumping = false; } if(mouseIsPressed && !this.jumping){ this.ducking = true; } else { this.ducking = false; } }; var Player = new player(); var coin = function(x, y){ this.x = x; this.y = y; this.sz = 20; this.collectible = true; this.trans = 255; this.animate = false; }; coin.prototype.draw = function() { pushMatrix(); translate(this.x, this.y); scale(sin(frameCount5), 1); noStroke(); fill(255, 255, 255, this.trans - 220); for(var i = this.sz; i < this.sz2; i += 5){ ellipse(0, 0, i, i); } strokeWeight(3); stroke(196, 196, 18, this.trans); fill(224, 227, 36, this.trans); ellipse(0, 0, this.sz, this.sz); fill(196, 196, 18, this.trans); textSize(this.sz/1.5); text("$", 0, 0); popMatrix(); if(circleCollide(this, Player) && this.collectible){ howManyCoins ++; this.collectible = false; this.animate = true; } if(this.animate){ this.trans -= 20; this.sz ++; } this.x -= 5; }; var coins = []; var obstacle = function(x){ this.x = x; this.sz = 110; this.type = floor(random(2)); if(this.type === 0){ this.y = 390; } else { this.y = 0; } this.rot = 0; }; var obstacles = []; obstacle.prototype.draw = function() { if(this.type === 0){ noStroke(); fill(colorScheme[0]); pushMatrix(); translate(this.x, this.y); rotate(this.rot); ellipse(0, 0, 100, 100); for(var i = 0; i < 360; i += 10){ pushMatrix(); rotate(i); triangle(-5, -45, 5, -45, 0, -60); popMatrix(); } popMatrix(); if(circleCollide(this, Player) && !Player.shield){ scene = "Home"; } this.rot -= 2; this.x -= 5; } if(this.type === 1){ noStroke(); fill(colorScheme[0]); pushMatrix(); translate(this.x, this.y); rect(0, 0, 50, 340); popMatrix(); if(Player.x + (Player.sz/2) > this.x && Player.x < this.x+50 && !Player.ducking && !Player.shield){ scene = "Home"; } this.x -= 5; } }; var shopBtn = function(x, y, name, price){ this.x = x; this.y = y; this.name = name; this.price = price; this.bought = false; }; var shopBtns = [ new shopBtn(20, 60, "Zipp", 0), new shopBtn(20, 150, "Jag", 10), new shopBtn(20, 240, "Max", 50), ]; shopBtn.prototype.draw = function() { if(this.name === "Zipp"){ this.bought = true; } if(howManyCoins >= this.price \|\| this.bought){ fill(255, 255, 255, 50); } if(howManyCoins < this.price && !this.bought){ fill(255, 0, 0, 50); } if(character === this.name){ fill(0, 255, 0, 50); } strokeWeight(5); stroke(255); rect(this.x, this.y, 360, 80, 20); noStroke(); fill(255); hexagon(this.x+35, this.y+40, 25); fill(103); ellipse(this.x+35, this.y+40, 7, 7); ellipse(this.x+45, this.y+40, 7, 7); fill(255); textSize(20); text(this.name, this.x + 100, this.y + 40); textSize(15); if(!this.bought && howManyCoins >= this.price){ text("click to buy", this.x + 270 + sin(this.y + frameCount10)5, this.y + 40 + cos(this.y + frameCount10)5); if(clicked && mouseX > this.x && mouseX < this.x + 360 && mouseY > this.y && mouseY < this.y + 80){ howManyCoins -= this.price; this.bought = true; } } if(this.bought && this.name !== character){ text("click to equip", this.x + 270 + sin(this.y + frameCount10)5, this.y + 40 + cos(this.y + frameCount10)5); if(clicked && mouseX > this.x && mouseX < this.x + 360 && mouseY > this.y && mouseY < this.y + 80){ character = this.name; } } if(!this.bought){ pushMatrix(); translate(this.x + 149, this.y + 40); noStroke(); fill(255, 255, 255, 20); for(var i = this.sz; i < this.sz2; i += 5){ ellipse(0, 0, i, i); } strokeWeight(3); stroke(196, 196, 18); fill(224, 227, 36); ellipse(0, 0, 20, 20); fill(196, 196, 18); textSize(15); text("$", 0, 0); fill(255); textSize(15); text(this.price, this.x + 10, 0); popMatrix(); } }; / The Chester Banks logo / var logoFinish = -100; var logo = function(x, y, sz){ var logoColors = [ color(140, 140, 140), color(166, 166, 166), color(66, 66, 66), color(105, 105, 105), ]; 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(); }; mouseReleased = function(){ clicked = true; if(Player.howManyJumps < Player.possibleJumps){ Player.jumping = true; Player.yvel = -10; Player.howManyJumps ++; } }; draw = function() { if ( !fontloaded ) { loadGoogleFont('Anonymous Pro\|Mountains of Christmas\|Poiret One', 'latin-ext', 'vietnamese'); } textFont(createFont("Poiret One")); switch(character){ case 'Zipp': colorScheme[1] = color(161, 161, 161); break; case 'Jag': colorScheme[1] = color(201, 222, 40); break; case 'Max': colorScheme[1] = color(42, 210, 222); break; } 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(155, 155, 155, -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(0, 0, 405, 405); logoFinish += 7; if(logoFinish > 270){ scene = "Home"; } } if(scene === "Home"){ obstacleFactor = 200; obstacles = []; if(distance > distanceRecord){ distanceRecord = distance; } distance = 0; background(colorScheme[1]); noStroke(); for(var i = 0; i < width; i += 60){ for(var j = 0; j < height; j += 35){ fill(0, 0, 0, 50 + sin(j+frameCount5)10); hexagon(i, j, 20); hexagon(i+30, j+17.5, 20); } } for(var i = -60; i < 200; i += 30){ fill(255, 255, 255, 100 - i/2); beginShape(); vertex(0, i); vertex(0, i + 30); vertex(200, i + 90); vertex(400, i + 30); vertex(400, i); vertex(200, i + 60); endShape(); } fill(0, 0, 0, 50); textSize(70); textLeading(60); text("the\nlittle\nhexagon", 200, 160); fill(242, 242, 242); textSize(75); textLeading(60); text("the\nlittle\nhexagon", 200, 160); textSize(25); text("a chester banks production", 200, 275); textSize(25); text("Your distance record: " + distanceRecord, 200, 30); strokeWeight(1); stroke(255); line(15, 260, 385, 260); hexButtons.how.draw(); hexButtons.play.draw(); hexButtons.shop.draw(); } if(scene === "Game"){ background(colorScheme[1]); noStroke(); for(var i = 0; i < width; i += 60){ for(var j = 0; j < height; j += 35){ fill(0, 0, 0, 50 + sin(j+frameCount5)10); hexagon(i, j, 20); hexagon(i+30, j+17.5, 20); } } fill(colorScheme[0]); rect(0, 375, width, 25); for(var i = -60; i < 200; i += 30){ fill(0, 0, 0, 100 - i/2); beginShape(); vertex(0, i); vertex(0, i + 30); vertex(200, i + 90); vertex(400, i + 30); vertex(400, i); vertex(200, i + 60); endShape(); } if(frameCount % obstacleFactor === 0){ obstacles.push(new obstacle(random(450, 500))); } if(frameCount % 100 === 0){ coins.push(new coin(random(450, 600), random(350))); } if(frameCount % 30 === 0){ distance ++; } Player.draw(); for(var i in coins){ coins[i].draw(); if(coins[i].x < -150){ coins.splice(i, 1); } } for(var i in obstacles){ if(i > 0){ if((obstacles[i].type === 0 && obstacles[i - 1].type === 1) && obstacles[i].x > obstacles[i - 1].x - 100 && obstacles[i].x < obstacles[i - 1] + 100){ } } obstacles[i].draw(); if(obstacles[i].x < -150){ obstacles.splice(i, 1); i--; } } pushMatrix(); translate(30, 30); noStroke(); fill(255, 255, 255, 20); for(var i = this.sz; i < this.sz2; i += 5){ ellipse(0, 0, i, i); } strokeWeight(3); stroke(196, 196, 18); fill(224, 227, 36); ellipse(0, 0, 20, 20); fill(196, 196, 18); textSize(15); text("$", 0, 0); popMatrix(); textSize(15); fill(255); text(howManyCoins, 55, 30); text("\u2192", 30, 50); text(distance, 55, 50); if(frameCount % 15 === 0){ obstacleFactor --; } } if(scene === "Shop"){ background(colorScheme[1]); noStroke(); for(var i = 0; i < width; i += 60){ for(var j = 0; j < height; j += 35){ fill(0, 0, 0, 50 + sin(j+frameCount5)10); hexagon(i, j, 20); hexagon(i+30, j+17.5, 20); } } for(var i = -60; i < 200; i += 30){ fill(255, 255, 255, 100 - i/2); beginShape(); vertex(0, i); vertex(0, i + 30); vertex(200, i + 90); vertex(400, i + 30); vertex(400, i); vertex(200, i + 60); endShape(); } fill(255, 255, 255); textSize(50); text("shop", 200, 25); strokeWeight(1); stroke(255); line(15, 50, 385, 50); for(var i in shopBtns){ shopBtns[i].draw(); } textSize(10); fill(255); text('TRIPLE JUMP', 120, 210); text('SHIELD', 120, 300); pushMatrix(); translate(340, 30); noStroke(); fill(255, 255, 255, 20); for(var i = 10; i < 40; i += 5){ ellipse(0, 0, i, i); } strokeWeight(3); stroke(196, 196, 18); fill(224, 227, 36); ellipse(0, 0, 20, 20); fill(196, 196, 18); textSize(15); text("$", 0, 0); fill(255); textSize(15); text(howManyCoins, 20, 0); popMatrix(); hexButtons.back.draw(); } if(scene === "How"){ background(colorScheme[1]); noStroke(); for(var i = 0; i < width; i += 60){ for(var j = 0; j < height; j += 35){ fill(0, 0, 0, 50 + sin(j+frameCount5)10); hexagon(i, j, 20); hexagon(i+30, j+17.5, 20); } } for(var i = -60; i < 200; i += 30){ fill(255, 255, 255, 100 - i/2); beginShape(); vertex(0, i); vertex(0, i + 30); vertex(200, i + 90); vertex(400, i + 30); vertex(400, i); vertex(200, i + 60); endShape(); } fill(255, 255, 255); textSize(50); text("instructions", 200, 50); strokeWeight(1); stroke(255); line(15, 85, 385, 85); textSize(23); textLeading(40); text('Press to duck.\nRelease to jump.\nDuck under bars.\nJump over buzzsaws.\nCollect coins.\nBuy more hexagons.', 200, 220); hexButtons.back.draw(); } cursor(overButton ? 'pointer' : 'default'); clicked = false; overButton = false; };
Folds	41,44,46,56,57,61,63,69,70,75,76,122,124,154,155,236,239,247,248,277,280,292,294,331,333,340,341,345,346,411,415,476,478,486,506,528,529,578,579,659,660,719
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgNjnzdTJCAw
Votes	231
Spin-Offs	15
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, 1739370524792
Updated	10 months ago, 1739370532093
Source Deleted	unknown