Voxel Grid Adventure

{"name":"Voxel Grid Adventure","description":"","photo":"","view_count":6,"fork_count":0,"expires_at":null,"created_at":"2024-11-07T20:17:16.513388Z","updated_at":"2024-11-07T20:17:16.513393Z","user_id":247,"status":"PRIVATE","parent_id":null,"id":4465,"user":{"photo":null,"email":null,"recess_id":"3d50afae-a8bb-45d0-bb53-5dd34b479cc2","created_at":"2024-11-06T17:24:49.572484Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"notsodonutelordjj","id":247,"password_hash":null,"updated_at":"2024-11-06T17:24:49.572486Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"// JavaScript code here\nlet player;\n\n// JavaScript code here\nlet floreImage;\n\nlet gameStarted = false;\n\nlet isDashing = false;\n\nlet dashCooldown = false;\n\nlet dashDuration = 10;\n\n// Duration of the dash in frames\nlet dashSpeed = 15;\n\n// Speed during the dash\nlet dashFrameCount = 0;\n\nlet isAttacking = false;\n\nlet enemy;\n\nlet isInvincible = false;\n\nlet enemies = [];\n\nlet playerHealth = 3;\n\nlet maxEnemies = 0;\n\nlet startTime;\n\nlet longestTime = 0;\n\nlet invincibilityDuration = 120;\n\n// Duration in frames (e.g., 2 seconds if 60 FPS)\nlet invincibilityTimeLeft = 0;\n\nlet particles = [];\n\nlet cubeTrails = [];\n\nlet enemyImage;\n\nfunction preload() {\n floreImage = loadImage(\"@asset('flore')\"); // Load the flore image\n enemyImage = loadImage(\"@asset('enemy')\"); // Load the enemy image\n}\n\nfunction setup() {\n createCanvas(windowWidth * 2, windowHeight * 2); // Double the canvas size for a larger floor\n player = {\n x: width / 2,\n y: height / 2,\n size: 40\n };\n\n // Initialize the first enemy\n spawnEnemy();\n\n gameStarted = true; // Start the game immediately\n loop(); // Start the draw loop\n}\n\nfunction draw() {\n if (gameStarted) {\n background('#87CEEB');\n\n // Constantly center the camera on the player's position\n let offsetX = player.x - windowWidth / 2;\n let offsetY = player.y - windowHeight / 2;\n translate(-offsetX, -offsetY);\n\n updatePlayerPosition();\n updateEnemyPosition();\n\n drawFloor();\n displayPlayer();\n displayEnemy();\n playerAttack();\n\n // Generate cube trails during dash\n if (isDashing) {\n cubeTrails.push(new CubeTrail(player.x, player.y));\n }\n\n // Update and display cube trails\n for (let i = cubeTrails.length - 1; i >= 0; i--) {\n cubeTrails[i].update();\n cubeTrails[i].show();\n if (cubeTrails[i].isDead()) {\n cubeTrails.splice(i, 1); // Remove dead trails\n }\n }\n\n // Update the invincibility bar\n updateInvincibilityBar();\n\n // Update time survived\n let currentTime = (millis() - startTime) / 1000;\n if (currentTime > longestTime) {\n longestTime = currentTime;\n }\n\n if (enemies.length > maxEnemies) {\n maxEnemies = enemies.length;\n }\n\n if (dashCooldown) {\n dashFrameCount++;\n if (dashFrameCount > dashDuration * 2) {\n dashCooldown = false;\n dashFrameCount = 0;\n }\n }\n\n let cooldownTime = dashCooldown ? (dashDuration * 2 - dashFrameCount) / 60 : 0;\n document.getElementById('dash-cooldown').textContent = `Cooldown: ${cooldownTime.toFixed(1)}s`;\n }\n}\n\nclass Particle {\n constructor(x, y) {\n this.x = x;\n this.y = y;\n this.size = random(5, 10); // Increased random size for larger particles\n this.lifetime = 60; // Lifetime of the particle in frames\n this.opacity = 255; // Opacity for fading effect\n }\n\n update() {\n this.y -= 1; // Move the particle upwards\n this.opacity -= 4; // Fade out the particle\n this.lifetime--; // Decrease lifetime\n }\n\n show() {\n noStroke();\n fill(255, 165, 0, this.opacity); // Orange color with fading opacity\n ellipse(this.x, this.y, this.size);\n }\n\n isDead() {\n return this.lifetime <= 0;\n }\n}\n\nclass CubeTrail {\n constructor(x, y) {\n this.x = x;\n this.y = y;\n this.size = player.size; // Size of the cube equal to the player's size\n this.lifetime = 30; // Lifetime of the cube in frames\n this.opacity = 255; // Opacity for fading effect\n }\n\n update() {\n this.opacity -= 8.5; // Fade out the cube\n this.lifetime--; // Decrease lifetime\n }\n\n show() {\n fill(0, 0, 255, this.opacity); // Blue color with fading opacity\n noStroke();\n rect(this.x, this.y, this.size, this.size);\n }\n\n isDead() {\n return this.lifetime <= 0;\n }\n}\n\nfunction resetGame() {\n playerHealth = 3; // Reset player health\n player.x = width / 2; // Reset player position\n player.y = height / 2;\n enemies = []; // Clear existing enemies\n\n // Re-initialize the first enemy\n enemies.push({\n x: random(width),\n y: random(height),\n size: 30,\n speed: 2\n });\n\n dashCooldown = false; // Reset dash cooldown\n dashFrameCount = 0; // Reset dash frame count\n isDashing = false; // Reset dashing state\n isInvincible = false; // Reset invincibility\n isAttacking = false; // Reset attacking state\n\n startTime = millis(); // Reset start time for new game\n updateHealthDisplay(); // Update health display\n}\n\nfunction collideRectCircle(rx, ry, rw, rh, cx, cy, diameter) {\n // Temporary variables to set edges for testing\n let testX = cx;\n let testY = cy;\n\n // Check which edge is closest\n if (cx < rx) testX = rx; // Left edge\n else if (cx > rx + rw) testX = rx + rw; // Right edge\n\n if (cy < ry) testY = ry; // Top edge\n else if (cy > ry + rh) testY = ry + rh; // Bottom edge\n\n // Get distance from closest edges\n let distX = cx - testX;\n let distY = cy - testY;\n let distance = sqrt((distX * distX) + (distY * distY));\n\n // If the distance is less than the radius, collision!\n return distance <= diameter / 2;\n}\n\nfunction playerAttack() {\n if (isAttacking) {\n fill('#FF0000'); // Set the fill color for the attack\n let attackSize = player.size / 2; // Size of the attack rectangle\n let attackOffset = player.size; // Offset to position attack in front of the player\n let increasedOffset = player.size * 1.5; // Increased offset for positive directions\n\n let attackX = player.x + increasedOffset; // Default attack position to the right\n let attackY = player.y;\n\n // Determine the attack position based on the direction\n if (keyIsDown(LEFT_ARROW)) {\n attackX = player.x - attackOffset;\n attackY = player.y;\n rect(attackX, attackY, attackSize, player.size);\n } else if (keyIsDown(RIGHT_ARROW)) {\n attackX = player.x + increasedOffset;\n attackY = player.y;\n rect(attackX, attackY, attackSize, player.size);\n } else if (keyIsDown(UP_ARROW)) {\n attackX = player.x;\n attackY = player.y - attackOffset;\n rect(attackX, attackY, player.size, attackSize);\n } else if (keyIsDown(DOWN_ARROW)) {\n attackX = player.x;\n attackY = player.y + increasedOffset;\n rect(attackX, attackY, player.size, attackSize);\n } else {\n // Default direction if no arrow key is pressed\n rect(attackX, attackY, attackSize, player.size);\n }\n\n // Check for collision with each enemy\n enemies.forEach((enemy, index) => {\n if (attackX && attackY && collideRectCircle(attackX, attackY, attackSize, player.size, enemy.x, enemy.y, enemy.size)) {\n killEnemy(index);\n }\n });\n }\n}\n\nfunction updateHealthDisplay() {\n document.getElementById('player-health').textContent = `Health: ${playerHealth}`;\n}\n\nfunction endGame() {\n noLoop(); // Stop the game loop\n saveLongestTime(); // Save the longest time\n resetGame(); // Call the reset function\n showMenu(); // Show the menu\n}\n\nfunction showMenu() {\n document.getElementById('menu').style.display = 'flex'; // Show the menu\n document.getElementById('longest-time').textContent = `Longest Time Survived: ${longestTime.toFixed(1)}s`; // Update longest time display\n document.getElementById('max-enemies').textContent = `Most Enemies Encountered: ${maxEnemies}`;\n noLoop(); // Stop the draw loop\n}\n\nfunction saveLongestTime() {\n let currentTime = (millis() - startTime) / 1000; // Calculate current time survived\n if (currentTime > longestTime) {\n longestTime = currentTime; // Update the longest time if the current time is greater\n }\n}\n\nfunction startGame() {\n document.getElementById('menu').style.display = 'none'; // Hide the menu\n gameStarted = true;\n startTime = millis(); // Start the timer\n loop(); // Start the draw loop\n}\n\nfunction updateInvincibilityBar() {\n const bar = document.getElementById('invincibility-bar');\n const barHeight = map(invincibilityTimeLeft, 0, invincibilityDuration, 0, 70); // Map time left to bar height\n bar.style.height = `${barHeight}px`; // Update the height of the bar\n}\n\nfunction displayPlayer() {\n noTint(); // Ensure no tint is applied\n if (isInvincible) {\n fill(0, 0, 255); // Set the fill color to blue when invincible\n stroke(0, 0, 255); // Set the outline color to blue\n } else {\n fill(0); // Set the fill color to black\n stroke(0); // Set the outline color to black\n }\n rect(player.x, player.y, player.size, player.size); // Draw the player\n}\n\nfunction keyPressed() {\n if (key === 'm' || key === 'M') { // Check if the 'M' key is pressed\n if (document.getElementById('menu').style.display === 'none') {\n showMenu();\n } else {\n startGame();\n }\n }\n\n if (key === ' ' && !isDashing && !dashCooldown) { // Space bar for dash\n isDashing = true; // Start the dash\n isInvincible = true; // Make the player invincible during the dash\n }\n\n if (key === 'c' || key === 'C') { // 'C' key for attack\n isAttacking = true;\n setTimeout(() => { isAttacking = false; }, 200); // Attack lasts for 200 milliseconds\n }\n}\n\nfunction displayEnemy() {\n fill('#FF0000'); // Set the fill color for the enemy\n enemies.forEach(enemy => {\n rect(enemy.x, enemy.y, enemy.size, enemy.size); // Draw each enemy as a square\n\n // Generate new particles from the center of the enemy\n for (let i = 0; i < 4; i++) { // Increased particle count for more fire effect\n const centerX = enemy.x + enemy.size / 2;\n const centerY = enemy.y + enemy.size / 2;\n particles.push(new Particle(centerX + random(-10, 10), centerY + random(-10, 10)));\n }\n });\n\n // Update and display particles\n for (let i = particles.length - 1; i >= 0; i--) {\n particles[i].update();\n particles[i].show();\n if (particles[i].isDead()) {\n particles.splice(i, 1); // Remove dead particles\n }\n }\n}\n\nfunction drawFloor() {\n let tileSize = 50; // Set the size for each tile\n for (let x = 0; x < width; x += tileSize) {\n for (let y = 0; y < height; y += tileSize) {\n image(floreImage, x, y, tileSize, tileSize); // Draw the flore image across the entire screen\n }\n }\n\n // Draw enemy images along the border\n let enemySize = 30; // Set the size for each enemy image\n\n // Top and bottom borders\n for (let x = 0; x < width; x += enemySize) {\n image(enemyImage, x, 0, enemySize, enemySize); // Top border\n image(enemyImage, x, height - enemySize, enemySize, enemySize); // Bottom border\n }\n\n // Left and right borders\n for (let y = 0; y < height; y += enemySize) {\n image(enemyImage, 0, y, enemySize, enemySize); // Left border\n image(enemyImage, width - enemySize, y, enemySize, enemySize); // Right border\n }\n}\n\nfunction spawnEnemy() {\n let position = Math.floor(random(4)); // Randomly choose one of the four borders\n let x, y;\n\n switch (position) {\n case 0: // Top border\n x = random(width);\n y = 0;\n break;\n case 1: // Bottom border\n x = random(width);\n y = height - 30; // Adjust for enemy size\n break;\n case 2: // Left border\n x = 0;\n y = random(height);\n break;\n case 3: // Right border\n x = width - 30; // Adjust for enemy size\n y = random(height);\n break;\n }\n\n enemies.push({\n x: x,\n y: y,\n size: 30,\n speed: 2\n });\n}\n\nfunction killEnemy(index) {\n // Remove the enemy that was \"killed\"\n enemies.splice(index, 1);\n\n // Add two new enemies\n for (let i = 0; i < 2; i++) {\n spawnEnemy();\n }\n}\n\nfunction updateEnemyPosition() {\n enemies.forEach(enemy => {\n let angle = atan2(player.y - enemy.y, player.x - enemy.x);\n enemy.x += enemy.speed * cos(angle);\n enemy.y += enemy.speed * sin(angle);\n\n // Wrap around logic for the floor\n if (enemy.x < 0) {\n enemy.x = width;\n } else if (enemy.x > width) {\n enemy.x = 0;\n }\n\n if (enemy.y < 0) {\n enemy.y = height;\n } else if (enemy.y > height) {\n enemy.y = 0;\n }\n });\n}\n\nfunction updatePlayerPosition() {\n let speed = isDashing ? dashSpeed : 5; // Use dash speed if dashing\n\n if (keyIsDown(LEFT_ARROW) || keyIsDown(RIGHT_ARROW) || keyIsDown(UP_ARROW) || keyIsDown(DOWN_ARROW)) {\n if (keyIsDown(LEFT_ARROW)) {\n player.x -= speed;\n }\n if (keyIsDown(RIGHT_ARROW)) {\n player.x += speed;\n }\n if (keyIsDown(UP_ARROW)) {\n player.y -= speed;\n }\n if (keyIsDown(DOWN_ARROW)) {\n player.y += speed;\n }\n }\n\n // End dashing if the duration is over\n if (isDashing) {\n dashFrameCount++;\n if (dashFrameCount > dashDuration) {\n isDashing = false;\n dashCooldown = true;\n dashFrameCount = 0;\n isInvincible = false; // Reset invincibility after dash\n }\n }\n\n // Check for collision with enemies\n if (!isInvincible) {\n enemies.forEach((enemy) => {\n if (collideRectCircle(player.x, player.y, player.size, player.size, enemy.x, enemy.y, enemy.size)) {\n playerHealth--;\n updateHealthDisplay();\n if (playerHealth <= 0) {\n endGame();\n } else {\n isInvincible = true;\n invincibilityTimeLeft = invincibilityDuration;\n }\n }\n });\n } else if (invincibilityTimeLeft > 0) {\n invincibilityTimeLeft--;\n if (invincibilityTimeLeft <= 0) {\n isInvincible = false; // Reset invincibility after time runs out\n }\n }\n}\n\n","style.css":"body {\n margin: 0;\n padding: 0;\n background-color: #87CEEB;\n}\n\n.menu {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.5);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 24px;\n}\n\n#ui-rectangle {\n position: fixed;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 80%;\n height: 70px;\n background-color: #333;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 20px;\n box-sizing: border-box;\n}\n\n#invincibility-bar {\n width: 10px;\n height: 70px;\n background-color: blue;\n margin-right: 10px;\n}\n\nbutton {\n padding: 10px 20px;\n font-size: 18px;\n cursor: pointer;\n}\n\n.show-menu-button {\n position: absolute;\n top: 10px;\n right: 10px;\n padding: 10px 20px;\n font-size: 18px;\n cursor: pointer;\n}\n\n.dash-cooldown,\n.player-health {\n color: white;\n font-size: 18px;\n}","index.html":"\n\n\n\n \n \n Voxel Grid Adventure\n \n \n\n\n\n \n

Cooldown: 0s

Health: 3

\n \n\n\n"},"chat_history":[],"assets":[{"project_id":4465,"creator":null,"cloudinary_id":"mokjbjcnvwuri1yl86fp","deleted":false,"id":46210,"created_at":"2024-11-07T19:42:45.236963Z","name":"enemy","resource_type":"image","tags":null},{"project_id":4465,"creator":null,"cloudinary_id":"nngroynjc089jymuhthm","deleted":false,"id":46209,"created_at":"2024-11-07T18:20:25.741516Z","name":"flore","resource_type":"image","tags":null}],"messages_sent":128,"comments":[],"steps":[]}