{"name":"Jippity Tetris","description":"Experience the classic game of Tetris with a fun and quirky twist! Jippity Tetris brings you the familiar falling blocks and intuitive gameplay, minus the distractions, so you can focus on stacking and scoring big!","photo":null,"view_count":6,"fork_count":0,"expires_at":null,"created_at":"2024-02-17T18:53:41.338239Z","updated_at":"2024-02-17T18:59:06.252361Z","user_id":2,"status":"PRIVATE","parent_id":null,"id":669,"user":{"username":"gamerc0der","id":2,"password_hash":null,"updated_at":"2023-12-11T22:13:50.357943Z","reset_token_expiry":null,"subscription_status":null,"photo":null,"email":null,"recess_id":"a75a82d5-5ae6-41b7-d20f-788415be036d","created_at":"2023-12-11T22:13:50.357940Z","reset_token":null,"stripe_customer_id":null,"seats":null},"code":{"script.js":"let grid;\r\nlet cols;\r\nlet rows;\r\nlet resolution = 20;\r\nlet currentPiece;\r\nlet counter = 0;\r\nconst speed = 4;\r\nlet redirect = 0;\r\nlet difficultyIncrement = 50; // This value controls how often the speed increases.\r\nclass Piece {\r\n constructor() {\r\n this.shapes = [\r\n [[1, 1], [1, 1]], // O shape (square)\r\n [[1, 1, 1]], // I shape (line) with 3 blocks instead of 4 for simplicity\r\n [[1, 1]] // 2-block line, even simpler than I shape\r\n ];\r\n this.reset();\r\n }\r\n dropToBottom() {\r\n // Flag to indicate the piece is dropping to the bottom\r\n this.isDropping = true;\r\n\r\n let dropInterval = setInterval(() => {\r\n if (!this.checkCollision()) {\r\n this.y++;\r\n } else {\r\n clearInterval(dropInterval);\r\n this.y--; // Correct the final position\r\n this.place();\r\n this.reset();\r\n // Reset the dropping flag\r\n this.isDropping = false;\r\n }\r\n }, 5); // Adjust this value to control the speed of descent\r\n }\r\n reset() {\r\n const randomIndex = floor(random(this.shapes.length));\r\n this.shape = this.shapes[randomIndex];\r\n this.x = floor(cols / 2) - floor(this.shape[0].length / 2);\r\n this.y = 0;\r\n }\r\n\r\n show() {\r\n fill(175, 0, 255);\r\n for (let i = 0; i < this.shape.length; i++) {\r\n for (let j = 0; j < this.shape[i].length; j++) {\r\n if (this.shape[i][j] == 1) {\r\n let x = (this.x + j) * resolution;\r\n let y = (this.y + i) * resolution;\r\n rect(x, y, resolution - 1, resolution - 1);\r\n }\r\n }\r\n }\r\n }\r\n\r\n move() {\r\n this.y++;\r\n if (this.checkCollision()) {\r\n this.y--;\r\n if (this.y < 1) {\r\n if (redirect == 0) {\r\n console.log(\"TEST\")\r\n redirect = 1\r\n window.location.replace(\"https://www.jippity.pro/670\");\r\n\r\n }\r\n\r\n }\r\n this.place();\r\n this.reset();\r\n }\r\n }\r\n checkCollision() {\r\n for (let i = 0; i < this.shape.length; i++) {\r\n for (let j = 0; j < this.shape[i].length; j++) {\r\n if (this.shape[i][j] == 1) {\r\n let newX = this.x + j;\r\n let newY = this.y + i;\r\n // Check if the new position is out of bounds\r\n if (newX < 0 || newX >= cols || newY >= rows) {\r\n return true;\r\n }\r\n // Check grid collision only if newY is not negative (above the grid)\r\n if (newY >= 0 && grid[newX][newY] == 1) {\r\n return true;\r\n }\r\n }\r\n }\r\n }\r\n return false;\r\n }\r\n\r\n place() {\r\n for (let i = 0; i < this.shape.length; i++) {\r\n for (let j = 0; j < this.shape[i].length; j++) {\r\n if (this.shape[i][j] == 1) {\r\n grid[this.x + j][this.y + i] = 1;\r\n }\r\n }\r\n }\r\n }\r\n rotate() {\r\n this.shape = this.shape[0].map((val, index) => this.shape.map(row => row[index])).reverse();\r\n if (this.checkCollision()) {\r\n this.shape = this.shape[0].map((val, index) => this.shape.map(row => row[index])).reverse();\r\n }\r\n }\r\n moveX(direction) {\r\n this.x += direction;\r\n if (this.checkCollision()) {\r\n this.x -= direction;\r\n }\r\n }\r\n}\r\nfunction keyPressed() {\r\n if (keyCode === LEFT_ARROW || key === 'a' || key === 'A') {\r\n currentPiece.moveX(-1);\r\n } else if (keyCode === RIGHT_ARROW || key === 'd' || key === 'D') {\r\n currentPiece.moveX(1);\r\n } else if (keyCode === UP_ARROW || key === 'w' || key === 'W') {\r\n currentPiece.rotate();\r\n } else if (keyCode === 32 || key === 's' || key === 'S') { // SPACE bar or S key\r\n currentPiece.dropToBottom();\r\n }\r\n}\r\nfunction setup() {\r\n let myCanvas = createCanvas(200, 400);\r\n myCanvas.parent('gameContainer'); // This line attaches the canvas to the gameContainer div\r\n cols = width / resolution;\r\n rows = height / resolution;\r\n\r\n grid = make2DArray(cols, rows);\r\n for (let i = 0; i < cols; i++) {\r\n for (let j = 0; j < rows; j++) {\r\n grid[i][j] = 0;\r\n }\r\n }\r\n\r\n currentPiece = new Piece();\r\n}\r\nfunction draw() {\r\n background(0);\r\n\r\n counter++;\r\n if (counter >= speed) {\r\n currentPiece.move();\r\n counter = 0;\r\n }\r\n\r\n currentPiece.show();\r\n\r\n for (let i = 0; i < cols; i++) {\r\n for (let j = 0; j < rows; j++) {\r\n let x = i * resolution;\r\n let y = j * resolution;\r\n if (grid[i][j] == 1) {\r\n fill(175, 0, 255);\r\n stroke(255);\r\n rect(x, y, resolution - 1, resolution - 1);\r\n }\r\n }\r\n }\r\n\r\n clearRows();\r\n}\r\nlet score = 0;\r\n\r\nfunction updateScore(linesCleared) {\r\n switch (linesCleared) {\r\n case 1:\r\n score += 100;\r\n break;\r\n case 2:\r\n score += 300;\r\n break;\r\n case 3:\r\n score += 800;\r\n break;\r\n default:\r\n break;\r\n }\r\n document.getElementById('scoreDisplay').textContent = \"Score: \" + score;\r\n}\r\nfunction clearRows() {\r\n let linesCleared = 0;\r\n for (let j = rows - 1; j >= 0; j--) {\r\n let filled = true;\r\n for (let i = 0; i < cols; i++) {\r\n if (grid[i][j] === 0) {\r\n filled = false;\r\n break;\r\n }\r\n }\r\n if (filled) {\r\n linesCleared++;\r\n for (let y = j; y > 0; y--) {\r\n for (let i = 0; i < cols; i++) {\r\n grid[i][y] = grid[i][y - 1];\r\n }\r\n }\r\n for (let i = 0; i < cols; i++) {\r\n grid[i][0] = 0;\r\n }\r\n j++; // Since we moved all rows down, check the same row again\r\n }\r\n }\r\n updateScore(linesCleared);\r\n}\r\nfunction make2DArray(cols, rows) {\r\n let arr = new Array(cols);\r\n for (let i = 0; i < arr.length; i++) {\r\n arr[i] = new Array(rows);\r\n }\r\n return arr;\r\n}","style.css":"","index.html":"\n\n\n\n \n \n\n\n\n

Score: 0

\n \n\n\n\n\n"},"chat_history":[{"deleted":0,"code_id":43190,"input_tokens":null,"id":24182,"project_id":669,"sender":"human","message":"add a scoring system\nSingle line: 100 points\nDouble line: 300 points\nTriple line: 800 points\n","created_at":"2024-02-21T02:56:52.000675Z","output_tokens":null},{"deleted":0,"code_id":43190,"input_tokens":null,"id":24183,"project_id":669,"sender":"ai","message":"```javascript\nlet score = 0;\n\nfunction updateScore(linesCleared) {\n switch (linesCleared) {\n case 1:\n score += 100;\n break;\n case 2:\n score += 300;\n break;\n case 3:\n score += 800;\n break;\n default:\n break;\n }\n console.log(\"Score:\", score);\n}\n\nfunction clearRows() {\n let linesCleared = 0;\n for (let j = rows - 1; j >= 0; j--) {\n let filled = true;\n for (let i = 0; i < cols; i++) {\n if (grid[i][j] === 0) {\n filled = false;\n break;\n }\n }\n if (filled) {\n linesCleared++;\n for (let y = j; y > 0; y--) {\n for (let i = 0; i < cols; i++) {\n grid[i][y] = grid[i][y - 1];\n }\n }\n for (let i = 0; i < cols; i++) {\n grid[i][0] = 0;\n }\n j++; // Since we moved all rows down, check the same row again\n }\n }\n updateScore(linesCleared);\n}\n```\n\n- **`score` variable**: Added at the beginning of the script to keep track of the player's score throughout the game.\n- **`updateScore` function**: This function updates the score based on the number of lines cleared at once. It utilizes a `switch` statement to differentiate between clearing one, two, or three lines, adding 100, 300, and 800 points respectively.\n- **Modifications to `clearRows` function**: The function now counts the number of lines cleared in a single move by incrementing `linesCleared`. After the loop, it calls `updateScore(linesCleared)` to update the score based on the number of lines cleared.\n- **Console output**: The updated score is logged to the console every time it changes. This is a placeholder; you might want to display this score in the game's UI in a future update.","created_at":"2024-02-21T02:56:52.006990Z","output_tokens":null},{"deleted":0,"code_id":43192,"input_tokens":null,"id":24184,"project_id":669,"sender":"human","message":"display score in html","created_at":"2024-02-21T02:57:22.172255Z","output_tokens":null},{"deleted":0,"code_id":43192,"input_tokens":null,"id":24185,"project_id":669,"sender":"ai","message":"To display the score in the HTML, you'll need to modify both your HTML and JavaScript files. Let's start with the HTML to create a place where the score will be displayed, then move on to the JavaScript to update this display every time the score changes.\n\n### HTML Modification\nAdd this snippet inside the `` tag of your `index.html` file.\n\n```html\n

Score: 0

\n```\n\n### JavaScript Modification\nUpdate the `updateScore` function in your `script.js` file to also update the text content of the score display element in the HTML.\n\n```javascript\nfunction updateScore(linesCleared) {\n switch (linesCleared) {\n case 1:\n score += 100;\n break;\n case 2:\n score += 300;\n break;\n case 3:\n score += 800;\n break;\n default:\n break;\n }\n document.getElementById('scoreDisplay').textContent = \"Score: \" + score;\n}\n```\n\n- **HTML Update**: The `div` with `id=\"scoreDisplay\"` is where the score will be displayed on the webpage. \n- **JavaScript Update**: The `updateScore` function now includes a line to select the score display element by its ID and update its text content to reflect the current score.\n- **Dynamic Display**: Each time a line is cleared and the score is updated, this change will be reflected on the webpage in real-time, enhancing the player's experience by providing immediate feedback on their performance.","created_at":"2024-02-21T02:57:22.177848Z","output_tokens":null},{"deleted":0,"code_id":43196,"input_tokens":null,"id":24186,"project_id":669,"sender":"human","message":"css for the scoring to be under the canvas","created_at":"2024-02-21T03:00:24.897366Z","output_tokens":null},{"deleted":0,"code_id":43196,"input_tokens":null,"id":24187,"project_id":669,"sender":"ai","message":"To position the scoring display under the canvas in your HTML page, you can use CSS. Given the structure of your HTML, you can add styles to the `#scoreDisplay` element to ensure it appears below the canvas and is properly styled to match the rest of your game's aesthetic. Here's how you can do it:\n\n### CSS Modification\nAdd these styles to your `