Try to fit the blocks into the puzzle.Use right and left arrows to click through different block shapes and click to place the block.Use backspace to undo the most recent move.
The showcase player uses a modified version of Processing.js in combination with jsweet to let students program their apps in Java code while still allowing for browser support.
Content created by students is scaled to fit the showcase frame while maintaining aspect ratio and cursor position. This is why some projects may appear blurry in fullscreen, or why some small details may not be visible on a small screen
<iframe width='500px' height='400px' src='https://nest.ktbyte.com/nest#204901' allowfullscreen></iframe>
/*project name: block puzzle - fit blocks into puzzle shape needs 2d array have grid with squares unfilled or filled objects- puzzle shapes: drag with mouse and place in spot */ PImage replay; PImage next; PImage levels; PImage play; PImage home; PImage back; int GRIDSIZE = 4; //how many squares per side int STEPSIZE = 100; //# of pixels per square int blockIndex = 0; int[][] grid = new int[GRIDSIZE][GRIDSIZE]; int[][] Pgrid = new int[GRIDSIZE][GRIDSIZE]; //previous version of grid color[] mColor = { color(235, 64, 52), color(235, 180, 52), color(252, 255, 163), color(197, 255, 163), color(61, 227, 186), color(171, 123, 237), color(237, 123, 191), color(88, 224, 195), }; PVector[] cBlock; PVector[][] blocks = { { new PVector(0, 0), new PVector( - 1, 0), new PVector(1, 0), }, //horizontal block { new PVector(0, 0), new PVector(0, -1), new PVector(0, 1), }, //vertical block { new PVector(0, 0), new PVector(0, -1), new PVector(1, 0), new PVector(1, -1), }, //square { new PVector(0, 0), new PVector(0, 1), new PVector(1, 0), }, //L shape { new PVector(0, 0), new PVector( - 1, 0), new PVector(0, -1), }, //7 shape { new PVector(0, 0), new PVector(1, 0), new PVector(0, -1), }, //backwards 7 shape { new PVector(0, 0), new PVector( - 1, 0), new PVector(0, 1), }, //backwards L shape {new PVector(0,0), }, }; String[] hStep = { //little hints after levels "Try solving with\nall one block!", "Can you finish the\nlevel without undos?", "Try to solve so the end\ncolor is purple!", "Try using every block\nat least once!", "Try solving without\nskipping through blocks!", "Try solving on\nyour first try!", "Even if you pass level 12,\nthe levels continue!" }; int hint = 0; int screen = 0; int blockType = 7; boolean allFull() { for (int i = 0; i < GRIDSIZE; i++) { for (int j = 0; j < GRIDSIZE; j++) { if (grid[i][j] != 1) { return false; } } } return true; // } void setup() { size(600, 600); textFont(createFont("Courier Bold", 12)); replay = loadImage("https://image.flaticon.com/icons/png/512/60/60825.png"); next = loadImage("https://cdn2.iconfinder.com/data/icons/media-controls-5/100/skip_forward-512.png"); levels = loadImage("https://cdn4.iconfinder.com/data/icons/game-interface-outline/100/objects-06-512.png"); play = loadImage("https://cdn3.iconfinder.com/data/icons/seo-marketing-2-1/48/56-512.png"); home = loadImage("https://image.flaticon.com/icons/png/512/70/70370.png"); back = loadImage("https://image.flaticon.com/icons/png/512/93/93634.png"); cBlock = blocks[blockIndex]; blockIndex++; blockIndex = blockIndex % blockType; } void draw() { background(140, 177, 207); if (screen == 0) { gameStart(); } if (screen == 1) { dragRect(); //gameStart(); gameWon(); } if (screen ==2){ levelScreen(); } } void dragRect() { rectMode(CORNER); for (int i = 0; i < GRIDSIZE; i++) { for (int j = 0; j < GRIDSIZE; j++) { if (grid[i][j] == 0) { fill(255); } else { fill(mColor[blockIndex]); } rect(100 + i * STEPSIZE, 100 + j * STEPSIZE, STEPSIZE, STEPSIZE); } } } void gameWon() { if (allFull() == true) { rectMode(CENTER); textAlign(CENTER); imageMode(CENTER); textSize(40); fill(mColor[blockIndex - 1]); rect(width / 2, height / 2, 450, 450, 40); fill(0); text("You Passed!", width / 2, 200); textSize(25); text(hStep[hint], width / 2, 250); fill(247, 247, 247); rect(200, 400, 125, 125, 20); rect(400, 400, 125, 125, 20); image(replay, 200, 400, 75, 75); image(next, 400, 400, 100, 100); } else { fill(247); rectMode(CENTER); imageMode(CENTER); rect(50, 50, 50, 50, 20); image(replay, 50, 50, 30, 30); rect(125,50,50,50,20); image(home, 125,50,35,35); fill(mColor[blockIndex]); for (PVector p: cBlock) { rectMode(CENTER); rect(mouseX + p.x * STEPSIZE, mouseY + p.y * STEPSIZE, STEPSIZE, STEPSIZE); } } } void gameStart() { rectMode(CENTER); textAlign(CENTER); imageMode(CENTER); textSize(70); fill(247); rect(width / 2, height / 2, 450, 450, 40); fill(0); text("BLOCK\nPUZZLE", width / 2, 200); image(levels,200,400,150,150); image(play,400,400,140,140); } void levelScreen(){ rectMode (CENTER); ellipseMode (CENTER); textAlign(CENTER); imageMode(CENTER); fill(247); rect(width/2, height/2, 450, 450,40); strokeWeight(3); fill(247); ellipse(150,230, 75,75); ellipse(250,230,75,75); ellipse(350,230,75,75); ellipse(450,230,75,75); ellipse(150,330,75,75); ellipse(250,330,75,75); ellipse(350,330,75,75); ellipse(450,330,75,75); ellipse(150,430,75,75); ellipse(250,430,75,75); ellipse(350,430,75,75); ellipse(450,430,75,75); fill(0); textSize(40); text("LEVELS", width/2, 150); textSize(40); text("1",150,240); text("2",250,240); text("3",350,240); text("4",450,240); text("5",150,340); text("6",250,340); text("7",350,340); text("8",450,340); text("9",150,440); text("10",250,440); text("11",350,440); text("12",450,440); image(back,150,140,50,50); strokeWeight(1); } void mousePressed() { if (screen == 1) { int i = (int)(mouseX - 100) / STEPSIZE; int j = (int)(mouseY - 100) / STEPSIZE; for (int col = 0; col < GRIDSIZE; col++) { for (int row = 0; row < GRIDSIZE; row++) { Pgrid[col][row] = grid[col][row]; } }// if (mouseX > 100 && mouseX < width - 100 && isLegalMove(cBlock)) { for (PVector p: cBlock) { grid[i + (int) p.x][j + (int) p.y] = 1; } cBlock = blocks[blockIndex]; blockIndex++; blockIndex = blockIndex % blockType; } } if (dist(mouseX, mouseY, 200, 400) < 63 && allFull() == true) { grid = new int[GRIDSIZE][GRIDSIZE]; Pgrid = new int[GRIDSIZE][GRIDSIZE]; hint = (int) random(0, hStep.length); } if (dist(mouseX, mouseY, 400, 400) < 63 && allFull() == true) { GRIDSIZE++; STEPSIZE = (400 / GRIDSIZE); grid = new int[GRIDSIZE][GRIDSIZE]; Pgrid = new int[GRIDSIZE][GRIDSIZE]; hint = (int) random(0, hStep.length); } if (dist(mouseX, mouseY, 50, 50) < 25 && allFull() == false) { grid = new int[GRIDSIZE][GRIDSIZE]; Pgrid = new int[GRIDSIZE][GRIDSIZE]; } if (dist(mouseX, mouseY, 125, 50) <25 && allFull() == false){ screen = 0; } if (dist(mouseX, mouseY, 400,400) <75 && screen == 0) { screen = 1; } if (dist(mouseX, mouseY, 200,400) <75 && screen == 0){ screen = 2; }else if (dist(mouseX,mouseY,150,140)<25 && screen ==2){ screen = 0; }else if (dist(mouseX,mouseY,150,230)<37 && screen ==2){ GRIDSIZE=4; STEPSIZE=400/GRIDSIZE; grid = new int[GRIDSIZE][GRIDSIZE]; Pgrid = new int[GRIDSIZE][GRIDSIZE]; hint = (int) random(0, hStep.length); screen = 1; }else if (dist(mouseX,mouseY,250,230)<37 && screen ==2){ GRIDSIZE=5; STEPSIZE=400/GRIDSIZE; grid = new int[GRIDSIZE][GRIDSIZE]; Pgrid = new int[GRIDSIZE][GRIDSIZE]; hint = (int) random(0, hStep.length); screen = 1; }else if (dist(mouseX,mouseY,350,230)<37 && screen ==2){ GRIDSIZE=6; STEPSIZE=400/GRIDSIZE; grid = new int[GRIDSIZE][GRIDSIZE]; Pgrid = new int[GRIDSIZE][GRIDSIZE]; hint = (int) random(0, hStep.length); screen = 1; }else if (dist(mouseX,mouseY,450,230)<37 && screen ==2){ GRIDSIZE=7; STEPSIZE=400/GRIDSIZE; grid = new int[GRIDSIZE][GRIDSIZE]; Pgrid = new int[GRIDSIZE][GRIDSIZE]; hint = (int) random(0, hStep.length); screen = 1; }else if (dist(mouseX,mouseY,150,330)<37 && screen ==2){ GRIDSIZE=8; STEPSIZE=400/GRIDSIZE; grid = new int[GRIDSIZE][GRIDSIZE]; Pgrid = new int[GRIDSIZE][GRIDSIZE]; hint = (int) random(0, hStep.length); screen = 1; }else if (dist(mouseX,mouseY,250,330)<37 && screen ==2){ GRIDSIZE=9; STEPSIZE=400/GRIDSIZE; grid = new int[GRIDSIZE][GRIDSIZE]; Pgrid = new int[GRIDSIZE][GRIDSIZE]; hint = (int) random(0, hStep.length); screen = 1; }else if (dist(mouseX,mouseY,350,330)<37 && screen ==2){ GRIDSIZE=10; STEPSIZE=400/GRIDSIZE; grid = new int[GRIDSIZE][GRIDSIZE]; Pgrid = new int[GRIDSIZE][GRIDSIZE]; hint = (int) random(0, hStep.length); screen = 1; }else if (dist(mouseX,mouseY,450,330)<37 && screen ==2){ GRIDSIZE=11; STEPSIZE=400/GRIDSIZE; grid = new int[GRIDSIZE][GRIDSIZE]; Pgrid = new int[GRIDSIZE][GRIDSIZE]; hint = (int) random(0, hStep.length); screen = 1; }else if (dist(mouseX,mouseY,150,430)<37 && screen ==2){ GRIDSIZE=12; STEPSIZE=400/GRIDSIZE; grid = new int[GRIDSIZE][GRIDSIZE]; Pgrid = new int[GRIDSIZE][GRIDSIZE]; hint = (int) random(0, hStep.length); screen = 1; }else if (dist(mouseX,mouseY,250,430)<37 && screen ==2){ GRIDSIZE=13; STEPSIZE=400/GRIDSIZE; grid = new int[GRIDSIZE][GRIDSIZE]; Pgrid = new int[GRIDSIZE][GRIDSIZE]; hint = (int) random(0, hStep.length); screen = 1; }else if (dist(mouseX,mouseY,350,430)<37 && screen ==2){ GRIDSIZE=14; STEPSIZE=400/GRIDSIZE; grid = new int[GRIDSIZE][GRIDSIZE]; Pgrid = new int[GRIDSIZE][GRIDSIZE]; hint = (int) random(0, hStep.length); screen = 1; }else if (dist(mouseX,mouseY,450,430)<37 && screen ==2){ GRIDSIZE=15; STEPSIZE=400/GRIDSIZE; grid = new int[GRIDSIZE][GRIDSIZE]; Pgrid = new int[GRIDSIZE][GRIDSIZE]; hint = (int) random(0, hStep.length); screen = 1; } /*grid[i][j]=1; grid[i-1][j]=1; grid[i+1][j]=1;*/ } void keyPressed() { if (keyCode == RIGHT) { cBlock = blocks[blockIndex]; blockIndex++; blockIndex = blockIndex % blockType; } if(keyCode == LEFT){ if (blockIndex == 0){ blockIndex=6; } cBlock = blocks[blockIndex]; blockIndex--; blockIndex = blockIndex%blockType; } if (keyCode == DELETE || keyCode == BACKSPACE) { for (int col = 0; col < GRIDSIZE; col++) { for (int row = 0; row < GRIDSIZE; row++) { grid[col][row] = Pgrid[col][row]; } } } } boolean isLegalMove(PVector[] a) { int i = (int)(mouseX - 100) / STEPSIZE; int j = (int)(mouseY - 100) / STEPSIZE; for (PVector p: a) { if (i + p.x < 0 || i + p.x > (GRIDSIZE - 1) || j + p.y < 0 || j + p.y > (GRIDSIZE - 1)) { return false; } if (grid[i + (int) p.x][j + (int) p.y] != 0) { return false; } /*if(mouseX + p.x*100 > 450 || mouseX+p.x*100 <150){ return false; }*/ } return true; }