{"name":"Paper Conquer Battle Royale","description":"Dodge bots and capture territory in this single-player game of strategy and skill, now with power-ups! Can you outsmart the relentless bots and dominate the game board amidst power-up mayhem?","photo":"https://jippity.s3.amazonaws.com/CleanShot 2024-04-02 at 13.50.22@2x.png","view_count":119,"fork_count":0,"expires_at":null,"created_at":"2023-12-28T22:22:32.053384Z","updated_at":"2024-01-01T03:46:44.980269Z","user_id":2,"status":"PUBLIC","parent_id":9,"id":188,"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 player;\nlet playerColor;\nlet tail = [];\nlet gridSize = 20;\nlet lastMove = 0;\nlet playerSpeed = 50; // Control the speed of the player\nlet initialPosition = true;\nlet hasCollided = false;\nlet territory = [];\nlet filledCells = [];\nlet coins = 1000000000000;\nlet knightImage;\n\n// preload() function\nfunction preload() {\n knightImage = loadImage('https://media.discordapp.net/attachments/1089281098938331296/1191077848979611709/A_vector_art_icon_of_a_Knights_helmet_with_a_white_background._Simplistic_and_minimal._--v_6.0_U4.png?ex=65a420b0&is=6591abb0&hm=a5676b362a7d04f67b81677a2f6e79af425fb0fda308068912a05bccef6f1337&=&format=webp&quality=lossless&width=671&height=671');\n}\n\nfunction displayBattlePass() {\n let battlePassElement = document.getElementById('battle-pass');\n\n // Clear the battlePassElement\n battlePassElement.innerHTML = \"\";\n\n // For each level in the BattlePass...\n BattlePass.levels.forEach(level => {\n // Create a new div element for the level\n let levelElement = document.createElement('div');\n\n // Set the text of the levelElement to the name, description of the level\n levelElement.innerText = `Level ${level.level}: ${level.name}\\n${level.description}`;\n\n // If the player's level is less than the level's level, disable the levelElement\n if (BattlePass.playerLevel < level.level) {\n levelElement.classList.add('disabled');\n }\n\n // Add the levelElement to the battlePassElement\n battlePassElement.appendChild(levelElement);\n });\n}\nlet playerSkin = 'Green'; // Default skin\n// Updated BattlePass object\n\n\nlet skins = [\n { name: 'Green', cost: 0, color: [0, 255, 0] },\n { name: 'Blue', cost: 50, color: [0, 0, 255] },\n { name: '8bit', cost: 300, color: [255, 0, 255] },\n];\n// Updated BattlePass object\nlet BattlePass = {\n playerLevel: 1, // All players start at level 1\n playerXP: 0, // All players start with 0 XP\n levels: [\n { level: 1, xpRequired: 0, name: 'Knight Apprentice', description: 'Beginning the Knight journey', skin: 'Knight' },\n { level: 2, xpRequired: 10, name: 'Knight Errant', description: 'Embarking on quests and adventures', skin: 'Blue' },\n { level: 3, xpRequired: 25, name: 'Knight of the Realm', description: 'Serving the kingdom', skin: '8bit' },\n { level: 4, xpRequired: 50, name: 'Knight Commander', description: 'Leading troops into battle', skin: 'Red' },\n { level: 5, xpRequired: 75, name: 'Knight Champion', description: 'Champion of the kingdom', skin: 'Gold' },\n ],\n awardXP: function (xp) {\n this.playerXP += xp;\n this.checkLevelUp();\n },\n checkLevelUp: function () {\n if (this.playerLevel < this.levels.length) {\n let nextLevel = this.levels[this.playerLevel]; // Get the next level\n if (this.playerXP >= nextLevel.xpRequired) {\n this.unlockLevel();\n }\n }\n },\n unlockLevel: function () {\n if (this.playerLevel < this.levels.length) {\n this.playerLevel++;\n let currentLevel = this.levels[this.playerLevel - 1];\n console.log(`Unlocked level ${this.playerLevel}: ${currentLevel.name}. ${currentLevel.description}`);\n unlockSkin(currentLevel.skin);\n } else {\n console.log('You have reached max level');\n }\n },\n checkLevel: function () {\n if (this.playerLevel < this.levels.length) {\n let nextLevel = this.levels[this.playerLevel];\n console.log(`You need ${nextLevel.xpRequired - this.playerXP} XP to reach level ${nextLevel.level}: ${nextLevel.name}`);\n } else {\n console.log('You have reached max level');\n }\n }\n};\n\n// New function to unlock skins\nfunction unlockSkin(skinName) {\n let skin = skins.find(s => s.name === skinName);\n if (skin) {\n skin.unlocked = true;\n console.log(`Unlocked skin: ${skinName}`);\n }\n}\n\n// Add new skin to skins array\nskins.push({ name: 'Knight', cost: 0, color: knightImage, unlocked: false });\nfunction displaySkins() {\n let skinsElement = document.getElementById('skins');\n\n // Clear the skins element\n skinsElement.innerHTML = \"\"\n\n // For each skin...\n skins.forEach(skin => {\n // Create a new button element\n let button = document.createElement('button');\n\n // Add a custom attribute to the button so we can find it later\n button.setAttribute('skin-name', skin.name);\n\n // Set the text of the button to the name and cost of the skin\n button.innerText = playerSkin === skin.name ? `${skin.name} - Equipped` : `${skin.name} - ${skin.cost} coins`;\n\n // When the button is clicked...\n button.onclick = function () {\n // Try to change to this skin\n changeSkin(skin.name);\n\n // Update the display of coins and skins\n displaySkins();\n };\n\n // If the player doesn't have enough coins for this skin, disable the button\n if (coins < skin.cost) {\n button.disabled = true;\n }\n // If this is the current skin, mark the button as selected\n if (playerSkin === skin.name) {\n button.classList.add('purchased');\n }\n\n // Add the button to the skins element\n skinsElement.appendChild(button);\n });\n}\nfunction changeSkin(newSkinName) {\n let newSkin = skins.find(skin => skin.name === newSkinName);\n if (newSkin) {\n if (coins >= newSkin.cost && playerSkin !== newSkin.name && (newSkin.unlocked || newSkin.cost > 0)) {\n coins -= newSkin.cost;\n playerSkin = newSkin.name;\n playerColor = newSkin.color instanceof p5.Image ? newSkin.color : color(newSkin.color);\n let button = document.querySelector(`button[skin-name=\"${newSkin.name}\"]`);\n button.classList.add('purchased');\n button.innerText = `${newSkin.name} - Equipped`;\n } else if (coins < newSkin.cost) {\n alert(\"Insufficient coins to buy this skin.\");\n } else if (!newSkin.unlocked && newSkin.cost === 0) {\n alert(\"You need to unlock this skin first.\");\n } else {\n alert(\"You already own this skin.\");\n }\n }\n}\n\nlet quests = [\n { description: \"Cover 10% of the area\", completed: false, check: () => calculateScore() >= 10, xp: 10 },\n { description: \"Cover 25% of the area\", completed: false, check: () => calculateScore() >= 25, xp: 25 },\n { description: \"Cover 50% of the area\", completed: false, check: () => calculateScore() >= 50, xp: 50 }\n];\nlet startTime;\nlet gameDuration = 6; // Game duration in seconds\nfunction resetGame() {\n // Hide game over screen\n let gameOverElement = document.getElementById('game-over');\n gameOverElement.style.display = 'none';\n\n // Hide game canvas and UI\n document.getElementById('defaultCanvas0').style.display = 'none';\n document.getElementById('ui').style.display = 'none';\n\n // Show home screen\n let homeScreenElement = document.getElementById('home-screen');\n homeScreenElement.style.display = 'flex';\n}\ndocument.getElementById('start-button').addEventListener('click', startGame);\ndocument.getElementById('restart-button').addEventListener('click', resetGame);\nfunction startGame() {\n // Show game canvas and UI\n document.getElementById('defaultCanvas0').style.display = 'block';\n document.getElementById('ui').style.display = 'block';\n\n // Hide home screen\n let homeScreenElement = document.getElementById('home-screen');\n homeScreenElement.style.display = 'none';\n\n // Populate home screen quests\n let homeQuestsElement = document.getElementById('home-quests');\n homeQuestsElement.innerHTML = '';\n quests.forEach((quest, index) => {\n homeQuestsElement.innerHTML += `${quest.description} - ${quest.completed ? 'Completed' : 'Incomplete'}
`;\n });\n\n // Reset game variables\n tail = [];\n filledCells = [];\n quests.forEach(quest => quest.completed = false);\n isGameOver = false;\n\n // Start a new game\n setup();\n}\nfunction keyPressed() {\n if (isGameOver && keyCode === ENTER) {\n resetGame();\n }\n}\nBattlePass.levels[1] = { \n level: 2, \n xpRequired: 10, \n name: 'Knight Errant',\n description: 'Embarking on quests and adventures', \n skin: 'Knight' \n};\nfunction setup() {\n knightImage = loadImage('https://media.discordapp.net/attachments/1089281098938331296/1191077848979611709/A_vector_art_icon_of_a_Knights_helmet_with_a_white_background._Simplistic_and_minimal._--v_6.0_U4.png?ex=65a420b0&is=6591abb0&hm=a5676b362a7d04f67b81677a2f6e79af425fb0fda308068912a05bccef6f1337&=&format=webp&quality=lossless&width=671&height=671');\n\n // Check if playerSkin is defined and in the skins array, if not set it to default\n if (!playerSkin || !skins.find(skin => skin.name === playerSkin)) {\n playerSkin = 'Green'; // Set to default skin\n }\n\n // Now fetch the playerColor\n let currentSkin = skins.find(skin => skin.name === playerSkin);\n if (currentSkin && currentSkin.color) {\n playerColor = color(currentSkin.color);\n } else {\n console.log('Error: Skin color not defined. Setting to default color.');\n playerColor = color(0, 255, 0); // Default to green if skin color is undefined\n }\n \n displaySkins();\n let canvasWidth = Math.floor(windowWidth / gridSize) * gridSize;\n let canvasHeight = Math.floor(windowHeight / gridSize) * gridSize;\n createCanvas(canvasWidth, canvasHeight);\n frameRate(playerSpeed);\n player = createVector(width / 2, height / 2);\n\n // Change the neon skin to have a random color\n let neonSkin = skins.find(skin => skin.name === '8bit');\n if (neonSkin) {\n neonSkin.color = [random(255), random(255), random(255)]; // RGB values for random color\n playerColor = neonSkin.color;\n }\n\n startTime = millis(); // Record the start time of the game\n\n let gameOverElement = document.getElementById('game-over');\n gameOverElement.style.display = 'none';\n}\nlet isGameOver = false;\nlet lastAwardedScore = 0;\n\nlet nextCoinScore = 1;\nlet coinsHistory = [];\nlet previousScore = 0;\n\nfunction calculateScore() {\n let totalArea = (width / gridSize) * (height / gridSize);\n let coveredArea = tail.length + filledCells.length;\n let score = Math.floor((coveredArea / totalArea) * 100);\n\n // Check if score is a number\n if (isNaN(score)) {\n console.error('Score is NaN. totalArea:', totalArea, 'coveredArea:', coveredArea);\n score = 0; // Reset the score to 0 if it's NaN\n }\n\n // Award more coins for every 2% of the area covered as the score increases\n if (score > previousScore && score >= nextCoinScore) {\n let coinsToAward = Math.max(15, Math.floor(score / 3)); // Award at least 1 coin, and 1 more coin for every 10% increase in score\n coins += coinsToAward;\n coinsHistory.push(coins); // add the new value of coins to the history\n }\n\n // If coins is NaN, restore it to the last value in history\n if (isNaN(coins)) {\n console.error('Coins is NaN in calculateScore. Resetting coins to the last known value.');\n coins = coinsHistory.length > 0 ? coinsHistory.pop() : 0; // If coinsHistory is not empty, restore coins to the last value in history, otherwise reset coins to 0.\n }\n\n previousScore = score; // Remember the current score for the next frame\n\n return score;\n}\nfunction draw() {\n if (isGameOver) {\n displayGameOverScreen();\n return;\n }\n if (frameCount - lastMove >= 1) {\n movePlayer();\n lastMove = frameCount;\n }\n document.getElementById('coins').innerText = \"Coins: \" + coins;\n\n background(255);\n drawGrid();\n\n // Draw the player's path (trail) and territory\n let currentColor = skins.find(skin => skin.name === playerSkin).color;\n fill(currentColor);\n tail.forEach((point) => {\n rect(point.x, point.y, gridSize, gridSize);\n });\n filledCells.forEach(cell => {\n rect(cell.x, cell.y, gridSize, gridSize);\n });\n\n // If the player skin is Neon, add a glow effect\n if (playerSkin === '8bit') {\n strokeWeight(10);\n stroke(currentColor);\n } else {\n noStroke();\n }\n\n // Draw the player\nif (playerColor instanceof p5.Image) {\n image(playerColor, player.x, player.y, gridSize, gridSize);\n} else {\n fill(playerColor);\n rect(player.x, player.y, gridSize, gridSize);\n}\n noStroke();\n document.getElementById('level').innerText = \"Level: \" + BattlePass.playerLevel;\n\n // Update the player's XP\n document.getElementById('xp').innerText = \"XP: \" + BattlePass.playerXP;\n\n document.getElementById('score').innerText = \"Score: \" + calculateScore().toFixed(2) + \"%\";\n let elapsedMillis = millis() - startTime;\n let remainingSeconds = gameDuration - Math.floor(elapsedMillis / 1000);\n let remainingMinutes = Math.floor(remainingSeconds / 60);\n remainingSeconds = remainingSeconds % 60;\n if (remainingSeconds <= 0) {\n isGameOver = true;\n } else {\n document.getElementById('time').innerText = `Time: ${remainingSeconds}`;\n }\n\n checkQuests();\n let questsElement = document.getElementById('quests');\n questsElement.innerHTML = '';\n quests.forEach((quest, index) => {\n questsElement.innerHTML += `${quest.description} - ${quest.completed ? 'Completed' : 'Incomplete'}
`;\n });\n\n checkQuests();\n if (isNaN(coins)) {\n console.error('Coins is NaN at the end of draw. Resetting coins to 0.');\n }\n\n}\nfunction displayGameOverScreen() {\n let gameOverElement = document.getElementById('game-over');\n let gameOverTitleElement = document.querySelector('.game-over-title');\n let gameOverScoreElement = document.querySelector('.game-over-score');\n let gameOverQuestsElement = document.querySelector('.game-over-quests');\n\n let score = calculateScore();\n let completedQuests = quests.filter(quest => quest.completed).map(quest => quest.description);\n\n gameOverTitleElement.innerText = 'Game Over';\n gameOverScoreElement.innerText = `Your score: ${score}%`;\n gameOverQuestsElement.innerHTML = `Quests completed:
${completedQuests.join('
')}`;\n\n gameOverElement.style.display = 'flex'; // Show the game over screen\n\n document.getElementById('restart-button').addEventListener('click', resetGame);\n}\nfunction checkQuests() {\n quests.forEach(quest => {\n if (!quest.completed && quest.check()) {\n quest.completed = true;\n // Check if coins is a number before adding to it\n if (isNaN(coins)) {\n console.error('Coins is NaN in checkQuests. Resetting coins to 0.');\n }\n coins += quest.coins;\n // Add XP for every quest completed\n BattlePass.awardXP(quest.xp);\n }\n });\n}\n\n\nfunction displayQuests() {\n fill(0);\n textSize(16);\n quests.forEach((quest, index) => {\n text(`${quest.description} - ${quest.completed ? 'Completed' : 'Incomplete'}`, 10, 65 + index * 20);\n });\n}\nfunction displayTime() {\n let elapsedMillis = millis() - startTime;\n let remainingSeconds = gameDuration - Math.floor(elapsedMillis / 1000);\n let remainingMinutes = Math.floor(remainingSeconds / 60);\n remainingSeconds = remainingSeconds % 60;\n\n fill(0);\n textSize(16);\n text(`Time: ${remainingMinutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`, 10, 45);\n}\nfunction displayScore() {\n let score = calculateScore();\n fill(0);\n textSize(16);\n text(\"Score: \" + score.toFixed(2) + \"%\", 10, 25);\n}\n\n\n\n\nfunction detectCollision() {\n for (let i = 0; i < tail.length; i++) {\n if (tail[i].x === player.x && tail[i].y === player.y) {\n let loop = [...tail]; // Copy the tail\n loop.splice(i, 1); // Remove current position from the loop\n if (loop.length >= 3) { // Need at least 3 points to form a polygon\n let fillPosition = findInsideCell(loop);\n if (fillPosition) {\n fillTerritory(fillPosition, loop);\n }\n }\n break;\n }\n }\n}\n\nfunction fillTerritory(startPosition, loop) {\n let isFilling = false;\n let filled = new Set();\n\n // Check each cell within the bounding box of the loop\n for (let x = Math.min(...loop.map(p => p.x)); x <= Math.max(...loop.map(p => p.x)); x += gridSize) {\n for (let y = Math.min(...loop.map(p => p.y)); y <= Math.max(...loop.map(p => p.y)); y += gridSize) {\n let position = { x: x, y: y };\n\n // If the current cell is inside the loop, start filling\n if (isInsidePolygon(position, loop)) {\n isFilling = true;\n }\n\n // If we're currently filling and the current cell is part of the tail, stop filling\n if (isFilling && isPartOfTail(position)) {\n isFilling = false;\n }\n\n // If we're currently filling, fill the current cell\n if (isFilling) {\n let key = `${position.x},${position.y}`;\n if (!filled.has(key)) {\n filled.add(key);\n filledCells.push(position);\n }\n }\n }\n }\n}\nfunction drawGrid() {\n stroke(0); // black color for lines\n background(255); // white background\n for (let x = 0; x <= width; x += gridSize) {\n line(x, 0, x, height);\n }\n for (let y = 0; y <= height; y += gridSize) {\n line(0, y, width, y);\n }\n}\n\nfunction movePlayer() {\n let previousPosition = { x: player.x, y: player.y };\n\n if (keyIsDown(UP_ARROW) && player.y - gridSize >= 0) {\n player.y -= gridSize;\n } else if (keyIsDown(DOWN_ARROW) && player.y + gridSize < height) {\n player.y += gridSize;\n } else if (keyIsDown(LEFT_ARROW) && player.x - gridSize >= 0) {\n player.x -= gridSize;\n } else if (keyIsDown(RIGHT_ARROW) && player.x + gridSize < width) {\n player.x += gridSize;\n }\n\n if (previousPosition.x !== player.x || previousPosition.y !== player.y) {\n tail.unshift(previousPosition);\n detectCollision();\n }\n}\n\nwindow.addEventListener(\"keydown\", function (e) {\n if ([\"ArrowUp\", \"ArrowDown\", \"ArrowLeft\", \"ArrowRight\"].indexOf(e.key) > -1) {\n e.preventDefault();\n }\n}, false);\n\nfunction fillShape(loop) {\n // console.log(\"Filling shape: \", loop);\n fill(playerColor);\n loop.forEach(({ x, y }) => {\n rect(x, y, gridSize, gridSize);\n });\n}\n\nfunction floodFill(startPosition, loop) {\n let stack = [];\n let filled = new Set();\n\n console.log(\"Starting floodFill from\", startPosition.x, startPosition.y);\n\n // Determine if the startPosition is inside the shape\n let isInside = isInsidePolygon(startPosition, loop);\n let directions = isInside ? [[0, -gridSize], [0, gridSize], [-gridSize, 0], [gridSize, 0]] : [[0, -gridSize], [0, gridSize]];\n\n // Start floodFill from startPosition\n stack.push(startPosition);\n while (stack.length > 0) {\n let current = stack.pop();\n let key = `${current.x},${current.y}`;\n\n if (filled.has(key)) {\n continue;\n }\n\n console.log(\"Filling cell\", current.x, current.y);\n filled.add(key);\n filledCells.push(current);\n\n // Add the filled cell to the tail\n tail.push(current);\n\n for (let [dx, dy] of directions) {\n let neighbor = { x: current.x + dx, y: current.y + dy };\n let key = `${neighbor.x},${neighbor.y}`;\n if (isInsidePolygon(neighbor, loop) && !filled.has(key) && !filledCells.some(cell => cell.x === neighbor.x && cell.y === neighbor.y)) {\n stack.push(neighbor);\n }\n }\n }\n}\n\nfunction fillCell(position) {\n // console.log(\"Filling cell at position \", position);\n fill(playerColor);\n rect(position.x, position.y, gridSize, gridSize);\n}\n\nfunction getNeighbors(position) {\n let neighbors = [\n { x: position.x, y: position.y - gridSize }, // Up\n { x: position.x, y: position.y + gridSize }, // Down\n { x: position.x - gridSize, y: position.y }, // Left\n { x: position.x + gridSize, y: position.y }, // Right\n ];\n // console.log(\"Neighbors for \" + `(${position.x}, ${position.y})` + \": \", neighbors.map(n => `(${n.x}, ${n.y})`));\n return neighbors;\n}\n\nfunction isInsidePolygon(point, polygon) {\n let crossings = 0;\n for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {\n let xi = polygon[i].x, yi = polygon[i].y;\n let xj = polygon[j].x, yj = polygon[j].y;\n\n let intersect = ((yi > point.y) != (yj > point.y)) &&\n (point.x < (xj - xi) * (point.y - yi) / (yj - yi) + xi);\n if (intersect) crossings++;\n }\n let isInside = crossings % 2 == 1;\n // console.log(\"Point\", point.x, point.y, \"is\", isInside ? \"\" : \"not\", \"inside the polygon\");\n return isInside;\n}\n\nfunction isPartOfTail(position) {\n let partOfTail = tail.some(tailPosition => tailPosition.x === position.x && tailPosition.y === position.y);\n return partOfTail;\n}\n\nfunction findInsideCell(loop) {\n // Start from the player's position and look in all four directions\n for (let distance = 0; distance < Math.max(width, height); distance += gridSize) {\n let points = [\n { x: player.x, y: player.y - distance },\n { x: player.x, y: player.y + distance },\n { x: player.x - distance, y: player.y },\n { x: player.x + distance, y: player.y }\n ];\n for (let point of points) {\n if (isInsidePolygon(point, loop)) {\n return point;\n }\n }\n }\n return null;\n}\ndisplayBattlePass();\n\n\n\n\n\n\n\n\n\nskins = skins.filter(skin => skin.name !== 'Knight');","style.css":"","index.html":"\n\n\n.\n \n \n paper conquer: battle Royale\n \n\n\n

Welcome to Paper Conquer: Battle Royale

\n \n

Skins

\n \n

\n\n

\n \n

\n\n\n \n\n\n\n"},"chat_history":[{"deleted":0,"code_id":13693,"input_tokens":null,"id":8637,"project_id":188,"sender":"human","message":"i cant see video","created_at":"2024-01-01T03:53:26.002957Z","output_tokens":null},{"deleted":0,"code_id":13693,"input_tokens":null,"id":8638,"project_id":188,"sender":"ai","message":"The video might not be loading due to several reasons, such as a wrong URL or network issues. Let's add an error handling function to the `preload()` function to catch and display any errors that occur when loading the video.\n\n```javascript\nlet companyLogo;\n\nfunction preload() {\n companyLogo = createVideo(\n ['https://cdn.discordapp.com/attachments/1172012862194073744/1191226683236306965/Dead_Coders_Society.mp4'], \n () => {\n console.log('Video loaded successfully');\n }, \n (err) => {\n console.log('Error loading video:', err);\n }\n );\n}\n```\n\nHere are the key points to understand about this code:\n\n- The `preload()` function is part of the p5.js library and it is used to load external files (like images, sounds, and videos) in setup(). In this case, we are using it to load a video.\n- The `createVideo()` function is also part of the p5.js library and it creates a new HTML5 video element that starts loading a video. The arguments it takes are the source of the video, a callback function to be called when the video is loaded, and another callback function to be called if an error occurs while loading.\n- If the video is successfully loaded, a message is logged to the console saying 'Video loaded successfully'.\n- If an error occurs while loading the video, the error is logged to the console with a message saying 'Error loading video:' followed by the error message.","created_at":"2024-01-01T03:53:26.019360Z","output_tokens":null}],"assets":[],"messages_sent":171,"comments":[],"steps":[]}