Pong Game

\n \n

\n Player: 0 | Computer: 0\n

\n \n

\n Press SPACE to start\n

\n \n

Use ↑ and ↓ arrow keys to move your paddle

Press SPACE to start/restart the game

\n \n \n\n",[],[156,190],{"_103":198,"_95":199,"_157":200,"_159":158,"_160":139,"_161":138,"_162":117,"_105":201,"_100":32,"_164":176,"_166":202,"_167":22,"_168":-5,"_169":203,"_98":204},"54a3206a-1a3f-11f0-a2d9-569c3dd06744","index.js","0d473b3e-bde1-48e6-9409-d160734b0519",["D",1744751975330],"import { PongGame } from \"./game.js\";\n\n// Wait for DOM to be fully loaded\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n // Initialize the game\n const game = new PongGame(\"pongCanvas\");\n});",[],[156,199],{"_103":206,"_95":99,"_157":207,"_159":158,"_160":139,"_161":138,"_162":117,"_105":208,"_100":32,"_164":176,"_166":209,"_167":22,"_168":-5,"_169":210,"_98":211},"54a322b8-1a3f-11f0-a2d9-569c3dd06744","8782215a-8f07-415a-b587-289b80a6afe8",["D",1744751975330],"// import { PongGame } from './game.ts';\n// import { parseProject } from 'https://esm.town/v/std/utils@85-main/index.ts';\n\n// // Wait for DOM to be fully loaded\n// document.addEventListener('DOMContentLoaded', () => {\n// // Initialize the game\n// const game = new PongGame('pongCanvas');\n \n// // Add view source link\n// addViewSourceLink();\n// });\n\n// // Add a view source link to the page\n// function addViewSourceLink() {\n// try {\n// const projectInfo = parseProject(import.meta.url);\n// const sourceUrl = projectInfo.links.self.project;\n \n// const footer = document.createElement('footer');\n// footer.className = 'mt-8 text-center text-gray-400';\n \n// const link = document.createElement('a');\n// link.href = sourceUrl;\n// link.target = '_top';\n// link.className = 'underline hover:text-white';\n// link.textContent = 'View Source on Val Town';\n \n// footer.appendChild(link);\n// document.body.appendChild(footer);\n// } catch (error) {\n// console.error('Failed to add view source link:', error);\n// }\n// }",[],[156,99],{"_103":213,"_95":214,"_157":215,"_159":158,"_160":139,"_161":138,"_162":117,"_105":216,"_100":32,"_164":193,"_166":217,"_167":22,"_168":-5,"_169":218,"_98":219},"54a324a2-1a3f-11f0-a2d9-569c3dd06744","style.css","d76165e5-cbda-438c-961a-2788070f397a",["D",1744751975330],"/* Additional styles beyond Tailwind */\nbody {\n margin: 0;\n padding: 0;\n overflow: hidden;\n}\n\n.game-container {\n position: relative;\n}\n\ncanvas {\n background-color: #000;\n display: block;\n}\n\n/* Game message animation */\n@keyframes pulse {\n 0% { opacity: 0.7; }\n 50% { opacity: 1; }\n 100% { opacity: 0.7; }\n}\n\n#gameMessage {\n animation: pulse 1.5s infinite;\n}",[],[156,214],[156],{"_103":222,"_95":223,"_157":224,"_159":-5,"_160":139,"_161":138,"_162":117,"_105":225,"_100":32,"_164":193,"_166":226,"_167":22,"_168":-5,"_169":227,"_98":228},"54a32f56-1a3f-11f0-a2d9-569c3dd06744","README.md","cd39891d-35d7-410b-9d6d-770654c59963",["D",1744751975330],"# Pong Game\n\nA classic Pong game implementation for Val Town using HTML5 Canvas and TypeScript.\n\n## How to Play\n\n- Use the **Up** and **Down** arrow keys to move your paddle (left side)\n- Try to hit the ball past the computer's paddle (right side)\n- First player to reach 10 points wins\n\n## Project Structure\n\n- `frontend/index.html` - Main HTML file\n- `frontend/index.ts` - Game initialization\n- `frontend/game.ts` - Game logic and rendering\n- `frontend/style.css` - Basic styling\n\n## Implementation Details\n\nThis game uses:\n- HTML5 Canvas for rendering\n- TypeScript for game logic\n- Keyboard controls for player input\n- Simple AI for the computer opponent\n\n## View Source\n\nThis project was created on Val Town. View the source code to see how it works!",[],[223],{"_103":230,"_95":99,"_157":115,"_159":-5,"_160":139,"_161":138,"_162":117,"_105":231,"_100":32,"_164":232,"_166":233,"_167":22,"_168":-5,"_169":234,"_98":235},"54a33230-1a3f-11f0-a2d9-569c3dd06744",["D",1744751975330],"http","import { Hono } from \"https://esm.sh/hono@3.11.12\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Serve the main HTML file\napp.get(\"/\", async (c) => {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\n// Serve static files from the frontend directory\napp.get(\"/frontend/*\", async (c) => serveFile(c.req.path, import.meta.url));\n\n// Handle 404s\napp.notFound((c) => {\n return c.text(\"404 Not Found\", 404);\n});\n\n// This is the entry point for HTTP vals\nexport default app.fetch;",[],[99],"files",[154,171,180,188,197,205,212,221,229],"counts",{"_240":32,"_241":138,"_242":138,"_243":32},"pulls","branches","forks","envVars","contents",[],{"_103":230,"_95":99,"_157":115,"_159":-5,"_160":139,"_161":138,"_162":117,"_105":247,"_100":32,"_164":232,"_166":233,"_167":22,"_168":-5,"_98":248},["D",1744751975330],[99],"upstreamProject",{"_103":147,"_95":251,"_111":-5,"_112":-5,"_109":110,"_23":252},"testproj",{"_93":94,"_131":132},"upstreamBranch",{"_103":142,"_105":255,"_256":257,"_95":43,"_140":147,"_100":144,"_141":-5,"_143":-5,"_258":259,"_107":-5,"_151":22,"_109":110,"_150":94,"_16":120,"_149":251},["D",1744612047755],"updatedAt",["D",1744644736949],"lockfileKey","1744644737137-esm.town_v_yawnxyz_testproj@23-main","emptyEnvVars","isNew","routes/_app.x.$handle.$name.code.$",{"_93":94,"_95":96,"_97":43,"_100":-7,"_98":99,"_101":264,"_152":269,"_236":297,"_193":298,"_244":300,"_301":302,"_305":117,"_306":-5,"_307":32,"_308":32,"_309":310},{"_103":104,"_95":96,"_105":265,"_107":-5,"_108":22,"_109":110,"_111":-5,"_112":-5,"_14":113,"_114":115,"_116":117,"_118":-5,"_119":32,"_16":120,"_121":122,"_123":122,"_124":125,"_126":125,"_127":125,"_128":122,"_129":122,"_23":266,"_133":267,"_136":268,"_151":22},["D",1744751975330],{"_93":94,"_131":132},{"_93":94,"_135":132},{"_100":138,"_95":43,"_103":139,"_140":104,"_141":142,"_143":144,"_145":110,"_146":147,"_148":120,"_149":96,"_150":94},[270,291,294],{"_103":155,"_95":156,"_157":158,"_159":-5,"_160":139,"_161":138,"_162":117,"_105":163,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":271,"_98":290},[272,275,278,281,284,287],{"_103":172,"_95":173,"_157":174,"_159":158,"_160":139,"_161":138,"_162":117,"_105":175,"_100":32,"_164":176,"_166":177,"_167":22,"_168":-5,"_169":273,"_98":274},[],[156,173],{"_103":181,"_95":182,"_157":183,"_159":158,"_160":139,"_161":138,"_162":117,"_105":184,"_100":32,"_164":176,"_166":185,"_167":22,"_168":-5,"_169":276,"_98":277},[],[156,182],{"_103":189,"_95":190,"_157":191,"_159":158,"_160":139,"_161":138,"_162":117,"_105":192,"_100":32,"_164":193,"_166":194,"_167":22,"_168":-5,"_169":279,"_98":280},[],[156,190],{"_103":198,"_95":199,"_157":200,"_159":158,"_160":139,"_161":138,"_162":117,"_105":201,"_100":32,"_164":176,"_166":202,"_167":22,"_168":-5,"_169":282,"_98":283},[],[156,199],{"_103":206,"_95":99,"_157":207,"_159":158,"_160":139,"_161":138,"_162":117,"_105":208,"_100":32,"_164":176,"_166":209,"_167":22,"_168":-5,"_169":285,"_98":286},[],[156,99],{"_103":213,"_95":214,"_157":215,"_159":158,"_160":139,"_161":138,"_162":117,"_105":216,"_100":32,"_164":193,"_166":217,"_167":22,"_168":-5,"_169":288,"_98":289},[],[156,214],[156],{"_103":222,"_95":223,"_157":224,"_159":-5,"_160":139,"_161":138,"_162":117,"_105":225,"_100":32,"_164":193,"_166":226,"_167":22,"_168":-5,"_169":292,"_98":293},[],[223],{"_103":230,"_95":99,"_157":115,"_159":-5,"_160":139,"_161":138,"_162":117,"_105":231,"_100":32,"_164":232,"_166":233,"_167":22,"_168":-5,"_169":295,"_98":296},[],[99],[270,272,275,278,281,284,287,291,294],{"_103":230,"_95":99,"_157":115,"_159":-5,"_160":139,"_161":138,"_162":117,"_105":247,"_100":32,"_164":232,"_166":233,"_167":22,"_168":-5,"_98":299},[99],[],"upstream",{"_103":142,"_105":303,"_256":304,"_95":43,"_140":147,"_100":144,"_141":-5,"_143":-5,"_258":259,"_107":-5,"_151":22,"_109":110,"_150":94,"_16":120,"_149":251},["D",1744612047755],["D",1744644736949],"showCompareCallout","pull","ahead","behind","templates",[311,328],{"_103":312,"_95":313,"_105":314,"_107":-5,"_108":22,"_109":110,"_111":315,"_112":316,"_14":317,"_114":318,"_116":117,"_118":319,"_119":320,"_16":321,"_121":122,"_123":122,"_124":125,"_126":125,"_127":125,"_128":122,"_129":122,"_23":322,"_133":325,"_136":326,"_151":22},"8e7382ae-d835-11ef-bbbf-e6cdfca9ef9f","markdownBlogStarter",["D",1737491000655],"Starter template for a markdown blog","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/44a31e5c-3e8a-48a8-d067-5785c0b08200/square512","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","a4a9ad14-d835-11ef-8351-e6cdfca9ef9f",167,11,"e81e7335-6d4c-4764-a902-d0962bbfa9f7",{"_93":323,"_131":324},"stevekrouse","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg",{"_93":323,"_135":324},{"_103":327,"_95":43,"_100":319,"_140":312,"_141":-5,"_143":-5},"8e73c264-d835-11ef-bbbf-e6cdfca9ef9f",{"_103":329,"_95":330,"_105":331,"_107":-5,"_108":22,"_109":110,"_111":332,"_112":-5,"_14":333,"_114":334,"_116":117,"_118":335,"_119":336,"_16":337,"_121":122,"_123":122,"_124":125,"_126":125,"_127":125,"_128":122,"_129":122,"_23":338,"_133":341,"_136":342,"_151":22},"96102714-f528-11ef-aa68-569c3dd06744","reactHonoStarter",["D",1740674013689],"Starter template with client-side React & Hono server","c9143560-63b6-444f-8f9f-e2647fabe09f","a9b2b20a-f528-11ef-9e98-569c3dd06744",39,14,"c606f87f-4d7e-48c8-9c39-ef5ab94aec49",{"_93":339,"_131":340},"std","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJVaVhpQ1BId3dscVpBbkdZVWlMNjJtcjkxWS5wbmcifQ",{"_93":339,"_135":340},{"_103":343,"_95":43,"_100":344,"_140":329,"_141":-5,"_143":-5},"961078ea-f528-11ef-aa68-569c3dd06744",72,"actionData","errors"]