Hatch Canada Student Results

We Help Build Digital Portfolios

Below are some examples of our most interesting additions to the digital portfolios of Hatch Students.

Digital Portfolios Projects Showcase Projects
32,309 204,407 3,985
Register Now! Start Building Your Portfolio
Photo of Leela W.

Leela W.

Age
9
Cycles
1

Check out Leela's very first showcase project! Here's a collection of all her very personalized pieces from just one cycle. Click and follow instructions on screen to view each page.

Photo of Mina

Mina, Hatch Coach

"What I love about Leela's showcase project is that it really shows off her personality on every page. She's really demonstrated her understanding of 2D coordinate systems, functions and some fundamental programming logic. She's off to a great start!"

“Leela's First Showcase”

var gameState = "Intro"; var xPos = 0; var yPos = 0; var pixelSize = 20; var changeGameState = function(){ if(gameState === "Intro"){ gameState = "Page 1"; } else if(gameState === "Page 1"){ background(255, 0, 0); gameState = "Page 2"; } else if(gameState === "Page 3"){ background(115, 101, 7); gameState = "Page 4"; } else if(gameState === "Page 4" && mouseX > 271 && mouseX < (271+99) && mouseY > 378 && mouseY < (378+78)){ background(30, 8, 89); gameState = "Page 5"; } }; var introScreen = function(){ background(255, 2, 255); textSize(20); fill(99, 85, 5); text("Hello\nwelcome\nto Leela's\nshowcase project!!", 136, 130); image(getImage("creatures/hopper-jumping"), 200, 20, 100, 100); image(getImage("creatures/hopper-jumping"), 200,200, 100, 100); }; var drawstatic = function(){ for (var x = 0; x < 500; x++){ var num = (round(random(0, 1))); noStroke(); if(num === 0 ){ fill(255, 255, 255); } else { fill(255, 0, 255); } rect(random(0,400), random(0,400), 4, 2); } fill(55, 9, 9); textSize(20); text("Please click on the screen to continue.",10, 223); }; var keyPressed = function (){ if(gameState === "Page 2" && keyCode === 76){ gameState = "Page 3"; } }; var drawGlob = function(){ if (mouseIsPressed === true){ var x = random(0, 50); fill(random(555, 111), random(0, 200), 48); ellipse(mouseX, mouseY, x, x); } }; var drawglobulator = function(){ noStroke(); drawGlob(); textSize(20); text("Click to make globs! \n Press the letter L to go on to the next page.",10, 223); }; var mouseClicked = function(){ changeGameState(); }; noStroke(); rectMode(CENTER); var drawsquarewars = function(){ background(251, 0, 251); fill(177, 0, 177, 80); rect(mouseX, height/2, mouseY/2+10, mouseY/2+10); fill(166, -1, 250, 80); rect(width - mouseX, height/2, (height-mouseY)/2+10, (height-mouseY)/2+10); textSize(20); text("Click on the page to go to the next page.", 10, 223); }; var drawpixelimage = function(){ textSize(20); text("Click to make pixels!",10, 20); if(mouseIsPressed){ xPos = floor(mouseX / pixelSize) * pixelSize; yPos = floor(mouseY / pixelSize) * pixelSize; fill(255, 0, 255); rect(xPos, yPos, pixelSize, pixelSize); } fill(78,0,78); rect(271,378,99,78,8); fill(90, 0, 11); textSize(15); text("Click me!",234,378); }; var drawendpage = function(){ textSize(20); text("Thank you for coming!",10, 223); }; var draw = function(){ switch(gameState){ case "Intro": introScreen(); break; case"Page 1": drawstatic(); break; case"Page 2": drawglobulator(); break; case "Page 3": drawsquarewars(); break; case"Page 4": drawpixelimage(); break; case "Page 5": drawendpage(); } };
Photo of Julius K.

Julius K.

Age
8
Cycles
1

One of our most unique projects. See if you can win Julius' adventure game, "Towards the Meteor". Follow the instructions on each page to get to the end. (Hint: It's not over unless it says you win).

Photo of Peter

Peter, Hatch Coach

"Julius really impressed us with this project. He was able to take the tools he learned to use during his regular showcase classes - like buttons, shape drawings, and states - and applied that in a very unique way in his showcase. Way to go!"

“Towards the Meteor!”

var pageT = "Intro"; var clicked = false; var magnitude = 0; var dynamite = false; background(0); noStroke(); //Keep all your variables above this line var drawMessage = function() { if (mouseIsPressed){ fill(255,255,255,10); ellipse(mouseX, mouseY, 20, 20); } fill(0,255,0); text("PRESS UP", 100, 200); if(keyCode===UP){ background(255,0,0); pageT = "DONE"; } }; var checkCollision = function(){ var distance = dist(mouseX,mouseY,400-mouseX,400-mouseY); if(distance<100+10){ background(0); pageT = "page3"; } }; var drawCircleProject = function() { stroke(0,0,255); fill(255,0,0,255); ellipse(400-mouseX,400-mouseY,200,200); fill(0,255,0,255); ellipse(mouseX,mouseY,20,20); }; var drawMadeUpProject = function(){ fill(255,255,0); textSize(10); text("Don't click the green sqaure. I know it's tempting. Click the yellow sqaure.",5,10); rect(20,200,40,40); fill(0,255,0); rect(200,200,40,40); }; var drawRegularCreeper = function(){ if (magnitude < 150){ noStroke(); fill(0,0,255); rect(150,50,110,100); rect(150,150,20,100); rect(180,150,20,100); rect(210,150,20,100); rect(240,150,20,100); fill(0); rect(170,70,20,20); rect(220,70,20,20); } }; var drawExplodingCreeper = function(){ if(clicked === true){ fill(0105,255); rect(150,250,110,magnitude); fill(0,255,0); textSize(20); text("Sssssshhhhhhhh...", 34,365); fill(0,0,0); magnitude=magnitude+1; } }; var explosion=function(){ background(0,250,0); fill(250,0,0); textSize(15); text("ummm...why did I squirt ink again?", 50,200); fill(0,0,0); rect(290,280,50,100); rect(330,240,10,60); fill(250,0,0); rect(300,310,30,50); rect(320,220,30,30); fill(0,0,0); textSize(9); text("PRESS", 300,330); }; var drawDynamite=function(){ background(0,0,255); fill(255,0,0); rect(120,120,40,100); fill(0,0,0); rect(140,90,10,40); fill(255,100,0); rect(130,70,30,30); textSize(15); text("I DO NOT CARE EXPLOSIVES ARE EPIC!", 50,50); }; var drawWhatPage = function(){ fill(0255,255); rect(20,250,70,100); text("WHAT? NOW YOU MUST LOSE!",20,20); text("Click his grave and it will absorb him!",20,200); }; var drawDeathPage=function(){ noStroke(); fill(255,255,0); rect(280,30,40,80); fill(255,100,0); rect(285,10,30,20); fill(0); ellipse(300,100,50,50); textSize(20); fill(155,0,255); text("Watch out for the meteor!",20,200); }; var drawSquidProject=function(){ background(0,0,0); drawRegularCreeper(); drawExplodingCreeper(); if (magnitude > 150){ pageT = "button"; } }; var drawWinScreen = function(){ textSize(15); fill(255,0,0); text("Woah,cool! You did it! Click to continue to the next part!",15,200); }; //This function changes the page var changePage = function(){ if (pageT === "Intro"){ pageT = "Page1"; } else if (pageT === "Page2"){ pageT = "Page3"; } else if(pageT === "dynamite"){ background(0,0,0); pageT = "Page2" ; } else if (pageT === "button" && mouseX > 300 && mouseX<330 && mouseY>310 && mouseY<360){ pageT = "dynamite"; } if(pageT === "page3" && mouseX>200 && mouseX<240 && mouseY>200 && mouseY<240){ background(0,255,0); pageT = "fail"; } else if(pageT === "page3" && mouseX>20 && mouseX<60 && mouseY>200 && mouseY<240){ background(100,0,0); pageT = "death"; } }; //This function automatically gets called every time the mouse is clicked var mouseClicked = function(){ if(pageT === "Page1"){ clicked=true; } if(pageT === "WHAT?" && mouseX>20 && mouseX<90 && mouseY>250 && mouseY<350){ background(0); pageT = "RIP"; } if(pageT === "death" && mouseX>275 && mouseX<325 && mouseY>75 && mouseY<125){ background(255,0,0); pageT ="WHAT?"; } if(pageT === "woah,cool"){ background(100,0,0); background(0,255,0); pageT = "newPage"; } changePage(); }; var introScreen = function(){ background(255, 0, 0); //Place anything you want displayed in your intro screen here fill(0); textSize(13.4); text("Be prepared! Click to enter the greatest showcase project ever!", 13.5,200); }; var page1Screen = function(){ background(0, 255, 0); //Place anything you want displayed in your page 1 screen here drawSquidProject(); }; //This is the 'control center' of your project var draw = function() { switch (pageT) { case "Intro": introScreen(); break; case "Page1": page1Screen(); break; case "Page2": drawCircleProject(); checkCollision(); break; case "dynamite": drawDynamite(); break; case "button": explosion(); break; case "page3": drawMadeUpProject(); break; case "woah,cool!": drawWinScreen(); break; case "death": drawDeathPage(); break; case"WHAT?": drawWhatPage(); break; case "RIP": fill(255,0,0); textSize(15); text("Good job!",100,200); text("Don't let him out! Just press -> to continue!",20,10); fill(0255,255); rect(265,150,70,100); if(keyCode===RIGHT && keyIsPressed){ background(0,255,0); pageT = "MEAS"; } break; case "fail": fill(0); text("FAIL",200,200); break; case "dan Dan DAn DAN": fill(0); text("FAIL",200,200); break; case "MEAS": drawMessage(); break; case "DONE": text("YOU DID IT!", 100,200); break; } };
Photo of Maya F.

Maya F.

Age
11
Cycles
2

Can you pass Maya's Intelligence test? Follow the instructions on the screen to see if you can do it!

Photo of Mina

Mina, Hatch Coach

"Maya completed 200 lines of code in this awesome quiz-based project! As a first-cycle project, this demonstrates an excellent understanding of if-statements and switch-statements as well as 2D coordinate grids."

“Intelligence Test”

var page = "one"; var timer = 0; var changepage = function(){ if(page === "one" && dist(mouseX, mouseY, 200,260) < 150/2){ page = "two"; } else if (page === "one") { page = "elleven"; } else if(page === "two" && dist(mouseX, mouseY, 350,300) < 100/2){ page = "three"; }else if(page === "two"){ page = "elleven"; } else if (page === "three") { page = "four"; } else if (page === "four" && dist(mouseX, mouseY, 0, 398) < 40){ page = "five"; } else if(page === "four"){ page = "elleven"; } else if (page === "five"){ page = "six"; } else if (page === "six" && dist(mouseX, mouseY, 300, 200) < 100){ page = "seven"; } else if (page === "six"){ page = "elleven"; } else if (page === "seven"){ page = "eight"; } else if (page === "eight" && dist(mouseX, mouseY, 400, 200) < 100){ page = "nine"; } else if (page === "eight"){ page = "elleven"; }else if (page === "nine" ){ page = "ten"; }else if (page === "ten"){ page = "one"; } }; var oneScreen = function(){ background(150, 100, 150); textSize(30); fill(0, 100, 0); text("Intelligence test click\n the button to begin", 100, 130); fill(0, 255, 213); ellipse(200, 260, 150, 150); ellipse(200, 260, 100, 100); }; var twoScreen = function(){ background(0, 0, 0); fill(255, 255, 255); text("click the darkest button", 11, 50); fill(5, 17, 247); ellipse(350, 300, 100, 100); ellipse(350, 300, 80, 80); fill(13, 255, 0); ellipse(90, 300, 100, 100); ellipse(90, 300, 80, 80); fill(255, 255, 0); ellipse(230, 300, 100, 100); ellipse(230, 300, 80, 80); }; var threescreen = function(){ background(9, 230, 9); fill(100, 0, 0); textSize(80); text("continue", 50, 100); }; var fourscreen = function(){ background(150, 100, 150); image(getImage("creatures/baby-winston"), 210, 200, 100, 100); image(getImage("creatures/baby-winston"), 300, 200, 100, 100); image(getImage("creatures/baby-winston"), 120, 200, 100, 100); image(getImage("creatures/baby-winston"), 40, 200, 100, 100); image(getImage("creatures/baby-winston"), 0, 200, 100, 100); fill(200, 0, 0); textSize(50); text("Click on the\n smallest one", 100, 100); textSize(10); text("click here", 0, 398); }; var fivescreen = function(){ background(30, 0, 255); textSize(40); text("you are half way there",0, 200); }; var sixscreen = function(){ background(0, 0, 255); textSize(10); text("dont", 3, 75); text("touch the circle", 30, 90); textSize(40); text("touch the triangle", 20, 80); triangle(200, 200, 200, 300, 100, 200); ellipse(300, 200, 100, 100); }; var sevenscreen = function(){ background(64, 255, 0); textSize(44); text("you are almost there", 0, 200); }; var eightscreen = function(){ background(237, 19, 237); textSize(30); text("click on the right open chest", 20, 100); image(getImage("cute/ChestOpen"), 0, 101, 100, 150); image(getImage("cute/ChestClosed"), 300, 200); image(getImage("cute/ChestClosed"), 200, 200); image(getImage("cute/ChestClosed"), 0, 200); image(getImage("cute/ChestClosed"), 100, 200); image(getImage("cute/ChestClosed"), 101, 400); image(getImage("cute/ChestOpen"), 200, 100, 100, 150); image(getImage("cute/ChestOpen"), 300, 100, 100, 150); image(getImage("cute/ChestOpen"), 100, 100, 110, 150); }; var ninescreen = function(){ background(0, 255, 153); text("now the most temting\n challange ever. do not click\n the red button or do you\n still pass", 30, 50); timer += 1/60; text (timer, 300, 180); fill(255, 0, 0); ellipse(200, 250, 150, 150); fill(255, 0, 0); ellipse(200, 250, 110, 110); }; var tenscreen = function(){ background(12, 222, 237); textSize(55); text("congratulations\n you win", 0, 100); image(getImage("creatures/hopper-cool"), 200, 200, 100, 100); }; var ellevenscreen = function(){ background(242, 9, 242); textSize(40); text("you lose play again", 40, 200); }; var mouseClicked = function(){ changepage(); }; if (page === "ten"){ text("Wrong!",100,100); } var draw = function(){ switch(page){ case "one": oneScreen(); break; case"two": twoScreen(); break; case"three": threescreen(); break; case "four": fourscreen(); break; case "five": fivescreen(); break; case "six": sixscreen(); break; case"seven": sevenscreen(); break; case"eight": eightscreen(); break; case"nine": ninescreen(); break; case"ten": tenscreen(); break; case"elleven": ellevenscreen(); break; } if (timer > 10){ page = "ten"; } };
Photo of Spencer H.

Spencer H.

Age
15
Cycles
2

The rules are simple, but the game is hard. "Escape the Dark" to win! Arrow keys control the character. Good Luck!

Photo of Peter

Peter, Hatch Coach

"Spencer built an excellent game for this Showcase project. He utilized his knowledge gained from previous projects to create a complete and polished game. We love seeing great games like this come from our Hatch students that are enjoyable - and take a lot of work to complete."

“Escape the Dark”

var yPos = 100; var f1 = 255; var state = "Pause"; var xpos = 15; var ypos = 300; var Ypos = 70; var ySpeed = 0.5; var isRightPressed = false; var isLeftPressed = false; var isUpPressed = false; var colour = color(255, 0, 238); var backGround = function(){ background(f1 - 100, f1, f1); }; var Ground = function(){ fill(0); rect(0, 325, 400, 400); fill(59, 9, 9); rect(0, 300, 4000, 30); }; var Sun = function(){ fill(240, 225, 22); noStroke(); ellipse(200, yPos, 150, 150); fill(255, 179, 0); ellipse(210, yPos - 10, 100, 100); fill(255); rect(220, yPos - 30, 10, 20); }; var Text = function(){ textSize(20); fill(255); text("Hurry the Sun is Going Down.",0, 340,400, 400); }; var CheckSun = function(){ if (yPos >= 400){ state = "Start"; f1 = 255; } }; var backGround2 = function(){ background(f1, f1, f1); }; var Ground2 = function(){ stroke(255); strokeWeight(5); fill(0); rect(0, 325, 400, 400); noStroke(); fill(59, 9, 9); rect(0, 300, 400, 25); }; var Ground3 = function(){ stroke(255); strokeWeight(5); fill(0); rect(0, 0, 400, 70); noStroke(); fill(59, 9, 9); rect(0, 70, 400, 25); }; var Text2 = function(){ textSize(20); fill(255); text("Escape the Dark! >>>",0, 340,400, 400); }; var Text3 = function(){ textSize(20); fill(255); text(" Level 2",0, 340,400, 400); }; var keyPressed = function(){ if (state === "Start" || state === "level2"){ if (keyCode === LEFT){ isLeftPressed = true; } if (keyCode === RIGHT){ isRightPressed = true; } if (keyCode === UP){ isUpPressed = true; } } else { if (keyCode === 65){ isLeftPressed = true; } if (keyCode === 68){ isRightPressed = true; } if (keyCode === 87){ isUpPressed = true; } } }; var keyReleased = function(){ if (state === "Start" || state === "level2"){ if (keyCode === LEFT){ isLeftPressed = false; } if (keyCode === RIGHT){ isRightPressed = false; } if (keyCode === UP){ isUpPressed = false; } } else { if (keyCode === 65){ isLeftPressed = false; } if (keyCode === 68){ isRightPressed = false; } if (keyCode === 87){ isUpPressed = false; } } }; var Person2 = function(){ stroke(255); strokeWeight(3); line(400-xpos, 400 - (ypos-10), 400- xpos, 400 - (ypos + 10)); noFill(); ellipse(400 - xpos, 400 - (ypos - 18), 15, 15); if(ypos > 300 && isUpPressed === true){ ySpeed = -7; ypos -= 1; } if(ypos > 300) { ySpeed = 0; ypos = 301; } else { ySpeed = ySpeed + 0.5; ypos = ypos + ySpeed; } if (isLeftPressed === true){ xpos -= 1; } if (isRightPressed === true){ xpos -= -1; } }; //Draw Character var drawPerson = function(){ stroke(colour); strokeWeight(3); line(xpos, ypos-10, xpos, ypos + 10); noFill(); ellipse(xpos, ypos - 18, 15, 15); if(ypos > 300 && isUpPressed === true){ ySpeed = -7; ypos -= 1; } if(ypos > 300) { ySpeed = 0; ypos = 301; } else { ySpeed = ySpeed + 0.5; ypos = ypos + ySpeed; } if (isLeftPressed === true){ xpos -= 1; } if (isRightPressed === true){ xpos -= -1; } }; //draw sun var drawSun = function(){ noStroke(); fill(240, 233, 19); ellipse(80, Ypos, 50, 50); }; //next level (reaches right wall) var level2 = function(){ if (xpos > 395) { xpos = 15; Ypos = 70; state = "level2"; f1 = 255; } }; var Level2Sign = function(){ if (xpos > 380){ text("Wrong Way!", 140, 200, 200, 200); } }; var Level3 = function(){ if (xpos < 5){ xpos = 15; Ypos = 70; isLeftPressed = false; state = "level3"; f1 = 255; } }; var Level3Sign = function(){ fill(255); text("Youre Using the Wrong Keys!", 5, 340, 400, 200); }; var mouseClicked = function () { if (state === "Pause"){ state = "Intro"; } }; var Level4 = function(){ if (xpos > 395){ state = "level4"; ypos = 330; xpos = 15; f1 = 255; } }; var Over = function(){ if (Ypos > 327){ state = "endGame"; } }; var endScreen = function(){ background(255, 0, 0); textSize(40); textAlign(CENTER< CENTER); text("You Lose", 120, 100, 200, 50); }; var draw = function() { switch(state){ case "Pause": backGround(); Sun(); Ground(); textSize(20); fill(255); text("Click to Start",0, 340,400, 400); break; case"Intro": yPos = yPos + 1; backGround(); Sun(); Ground(); Text(); f1 -= 1; CheckSun(); break; case"Start": f1 = f1 - 0.09; Ypos = Ypos + 0.3; backGround2(); drawSun(); Ground2(); Text2(); drawPerson(); level2(); Over(); break; case"level2": f1 = f1 - 0.3; Ypos = Ypos + 0.35; backGround2(); drawSun(); Ground2(); Text3(); drawPerson(); Over(); Level2Sign(); Level3(); break; case"level3": f1 = f1 - 0.2; Ypos = Ypos + 0.4; backGround2(); drawSun(); //playSound(getSound("retro/whistle1")); Ground2(); Level3Sign(); drawPerson(); Level4(); Over(); break; case"level4": f1 = f1 - 0.5; backGround2(); Ground3(); Person2(); if (xpos > 400){ state = "endGame"; } break; case"endGame": endScreen(); break; } };
Photo of Zoë E.

Zoë E.

Age
13
Cycles
2

Create your own Pixel-Art. Tap the keys to change the colors, and the brush size. Tap 'h' to go to the help screen.

Photo of Mina

Mina, Hatch Coach

"Zoë's project took a ton of work! With over 200 lines of code, Zoë was able to create a program that allows its users to create pixel-paintings for themselves. Zoë has essentially built a tool for other artists to help them create unique and inspiring pieces. Awesome work!"

“The Amazing Pixel-Art Machine”

var size1 = 6.5; var size2 = 12.5; var size3 = size2 * 2; var size4 = size3 * 2; var size5 = size4 * 2; var size6 = size5 * 2; var xPos = 0; var yPos = 0; var pixelSize = size1; var R = 0; var G = 0; var B = 0; var gameState = "Page1"; var selectedShape = "square"; var changeSize = function() { if (keyCode === UP && pixelSize === size1) { pixelSize = size2; }else if (keyCode === UP && pixelSize === size2) { pixelSize = size3; }else if (keyCode === UP && pixelSize === size3) { pixelSize = size4; }else if (keyCode === UP && pixelSize === size4) { pixelSize = size5; }else if (keyCode === UP && pixelSize === size5) { pixelSize = size6; }else if (keyCode === DOWN && pixelSize === size6) { pixelSize = size5; }else if (keyCode === DOWN && pixelSize === size5) { pixelSize = size4; }else if (keyCode === DOWN && pixelSize === size4) { pixelSize = size3; }else if (keyCode === DOWN && pixelSize === size3) { pixelSize = size2; }else if (keyCode === DOWN && pixelSize === size2) { pixelSize = size1; } }; var changeColor = function() { if (key === 'r') { R = 255; G = 0; B = 0; }else if (key === 'o') { R = 255; G = 150; B = 0; }else if (key === 'y') { R = 255; G = 255; B = 0; }else if (key === 'g') { R = 0; G = 255; B = 0; }else if (key === 'b') { R = 0; G = 150; B = 255; }else if (key === 'p') { R = 200; G = 0; B = 255; }else if (key === 'k') { R = 255; G = 200; B = 255; }else if (key === 't') { R = 50; G = 255; B = 215; }else if (key === 'l') { R = 0; G = 0; B = 0; }else if (key === 'w') { R = 255; G = 255; B = 255; }else if (key === 'c') { background(255, 255, 255); }else if (key === 'h' && gameState === "Page2") { } }; var changeTellerColor = function() { if (R === 0 && G === 0 && B === 0) { fill(255, 255, 255); }else { fill(0, 0, 0); } }; var changeTellerNumber = function() { if (pixelSize === size1) { text("1", 16, 24); } else if(pixelSize === size2) { text("2", 16, 24); } else if(pixelSize === size3) { text("3", 16, 24); } else if(pixelSize === size4) { text("4", 16, 24); } else if(pixelSize === size5) { text("5", 16, 24); } else if(pixelSize === size6) { text("6", 16, 24); } }; var changeGameState = function() { if (gameState === "Page1") { gameState = "Page2"; background(255, 255, 255); } }; var changeSelectedShape = function() { if (selectedShape === "square" && key === '2'){ selectedShape = "circle"; }else if(selectedShape === "circle" && key === '1') { selectedShape = "square"; } }; var drawProject = function() { if (mouseIsPressed){ noStroke(); if(selectedShape === "square") { xPos = floor(mouseX / pixelSize) * pixelSize; yPos = floor(mouseY / pixelSize) * pixelSize; fill(R, G, B); rect(xPos, yPos, pixelSize, pixelSize); } else if(selectedShape === "circle") { fill(R, G, B); ellipse(mouseX, mouseY, pixelSize, pixelSize); } } }; var tSize = 20; var changeTS = function(tSize){ textSize(tSize); }; var Page1Screen = function() { changeTS(23); background(20, 20, 200); fill(255, 255, 255); text("Welcome", 150, 130); text("Click to start", 135, 200); changeTS(18); text("'r' = red, 'o' = orange, 'y' = yellow, 'g' = green, \n'b' = blue, 'p' = purple, 'k' = pink, 't' = turquoise, \n'l' = black, 'w' = white, 'c' = clear screen, \nup = bigger, down = smaller, 'h' = help,\n'1' = square, '2' = circle", 10, 302); }; var Page2Screen = function() { drawProject(); noStroke(); if (selectedShape === 'square'){ fill(R, G, B); rect(10, 10, 20, 20); }else if(selectedShape === 'circle') { fill(255, 255, 255); rect(10, 10, 20, 20); fill(R, G, B); ellipse(20, 20, 20, 20); } changeTellerColor(); changeTellerNumber(); changeSelectedShape(); }; var Page3Screen = function() { if (key === 'h') { fill(0, 0, 0); stroke(0, 0, 0); rect(25, 25, 350, 350); stroke(200, 20, 20); strokeWeight(15); line(372, 28, 372 - 25, 28 + 25); line(372 - 25, 28, 372, 28 + 25); fill(255, 255, 255); changeTS(20); text("'r' = red 'o' = orange\n'y' = yellow 'g' = green\n'b' = blue 'p' = purple\n'k' = pink 't' = turquoise\n'l' = black 'w' = white\n'c' = clear screen up = bigger\ndown = smaller '1' = square\n'2' = circle", 35, 35); //text will sometimes dissapear on help screen. It's a bug. } }; var mouseClicked = function() { changeGameState(); if(mouseX > 375 - 25 && mouseX < 375 && mouseY > 28 && mouseY < 28 + 25 && gameState === "Page3") { background(255, 255, 255); gameState = "Page2"; } }; var draw = function() { switch (gameState) { case "Page1": Page1Screen(); break; case "Page2": Page2Screen(); break; case "Page3": Page3Screen(); } }; var keyPressed = function() { changeSize(); changeColor(); if (gameState === "Page2" && key === 'h') { gameState = "Page3"; } };
Photo of Abraham W.

Abraham W.

Age
10
Cycles
3

Abraham built an obstacle-avoidance game for his third Showcase project at Hatch. Use the arrow keys to move and the up key to fire. Wait for your mana bar to fill before firing. Survive as long as possible!

Photo of Mina

Mina, Hatch Coach

"Abraham has created an extremely impressive game. Not only does it demonstrate a great understanding of different elements of game design (collision detection and character movement), but also makes use of some challenging programming concepts such as arrays, and for-loops."

“Circle Dodger”

var numBalls=1; var balls= []; var ballx =200; var speed=2; var manapoin=1; var missley=350; var gamestate="pause"; var isfired=false; var missileX = 0; var time=0; var displayscore=function(){ text("you stayed alive " +round( time) + " seconds",120,240); }; var mouseClicked = function () { if (gamestate === "pause") { gamestate = "game"; } }; var timerGame=function(){ if (gamestate==="game"){ fill(0); text("time:" + round(time),10,10); } }; var manabar=function(){ noStroke(); fill(100,100,255); rect(350,5,manapoin,20); if (manapoin>45){ fill(255,100,100); rect(350,5,45,20); } if (manapoin>45 && isfired === false && keyCode===UP && keyIsPressed){ isfired = true; missileX = ballx; missley = 350; manapoin=1; } if (isfired === true){ missley -= 1 ; fill(100,100,255); noStroke(); ellipse(missileX,missley,10,10); } if(missley <0 ){ isfired=false; } fill(255); rect(395,5,20,20); fill(255,0,0); }; var charachter=function(){ fill(255,0,0); ellipse(ballx,370,15,15); if(keyPressed && keyCode === RIGHT){ ballx=ballx+speed; } if(keyPressed && keyCode === LEFT){ ballx=ballx-speed; } ballx=constrain(ballx,15,385); }; var createball = function(){ balls.push({ x: random(0,400), y: random(-350,0) }); }; var fore = function(){ for (var i=1; i<=numBalls; i+=1){ createball(); } }; fore(); var checkCollision = function() { for (var i = 0; i < balls.length; i+=1){ if (dist(missileX,missley,balls[i].x, balls[i].y) < 10){ balls.splice(i, 1); } } }; var updateballs = function(balls){ for(var counter=0; counter<balls.length; counter+=1){ balls[counter].y=balls[counter].y+1; if (balls[counter].y>410 && counter === 0){ balls[counter].y=-10; balls[counter].x=random(0,400); createball(); createball(); createball(); createball(); createball(); } else if(balls[counter].y>410){ balls[counter].y=-10; balls[counter].x=random (0,400); } if (dist(balls[counter].x, balls[counter].y,ballx,370) < 10 ){ gamestate="lose"; } } }; var drawballs=function(balls){ fill(23,25,66); for(var counter=0; counter<balls.length; counter+=1){ balls[counter].y=balls[counter].y +1; ellipse(balls[counter].x,balls[counter].y,9,9); if (dist(balls[counter].x, balls[counter].y,ballx,370) < 20){ } } }; var draw = function(){ if (gamestate === "pause"){ textSize(40); fill(0); text("Click to Play", 100, 200); } if (gamestate==="game"){ background(255); time= time + 1/60; timerGame(); updateballs(balls); drawballs(balls); charachter(); manabar(); manapoin=manapoin+0.03; checkCollision(); } if (gamestate==="lose"){ background(0); displayscore(); text("you lost",170,200); text("press refresh to play again",120,170); } if (balls.length===0){ gamestate="win"; } if(gamestate==="win"){ background(0); textSize(40); fill(255); text ("you won!!!",100,200); } };
Photo of William T.

William T.

Age
13
Cycles
1

Try out William's Cookie Clicker. See how many cookies you can collect by clicking the cookie. Although simple - this game can be highly addictive, with a fully functional store menu to buy more ways to collect cookies faster.

Photo of Peter

Peter, Hatch Coach

"Williams project was excellent! We were very impressed to see that William took a pre-existing game many of his peers play in their free time - but instead made his own version. This took a lot of skill and talent and we're excited to see more projects like this that other students can enjoy"

“William's Cookie Clicker”

var cookies = 0; var income = 0; var gameState = "main"; var scroller = 70; var cookieSp = 0; var clickerLevel = 0; var boxOne = 40; var boxtwo = 120; var superClick = 1; var clickercost = 99; var superclickcost = 999; var cookiehider = 20; var state = "Intro"; var hideCookie = function(){ strokeWeight(0.01); textSize(20); if(cookies < 100){ cookiehider = 44; fill(0, 255, 244); rect(cookiehider, 0, 160, 20); fill(161, 140, 2); text(" Cookies", cookiehider, 19); }else if(cookies > 99 && cookies < 1000){ cookiehider = 54; fill(0, 255, 244); rect(cookiehider, 0, 160, 20); fill(161, 140, 2); text(" Cookies", cookiehider, 19); }else if(cookies > 999 && cookies < 9999){ cookiehider = 64; fill(0, 255, 244); rect(cookiehider, 0, 160, 20); fill(161, 140, 2); text(" Cookies", cookiehider, 19); } }; var increaseCookies = function(){ cookies = cookies + cookieSp; }; var drawScroller = function(){ fill(255); rect(320, scroller, 40, 50); strokeWeight(3); line(330, scroller + 15, 350, scroller + 15); line(330, scroller + 25, 350, scroller + 25); line(330, scroller + 35, 350, scroller + 35); }; var drawShop = function(){ fill(230); rect(40, 30, 320, 340); strokeWeight(4); rect(320, 30, 40, 40); fill(0); textSize(40); text("X", 328, 65); fill(240); rect(320, 70, 40, 300); drawScroller(); fill(230); rect(40, 30, 280, 90); rect(40, 120, 280, 80); textSize(15); fill(0); text("Clicker Upgrade: + 1 Cookie / second", 50, boxOne + 5); text(" Cost:" + (clickercost + 1) + " Cookies", 50, boxOne + 30); text(" Level: " + clickerLevel, 50, boxOne + 50); text("Super Click Upgrade: x2 Cookie / click", 50, boxtwo + 15); text("Cost:" + (superclickcost + 1) + " Cookies", 50, boxtwo + 40); text("Cookies / click: " + superClick, 50, boxtwo + 60); }; var mainscreen = function(){ background(0, 255, 204); fill(179, 96, 7); strokeWeight(8); rect(20, 50, 360, 330); fill(0); strokeWeight(0.01); fill(0); ellipse(82, 107, 40, 40); ellipse(204, 178, 40, 40); ellipse(279, 82, 40, 40); ellipse(82, 107, 40, 40); ellipse(339, 199, 40, 40); ellipse(66, 225, 40, 40); ellipse(171, 313, 40, 40); ellipse(239, 257, 40, 40); fill(161, 140, 2); textSize(20); text(cookies, 20, 20); text("Shop", 350, 20); text(((cookieSp * 100) + income) + " cookie(s) / sec", 20, 40); text(superClick + " cookie(s) / click", 243, 40); }; var mouseClicked = function(){ if (state === "Intro"){ state = "Game"; } if (state === "Game"){ if(mouseX > 20 && mouseX < 380 && mouseY > 50 && mouseY < 380 && gameState === "main"){ cookies = cookies + superClick; }else if(mouseX > 350 && mouseY < 21){ gameState = "shop"; }else if(gameState === "shop"){ if(mouseX > 320 && mouseX < 360 && mouseY > 40 && mouseY < 70){ gameState = "main"; }else if(mouseX > 40 && mouseX < 320 && cookies > clickercost && clickerLevel < 100 && mouseY > 40 && mouseY < 120){ cookies = cookies - clickercost + 1; cookieSp = cookieSp + 0.01; scroller = 120; clickerLevel = clickerLevel + 1; clickercost = (clickercost + 1) * 1.5; }else if(mouseX < 320 && mouseX && mouseX > 40 && mouseY > 120 && mouseY < 200 && cookies > superclickcost ){ superClick = superClick * 2; cookies = cookies - superclickcost + 1; superclickcost = superclickcost * 2.05; } } } }; var keyPressed = function(){ if(keyCode === UP && scroller > 70){ scroller = scroller - 50; }else if(keyCode === DOWN && scroller < 300){ scroller = scroller + 50; } }; var draw = function() { switch(gameState){ case "main": mainscreen(); increaseCookies(); hideCookie(); break; case "shop": mainscreen(); drawShop(); increaseCookies(); hideCookie(); } };