Level Editor Madness

{"name":"Level Editor Madness","description":"Create your own game levels with a fun and interactive level editor! Place objects like ground, air, and arrows to design your own custom levels and challenge your friends. Convert your level layout into a list and see it come to life in your very own game!","photo":null,"view_count":35,"fork_count":1,"expires_at":null,"created_at":"2024-02-23T03:32:28.901368Z","updated_at":"2024-02-23T03:32:28.901369Z","user_id":2,"status":"PRIVATE","parent_id":null,"id":712,"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 currentBlock = 'air'; // Default block type\nlet clipboard = []; // Global clipboard for copied objects\n\nfunction copySelectedBlocks() {\n clipboard = selectedObjects.map(obj => ({\n x: obj.x,\n y: obj.y,\n type: levelGrid[obj.y][obj.x]\n }));\n}\nfunction pasteBlocks() {\n\n if (clipboard.length > 0) {\n // Convert mouse position to grid coordinates\n let mouseGridX = Math.floor((mouseX - panOffsetX) / (blockSize * zoomLevel));\n let mouseGridY = Math.floor((mouseY - panOffsetY) / (blockSize * zoomLevel));\n\n // Find the top-left object within the clipboard for reference\n const minX = Math.min(...clipboard.map(block => block.x));\n const minY = Math.min(...clipboard.map(block => block.y));\n \n // Calculate offsets based on mouse position and the top-left object\n const offsetX = mouseGridX - minX;\n const offsetY = mouseGridY - minY;\n\n clipboard.forEach(block => {\n const newX = block.x + offsetX;\n const newY = block.y + offsetY;\n if (newX >= 0 && newY >= 0 && newX < levelGrid[0].length && newY < levelGrid.length) {\n if (levelGrid[newY][newX] === 0) { // Check if the position is empty before pasting\n levelGrid[newY][newX] = block.type;\n }\n }\n });\n // No need to update selectedObjects here unless you want them selected after pasting\n }\n}\n\nfunction fillArea(x, y, targetBlockType, fillBlockType) {\n if (x < 0 || x >= levelGrid[0].length || y < 0 || y >= levelGrid.length) return; // Boundary check\n if (levelGrid[y][x] !== targetBlockType) return; // Stop if the current block is not of the target type\n if (levelGrid[y][x] === fillBlockType) return; // Avoid infinite loop by checking if it's already filled\n\n levelGrid[y][x] = fillBlockType; // Fill the current block\n\n // Recursive calls for adjacent tiles\n fillArea(x + 1, y, targetBlockType, fillBlockType);\n fillArea(x - 1, y, targetBlockType, fillBlockType);\n fillArea(x, y + 1, targetBlockType, fillBlockType);\n fillArea(x, y - 1, targetBlockType, fillBlockType);\n}\nlet levelGrid;\nlet mode = 'place'; // Default mode\nlet selectedObjects = [];\ndocument.getElementById('playerSpawn').addEventListener('click', function () {\n currentBlock = 'playerSpawn';\n});\ndocument.getElementById('speedArrow').addEventListener('click', function () {\n currentBlock = 's'; // 's' will represent the Speed Arrow\n});\nconst blockSize = 50; // This should be consistent across your script\ndocument.getElementById('upArrow').addEventListener('click', function () {\n currentBlock = 'upArrow';\n});\nlet dragAction = null; // Possible values: 'selecting', 'moving', null\nlet zoomLevel = 1.0; // Default zoom level\n\nfunction mouseWheel(event) {\n if (mode === 'pan') { // Only allow zooming in pan mode\n let zoomIntensity = 0.05; // Reduce intensity for smoother zooming\n let previousZoomLevel = zoomLevel;\n zoomLevel += (event.delta > 0 ? -zoomIntensity : zoomIntensity);\n zoomLevel = constrain(zoomLevel, 0.5, 3); // Limit the zoom level between 0.5x and 3x\n\n // Adjust panOffset to zoom towards the mouse position\n let mouseXRelativeToCanvas = (mouseX - panOffsetX) / previousZoomLevel;\n let mouseYRelativeToCanvas = (mouseY - panOffsetY) / previousZoomLevel;\n let newMouseXRelativeToCanvas = mouseXRelativeToCanvas * (zoomLevel / previousZoomLevel);\n let newMouseYRelativeToCanvas = mouseYRelativeToCanvas * (zoomLevel / previousZoomLevel);\n panOffsetX += (newMouseXRelativeToCanvas - mouseXRelativeToCanvas) * previousZoomLevel;\n panOffsetY += (newMouseYRelativeToCanvas - mouseYRelativeToCanvas) * previousZoomLevel;\n\n return false; // Prevent the default browser scroll behavior\n }\n}\nlet lastMouseX = null;\nlet lastMouseY = null;\nlet isDragging = false;\nlet panOffsetX = 0;\nlet panOffsetY = 0;\nfunction mouseDragged() {\n if (mode === 'drag' && dragAction === 'moving' && selectedObjects.length > 0) {\n const offsetX = mouseX - lastMouseX;\n const offsetY = mouseY - lastMouseY;\n\n if (offsetX !== 0 || offsetY !== 0) {\n const moveX = Math.round(offsetX / blockSize);\n const moveY = Math.round(offsetY / blockSize);\n\n // Apply the calculated move only if there's a significant change\n if (moveX !== 0 || moveY !== 0) {\n moveSelectedBlocks(moveX, moveY);\n // Update lastMouse positions to new positions after move\n lastMouseX += moveX * blockSize;\n lastMouseY += moveY * blockSize;\n }\n }\n }\n if (mode === 'place' && mouseX < width && mouseY < height) {\nlet adjustedMouseX = mouseX - panOffsetX;\nlet adjustedMouseY = mouseY - panOffsetY;\n\nlet xIndex = Math.floor(adjustedMouseX / blockSize);\nlet yIndex = Math.floor(adjustedMouseY / blockSize);\n if (xIndex >= 0 && yIndex >= 0 && xIndex < levelGrid[0].length && yIndex < levelGrid.length) {\n const currentState = levelGrid.map(row => [...row]); // Capture current state before modification\n placeBlock(xIndex, yIndex, currentBlock);\n history.push(currentState); // Push the captured state to history for undo functionality\n redoStack = []; // Clear redo history on new action\n }\n }\n if (mode === 'pan') {\n panOffsetX += mouseX - pmouseX;\n panOffsetY += mouseY - pmouseY;\n }\n}\nfunction mouseReleased() {\n if (mode === 'drag' && isDragging) {\n if (dragAction === 'selecting') {\n dragEnd = createVector(mouseX, mouseY);\n selectObjects();\n }\n isDragging = false;\n dragAction = null; // Clear the drag action state\n }\n}\nfunction moveSelectedBlocks(moveX, moveY) {\n // Temporarily store the block types of selected blocks\n const tempBlocks = selectedObjects.map(obj => ({\n ...obj,\n type: levelGrid[obj.y][obj.x]\n }));\n\n // Clear the original positions in the actual grid\n tempBlocks.forEach(obj => {\n levelGrid[obj.y][obj.x] = 0; // Set old position to air\n });\n\n // Calculate new positions and update levelGrid if within boundaries\n tempBlocks.forEach(obj => {\n let newX = obj.x + moveX;\n let newY = obj.y + moveY;\n\n if (newX >= 0 && newY >= 0 && newX < levelGrid[0].length && newY < levelGrid.length) {\n // Check if the new position is not occupied by a non-selected block\n if (levelGrid[newY][newX] === 0 || selectedObjects.some(o => o.x === newX && o.y === newY)) {\n levelGrid[newY][newX] = obj.type; // Update the block type at the new position\n } else {\n // If the new position is occupied, place the block back to its original position\n levelGrid[obj.y][obj.x] = obj.type;\n }\n } else {\n // If the new position is out of bounds, place the block back to its original position\n levelGrid[obj.y][obj.x] = obj.type;\n }\n });\n\n // Update selectedObjects with their new or original positions\n selectedObjects = tempBlocks.map(obj => {\n let newX = obj.x + moveX;\n let newY = obj.y + moveY;\n\n if (newX >= 0 && newY >= 0 && newX < levelGrid[0].length && newY < levelGrid.length && (levelGrid[newY][newX] === obj.type || selectedObjects.some(o => o.x === newX && o.y === newY))) {\n return { x: newX, y: newY }; // New position\n }\n return { x: obj.x, y: obj.y }; // Original position if new was invalid\n });\n}\nfunction makeDraggable(dragHandle, draggableItem) {\n let offsetX, offsetY, mouseX, mouseY;\n\n\n function mouseDownHandler(e) {\n offsetX = e.clientX - draggableItem.getBoundingClientRect().left;\n offsetY = e.clientY - draggableItem.getBoundingClientRect().top;\n mouseX = e.clientX;\n mouseY = e.clientY;\n\n document.addEventListener('mousemove', mouseMoveHandler, false);\n document.addEventListener('mouseup', mouseUpHandler, false);\n }\n\n function mouseMoveHandler(e) {\n const dx = e.clientX - mouseX;\n const dy = e.clientY - mouseY;\n\n draggableItem.style.top = `${draggableItem.offsetTop + dy}px`;\n draggableItem.style.left = `${draggableItem.offsetLeft + dx}px`;\n\n mouseX = e.clientX;\n mouseY = e.clientY;\n }\n\n function mouseUpHandler() {\n document.removeEventListener('mousemove', mouseMoveHandler, false);\n document.removeEventListener('mouseup', mouseUpHandler, false);\n }\n}\ndocument.getElementById('finishLine').addEventListener('click', function () {\n currentBlock = 'f'; // Identifier for the finish line\n});\n\nfunction setupHotkeys() {\n document.addEventListener('keydown', function (event) {\n // Prevent default action if it's one of our hotkeys\n if ([\"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"S\", \"C\"].includes(event.key.toUpperCase())) {\n event.preventDefault();\n }\n\n switch (event.key.toUpperCase()) {\n case '1':\n currentBlock = 'ground';\n break;\n case '2':\n currentBlock = 'air';\n break;\n case '3':\n currentBlock = 'upArrow';\n break;\n case '4':\n currentBlock = 'downArrow';\n break;\n case '5':\n currentBlock = 'leftArrow';\n break;\n case '6':\n currentBlock = 'rightArrow';\n break;\n case 'S': // Save level\n document.getElementById('saveLevel').click();\n break;\n case 'C': // Clear all\n document.getElementById('clearAll').click();\n break;\n }\n });\n}\n\ndocument.getElementById('spike').addEventListener('click', function () {\n currentBlock = 'spike';\n});\ndocument.getElementById('leftArrow').addEventListener('click', function () {\n currentBlock = 'leftArrow';\n});\nfunction drawPlayerSpawn(x, y, size) {\n fill(255, 255, 0); // Set fill color to yellow\n noStroke(); // No border around the shape\n beginShape(); // Begin the shape of the pentagon\n vertex(x + size * 0.5, y); // Top vertex\n vertex(x + size, y + size * 0.35); // Top-right vertex\n vertex(x + size * 0.75, y + size); // Bottom-right vertex\n vertex(x + size * 0.25, y + size); // Bottom-left vertex\n vertex(x, y + size * 0.35); // Top-left vertex\n endShape(CLOSE); // Close the shape to form the pentagon\n}\n\n\nwindow.onload = function () {\n document.getElementById('docs').addEventListener('click', function () {\n window.open('https://www.jippity.pro/724', '_blank');\n });\n\n document.getElementById('dragMode').addEventListener('click', function () {\n alert('Warning: Drag mode is currently unfinished. It may not work as expected.');\n mode = 'drag';\n document.getElementById('toolbox').style.display = 'none'; // Optionally hide the toolbox in drag mode\n });\n\n document.getElementById('clearAll').addEventListener('click', function () {\n levelGrid = levelGrid.map(row => row.map(() => 0)); // Set all values in levelGrid to 0\n console.log('Level cleared');\n });\n document.getElementById('placeMode').addEventListener('click', function () {\n mode = 'place';\n document.getElementById('toolbox').style.display = 'block'; // Show the toolbox\n });\n const toolbox = document.getElementById('toolbox');\n const rightToolbar = document.getElementById('rightToolbar');\n const bottomToolbar = document.getElementById('bottomToolbar');\n\n makeDraggable(toolbox, toolbox);\n makeDraggable(rightToolbar, rightToolbar);\n makeDraggable(bottomToolbar, bottomToolbar);\ndocument.getElementById('autoBuild').addEventListener('click', function () {\n console.log(\"PAN MODE\")\n mode = 'pan'; // Change mode to 'pan'\n});\n}\nfunction drawSpike(x, y, size) {\n fill(128); // Gray color for the spike\n noStroke();\n triangle(\n x + size / 2, y, // Top point\n x + size, y + size, // Bottom right corner\n x, y + size // Bottom left corner\n );\n}\ndocument.getElementById('rightArrow').addEventListener('click', function () {\n currentBlock = 'rightArrow';\n});\nfunction drawRightArrow(x, y, size) {\n fill(0, 255, 0); // Example: Set fill color to green for differentiation\n noStroke(); // No border around the arrow\n triangle(\n x, y, // Left top corner\n x + size, y + size / 2, // Middle right of the tile\n x, y + size // Left bottom corner\n );\n}\n\ndocument.getElementById('downArrow').addEventListener('click', function () {\n currentBlock = 'downArrow';\n});\nfunction drawDownArrow(x, y, size) {\n fill(0, 0, 255); // Set fill color to blue for differentiation\n noStroke(); // No border around the arrow\n triangle(\n x, y, // Bottom left corner\n x + size, y, // Bottom right corner\n x + size / 2, y + size // Middle bottom of the tile\n );\n}\nfunction drawLeftArrow(x, y, size) {\n fill(255, 255, 0); // Example: Set fill color to yellow for differentiation\n noStroke(); // No border around the arrow\n triangle(\n x + size, y, // Right top corner\n x + size, y + size, // Right bottom corner\n x, y + size / 2 // Middle left of the tile\n );\n}\nlet history = [];\nlet redoStack = [];\nfunction setup() {\n createCanvas(1500, 1500);\n background(220);\n initializeLevelGrid();\n document.getElementById('autoBuild').addEventListener('click', function () {\n mode = 'pan';\n canvas.style.cursor = 'grab'; // Change cursor to indicate grabbable area\n });\n document.getElementById('dragMode').addEventListener('click', function () {\n mode = 'drag';\n canvas.style.cursor = 'default'; // Change cursor back to default\n });\n // Restore cursor when exiting pan mode\n document.getElementById('placeMode').addEventListener('click', function () {\n mode = 'place';\n canvas.style.cursor = 'default'; // Change cursor back to default\n });\n // Event listeners for the toolbox buttons\n document.getElementById('ground').addEventListener('click', function () {\n currentBlock = 'ground';\n });\n document.getElementById('air').addEventListener('click', function () {\n currentBlock = 'air';\n });\n}\n\nfunction initializeLevelGrid() {\n const blocksWide = 100;\n const blocksHigh = 100;\n levelGrid = new Array(blocksHigh).fill(null).map(() => new Array(blocksWide).fill(0));\n}\nfunction drawGrid() {\n stroke(200); // Light grey color for the grid lines\n for (let x = 0; x < width; x += blockSize) {\n line(x, 0, x, height);\n }\n for (let y = 0; y < height; y += blockSize) {\n line(0, y, width, y);\n }\n}\nfunction drawUpArrow(x, y, size) {\n fill(255, 0, 0); // Set fill color to red\n noStroke(); // No border around the arrow\n triangle(\n x + size / 2, y, // Top point (middle top of the tile)\n x + size, y + size, // Bottom right corner\n x, y + size // Bottom left corner\n );\n}\nfunction draw() {\n background(220); // Redraw background to clear old frames\n push(); // Save the current drawing settings\n\n translate(panOffsetX, panOffsetY); // Apply panning translation\n scale(zoomLevel); // Apply zoom level\n\n drawGrid(); // Call the drawGrid function here\n // Redraw all blocks based on levelGrid's current state\n for (let y = 0; y < levelGrid.length; y++) {\n for (let x = 0; x < levelGrid[y].length; x++) {\n const isSelected = selectedObjects.some(obj => obj.x === x && obj.y === y);\n\n if (isSelected) {\n push(); // Save the current drawing settings\n fill(255, 0, 0, 128); // Semi-transparent red\n stroke(255, 0, 0); // Solid red border for visibility\n strokeWeight(1); // Border thickness\n rectMode(CENTER); // Draw the rectangle from its center\n rect((x * blockSize) + blockSize / 2, (y * blockSize) + blockSize / 2, blockSize * 1.1, blockSize * 1.1); // Draw slightly larger rectangle\n pop(); // Restore the saved drawing settings\n }\n if (levelGrid[y][x] === 1) { // Ground block\n\n fill(0);\n noStroke();\n rect(x * blockSize, y * blockSize, blockSize, blockSize);\n } else if (levelGrid[y][x] === 2) { // Up Arrow block\n drawUpArrow(x * blockSize, y * blockSize, blockSize);\n }\n else if (levelGrid[y][x] === 8) { // Speed Arrow block\n drawSpeedArrow(x * blockSize, y * blockSize, blockSize);\n }\n else if (levelGrid[y][x] === 6) { // Spike block\n drawSpike(x * blockSize, y * blockSize, blockSize);\n }\n else if (levelGrid[y][x] === 4) { // Left Arrow block\n drawLeftArrow(x * blockSize, y * blockSize, blockSize);\n }\n else if (levelGrid[y][x] === 5) { // Right Arrow block\n drawRightArrow(x * blockSize, y * blockSize, blockSize);\n }\n else if (levelGrid[y][x] === 7) { // Player Spawn block\n drawPlayerSpawn(x * blockSize, y * blockSize, blockSize);\n }\n else if (levelGrid[y][x] === \"f\") { // Finish Line block\n drawFinishLine(x * blockSize, y * blockSize, blockSize);\n }\n else // Within the for-loops in the draw function\n if (levelGrid[y][x] === 3) { // Down Arrow block\n drawDownArrow(x * blockSize, y * blockSize, blockSize);\n }\n\n\n }\n }\n if (mode === 'drag' && isDragging) {\n const currentDrag = createVector(mouseX - panOffsetX, mouseY - panOffsetY);\n const dragWidth = currentDrag.x - dragStart.x;\n const dragHeight = currentDrag.y - dragStart.y;\n noFill();\n stroke(255, 204, 0); // Yellow color for the selection rectangle\n strokeWeight(2); // Make the stroke visible enough\n rect(dragStart.x, dragStart.y, dragWidth, dragHeight);\n }\n pop(); // Restore the saved drawing settings\n\n}\nlet dragStart = null;\nlet dragEnd = null;\nfunction mousePressed() {\n if (mode === 'fill' && mouseX < width && mouseY < height) {\n let adjustedMouseX = mouseX - panOffsetX;\n let adjustedMouseY = mouseY - panOffsetY;\n\n let xIndex = Math.floor(adjustedMouseX / blockSize);\n let yIndex = Math.floor(adjustedMouseY / blockSize);\n\n if (xIndex >= 0 && yIndex >= 0 && xIndex < levelGrid[0].length && yIndex < levelGrid.length) {\n const targetBlockType = levelGrid[yIndex][xIndex];\n const fillBlockType = blockTypeMapping(currentBlock); // Convert currentBlock to its corresponding numeric value\n fillArea(xIndex, yIndex, targetBlockType, fillBlockType);\n }\n }\n if (mode === 'place' && mouseX < width && mouseY < height) {\n // Adjust mouse coordinates based on the current pan offsets\nlet adjustedMouseX = mouseX - panOffsetX;\nlet adjustedMouseY = mouseY - panOffsetY;\n\nlet xIndex = Math.floor(adjustedMouseX / blockSize);\nlet yIndex = Math.floor(adjustedMouseY / blockSize);\n\n if (xIndex >= 0 && yIndex >= 0 && xIndex < levelGrid[0].length && yIndex < levelGrid.length) {\n const currentState = levelGrid.map(row => [...row]); // Capture current state before modification\n placeBlock(xIndex, yIndex, currentBlock);\n history.push(currentState); // Push the captured state to history for undo functionality\n redoStack = []; // Clear redo history on new action\n }\n }\n else if (mode === 'drag') {\n dragAction = selectedObjects.length > 0 ? 'moving' : 'selecting';\n dragStart = createVector(mouseX - panOffsetX, mouseY - panOffsetY);\n isDragging = true;\n // Store initial mouse positions for calculating offset\n lastMouseX = mouseX - panOffsetX;\n lastMouseY = mouseY - panOffsetY;\n }\n}\n\nfunction mouseReleased() {\n if (mode === 'drag' && isDragging) {\n dragEnd = createVector(mouseX, mouseY);\n isDragging = false;\n selectObjects();\n }\n}\nfunction selectObjects() {\n if (!dragStart || !dragEnd) return;\n selectedObjects = []; // Clear previously selected objects on new selection\n let startX = Math.min(dragStart.x, dragEnd.x) / blockSize;\n let startY = Math.min(dragStart.y, dragEnd.y) / blockSize;\n let endX = Math.max(dragStart.x, dragEnd.x) / blockSize;\n let endY = Math.max(dragStart.y, dragEnd.y) / blockSize;\n\n for (let y = Math.floor(startY); y <= Math.ceil(endY); y++) {\n for (let x = Math.floor(startX); x <= Math.ceil(endX); x++) {\n if (levelGrid[y] && levelGrid[y][x] !== undefined && levelGrid[y][x] !== 0) { // Avoid selecting empty air\n selectedObjects.push({ x, y }); // Only add non-air blocks to selected objects\n }\n }\n }\n}\nfunction placeBlock(xIndex, yIndex, blockType) {\n if (blockType === 'ground') {\n levelGrid[yIndex][xIndex] = 1; // Mark as ground in the grid\n }\n else if (blockType === 's') {\n levelGrid[yIndex][xIndex] = 8; // Assign '8' to represent Speed Arrow\n }\n else if (blockType === 'playerSpawn') {\n // Clear existing player spawn\n for (let row of levelGrid) {\n const spawnIndex = row.indexOf(7);\n if (spawnIndex !== -1) row[spawnIndex] = 0; // Reset to air\n }\n // Set new player spawn\n levelGrid[yIndex][xIndex] = 7;\n } else if (blockType === 'upArrow') {\n levelGrid[yIndex][xIndex] = 2; // Mark as up arrow in the grid\n } else if (blockType === 'downArrow') {\n\n levelGrid[yIndex][xIndex] = 3; // Mark as down arrow in the grid\n }\n else if (blockType === 'leftArrow') {\n levelGrid[yIndex][xIndex] = 4; // Mark as left arrow in the grid\n }\n else if (blockType === 'rightArrow') {\n levelGrid[yIndex][xIndex] = 5; // Mark as right arrow in the grid\n }\n else if (blockType === 'spike') {\n levelGrid[yIndex][xIndex] = 6; // Mark as spike in the grid\n }\n else if (blockType === 'f') { // Finish Line\n levelGrid[yIndex][xIndex] = \"f\"; // Mark as finish line in the grid\n }\n else {\n levelGrid[yIndex][xIndex] = 0; // Mark as air in the grid\n }\n\n\n}\nfunction drawSpeedArrow(x, y, size) {\n fill(0, 255, 0); // Green color for the Speed Arrow\n noStroke();\n triangle(\n x + size / 2, y + size * 0.2, // Top point\n x + size * 0.2, y + size * 0.8, // Bottom left\n x + size * 0.8, y + size * 0.8 // Bottom right\n );\n rect(x + size * 0.4, y + size * 0.8, size * 0.2, size * 0.2); // Extra rect for the speed effect\n}\nfunction drawFinishLine(x, y, size) {\n fill(256, 0, 256); // Red color for the finish line\n noStroke();\n rect(x, y, size, size); // Draw the rectangle\n}\n\ndocument.getElementById('saveLevel').addEventListener('click', function () {\n let playerSpawn = { x: null, y: null };\n const levelData = levelGrid.map((row, y) => {\n return row.map((block, x) => {\n if (block === 7) { // Player spawn block\n playerSpawn = { x, y };\n return 0; // Represent the spawn point as air in the level data\n }\n return block;\n });\n });\n\n const levelInfo = {\n playerSpawn: playerSpawn,\n levelData: levelData\n };\n\n const levelString = JSON.stringify(levelInfo);\n navigator.clipboard.writeText(levelString).then(function () {\n console.log('Level data copied to clipboard');\n }, function (err) {\n console.error('Could not copy level data: ', err);\n });\n});\n\nfunction keyPressed() {\n if (keyCode === 46) { // Delete key\n // Go through all selectedObjects and set their corresponding positions in levelGrid to 0 (air)\n selectedObjects.forEach(obj => {\n if (levelGrid[obj.y] && levelGrid[obj.y][obj.x] !== undefined) {\n levelGrid[obj.y][obj.x] = 0; // Set to air\n }\n });\n // Clear selectedObjects after deletion\n selectedObjects = [];\n } else if (keyCode === 67 && keyIsDown(CONTROL)) { // Ctrl+C for Copy\n copySelectedBlocks();\n } else if (keyCode === 86 && keyIsDown(CONTROL)) { // Ctrl+V for Paste\n pasteBlocks();\n }\n\n if (keyCode === 90 && keyIsDown(CONTROL)) { // Ctrl+Z for Undo\n if (history.length > 0) {\n const previousState = history.pop();\n redoStack.push(levelGrid.map(row => [...row])); // Save current state for redo\n levelGrid = previousState; // Revert to the previous state\n }\n } else if (keyCode === 89 && keyIsDown(CONTROL)) { // Ctrl+Y for Redo\n if (redoStack.length > 0) {\n const nextState = redoStack.pop();\n history.push(levelGrid.map(row => [...row])); // Save current state for undo\n levelGrid = nextState; // Reapply the next state\n }\n }\n else if (selectedObjects.length > 0) { // Check if there are selected objects\n let moveX = 0;\n let moveY = 0;\n switch (keyCode) {\n case UP_ARROW:\n moveY = -1;\n break;\n case DOWN_ARROW:\n moveY = 1;\n break;\n case LEFT_ARROW:\n moveX = -1;\n break;\n case RIGHT_ARROW:\n moveX = 1;\n break;\n }\n if (moveX !== 0 || moveY !== 0) {\n moveSelectedBlocks(moveX, moveY);\n }\n }\n}\nfunction selectObjects() {\n if (!dragStart || !dragEnd) return;\n selectedObjects = []; // Clear previously selected objects on new selection\n let startX = Math.min(dragStart.x, dragEnd.x) / blockSize;\n let startY = Math.min(dragStart.y, dragEnd.y) / blockSize;\n let endX = Math.max(dragStart.x, dragEnd.x) / blockSize;\n let endY = Math.max(dragStart.y, dragEnd.y) / blockSize;\n\n for (let y = Math.floor(startY); y <= Math.ceil(endY); y++) {\n for (let x = Math.floor(startX); x <= Math.ceil(endX); x++) {\n if (levelGrid[y] && levelGrid[y][x] !== undefined && levelGrid[y][x] !== 0) { // Avoid selecting empty air\n selectedObjects.push({ x, y }); // Only add non-air blocks to selected objects\n }\n }\n }\n}\n\ndocument.getElementById('fillTool').addEventListener('click', function () {\n mode = 'fill';\n});","style.css":"","index.html":"\n\n\n\n \n \n Level Editor Madness\n \n\n\n\n\n

\n \n \n \n \n \n \n \n \n \n \n

\n \n \n\n

\n \n \n \n\n

\n \n \n

\n\n\n"},"chat_history":[{"deleted":0,"code_id":193713,"input_tokens":9633,"id":97019,"project_id":712,"sender":"ai","message":"The error you're encountering indicates that the JavaScript code is trying to attach an event listener to an element that doesn't exist or hasn't been loaded yet at the time the `addEventListener` call is made. This is often due to the element being referenced before the DOM has fully loaded.\n\n### Solution\n\nTo resolve this, ensure that all `addEventListener` calls for your buttons are inside a `window.onload` function. This guarantees that the elements are available in the DOM when the JavaScript code tries to access them.\n\n### Updated Code\n\nHere’s how you can structure your `script.js` file to avoid this error and add the \"JumpPad\" functionality:\n\n1. **Wrap all your event listener setups in `window.onload`.**\n\n2. **Add the \"JumpPad\" functionality.**\n\n### Complete Updated script.js\n\n```javascript\nlet currentBlock = 'air'; // Default block type\nlet clipboard = []; // Global clipboard for copied objects\nlet levelGrid;\nlet mode = 'place'; // Default mode\nlet selectedObjects = [];\nconst blockSize = 50; // This should be consistent across your script\nlet zoomLevel = 1.0; // Default zoom level\nlet history = [];\nlet redoStack = [];\n\n// Initialize the level grid\nfunction initializeLevelGrid() {\n const blocksWide = 100;\n const blocksHigh = 100;\n levelGrid = new Array(blocksHigh).fill(null).map(() => new Array(blocksWide).fill(0));\n}\n\n// Function to handle filling an area\nfunction fillArea(x, y, targetBlockType, fillBlockType) {\n if (x < 0 || x >= levelGrid[0].length || y < 0 || y >= levelGrid.length) return; // Boundary check\n ","created_at":"2024-12-19T20:21:31.994006Z","output_tokens":389},{"deleted":0,"code_id":193713,"input_tokens":9633,"id":97021,"project_id":712,"sender":"ai","message":"The error you're encountering, `Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')`, indicates that JavaScript is attempting to add an event listener to an element that does not exist in the DOM at the time the script runs. This often happens when the script is executed before the DOM elements are fully loaded.\n\nIn your current `index.html`, the `