index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://galaga.fun
+ metaTags
+ editButton /edit.html
+ title Galaga.fun - Play Galaga in Your Browser
+ style.css
+
+ header
+ class hero
+ div
+ class hero-content
+ h1 Galaga.fun
+ p Press F4 to start. Use ← → to move and Z to fire.
+ main
+ class game-container
+ canvas
+ id gameCanvas
+ width 480
+ height 640
+ footer
+ div
+ class footer-content
+ p Created with ❤️ by Web Dev Enthusiast
prompt.json
Changed around line 1
+ {
+ "id": "4103c477-0c9a-406c-9449-99bfc62a0857",
+ "object": "chat.completion",
+ "created": 1737989153,
+ "model": "deepseek-chat",
+ "choices": [
+ {
+ "index": 0,
+ "message": {
+ "role": "assistant",
+ "content": "---domain---\ngalaga.fun\n---index.scroll---\nbuildHtml\nbaseUrl https://galaga.fun\nmetaTags\neditButton /edit.html\ntitle Galaga.fun - Play Galaga in Your Browser\nstyle.css\n\nheader\n class hero\n div\n class hero-content\n h1 Galaga.fun\n p Press F4 to start. Use ← → to move and Z to fire.\nmain\n class game-container\n canvas\n id gameCanvas\n width 480\n height 640\nfooter\n div\n class footer-content\n p Created with ❤️ by Web Dev Enthusiast\n---style.css---\n:root {\n --galaga-blue: #1e1e3f;\n --galaga-yellow: #ffcc00;\n --galaga-red: #ff3333;\n --galaga-white: #ffffff;\n}\n\nbody {\n margin: 0;\n background-color: var(--galaga-blue);\n color: var(--galaga-white);\n font-family: 'Arial', sans-serif;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n}\n\n.hero {\n text-align: center;\n padding: 2rem;\n background: linear-gradient(180deg, var(--galaga-blue) 0%, #000033 100%);\n}\n\n.hero-content h1 {\n font-size: 3rem;\n color: var(--galaga-yellow);\n text-shadow: 0 0 10px var(--galaga-yellow);\n margin-bottom: 1rem;\n}\n\n.hero-content p {\n font-size: 1.2rem;\n color: var(--galaga-white);\n}\n\n.game-container {\n flex: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 2rem;\n}\n\n#gameCanvas {\n background-color: #000;\n border: 2px solid var(--galaga-yellow);\n box-shadow: 0 0 20px var(--galaga-yellow);\n}\n\n.footer-content {\n text-align: center;\n padding: 1rem;\n background-color: #000033;\n color: var(--galaga-white);\n}\n\n@media (max-width: 768px) {\n .hero-content h1 {\n font-size: 2rem;\n }\n \n .hero-content p {\n font-size: 1rem;\n }\n \n #gameCanvas {\n width: 100%;\n height: auto;\n }\n}\n---script.js---\nconst canvas = document.getElementById('gameCanvas');\nconst ctx = canvas.getContext('2d');\n\nconst player = {\n x: canvas.width / 2 - 25,\n y: canvas.height - 60,\n width: 50,\n height: 50,\n color: '#00ff00',\n speed: 5,\n isMovingLeft: false,\n isMovingRight: false\n};\n\nconst bullets = [];\nconst enemies = [];\nlet gameStarted = false;\nlet gameOver = false;\n\nfunction drawPlayer() {\n ctx.fillStyle = player.color;\n ctx.fillRect(player.x, player.y, player.width, player.height);\n}\n\nfunction movePlayer() {\n if (player.isMovingLeft && player.x > 0) {\n player.x -= player.speed;\n }\n if (player.isMovingRight && player.x < canvas.width - player.width) {\n player.x += player.speed;\n }\n}\n\nfunction drawBullets() {\n bullets.forEach((bullet, index) => {\n ctx.fillStyle = '#ff0000';\n ctx.fillRect(bullet.x, bullet.y, 5, 15);\n bullet.y -= 10;\n \n if (bullet.y < 0) {\n bullets.splice(index, 1);\n }\n });\n}\n\nfunction spawnEnemies() {\n if (Math.random() < 0.02) {\n const enemy = {\n x: Math.random() * (canvas.width - 40),\n y: -40,\n width: 40,\n height: 40,\n color: '#ffff00'\n };\n enemies.push(enemy);\n }\n}\n\nfunction drawEnemies() {\n enemies.forEach((enemy, index) => {\n ctx.fillStyle = enemy.color;\n ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);\n enemy.y += 2;\n \n if (enemy.y > canvas.height) {\n enemies.splice(index, 1);\n }\n });\n}\n\nfunction checkCollisions() {\n bullets.forEach((bullet, bIndex) => {\n enemies.forEach((enemy, eIndex) => {\n if (bullet.x < enemy.x + enemy.width &&\n bullet.x + 5 > enemy.x &&\n bullet.y < enemy.y + enemy.height &&\n bullet.y + 15 > enemy.y) {\n bullets.splice(bIndex, 1);\n enemies.splice(eIndex, 1);\n }\n });\n });\n}\n\nfunction gameLoop() {\n if (!gameStarted || gameOver) return;\n \n ctx.clearRect(0, 0, canvas.width, canvas.height);\n \n movePlayer();\n drawPlayer();\n drawBullets();\n spawnEnemies();\n drawEnemies();\n checkCollisions();\n \n requestAnimationFrame(gameLoop);\n}\n\ndocument.addEventListener('keydown', (e) => {\n if (e.code === 'F4') {\n gameStarted = true;\n gameOver = false;\n gameLoop();\n }\n if (e.code === 'ArrowLeft') player.isMovingLeft = true;\n if (e.code === 'ArrowRight') player.isMovingRight = true;\n if (e.code === 'KeyZ') {\n bullets.push({\n x: player.x + player.width / 2 - 2.5,\n y: player.y,\n width: 5,\n height: 15\n });\n }\n});\n\ndocument.addEventListener('keyup', (e) => {\n if (e.code === 'ArrowLeft') player.isMovingLeft = false;\n if (e.code === 'ArrowRight') player.isMovingRight = false;\n});\n\n// Initialize game\nctx.fillStyle = '#000';\nctx.fillRect(0, 0, canvas.width, canvas.height);\n---end---"
+ },
+ "logprobs": null,
+ "finish_reason": "stop"
+ }
+ ],
+ "usage": {
+ "prompt_tokens": 762,
+ "completion_tokens": 1339,
+ "total_tokens": 2101,
+ "prompt_tokens_details": {
+ "cached_tokens": 0
+ },
+ "prompt_cache_hit_tokens": 0,
+ "prompt_cache_miss_tokens": 762
+ },
+ "system_fingerprint": "fp_3a5770e1b4"
+ }
readme.scroll
Changed around line 1
+ # galaga.fun.TLD
+
+ Prompt: website
+ Agent: deepseek
+ Model: deepseek-chat
+
+ ## User prompt
+ create a game like galaga that I can play by pressing F4 key, and using the left and right arrow keys to move left and right, and using the Z key for fire. Please make it as faithful rendering of the original as possible.
+
+ ## System prompt
+ You are an expert web developer. Create a website based on this request: "create a game like galaga that I can play by pressing F4 key, and using the left and right arrow keys to move left and right, and using the Z key for fire. Please make it as faithful rendering of the original as possible."
+
+ Requirements:
+ - Use only Scroll, CSS, and JavaScript (NO frameworks, NO external dependencies)
+ - Create clean, semantic HTML5
+ - Make it mobile-responsive
+ - Follow modern best practices and accessibility guidelines
+ - Keep it simple but professional
+ - Use only relative links and no external resources
+ - Do not put a copyright symbol or all rights reserved in the footer.
+ - Make it beautiful. Dazzling. Advanced used of CSS.
+
+ As a refresher, for doing the html body, Scroll is a whitespace based language that uses a single indented space to mark a line (aka particle) as a subparticle of a parent line.
+
+ For example:
+
+ header
+ class hero
+ nav
+ div Scroll
+ class logo
+ div
+ class nav-links
+ a Features
+ href #features
+ a Examples
+ href #examples
+ a Edit
+ href edit.html
+ a GitHub
+ class cta-button
+ href https://github.com/breck7/scroll
+ div
+ class hero-content
+ h1 Write Better with Scroll
+ p The extendible markup language that makes source beautiful and compiles to anything
+ a Get Started
+ class primary-button
+ href https://hub.scroll.pub/
+ main
+ section
+ id features
+ class features
+ h2 Why Scroll?
+ div
+ class feature-grid
+ div
+ class feature-card
+ div ⚡
+ class feature-icon
+ h3 Simple Syntax
+ p Like Markdown, but more powerful. No parentheses needed.
+ div
+ class feature-card
+ div 🧩
+ class feature-icon
+ h3 Extendible
+ p Build your own custom parsers.
+ div
+ class feature-card
+ div 🎨
+ class feature-icon
+ h3 Beautiful Output
+ p Create stunning documents with minimal effort.
+ div
+ class feature-card
+ div 🚀
+ class feature-icon
+ h3 Fast & Light
+ p Built on the efficient PPS Stack.
+ section
+ id examples
+ class code-demo
+ h2 See It In Action
+ div
+ class code-container
+ pre
+ class code-example
+ div
+ class code-output
+ footer
+ div
+ class footer-content
+ div
+ class footer-links
+ a Documentation
+ href https://scroll.pub/tutorial.html
+ a Community
+ href https://www.reddit.com/r/WorldWideScroll/
+ a Blog
+ href https://scroll.pub/blog
+ p Started by Breck Yunits. Evolved by a community.
+ https://twitter.com/breckyunits Breck Yunits
+ https://github.com/breck7/scroll/graphs/contributors community
+
+
+ First suggest a short, memorable domain name ending in TLD that represents this website. Then provide the website files. Use this exact format:
+
+ ---domain---
+ (domainTLD here)
+ ---index.scroll---
+ buildHtml
+ baseUrl https://(domainTLD here)
+ metaTags
+ editButton /edit.html
+ title (Title here)
+ style.css
+
+ (body content here. no blank lines please.)
+
+ script.js
+ ---style.css---
+ (CSS content here)
+ ---script.js---
+ (JavaScript content here)
+ ---end---
script.js
Changed around line 1
+ const canvas = document.getElementById('gameCanvas');
+ const ctx = canvas.getContext('2d');
+
+ const player = {
+ x: canvas.width / 2 - 25,
+ y: canvas.height - 60,
+ width: 50,
+ height: 50,
+ color: '#00ff00',
+ speed: 5,
+ isMovingLeft: false,
+ isMovingRight: false
+ };
+
+ const bullets = [];
+ const enemies = [];
+ let gameStarted = false;
+ let gameOver = false;
+
+ function drawPlayer() {
+ ctx.fillStyle = player.color;
+ ctx.fillRect(player.x, player.y, player.width, player.height);
+ }
+
+ function movePlayer() {
+ if (player.isMovingLeft && player.x > 0) {
+ player.x -= player.speed;
+ }
+ if (player.isMovingRight && player.x < canvas.width - player.width) {
+ player.x += player.speed;
+ }
+ }
+
+ function drawBullets() {
+ bullets.forEach((bullet, index) => {
+ ctx.fillStyle = '#ff0000';
+ ctx.fillRect(bullet.x, bullet.y, 5, 15);
+ bullet.y -= 10;
+
+ if (bullet.y < 0) {
+ bullets.splice(index, 1);
+ }
+ });
+ }
+
+ function spawnEnemies() {
+ if (Math.random() < 0.02) {
+ const enemy = {
+ x: Math.random() * (canvas.width - 40),
+ y: -40,
+ width: 40,
+ height: 40,
+ color: '#ffff00'
+ };
+ enemies.push(enemy);
+ }
+ }
+
+ function drawEnemies() {
+ enemies.forEach((enemy, index) => {
+ ctx.fillStyle = enemy.color;
+ ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
+ enemy.y += 2;
+
+ if (enemy.y > canvas.height) {
+ enemies.splice(index, 1);
+ }
+ });
+ }
+
+ function checkCollisions() {
+ bullets.forEach((bullet, bIndex) => {
+ enemies.forEach((enemy, eIndex) => {
+ if (bullet.x < enemy.x + enemy.width &&
+ bullet.x + 5 > enemy.x &&
+ bullet.y < enemy.y + enemy.height &&
+ bullet.y + 15 > enemy.y) {
+ bullets.splice(bIndex, 1);
+ enemies.splice(eIndex, 1);
+ }
+ });
+ });
+ }
+
+ function gameLoop() {
+ if (!gameStarted || gameOver) return;
+
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+ movePlayer();
+ drawPlayer();
+ drawBullets();
+ spawnEnemies();
+ drawEnemies();
+ checkCollisions();
+
+ requestAnimationFrame(gameLoop);
+ }
+
+ document.addEventListener('keydown', (e) => {
+ if (e.code === 'F4') {
+ gameStarted = true;
+ gameOver = false;
+ gameLoop();
+ }
+ if (e.code === 'ArrowLeft') player.isMovingLeft = true;
+ if (e.code === 'ArrowRight') player.isMovingRight = true;
+ if (e.code === 'KeyZ') {
+ bullets.push({
+ x: player.x + player.width / 2 - 2.5,
+ y: player.y,
+ width: 5,
+ height: 15
+ });
+ }
+ });
+
+ document.addEventListener('keyup', (e) => {
+ if (e.code === 'ArrowLeft') player.isMovingLeft = false;
+ if (e.code === 'ArrowRight') player.isMovingRight = false;
+ });
+
+ // Initialize game
+ ctx.fillStyle = '#000';
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
style.css
Changed around line 1
+ :root {
+ --galaga-blue: #1e1e3f;
+ --galaga-yellow: #ffcc00;
+ --galaga-red: #ff3333;
+ --galaga-white: #ffffff;
+ }
+
+ body {
+ margin: 0;
+ background-color: var(--galaga-blue);
+ color: var(--galaga-white);
+ font-family: 'Arial', sans-serif;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .hero {
+ text-align: center;
+ padding: 2rem;
+ background: linear-gradient(180deg, var(--galaga-blue) 0%, #000033 100%);
+ }
+
+ .hero-content h1 {
+ font-size: 3rem;
+ color: var(--galaga-yellow);
+ text-shadow: 0 0 10px var(--galaga-yellow);
+ margin-bottom: 1rem;
+ }
+
+ .hero-content p {
+ font-size: 1.2rem;
+ color: var(--galaga-white);
+ }
+
+ .game-container {
+ flex: 1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 2rem;
+ }
+
+ #gameCanvas {
+ background-color: #000;
+ border: 2px solid var(--galaga-yellow);
+ box-shadow: 0 0 20px var(--galaga-yellow);
+ }
+
+ .footer-content {
+ text-align: center;
+ padding: 1rem;
+ background-color: #000033;
+ color: var(--galaga-white);
+ }
+
+ @media (max-width: 768px) {
+ .hero-content h1 {
+ font-size: 2rem;
+ }
+
+ .hero-content p {
+ font-size: 1rem;
+ }
+
+ #gameCanvas {
+ width: 100%;
+ height: auto;
+ }
+ }