{"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":"","view_count":63,"fork_count":1,"expires_at":null,"created_at":"2023-12-14T22:35:57.978344Z","updated_at":"2023-12-14T22:35:57.978348Z","user_id":2,"status":"PRIVATE","parent_id":9,"id":56,"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 skins = [\n { name: \"skin1\", color: [255, 0, 0] }, // Red\n { name: \"skin2\", color: [0, 255, 0] }, // Green\n { name: \"skin3\", color: [0, 0, 255] } // Blue\n];\nlet bots = []; // Array to store all bots\nlet playerColor = [0, 0, 255]; // Initial color for player (blue)\n\nfunction changeSkinColor(r, g, b) {\n playerColor = [r, g, b];\n}\n\nfunction mouseClicked() {\n let clickedSkin = skins.find(skin => {\n // Replace these conditions with the correct ones for your game\n return mouseX > skin.x && mouseX < skin.x + skin.width && mouseY > skin.y && mouseY < skin.y + skin.height;\n });\n\n if (clickedSkin) {\n changeSkinColor(...clickedSkin.color); // Change color when a skin is clicked\n }\n}\nlet speed = 1;\nlet dKeyPressed = false;\nfunction keyTyped() {\n if (key === 'd') {\n let debugMenu = document.getElementById('debug-menu');\n if (debugMenu.style.display === 'none') {\n debugMenu.style.display = 'block';\n updateDebugMenu();\n } else {\n debugMenu.style.display = 'none';\n }\n } else if (['1', '2', '3'].includes(key)) {\n let skinIndex = Number(key) - 1;\n changeSkinColor(...skins[skinIndex].color);\n }\n}\n\nfunction closeDebugMenu() {\n let debugMenu = document.getElementById('debug-menu');\n debugMenu.style.display = 'none';\n}\nfunction updateDebugMenu() {\n let playerInfo = document.getElementById('player-info');\n playerInfo.textContent = `Player color: RGB(${playerColor[0]}, ${playerColor[1]}, ${playerColor[2]})`;\n}\nlet gridSize = 20;\nlet lastMove = 0;\nlet territory = [];\nlet botOriginalPos; // Add this line to store the bot's original position\nlet botTrail = []; // to store the bot's trail\nfunction addBot(x, y) {\n bots.push({\n x: x,\n y: y,\n direction: { x: 0, y: 0 },\n trail: [],\n moves: ['right', 'down', 'left', 'up'],\n currentMove: 0\n });\n}\nlet isPlayerInTerritory = true;\nlet score = 0;\nlet bot;\nlet botMoves = ['right', 'down', 'left', 'up'];\nlet currentMove = 0;\nlet botDirection;\nlet trail = [];\nlet grid = new Array(gridSize).fill().map(() => new Array(gridSize).fill(0));\nlet powerUps = [];\nlet frameCounter = 0; // Add a frame counter\nlet botMoveInterval = 15; // Move the bot every 4 frames\nlet powerUpDuration = 5000; // power-up lasts for 5000 milliseconds = 5 seconds\nlet powerUpRemainingTime = 0;\nlet botSpeed = 0.75; // Modify this to change the bot's speed\nlet botChangeDirectionInterval = 60; // Modify this to change how often the bot changes direction (in milliseconds)\nfunction createPowerUp() {\n if (powerUps.length < 5) {\n let powerUp = createVector(Math.floor(random(width) / gridSize) * gridSize, Math.floor(random(height) / gridSize) * gridSize);\n powerUps.push(powerUp);\n }\n}\n\nfunction startGame() {\n document.getElementById(\"main-menu\").style.display = \"none\";\n setup();\n let newX = Math.floor(player.x / gridSize);\n let newY = Math.floor(player.y / gridSize);\n territory.push({ x: newX, y: newY });\n\n // Set bot's starting position randomly up to 10 blocks away from player\n let botStartX = newX + Math.floor(Math.random() * 21) - 10;\n let botStartY = newY + Math.floor(Math.random() * 21) - 10;\n bot = createVector(botStartX * gridSize, botStartY * gridSize);\n addBot(Math.floor(random(width) / gridSize) * gridSize, Math.floor(random(height) / gridSize) * gridSize);\n addBot(Math.floor(random(width) / gridSize) * gridSize, Math.floor(random(height) / gridSize) * gridSize);\n\n addBot(Math.floor(random(width) / gridSize) * gridSize, Math.floor(random(height) / gridSize) * gridSize);\n addBot(Math.floor(random(width) / gridSize) * gridSize, Math.floor(random(height) / gridSize) * gridSize);\n addBot(Math.floor(random(width) / gridSize) * gridSize, Math.floor(random(height) / gridSize) * gridSize);\n addBot(Math.floor(random(width) / gridSize) * gridSize, Math.floor(random(height) / gridSize) * gridSize);\n\n}\n\n\nfunction setup() {\n bot = createVector(Math.floor(random(width) / gridSize) * gridSize, Math.floor(random(height) / gridSize) * gridSize);\n botDirection = { x: 0, y: 0 };\n setInterval(changeBotDirection, botChangeDirectionInterval);\n createCanvas(1200, 1200);\n player = createVector(Math.floor(width / 2 / gridSize) * gridSize, Math.floor(height / 2 / gridSize) * gridSize);\n grid = Array(Math.floor(width / gridSize)).fill().map(() => Array(Math.floor(height / gridSize)).fill(0));\n let newX = Math.floor(player.x / gridSize);\n let newY = Math.floor(player.y / gridSize);\n trail.push({ x: newX, y: newY });\n setInterval(createPowerUp, 5000); // creates a new power-up every 5 seconds\n}\nfunction mousePressed() {\n let clickedX = Math.floor(mouseX / gridSize) * gridSize;\n let clickedY = Math.floor(mouseY / gridSize) * gridSize;\n\n bot.x = clickedX;\n bot.y = clickedY;\n}\nfunction drawTrail() {\n for (let i = 0; i < trail.length; i++) {\n let cell = trail[i];\n fill(0, 0, 255);\n rect(cell.x * gridSize, cell.y * gridSize, gridSize, gridSize);\n }\n fill(255);\n}\n\nfunction changeBotDirection() {\n const directions = [\n { x: -1, y: 0 }, // left\n { x: 1, y: 0 }, // right\n { x: 0, y: -1 }, // up\n { x: 0, y: 1 }, // down\n ];\n botDirection = random(directions);\n}\nfunction rayCast(origin, end) {\n let points = [];\n let dx = end.x - origin.x;\n let dy = end.y - origin.y;\n for (let i = 0; i <= 1; i += 0.01) {\n let x = origin.x + dx * i;\n let y = origin.y + dy * i;\n points.push({ x, y });\n }\n return points;\n}\n\nfunction fillShape(shape, color) {\n let minX = Math.min(...shape.map(p => p.x));\n let minY = Math.min(...shape.map(p => p.y));\n let maxX = Math.max(...shape.map(p => p.x));\n let maxY = Math.max(...shape.map(p => p.y));\n\n fill(color[0], color[1], color[2]);\n for (let i = minX; i <= maxX; i++) {\n for (let j = minY; j <= maxY; j++) {\n if (isInsideShape({ x: i, y: j }, shape)) {\n grid[i][j] = 1;\n rect(i * gridSize, j * gridSize, gridSize, gridSize);\n territory.push({ x: i, y: j });\n }\n }\n }\n}\nfunction movePlayer() {\n const moves = {\n [LEFT_ARROW]: { x: -1, y: 0 },\n [RIGHT_ARROW]: { x: 1, y: 0 },\n [UP_ARROW]: { x: 0, y: -1 },\n [DOWN_ARROW]: { x: 0, y: 1 },\n };\n\n if (millis() - lastMove >= speed * 100) {\n let pressedKeys = Object.keys(moves).filter(k => keyIsDown(Number(k)));\n if (pressedKeys.length !== 1) return;\n\n let key = pressedKeys[0];\n let lastX = Math.floor(player.x / gridSize);\n let lastY = Math.floor(player.y / gridSize);\n let newX = lastX + moves[key].x;\n let newY = lastY + moves[key].y;\n\n // update trail\n trail.push({ x: newX, y: newY });\n\n if (territory.some(cell => cell.x === newX && cell.y === newY)) {\n if (!isPlayerInTerritory) {\n fillShape(trail, [0, 0, 255]); // fill the player's trail blue\n trail = [];\n }\n isPlayerInTerritory = true;\n } else {\n isPlayerInTerritory = false;\n }\n\n player.x = newX * gridSize;\n player.y = newY * gridSize;\n\n lastMove = millis();\n }\n}\nfunction fillBotShape() {\n let botX = Math.floor(bot.x / gridSize);\n let botY = Math.floor(bot.y / gridSize);\n\n // Create a rectangle around the bot's position\n let shape = [\n { x: botX - 1, y: botY - 1 },\n { x: botX + 1, y: botY - 1 },\n { x: botX + 1, y: botY + 1 },\n { x: botX - 1, y: botY + 1 }\n ];\n\n fillShape(shape, [255, 0, 0]); // Red color for the bot\n}\nfunction moveBot() {\n if (!botOriginalPos) {\n botOriginalPos = { x: bot.x, y: bot.y };\n }\n\n let dirX = 0;\n let dirY = 0;\n\n switch (botMoves[currentMove]) {\n case 'right':\n dirX = 1;\n break;\n case 'down':\n dirY = 1;\n break;\n case 'left':\n dirX = -1;\n break;\n case 'up':\n dirY = -1;\n break;\n }\n\n botDirection = { x: dirX, y: dirY };\n bot.x += botDirection.x * gridSize;\n bot.y += botDirection.y * gridSize;\n\n let botX = Math.floor(bot.x / gridSize);\n let botY = Math.floor(bot.y / gridSize);\n let currentPos = { x: botX, y: botY };\n\n botTrail.push(currentPos);\n\n let trailIndices = botTrail.map((position, index) => {\n return position.x === currentPos.x && position.y === currentPos.y ? index : -1;\n }).filter(index => index !== -1);\n\n if (trailIndices.length > 1) {\n let closedLoop = botTrail.slice(trailIndices[0], trailIndices[trailIndices.length - 1] + 1);\n fillShape(closedLoop, [255, 0, 0]);\n botTrail = [currentPos];\n }\n\n if (frameCounter % 10 === 0) {\n currentMove = (currentMove + 1) % botMoves.length;\n }\n\n if (bot.x === botOriginalPos.x && bot.y === botOriginalPos.y) {\n botOriginalPos = null;\n }\n}\nfunction draw() {\n frameCounter++;\n if (Math.floor(random(15)) === 1) {\n moveBot();\n }\n // Translate the canvas by the negative of player's position plus half of the canvas width/height.\n translate(-player.x + width / 2, -player.y + height / 2);\n score = (territory.length / (width * height)) * 100;\n drawTrail();\n // Draw the player after the translation\n fill(playerColor[0], playerColor[1], playerColor[2]);\n rect(player.x, player.y, gridSize, gridSize);\n movePlayer();\n drawPowerUps(); // draw power-ups last\n checkPowerUp();\n fill(255, 0, 0); // make the bot red\n rect(bot.x, bot.y, gridSize, gridSize);\n \n\n // Draw the power-up timer\n if (powerUpRemainingTime > 0) {\n // Calculate the angle for the arc\n let angle = map(powerUpRemainingTime, 0, powerUpDuration, 0, TWO_PI);\n\n // Draw the arc\n push(); // Save current drawing style\n noFill();\n stroke(255, 0, 0); // Red color\n strokeWeight(10);\n arc(width / 2, height / 2, 200, 200, -HALF_PI, -HALF_PI + angle);\n pop(); // Restore original drawing style\n }\n}\n\nfunction isInsideShape(point, shape) {\n // Ray-casting algorithm based on\n // https://wrf.ecse.rpi.edu/Research/Short_Notes/pnpoly.html\n\n let x = point.x, y = point.y;\n\n let inside = false;\n for (let i = 0, j = shape.length - 1; i < shape.length; j = i++) {\n let xi = shape[i].x, yi = shape[i].y;\n let xj = shape[j].x, yj = shape[j].y;\n\n let intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);\n if (intersect) inside = !inside;\n }\n\n return inside;\n};\n\nfillShape([\n { x: 10, y: 10 },\n { x: 20, y: 10 },\n { x: 20, y: 20 },\n { x: 10, y: 20 }\n]);\n\nfunction drawPowerUps() {\n for (let i = 0; i < powerUps.length; i++) {\n fill(0, 255, 0); // power-ups are black\n rect(powerUps[i].x, powerUps[i].y, gridSize, gridSize);\n }\n}\n\nfunction checkPowerUp() {\n let currentTime = millis(); // get the current time\n\n for (let i = 0; i < powerUps.length; i++) {\n let powerUpX = Math.floor(powerUps[i].x / gridSize);\n let powerUpY = Math.floor(powerUps[i].y / gridSize);\n let playerX = Math.floor(player.x / gridSize);\n let playerY = Math.floor(player.y / gridSize);\n\n if (powerUpX === playerX && powerUpY === playerY) {\n powerUps.splice(i, 1); // remove the power-up\n speed /= 2; // increase the player's speed\n powerUpRemainingTime = powerUpDuration; // set the remaining time to the power-up duration\n let powerUpStartTime = currentTime; // set the power-up start time to the current time\n\n // update the remaining time every frame\n powerUpRemainingTime = Math.max(0, powerUpDuration - (currentTime - powerUpStartTime));\n }\n }\n}\n","style.css":"body {\r\n background: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);\r\n color: #333;\r\n font-family: 'Roboto', sans-serif;\r\n height: 100vh;\r\n margin: 0;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n transition: background-color 0.5s ease, color 0.5s ease;\r\n cursor: crosshair;\r\n}\r\n\r\n#score {\r\n font-size: 20px;\r\n color: #fff;\r\n background: #ed213a;\r\n background: linear-gradient(to right, #ed213a, #93291e);\r\n padding: 15px 30px;\r\n margin: 10px 2px;\r\n border-radius: 50px;\r\n box-shadow: 0 10px 20px -10px rgba(237, 33, 58, 0.6);\r\n text-align: center;\r\n width: 200px;\r\n position: fixed;\r\n top: 430px;\r\n right: 10px;\r\n}\r\n\r\n#main-menu {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n text-align: center;\r\n background: #87e0fd;\r\n background: linear-gradient(to right, #87e0fd, #53cbf1 41%, #05abe0 100%);\r\n padding: 20px;\r\n border-radius: 10px;\r\n box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);\r\n transition: background-color 0.5s ease;\r\n}\r\n\r\nbody.dark-mode #main-menu {\r\n background-color: #6a0dad;\r\n /* purple color in dark mode */\r\n}\r\n\r\nbutton {\r\n\r\n font-size: 20px;\r\n color: #fff;\r\n background: #ed213a;\r\n background: linear-gradient(to right, #ed213a, #93291e);\r\n border: none;\r\n padding: 15px 30px;\r\n margin: 10px 2px;\r\n border-radius: 50px;\r\n box-shadow: 0 10px 20px -10px rgba(237, 33, 58, 0.6);\r\n cursor: pointer;\r\n transition: transform 0.3s ease;\r\n}\r\n\r\nbutton:hover {\r\n transform: scale(1.1);\r\n}\r\n\r\n@keyframes bounce {\r\n\r\n 0%,\r\n 100% {\r\n transform: scale(1);\r\n }\r\n\r\n 50% {\r\n transform: scale(1.1);\r\n }\r\n}\r\n\r\nbutton:hover {\r\n animation: bounce 0.6s ease;\r\n}\r\n\r\n#how-to-play-button {\r\n transition: transform 0.3s ease, background-color 0.3s ease;\r\n\r\n\r\n\r\n position: fixed;\r\n bottom: 10px;\r\n left: 10px;\r\n background-color: #28a745;\r\n /* green color */\r\n color: #fff;\r\n width: 50px;\r\n height: 50px;\r\n border-radius: 50%;\r\n /* make it a circle */\r\n display: flex;\r\n /* center the \"?\" */\r\n justify-content: center;\r\n align-items: center;\r\n font-size: 24px;\r\n border: none;\r\n cursor: pointer;\r\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);\r\n /* add some shadow */\r\n transition: background-color 0.3s ease;\r\n}\r\n\r\n#how-to-play-button:hover {\r\n transform: scale(1.1);\r\n background-color: #28a745;\r\n\r\n}\r\n\r\nbody.dark-mode #how-to-play-button {\r\n background-color: #6c757d;\r\n /* gray color */\r\n}\r\n\r\nbody.dark-mode {\r\n background-color: #2d2d2d;\r\n color: #fff;\r\n}\r\n\r\nbody.dark-mode #main-menu {\r\n background-color: #383838;\r\n /* different color for dark mode */\r\n}\r\n\r\nbody.dark-mode button {\r\n background-color: #9FA8DA;\r\n color: #2d2d2d;\r\n}\r\n\r\n.dark-mode-switch {\r\n position: fixed;\r\n top: 10px;\r\n right: 50px;\r\n}\r\n\r\n.dark-mode-switch input[type=\"checkbox\"] {\r\n height: 0;\r\n width: 0;\r\n visibility: hidden;\r\n}\r\n\r\n.dark-mode-switch label {\r\n cursor: pointer;\r\n text-indent: -9999px;\r\n width: 52px;\r\n height: 27px;\r\n background: #ff4669;\r\n float: right;\r\n border-radius: 100px;\r\n position: relative;\r\n}\r\n\r\n.dark-mode-switch label:after {\r\n content: '';\r\n position: absolute;\r\n top: 3px;\r\n left: 3px;\r\n width: 20px;\r\n height: 20px;\r\n background: #fff;\r\n border-radius: 90px;\r\n transition: 0.3s;\r\n}\r\n\r\n.dark-mode-switch input:checked+label {\r\n background: #2d2d2d;\r\n}\r\n\r\n.dark-mode-switch input:checked+label:after {\r\n left: calc(100% - 5px);\r\n transform: translateX(-100%);\r\n}","index.html":"\n\n\n\n\n \n \n \n \n\n\n\n

Paper Conquer

Select a game mode and conquer the paper!

\n \n \n

Select Your Skin

\n\n \n

\n $\"Skin$ \n

\n \n \n

\n\n

\n\n \n \n \n\n\n"},"chat_history":[{"deleted":0,"code_id":7435,"input_tokens":null,"id":4519,"project_id":56,"sender":"human","message":"Let's get started!","created_at":"2023-12-21T22:23:21.242745Z","output_tokens":null},{"deleted":0,"code_id":7435,"input_tokens":null,"id":4520,"project_id":56,"sender":"ai","message":"```javascript\nfunction movePlayer() {\n const moves = {\n [LEFT_ARROW]: { x:","created_at":"2023-12-21T22:23:21.250308Z","output_tokens":null},{"deleted":0,"code_id":7436,"input_tokens":null,"id":4521,"project_id":56,"sender":"human","message":"okay, can we make the camera follow the player?","created_at":"2023-12-21T22:23:32.857524Z","output_tokens":null},{"deleted":0,"code_id":7436,"input_tokens":null,"id":4522,"project_id":56,"sender":"ai","message":"Sure, we can do that. We'll need to use the `translate()` function in `p5.js` to shift the entire canvas based on the player's position. Here is how you can do it.\n\n```javascript\nfunction draw() {\n // ...\n\n // Translate the canvas by the negative of player's position plus half of the canvas width/height.\n translate(-player.x + width / 2, -player.y + height / 2);\n \n // ...\n\n // Draw the player after the translation\n fill(playerColor[0], playerColor[1], playerColor[2]);\n rect(player.x, player.y, gridSize, gridSize);\n \n // ...\n}\n```\n\n- The `translate()` function is used to change the origin of the canvas. When we pass in `-player.x + width / 2` and `-player.y + height / 2`, we are effectively moving the canvas in such a way that the player is always in the center.\n- It's important that we call this function before drawing the player and other objects. This is so that their positions are calculated relative to the new origin (which is centered on the player).\n- After translation, the player is drawn at its position. Since the canvas has been shifted, the player appears to be in the center.\n- Remember that all the other things that are drawn on the canvas after `translate()` is called will also be affected by the translation. This means that other bots, power-ups, and territories will also move relative to the player.","created_at":"2023-12-21T22:23:32.863654Z","output_tokens":null}],"assets":[],"messages_sent":2,"comments":[{"content":"Matthew you're cruising dog! \r\n","id":107,"user_id":1,"user":{"username":"nebwinters","id":1,"password_hash":null,"updated_at":"2023-12-11T21:38:41.147848Z","reset_token_expiry":null,"subscription_status":null,"photo":null,"email":null,"recess_id":"3c157d72-b311-5420-5811-b5ccb77b8bb9","created_at":"2023-12-11T21:38:41.147846Z","reset_token":null,"stripe_customer_id":null,"seats":null},"project_id":56,"created_at":"2023-12-15T20:07:23.014176Z","updated_at":"2023-12-15T20:07:23.014178Z"},{"content":"I think the camera should follow the player and not move around","id":108,"user_id":1,"user":{"username":"nebwinters","id":1,"password_hash":null,"updated_at":"2023-12-11T21:38:41.147848Z","reset_token_expiry":null,"subscription_status":null,"photo":null,"email":null,"recess_id":"3c157d72-b311-5420-5811-b5ccb77b8bb9","created_at":"2023-12-11T21:38:41.147846Z","reset_token":null,"stripe_customer_id":null,"seats":null},"project_id":56,"created_at":"2023-12-15T20:07:43.063730Z","updated_at":"2023-12-15T20:07:43.063732Z"}],"steps":[{"title":"Player Movement Controls","step_number":0,"complete":false,"updated_at":"2023-12-14T22:35:57.982745","id":387,"instruction":"Implement player movement controls using JavaScript, allowing the player to navigate the game board.","created_at":"2023-12-12T19:09:45.673194","project_id":56},{"title":"Bot Behavior","step_number":1,"complete":false,"updated_at":"2023-12-14T22:35:57.982833","id":388,"instruction":"Program bots to move autonomously on the game board, either chasing the player or moving randomly.","created_at":"2023-12-12T19:09:45.673261","project_id":56},{"title":"Scoring System","step_number":2,"complete":false,"updated_at":"2023-12-14T22:35:57.982882","id":389,"instruction":"Implement a scoring system where players can earn points by capturing territory or surviving for a longer time.","created_at":"2023-12-12T19:09:45.673305","project_id":56},{"title":"Power-Ups","step_number":3,"complete":false,"updated_at":"2023-12-14T22:35:57.982929","id":390,"instruction":"Add power-ups that the player can collect to gain temporary advantages, such as increased speed or invincibility.","created_at":"2023-12-12T19:09:45.673346","project_id":56},{"title":"","step_number":4,"complete":false,"updated_at":"2023-12-14T22:35:57.983066","id":391,"instruction":"","created_at":"2023-12-12T19:09:45.673386","project_id":56}]}

Debug Menu

Paper Conquer

Select Your Skin