Blocky Adventures: 2D Block-Building Game

{"name":"Blocky Adventures: 2D Block-Building Game","description":"Join the Blocky Adventures and unleash your creativity in this 2D block-building game! Build, dig, and explore in a pixelated world filled with endless possibilities.","photo":null,"view_count":1,"fork_count":0,"expires_at":"2024-03-09T04:19:50.467730","created_at":"2024-03-08T04:19:50.467730Z","updated_at":"2024-03-08T04:20:43.621899Z","user_id":2,"status":"PRIVATE","parent_id":null,"id":805,"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":"const tileSize = 40; // Size of each tile in pixels\nconst gridWidth = 20; // Number of tiles horizontally\nconst gridHeight = 15; // Number of tiles vertically\nlet world = [];\n\n// Block types\nconst blocks = {\n grass: { color: 'green' },\n dirt: { color: '#8B4513' },\n stone: { color: 'gray' }\n};\n\nfunction setup() {\n createCanvas(800, 600);\n background(220);\n generateWorld();\n drawWorld();\n}\nfunction generateWorld() {\n for (let y = 0; y < gridHeight; y++) {\n let row = [];\n for (let x = 0; x < gridWidth; x++) {\n if (y === gridHeight - 1) row.push('grass');\n else if (y >= gridHeight - 3) row.push('dirt');\n else if (y < gridHeight - 3) row.push('stone');\n else row.push('air'); // Add air for the rest\n }\n world.push(row);\n }\n}\n\nfunction drawWorld() {\n for (let y = 0; y < gridHeight; y++) {\n for (let x = 0; x < gridWidth; x++) {\n fill(blocks[world[y][x]].color);\n rect(x * tileSize, y * tileSize, tileSize, tileSize);\n }\n }\n}\nlet player = { x: 0, y: 0, width: 30, height: 50, color: 'blue' };\n\nfunction applyGravity() {\n let playerBottomY = player.y + player.height;\n let playerFeetGridY = Math.floor(playerBottomY / tileSize);\n let playerFeetGridX = Math.floor(player.x / tileSize);\n\n if (playerFeetGridY < gridHeight - 1) {\n if (world[playerFeetGridY + 1][playerFeetGridX] === 'air') {\n player.y += 5; // Gravity force\n }\n }\n}\n\nfunction draw() {\n background(220);\n applyGravity();\n drawWorld();\n drawPlayer();\n}\n\nfunction drawPlayer() {\n fill(player.color);\n rect(player.x, player.y, player.width, player.height);\n}\n\nfunction keyPressed() {\n if (keyCode === LEFT_ARROW) player.x -= tileSize;\n else if (keyCode === RIGHT_ARROW) player.x += tileSize;\n else if (keyCode === UP_ARROW) player.y -= tileSize;\n else if (keyCode === DOWN_ARROW) player.y += tileSize;\n}","style.css":"","index.html":"\n\n\n \n \n Blocky Adventures: 2D Block-Building Game\n \n\n\n \n \n\n"},"chat_history":[{"deleted":0,"code_id":50186,"input_tokens":null,"id":27664,"project_id":805,"sender":"human","message":"Let's get started!","created_at":"2024-03-08T04:20:48.166707Z","output_tokens":null},{"deleted":0,"code_id":50186,"input_tokens":null,"id":27665,"project_id":805,"sender":"ai","message":"","created_at":"2024-03-08T04:20:48.172698Z","output_tokens":null},{"deleted":0,"code_id":50187,"input_tokens":null,"id":27666,"project_id":805,"sender":"human","message":"lets create hte tile grid with three blocks, grass, dirt, and stone. add a player who looks like steve who moves, and world gen","created_at":"2024-03-08T04:21:12.838854Z","output_tokens":null},{"deleted":0,"code_id":50187,"input_tokens":null,"id":27667,"project_id":805,"sender":"ai","message":"To get started, we'll lay down the foundation for our tile grid, incorporate three types of blocks (grass, dirt, and stone), add a player character (resembling Steve), implement basic movement controls for the player, and set up simple world generation logic. We'll break this process into manageable chunks, focusing on one aspect at a time for clarity.\n\n### Step 1: Define the Tile Grid and Blocks\n\nFirst, we need to define the grid on which our world is built and specify the types of blocks that will populate this world.\n\n```javascript\nconst tileSize = 40; // Size of each tile in pixels\nconst gridWidth = 20; // Number of tiles horizontally\nconst gridHeight = 15; // Number of tiles vertically\nlet world = [];\n\n// Block types\nconst blocks = {\n grass: { color: 'green' },\n dirt: { color: '#8B4513' },\n stone: { color: 'gray' }\n};\n\nfunction setup() {\n createCanvas(800, 600);\n background(220);\n generateWorld();\n drawWorld();\n}\n\nfunction generateWorld() {\n for (let y = 0; y < gridHeight; y++) {\n let row = [];\n for (let x = 0; x < gridWidth; x++) {\n if (y === gridHeight - 1) row.push('grass');\n else if (y >= gridHeight - 3) row.push('dirt');\n else row.push('stone');\n }\n world.push(row);\n }\n}\n\nfunction drawWorld() {\n for (let y = 0; y < gridHeight; y++) {\n for (let x = 0; x < gridWidth; x++) {\n fill(blocks[world[y][x]].color);\n rect(x * tileSize, y * tileSize, tileSize, tileSize);\n }\n }\n}\n```\n\n- The `tileSize` determines the size of each block, and `gridWidth`/`gridHeight` define the dimensions of our tile grid.\n- The `blocks` object stores information about each block type, including its color.\n- The `generateWorld` function populates the `world` array with different types of blocks, creating a simple landscape.\n- The `drawWorld` function iterates over the `world` array, drawing each block on the canvas according to its type.\n\n### Step 2: Add the Player Character\n\nNext, we'll introduce a player character to the game and enable basic movement.\n\n```javascript\nlet player = { x: 0, y: 0, width: 30, height: 50, color: 'blue' };\n\nfunction draw() {\n background(220);\n drawWorld();\n drawPlayer();\n}\n\nfunction drawPlayer() {\n fill(player.color);\n rect(player.x, player.y, player.width, player.height);\n}\n\nfunction keyPressed() {\n if (keyCode === LEFT_ARROW) player.x -= tileSize;\n else if (keyCode === RIGHT_ARROW) player.x += tileSize;\n else if (keyCode === UP_ARROW) player.y -= tileSize;\n else if (keyCode === DOWN_ARROW) player.y += tileSize;\n}\n```\n\n- The `player` object stores the position, size, and color of the player character.\n- The `drawPlayer` function draws the player character on the canvas.\n- The `keyPressed` function allows the player to move one tile at a time using the arrow keys.\n\nWith these steps, you have the basic structure of a block-building game, including a tile grid with different block types, a player character, and basic world generation. This foundation can be expanded with additional features, such as more sophisticated world generation, player interactions with the environment, and more.","created_at":"2024-03-08T04:21:12.844443Z","output_tokens":null},{"deleted":0,"code_id":50189,"input_tokens":null,"id":27668,"project_id":805,"sender":"human","message":"add gravity and collsiion","created_at":"2024-03-08T04:25:11.280567Z","output_tokens":null},{"deleted":0,"code_id":50189,"input_tokens":null,"id":27669,"project_id":805,"sender":"ai","message":"To add gravity and collision detection to your game, we will follow these steps:\n\n1. **Gravity**: Make the player fall down if there is no block directly beneath them.\n2. **Collision Detection**: Prevent the player from moving through blocks.\n\n### Step 1: Implement Gravity\n\nGravity will be applied to the player by incrementally moving them down until they are on top of a solid block.\n\n```javascript\nfunction applyGravity() {\n let playerBottomY = player.y + player.height;\n let playerFeetGridY = Math.floor(playerBottomY / tileSize);\n let playerFeetGridX = Math.floor(player.x / tileSize);\n\n if (playerFeetGridY < gridHeight - 1) {\n if (world[playerFeetGridY + 1][playerFeetGridX] === 'air') {\n player.y += 5; // Gravity force\n }\n }\n}\n\nfunction draw() {\n background(220);\n applyGravity();\n drawWorld();\n drawPlayer();\n}\n```\n\n- We calculate where the player's feet are in terms of the grid coordinates (`playerFeetGridX` and `playerFeetGridY`).\n- If the block beneath the player's feet is air (`'air'`), we apply gravity by moving the player down.\n- This check and update are done in the `draw` function before drawing the world and the player to ensure the player's position is updated continuously.\n\n### Step 2: Update World Generation for Collision\n\nTo support collision detection, we need to differentiate between air and solid blocks in our world generation. We'll update the `generateWorld` function to fill the upper part of the world with 'air'.\n\n```javascript\nfunction generateWorld() {\n for (let y = 0; y < gridHeight; y++) {\n let row = [];\n for (let x = 0; x < gridWidth; x++) {\n if (y === gridHeight - 1) row.push('grass');\n else if (y >= gridHeight - 3) row.push('dirt');\n else if (y < gridHeight - 3) row.push('stone');\n else row.push('air'); // Add air for the rest\n }\n world.push(row);\n }\n}\n```\n\n- This change ensures that the world is filled correctly with different block types, including 'air', making it ready for collision detection.\n\n### Step 3: Implement Basic Collision Detection\n\nNow, let's prevent the player from moving through solid blocks.\n\n```javascript\nfunction movePlayer(newX, newY) {\n let gridX = Math.floor(newX / tileSize);\n let gridY = Math.floor(newY / tileSize);\n let feetGridY = Math.floor((newY + player.height) / tileSize);\n\n if (world[gridY][gridX] === 'air' && world[feetGridY][gridX] === 'air') {\n player.x = newX;\n player.y = newY;\n }\n}\n\nfunction keyPressed() {\n let newX = player.x;\n let newY = player.y;\n\n if (keyCode === LEFT_ARROW) newX -= tileSize;\n else if (keyCode === RIGHT_ARROW) newX += tileSize;\n else if (keyCode === UP_ARROW) newY -= tileSize;\n else if (keyCode === DOWN_ARROW) newY += tileSize;\n\n movePlayer(newX, newY);\n}\n```\n\n- We introduce a new function `movePlayer` that takes a new position for the player as input.\n- Before updating the player's position, `movePlayer` checks if the destination is air for both the player's head and feet level.\n- The `keyPressed` function now calculates the new position and calls `movePlayer` to update the player's position, ensuring the player doesn't move through solid blocks.\n\nThese updates introduce basic gravity and collision detection to your game, enhancing the player's interaction with the game world.","created_at":"2024-03-08T04:25:11.287483Z","output_tokens":null}],"assets":[],"messages_sent":3,"comments":[],"steps":[{"title":"Pixelated World","step_number":0,"complete":false,"updated_at":"2024-03-08T04:19:50.472993","id":4240,"instruction":"Create and explore in a pixelated 2D world filled with different types of blocks.","created_at":"2024-03-08T04:19:50.472991","project_id":805},{"title":"Block Placement","step_number":1,"complete":false,"updated_at":"2024-03-08T04:19:50.473046","id":4241,"instruction":"Place different types of blocks to build structures and landscapes.","created_at":"2024-03-08T04:19:50.473045","project_id":805},{"title":"Block Removal","step_number":2,"complete":false,"updated_at":"2024-03-08T04:19:50.473086","id":4242,"instruction":"Ability to remove placed blocks and modify the environment.","created_at":"2024-03-08T04:19:50.473085","project_id":805},{"title":"Character Movement","step_number":3,"complete":false,"updated_at":"2024-03-08T04:19:50.473134","id":4243,"instruction":"Navigate the pixelated world with character movement controls.","created_at":"2024-03-08T04:19:50.473133","project_id":805},{"title":"Environment Interactions","step_number":4,"complete":false,"updated_at":"2024-03-08T04:19:50.473171","id":4244,"instruction":"Dig or mine blocks to interact with the environment.","created_at":"2024-03-08T04:19:50.473170","project_id":805},{"title":"Simple Inventory System","step_number":5,"complete":false,"updated_at":"2024-03-08T04:19:50.473208","id":4245,"instruction":"Store and manage different types of blocks in a simple inventory system.","created_at":"2024-03-08T04:19:50.473208","project_id":805}]}