{"name":"Jippity Tetris A Bowed Mars Production","description":"Drop, stack, and speed up! Play Super Block Drop and test your speed and stacking skills in this fast-paced block stacking game.","photo":"https://jippity.s3.amazonaws.com/CleanShot 2024-04-02 at 13.20.26@2x.png","view_count":0,"fork_count":0,"expires_at":null,"created_at":"2024-05-14T18:23:40.974291Z","updated_at":"2024-05-14T18:23:40.974294Z","user_id":5,"status":"PUBLIC","parent_id":8,"id":1426,"user":{"photo":null,"email":null,"recess_id":"b5574579-4904-b775-ad8e-eff5c085f819","created_at":"2023-12-12T12:00:51.087995Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"theop","id":5,"password_hash":null,"updated_at":"2023-12-12T12:00:51.087997Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"let blockWidth, blockHeight;\nlet nextBlockShape;\nlet blocks = [];\nlet currentBlock;\nlet isPaused = false;\nlet leftWall, rightWall;\nlet blockIdCounter = 0;\n\nconst shapes = [\n // Square\n {\n shape: [\n { x: 0, y: 0 },\n { x: 1, y: 0 },\n { x: 0, y: 1 },\n { x: 1, y: 1 }\n ],\n weight: 1\n },\n // L-shape\n {\n shape: [\n { x: 0, y: 0 },\n { x: 1, y: 0 },\n { x: 0, y: 1 },\n { x: 0, y: 2 }\n ],\n weight: 1\n },\n // Inverted L-shape\n {\n shape: [\n { x: 0, y: 0 },\n { x: -1, y: 0 },\n { x: 0, y: 1 },\n { x: 0, y: 2 }\n ],\n weight: 1\n },\n // T-shape\n {\n shape: [\n { x: 0, y: 0 },\n { x: -1, y: 1 },\n { x: 0, y: 1 },\n { x: 0, y: 2 }\n ],\n weight: 1\n },\n // Z-shape\n {\n shape: [\n { x: 0, y: 0 },\n { x: -1, y: 1 },\n { x: 0, y: 1 },\n { x: -1, y: 2 }\n ],\n weight: 1\n },\n // Inverted Z-shape\n {\n shape: [\n { x: 0, y: 0 },\n { x: 1, y: 1 },\n { x: 0, y: 1 },\n { x: 1, y: 2 }\n ],\n weight: 1\n },\n // Line\n {\n shape: [\n { x: 0, y: 0 },\n { x: 0, y: 1 },\n { x: 0, y: 2 },\n { x: 0, y: 3 }\n ],\n weight: 1\n }\n];\n\nlet pauseButton;\nlet toggleGuidelinesButton;\nlet muteButton;\nlet isMuted = false;\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n let blocksPerRow = 36;\n // Adjust blocksPerRow until blockWidth is an integer that perfectly divides the window width\n while (windowWidth % blocksPerRow !== 0) {\n blocksPerRow--;\n }\n blockWidth = windowWidth / blocksPerRow; // Now blockWidth is an integer\n blockHeight = blockWidth; // To keep the blocks square\n frameRate(60);\n console.log(\"Game started. Window width: \" + windowWidth + \", Block width: \" + blockWidth);\n\n leftWall = 5; // Wall starts at 5 blocks in from the left\n rightWall = 5; // Wall starts at 25 blocks in from the right\n\n pauseButton = createButton('');\n pauseButton.position(windowWidth - 80, 10); // Adjusted position to accommodate larger button size\n pauseButton.size(60, 60); // Increased size from 40,40 to 60,60\n pauseButton.style('font-size', '30px'); // Increased font size for larger button\n pauseButton.style('background', 'red');\n pauseButton.style('color', 'white');\n pauseButton.html('||');\n nextBlockShape = getRandomShape();\n\n toggleGuidelinesButton = createButton('Toggle Guidelines');\n toggleGuidelinesButton.position(10, windowHeight - 50); // Set position of the button\n toggleGuidelinesButton.mousePressed(toggleGuidelines); // Call toggleGuidelines function when button is pressed\n muteButton = createButton('Mute Game');\n muteButton.position(10, windowHeight - 80); // Set position of the button\n muteButton.mousePressed(toggleMute); // Call toggleMute function when button is pressed\n}\n\nfunction toggleMute() {\n isMuted = !isMuted;\n muteButton.html(isMuted ? 'Unmute Game' : 'Mute Game');\n}\n\nlet guidelinesVisible = false;\n\nfunction toggleGuidelines() {\n guidelinesVisible = !guidelinesVisible;\n}\n\nclass BlockGroup {\n constructor(x, y, width, height, color, shape) {\n this.x = x;\n this.y = y;\n this.blocks = [];\n for (let coord of shape) {\n let block = {\n x: this.x + coord.x * width,\n y: this.y + coord.y * height,\n width: width,\n height: height,\n color: color\n };\n this.blocks.push(block);\n }\n }\n\n draw() {\n this.alignWithGrid(); // Add this line\n for (let block of this.blocks) {\n fill(block.color);\n rect(block.x, block.y, block.width, block.height);\n }\n }\n\n\n moveDown(height) {\n for (let block of this.blocks) {\n block.y += height;\n }\n }\n\n includes(block) {\n return this.blocks.includes(block);\n }\n\n moveLeft(width) {\n // Calculate the next x-coordinate for the group\n let nextX = this.x - width;\n // Check if the group would collide at the next position\n let willCollide = willCollideAt(this, nextX, this.y);\n // If the group wouldn't collide, move the group\n if (!willCollide) {\n this.x -= width;\n this.blocks.forEach(block => block.x -= width);\n }\n }\n\n moveRight(width) {\n // Calculate the next x-coordinate for the group\n let nextX = this.x + width;\n // Check if the group would collide at the next position\n let willCollide = willCollideAt(this, nextX, this.y);\n // If the group wouldn't collide, move the group\n if (!willCollide) {\n this.x += width;\n this.blocks.forEach(block => block.x += width);\n }\n }\n\n rotateAroundPivot(pivot, block) {\n let dx = (block.x - pivot.x) / block.width;\n let dy = (block.y - pivot.y) / block.height;\n // Calculate the new positions based on a 90 degree rotation\n let newX = pivot.x - dy * block.width;\n let newY = pivot.y + dx * block.height;\n // Round to the nearest block width/height to align with the grid\n newX = Math.round(newX / block.width) * block.width;\n newY = Math.round(newY / block.height) * block.height;\n return { x: newX, y: newY };\n }\n\n rotate() {\n // Use the first block as the pivot\n let pivot = this.blocks[0];\n // Calculate new positions for each block after rotation\n let newPositions = this.blocks.map(block => this.rotateAroundPivot(pivot, block));\n // Check if any of the new positions would result in a collision or go out of bounds\n for (let i = 0; i < newPositions.length; i++) {\n let newPos = newPositions[i];\n if (newPos.x < 0 || newPos.x + this.blocks[i].width > windowWidth || newPos.y + this.blocks[i].height > windowHeight || willCollideAt(this, newPos.x, newPos.y)) {\n // If so, don't rotate\n console.log(\"Couldn't rotate because of collision!\")\n return;\n }\n }\n // If no collisions or out of bounds, apply the rotation and align the new positions to the grid\n for (let i = 0; i < this.blocks.length; i++) {\n this.blocks[i].x = newPositions[i].x;\n this.blocks[i].y = newPositions[i].y;\n }\n // Align the blocks with the grid after rotating\n this.alignWithGrid();\n }\n\n toString() {\n return this.blocks.map((block, index) => {\n return `Block ${index}: x = ${block.x}, y = ${block.y}`;\n }).join('\\n');\n }\n\n alignWithGrid() {\n for (let block of this.blocks) {\n // Calculate the desired position\n let desiredX = Math.round(block.x / block.width) * block.width;\n let desiredY = Math.round(block.y / block.height) * block.height;\n // If the block is not already at the desired position, move it there\n if (block.x !== desiredX || block.y !== desiredY) {\n console.log(`Block at (${block.x}, ${block.y}) moving to (${desiredX}, ${desiredY})`);\n block.x = desiredX;\n block.y = desiredY;\n }\n }\n }\n}\n\nfunction drawWalls() {\n const wallColor = color(0, 0, 0); // Black color\n\n // Draw left wall\n fill(wallColor);\n rect(0, 0, leftWall * blockWidth, windowHeight); // Use leftWall for the wall width\n\n // Draw right wall\n fill(wallColor);\n rect(windowWidth - rightWall * blockWidth, 0, rightWall * blockWidth, windowHeight); // Use rightWall for the wall width\n}\n\nfunction playSound(frequency, duration) {\n if (isMuted) return;\n\n const context = new AudioContext();\n const oscillator = context.createOscillator();\n const gain = context.createGain();\n\n oscillator.connect(gain);\n gain.connect(context.destination);\n\n oscillator.type = 'square'; // square wave\n oscillator.frequency.value = frequency; // frequency in hertz\n\n gain.gain.setValueAtTime(0, context.currentTime);\n gain.gain.linearRampToValueAtTime(1, context.currentTime + 0.01); // fade in\n gain.gain.linearRampToValueAtTime(0, context.currentTime + duration); // fade out\n\n oscillator.start(context.currentTime);\n oscillator.stop(context.currentTime + duration);\n}\n\nfunction drawGrid() {\n stroke(0); // Black color for the grid lines\n for (let x = 0; x <= windowWidth; x += blockWidth) {\n line(x, 0, x, windowHeight);\n }\n for (let y = 0; y <= windowHeight; y += blockHeight) {\n line(0, y, windowWidth, y);\n }\n}\n\nfunction draw() {\n if (!isPaused) {\n strokeWeight(2);\n\n background(220);\n drawBlocks();\n drawWalls();\n drawGrid();\n drawGuidelines();\n\n fill(255);\n rect(10, 10, 160, 40);\n\n textSize(32);\n fill(0);\n text('Score: ' + score, 20, 40);\n\n if (currentBlock && checkCollision(currentBlock.blocks)) {\n currentBlock = null;\n clearLines();\n }\n if (!currentBlock) {\n generateBlocks();\n }\n handleArrowKeys();\n }\n}\n\nlet lateralMoveCooldownMax = 10;\nlet lateralMoveCooldown = lateralMoveCooldownMax;\nlet initialKeyPress = true;\nlet initialKeyPressDelay = 0;\n\n// Declare a new variable at the top of your script\nlet collisionCooldown = 0;\n\n// Update the function `handleArrowKeys`\nfunction handleArrowKeys() {\n let direction = keyIsDown(LEFT_ARROW) ? -1 : (keyIsDown(RIGHT_ARROW) ? 1 : 0);\n\n if (direction !== 0) {\n if (initialKeyPress) {\n if (initialKeyPressDelay > 7) {\n initialKeyPress = false;\n initialKeyPressDelay = 0;\n lateralMoveCooldown = lateralMoveCooldownMax;\n } else {\n initialKeyPressDelay++;\n return;\n }\n }\n\n if (lateralMoveCooldown <= 0) {\n let nextX = currentBlock.x + direction * blockWidth;\n let willCollide = willCollideAt(currentBlock, nextX, currentBlock.y);\n\n if (!willCollide || collisionCooldown < 30) {\n if (direction === -1) {\n currentBlock.moveLeft(blockWidth);\n } else {\n currentBlock.moveRight(blockWidth);\n }\n }\n lateralMoveCooldown = lateralMoveCooldown > 1 ? lateralMoveCooldown - 1 : 1;\n } else {\n lateralMoveCooldown--;\n }\n }\n}\n\nfunction keyReleased() {\n if (keyCode === LEFT_ARROW || keyCode === RIGHT_ARROW) {\n initialKeyPress = true;\n }\n}\n\nfunction willCollideAt(blockGroup, nextX, nextY) {\n // Calculate the next positions of the individual squares in the block\n let nextPositions = blockGroup.blocks.map(block => ({\n x: block.x + (nextX - blockGroup.x),\n y: block.y + (nextY - blockGroup.y),\n width: block.width,\n height: block.height\n }));\n\n for (let nextBlock of nextPositions) {\n // Check if the square would go out of the screen or hit the wall\n if (nextBlock.x < leftWall * blockWidth || nextBlock.x + nextBlock.width > windowWidth - rightWall * blockWidth || nextBlock.y + nextBlock.height > windowHeight) {\n return true;\n }\n // Check if the square would overlap with another square\n for (let otherBlock of blocks) {\n if (blockGroup.blocks.includes(otherBlock)) continue;\n if (nextBlock.x < otherBlock.x + otherBlock.width &&\n nextBlock.x + nextBlock.width > otherBlock.x &&\n nextBlock.y < otherBlock.y + otherBlock.height &&\n nextBlock.y + nextBlock.height > otherBlock.y) {\n return true;\n }\n }\n }\n return false;\n}\n\nfunction keyPressed() {\n if (keyCode === 80) { // 'P' key for Pause\n isPaused = !isPaused;\n }\n\n if (keyCode === LEFT_ARROW || keyCode === RIGHT_ARROW) {\n let direction = (keyCode === LEFT_ARROW ? -1 : 1);\n let nextX = currentBlock.x + direction * blockWidth;\n let willCollide = willCollideAt(currentBlock, nextX, currentBlock.y);\n if (!willCollide) {\n if (direction === -1) {\n currentBlock.moveLeft(blockWidth);\n } else {\n currentBlock.moveRight(blockWidth);\n }\n }\n }\n if (keyCode === UP_ARROW && currentBlock) {\n currentBlock.rotate();\n }\n}\n\n\nfunction checkCollision(blocksGroup) {\n let nextPositions = blocksGroup.map(block => ({ ...block, y: block.y + blockHeight }));\n\n for (let nextBlock of nextPositions) {\n // Check if the block would hit the bottom of the window\n if (nextBlock.y >= windowHeight) {\n console.log(\"Collision: Block hit the bottom of the window.\");\n playSound(85, 0.1);\n return true;\n }\n // Check if the block would hit another block from the top\n for (let otherBlock of blocks) {\n if (blocksGroup.includes(otherBlock)) continue;\n if (nextBlock.x < otherBlock.x + otherBlock.width &&\n nextBlock.x + nextBlock.width > otherBlock.x &&\n nextBlock.y < otherBlock.y + otherBlock.height &&\n nextBlock.y + nextBlock.height > otherBlock.y) {\n console.log(\"Collision: Block hit another block.\");\n playSound(75, 0.1);\n return true;\n }\n }\n }\n return false;\n}\n\nfunction gameOver(blocksGroup) {\n for (let block of blocksGroup) {\n if (block.y + block.height >= windowHeight) {\n console.log(\"Game Over: Block reached the bottom of the window.\");\n return true;\n }\n for (let otherBlock of blocks) {\n if (blocksGroup.includes(otherBlock)) continue;\n if (otherBlock.x < block.x + block.width &&\n otherBlock.x + otherBlock.width > block.x &&\n otherBlock.y < block.y + block.height &&\n otherBlock.y + otherBlock.height > block.y) {\n console.log(\"Game Over: Block collided with another block.\");\n return true;\n }\n }\n }\n return false;\n}\n\nfunction generateBlocks() {\n let x = Math.floor((windowWidth / 2) / blockWidth) * blockWidth;\n let y = 0;\n let width = blockWidth;\n let height = blockHeight;\n let groupColor = color(random(255), random(255), random(255));\n let shape = nextBlockShape;\n // Generate a new nextBlockShape\n nextBlockShape = getRandomShape();\n currentBlock = new BlockGroup(x, y, width, height, groupColor, shape);\n // Add all blocks in the group to the blocks array\n for (let block of currentBlock.blocks) {\n blocks.push(block);\n }\n if (gameOver(currentBlock.blocks)) {\n textSize(32);\n text('Game Over!', round(windowWidth / 2), windowHeight / 2);\n noLoop();\n }\n}\n\nlet fallCooldown = 0\nfunction coolDown(number) {\n if (fallCooldown >= number) {\n fallCooldown = 0\n return true\n } else {\n fallCooldown = fallCooldown + 1\n return false\n }\n}\n\nfunction drawBlocks() {\n // Determine if the blocks should fall this frame\n let shouldFall = false;\n if (keyIsDown(DOWN_ARROW)) {\n shouldFall = coolDown(3); // Fall faster when 's' is held\n } else {\n shouldFall = coolDown(60 - score); // Normal speed\n }\n\n // Draw and move all blocks\n for (let block of blocks) {\n let crossColor = lerpColor(block.color, color(255, 255, 255), 0.4); // Interpolate towards white to get a lighter color\n stroke(crossColor); // Use the lighter color for the cross\n fill(block.color);\n rect(block.x, block.y, block.width, block.height);\n\n line(block.x, block.y, block.x + block.width, block.y + block.height); // Diagonal from top-left to bottom-right\n line(block.x, block.y + block.height, block.x + block.width, block.y); // Diagonal from bottom-left to top-right\n\n let innerBlockSize = 0.7; // Adjust this to change the size of the inner block\n let innerBlockX = block.x + (block.width * (1 - innerBlockSize)) / 2;\n let innerBlockY = block.y + (block.height * (1 - innerBlockSize)) / 2;\n let innerBlockWidth = block.width * innerBlockSize;\n let innerBlockHeight = block.height * innerBlockSize;\n\n let innerBlockColor = lerpColor(block.color, color(0, 0, 0), 0.2); // Interpolate towards black\n fill(innerBlockColor); // Fill with the darker color\n rect(innerBlockX, innerBlockY, innerBlockWidth, innerBlockHeight);\n }\n\n // Check if the current block group would collide\n let wouldCollide = currentBlock && checkCollision(currentBlock.blocks);\n if (wouldCollide) {\n collisionCooldown++; // Increment the collision cooldown\n } else {\n collisionCooldown = 0; // Reset the collision cooldown\n }\n\n // If the collision cooldown is greater than 30 (which is roughly half a second at 60 frames per second), halt the block's fall\n // Move the current block group down if it should fall and the collision cooldown is not too high\n if (currentBlock && shouldFall && collisionCooldown < 30) {\n currentBlock.moveDown(blockHeight);\n }\n}\n\nfunction drawGuidelines() {\n if (currentBlock && guidelinesVisible) {\n let guidelineY;\n // if there are blocks on the screen, draw the guideline to the highest block on the screen\n if (blocks.length > 0) {\n guidelineY = Math.max(...blocks.filter(block => !currentBlock.includes(block)).map(block => block.y)) + blockHeight;\n } else {\n // if there are no blocks on the screen, draw the guideline to the bottom of the screen\n guidelineY = windowHeight;\n }\n\n guidelineY = Math.min(guidelineY, windowHeight);\n\n let leftMostBlock = currentBlock.blocks.sort((a, b) => a.x - b.x)[0];\n let rightMostBlock = currentBlock.blocks.sort((a, b) => b.x - a.x)[0];\n\n stroke('#51aff7'); // light blue\n strokeWeight(6); // Set the thickness to 2 pixels\n line(leftMostBlock.x, 0, leftMostBlock.x, guidelineY);\n line(rightMostBlock.x + rightMostBlock.width, 0, rightMostBlock.x + rightMostBlock.width, guidelineY);\n strokeWeight(2);\n }\n}\n\nfunction clearLines() {\n let linesCleared = 0;\n for (let i = 0; i < windowHeight; i += blockHeight) {\n let lineBlocks = blocks.filter(block => block.y === i);\n // Filter out blocks that are within the walls\n lineBlocks = lineBlocks.filter(block => block.x >= leftWall * blockWidth && block.x + block.width <= windowWidth - rightWall * blockWidth);\n // Only clear the line if all spaces between the walls are occupied\n if (lineBlocks.length === (windowWidth - leftWall * blockWidth - rightWall * blockWidth) / blockWidth) {\n blocks = blocks.filter(block => block.y !== i || block.x < leftWall * blockWidth || block.x + block.width > windowWidth - rightWall * blockWidth);\n blocks.forEach(block => {\n if (block.y < i) {\n block.y += blockHeight;\n }\n });\n linesCleared++;\n i -= blockHeight;\n playSound(150 + linesCleared * 50, 0.1); // play a sound with a frequency proportional to the number of lines cleared\n }\n }\n updateScore(linesCleared);\n}\n\nlet score = 0;\n\nfunction updateScore(linesCleared) {\n score += linesCleared * 1;\n}\n\nfunction addBonusFeatures() {\n // Implement bonus features\n}\n\nfunction getRandomShape() {\n // Calculate the total weight\n let totalWeight = shapes.reduce((total, shape) => total + shape.weight, 0);\n // Get a random value\n let randomValue = Math.random() * totalWeight;\n // Find the shape that this value corresponds to\n for (let shape of shapes) {\n if (randomValue < shape.weight) {\n return shape.shape;\n }\n randomValue -= shape.weight;\n }\n}","style.css":"","index.html":"[Verse]\nBlueberry\nHarshnack\nAlways everyone Harshnack\nBlueberry\nHarshnack\nThe dungeon master\nThe event maker\nHarshnack\nBlueberry\n\n[Verse 2]\n8 Harshnacks\nNone finished\nApplications\nAnnihilations\nBlueberry (Harshnack)\nInfinite Harshnack\nNever-ending\nIf I was Josiah\nI would explode\nBlueberry\nHarshnack\nBlueberry\nBlueberry\nHarshnack\nBlueberry\nBlueberry (Harshnack)\nAaaasssshhhhtooooooonnnnnn\n\n[Chorus]\nHarshnack\nBlueberry\nHarshnack\nThe Blueberrys cannot be stopped\nInfinite Harshnack (Harshnack)\nIt's the second coming of the nates!\nBlueberry\nHarshnack\nDm Harshnack\nBecome Blueberry\nNow in 2 easy steps"},"chat_history":[],"assets":[],"messages_sent":0,"comments":[],"steps":[{"instruction":"Implement the visual representation of falling blocks on the game screen.","title":"Visible Falling Blocks","created_at":"2023-12-12T19:08:46.539191","project_id":1426,"complete":false,"step_number":0,"updated_at":"2024-05-14T18:23:40.978496","id":7737},{"instruction":"Allow players to move and rotate the falling blocks using keyboard input.","title":"User Input for Block Movement","created_at":"2023-12-12T19:08:46.539280","project_id":1426,"complete":false,"step_number":1,"updated_at":"2024-05-14T18:23:40.978630","id":7738},{"instruction":"Detect collisions between the falling blocks and the stack, as well as the edges of the game area.","title":"Collision Detection","created_at":"2023-12-12T19:08:46.539326","project_id":1426,"complete":false,"step_number":2,"updated_at":"2024-05-14T18:23:40.978697","id":7739},{"instruction":"Implement a scoring system to track and display the player's score as they stack blocks and clear rows.","title":"Scoring System","created_at":"2023-12-12T19:08:46.539366","project_id":1426,"complete":false,"step_number":3,"updated_at":"2024-05-14T18:23:40.978749","id":7740},{"instruction":"Add the ability for players to make the blocks fall faster by holding the 's' key, providing an extra level of control and challenge.","title":"Faster Falling Blocks","created_at":"2023-12-12T19:08:46.539406","project_id":1426,"complete":false,"step_number":4,"updated_at":"2024-05-14T18:23:40.978803","id":7741},{"instruction":"Detect when the stacked blocks reach the top of the game area, signaling the end of the game.","title":"Game Over Detection","created_at":"2023-12-12T19:08:46.539444","project_id":1426,"complete":false,"step_number":5,"updated_at":"2024-05-14T18:23:40.978840","id":7742},{"instruction":"Allow players to start, pause, and restart the game as needed.","title":"Start/Pause/Restart Controls","created_at":"2023-12-12T19:08:46.539495","project_id":1426,"complete":false,"step_number":6,"updated_at":"2024-05-14T18:23:40.978881","id":7743},{"instruction":"Incorporate sound effects to provide feedback to the player during gameplay.","title":"Audio Feedback","created_at":"2023-12-12T19:08:46.539545","project_id":1426,"complete":false,"step_number":7,"updated_at":"2024-05-14T18:23:40.978945","id":7744}]}