Changes to breakout.scroll.pub

root

24 days ago

Initial commit

body.html

Changed around line 1
+ 
+   Breakout Game
+   Classic arcade fun in your browser!
+ 
+ 
+   
+   
+     
+     Score: 0
+   
+ 
+ 
+   Use arrow keys or swipe to move the paddle
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://breakout.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Breakout Game - Classic Arcade Fun
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "id": "4a2abc47-6fff-401e-9e9e-66485cd0df79",
+   "object": "chat.completion",
+   "created": 1735432418,
+   "model": "deepseek-chat",
+   "choices": [
+     {
+       "index": 0,
+       "message": {
+         "role": "assistant",
+         "content": "---domain---\nbreakout.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://breakout.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Breakout Game - Classic Arcade Fun\nstyle.css\nbody.html\nscript.js\n---body.html---\n\n  Breakout Game\n  Classic arcade fun in your browser!
\n\n\n  \n  \n    \n    Score: 0
\n  
\n\n\n  Use arrow keys or swipe to move the paddle
\n\n---style.css---\n:root {\n  --primary-color: #2c3e50;\n  --secondary-color: #3498db;\n  --accent-color: #e74c3c;\n  --text-color: #ecf0f1;\n  --background-color: #34495e;\n}\n\nbody {\n  font-family: 'Arial', sans-serif;\n  margin: 0;\n  padding: 0;\n  background-color: var(--background-color);\n  color: var(--text-color);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  min-height: 100vh;\n}\n\nheader {\n  text-align: center;\n  padding: 2rem 0;\n}\n\nh1 {\n  font-size: 2.5rem;\n  margin: 0;\n  color: var(--secondary-color);\n}\n\np {\n  margin: 0.5rem 0;\n}\n\nmain {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 1rem;\n  padding: 1rem;\n}\n\ncanvas {\n  background-color: var(--primary-color);\n  border-radius: 8px;\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);\n}\n\n.controls {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n}\n\nbutton {\n  background-color: var(--secondary-color);\n  color: var(--text-color);\n  border: none;\n  padding: 0.5rem 1rem;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 1rem;\n  transition: background-color 0.3s;\n}\n\nbutton:hover {\n  background-color: var(--accent-color);\n}\n\n.score {\n  font-size: 1.2rem;\n}\n\nfooter {\n  margin-top: auto;\n  padding: 1rem;\n  text-align: center;\n}\n\n@media (max-width: 480px) {\n  canvas {\n    width: 100%;\n    height: auto;\n  }\n}\n---script.js---\nconst canvas = document.getElementById('gameCanvas');\nconst ctx = canvas.getContext('2d');\nconst startButton = document.getElementById('startButton');\nconst scoreDisplay = document.getElementById('score');\n\nlet ballRadius = 10;\nlet x = canvas.width / 2;\nlet y = canvas.height - 30;\nlet dx = 2;\nlet dy = -2;\nlet paddleHeight = 10;\nlet paddleWidth = 75;\nlet paddleX = (canvas.width - paddleWidth) / 2;\nlet rightPressed = false;\nlet leftPressed = false;\nlet score = 0;\nlet gameActive = false;\n\nconst brickRowCount = 3;\nconst brickColumnCount = 5;\nconst brickWidth = 75;\nconst brickHeight = 20;\nconst brickPadding = 10;\nconst brickOffsetTop = 30;\nconst brickOffsetLeft = 30;\n\nlet bricks = [];\nfor (let c = 0; c < brickColumnCount; c++) {\n  bricks[c] = [];\n  for (let r = 0; r < brickRowCount; r++) {\n    bricks[c][r] = { x: 0, y: 0, status: 1 };\n  }\n}\n\ndocument.addEventListener('keydown', keyDownHandler);\ndocument.addEventListener('keyup', keyUpHandler);\nstartButton.addEventListener('click', startGame);\n\nfunction keyDownHandler(e) {\n  if (e.key === 'Right' || e.key === 'ArrowRight') {\n    rightPressed = true;\n  } else if (e.key === 'Left' || e.key === 'ArrowLeft') {\n    leftPressed = true;\n  }\n}\n\nfunction keyUpHandler(e) {\n  if (e.key === 'Right' || e.key === 'ArrowRight') {\n    rightPressed = false;\n  } else if (e.key === 'Left' || e.key === 'ArrowLeft') {\n    leftPressed = false;\n  }\n}\n\nfunction startGame() {\n  if (!gameActive) {\n    gameActive = true;\n    score = 0;\n    scoreDisplay.textContent = score;\n    resetBall();\n    resetBricks();\n    draw();\n  }\n}\n\nfunction resetBall() {\n  x = canvas.width / 2;\n  y = canvas.height - 30;\n  dx = 2;\n  dy = -2;\n}\n\nfunction resetBricks() {\n  for (let c = 0; c < brickColumnCount; c++) {\n    for (let r = 0; r < brickRowCount; r++) {\n      bricks[c][r].status = 1;\n    }\n  }\n}\n\nfunction collisionDetection() {\n  for (let c = 0; c < brickColumnCount; c++) {\n    for (let r = 0; r < brickRowCount; r++) {\n      const b = bricks[c][r];\n      if (b.status === 1) {\n        if (\n          x > b.x &&\n          x < b.x + brickWidth &&\n          y > b.y &&\n          y < b.y + brickHeight\n        ) {\n          dy = -dy;\n          b.status = 0;\n          score++;\n          scoreDisplay.textContent = score;\n          if (score === brickRowCount * brickColumnCount) {\n            alert('YOU WIN, CONGRATULATIONS!');\n            gameActive = false;\n          }\n        }\n      }\n    }\n  }\n}\n\nfunction drawBall() {\n  ctx.beginPath();\n  ctx.arc(x, y, ballRadius, 0, Math.PI * 2);\n  ctx.fillStyle = '#0095DD';\n  ctx.fill();\n  ctx.closePath();\n}\n\nfunction drawPaddle() {\n  ctx.beginPath();\n  ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);\n  ctx.fillStyle = '#0095DD';\n  ctx.fill();\n  ctx.closePath();\n}\n\nfunction drawBricks() {\n  for (let c = 0; c < brickColumnCount; c++) {\n    for (let r = 0; r < brickRowCount; r++) {\n      if (bricks[c][r].status === 1) {\n        const brickX = c * (brickWidth + brickPadding) + brickOffsetLeft;\n        const brickY = r * (brickHeight + brickPadding) + brickOffsetTop;\n        bricks[c][r].x = brickX;\n        bricks[c][r].y = brickY;\n        ctx.beginPath();\n        ctx.rect(brickX, brickY, brickWidth, brickHeight);\n        ctx.fillStyle = '#0095DD';\n        ctx.fill();\n        ctx.closePath();\n      }\n    }\n  }\n}\n\nfunction draw() {\n  if (!gameActive) return;\n\n  ctx.clearRect(0, 0, canvas.width, canvas.height);\n  drawBricks();\n  drawBall();\n  drawPaddle();\n  collisionDetection();\n\n  if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {\n    dx = -dx;\n  }\n  if (y + dy < ballRadius) {\n    dy = -dy;\n  } else if (y + dy > canvas.height - ballRadius) {\n    if (x > paddleX && x < paddleX + paddleWidth) {\n      dy = -dy;\n    } else {\n      gameActive = false;\n      alert('GAME OVER');\n      return;\n    }\n  }\n\n  if (rightPressed && paddleX < canvas.width - paddleWidth) {\n    paddleX += 7;\n  } else if (leftPressed && paddleX > 0) {\n    paddleX -= 7;\n  }\n\n  x += dx;\n  y += dy;\n  requestAnimationFrame(draw);\n}\n---end---"
+       },
+       "logprobs": null,
+       "finish_reason": "stop"
+     }
+   ],
+   "usage": {
+     "prompt_tokens": 238,
+     "completion_tokens": 1828,
+     "total_tokens": 2066,
+     "prompt_cache_hit_tokens": 0,
+     "prompt_cache_miss_tokens": 238
+   },
+   "system_fingerprint": "fp_f1afce2943"
+ }

readme.scroll

Changed around line 1

+ # breakout.scroll.pub

+ Website generated by DeepSeek from prompt: full functional breakout game

script.js

Changed around line 1
+ const canvas = document.getElementById('gameCanvas');
+ const ctx = canvas.getContext('2d');
+ const startButton = document.getElementById('startButton');
+ const scoreDisplay = document.getElementById('score');
+ 
+ let ballRadius = 10;
+ let x = canvas.width / 2;
+ let y = canvas.height - 30;
+ let dx = 2;
+ let dy = -2;
+ let paddleHeight = 10;
+ let paddleWidth = 75;
+ let paddleX = (canvas.width - paddleWidth) / 2;
+ let rightPressed = false;
+ let leftPressed = false;
+ let score = 0;
+ let gameActive = false;
+ 
+ const brickRowCount = 3;
+ const brickColumnCount = 5;
+ const brickWidth = 75;
+ const brickHeight = 20;
+ const brickPadding = 10;
+ const brickOffsetTop = 30;
+ const brickOffsetLeft = 30;
+ 
+ let bricks = [];
+ for (let c = 0; c < brickColumnCount; c++) {
+   bricks[c] = [];
+   for (let r = 0; r < brickRowCount; r++) {
+     bricks[c][r] = { x: 0, y: 0, status: 1 };
+   }
+ }
+ 
+ document.addEventListener('keydown', keyDownHandler);
+ document.addEventListener('keyup', keyUpHandler);
+ startButton.addEventListener('click', startGame);
+ 
+ function keyDownHandler(e) {
+   if (e.key === 'Right' || e.key === 'ArrowRight') {
+     rightPressed = true;
+   } else if (e.key === 'Left' || e.key === 'ArrowLeft') {
+     leftPressed = true;
+   }
+ }
+ 
+ function keyUpHandler(e) {
+   if (e.key === 'Right' || e.key === 'ArrowRight') {
+     rightPressed = false;
+   } else if (e.key === 'Left' || e.key === 'ArrowLeft') {
+     leftPressed = false;
+   }
+ }
+ 
+ function startGame() {
+   if (!gameActive) {
+     gameActive = true;
+     score = 0;
+     scoreDisplay.textContent = score;
+     resetBall();
+     resetBricks();
+     draw();
+   }
+ }
+ 
+ function resetBall() {
+   x = canvas.width / 2;
+   y = canvas.height - 30;
+   dx = 2;
+   dy = -2;
+ }
+ 
+ function resetBricks() {
+   for (let c = 0; c < brickColumnCount; c++) {
+     for (let r = 0; r < brickRowCount; r++) {
+       bricks[c][r].status = 1;
+     }
+   }
+ }
+ 
+ function collisionDetection() {
+   for (let c = 0; c < brickColumnCount; c++) {
+     for (let r = 0; r < brickRowCount; r++) {
+       const b = bricks[c][r];
+       if (b.status === 1) {
+         if (
+           x > b.x &&
+           x < b.x + brickWidth &&
+           y > b.y &&
+           y < b.y + brickHeight
+         ) {
+           dy = -dy;
+           b.status = 0;
+           score++;
+           scoreDisplay.textContent = score;
+           if (score === brickRowCount * brickColumnCount) {
+             alert('YOU WIN, CONGRATULATIONS!');
+             gameActive = false;
+           }
+         }
+       }
+     }
+   }
+ }
+ 
+ function drawBall() {
+   ctx.beginPath();
+   ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
+   ctx.fillStyle = '#0095DD';
+   ctx.fill();
+   ctx.closePath();
+ }
+ 
+ function drawPaddle() {
+   ctx.beginPath();
+   ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
+   ctx.fillStyle = '#0095DD';
+   ctx.fill();
+   ctx.closePath();
+ }
+ 
+ function drawBricks() {
+   for (let c = 0; c < brickColumnCount; c++) {
+     for (let r = 0; r < brickRowCount; r++) {
+       if (bricks[c][r].status === 1) {
+         const brickX = c * (brickWidth + brickPadding) + brickOffsetLeft;
+         const brickY = r * (brickHeight + brickPadding) + brickOffsetTop;
+         bricks[c][r].x = brickX;
+         bricks[c][r].y = brickY;
+         ctx.beginPath();
+         ctx.rect(brickX, brickY, brickWidth, brickHeight);
+         ctx.fillStyle = '#0095DD';
+         ctx.fill();
+         ctx.closePath();
+       }
+     }
+   }
+ }
+ 
+ function draw() {
+   if (!gameActive) return;
+ 
+   ctx.clearRect(0, 0, canvas.width, canvas.height);
+   drawBricks();
+   drawBall();
+   drawPaddle();
+   collisionDetection();
+ 
+   if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
+     dx = -dx;
+   }
+   if (y + dy < ballRadius) {
+     dy = -dy;
+   } else if (y + dy > canvas.height - ballRadius) {
+     if (x > paddleX && x < paddleX + paddleWidth) {
+       dy = -dy;
+     } else {
+       gameActive = false;
+       alert('GAME OVER');
+       return;
+     }
+   }
+ 
+   if (rightPressed && paddleX < canvas.width - paddleWidth) {
+     paddleX += 7;
+   } else if (leftPressed && paddleX > 0) {
+     paddleX -= 7;
+   }
+ 
+   x += dx;
+   y += dy;
+   requestAnimationFrame(draw);
+ }

style.css

Changed around line 1
+ :root {
+   --primary-color: #2c3e50;
+   --secondary-color: #3498db;
+   --accent-color: #e74c3c;
+   --text-color: #ecf0f1;
+   --background-color: #34495e;
+ }
+ 
+ body {
+   font-family: 'Arial', sans-serif;
+   margin: 0;
+   padding: 0;
+   background-color: var(--background-color);
+   color: var(--text-color);
+   display: flex;
+   flex-direction: column;
+   align-items: center;
+   min-height: 100vh;
+ }
+ 
+ header {
+   text-align: center;
+   padding: 2rem 0;
+ }
+ 
+ h1 {
+   font-size: 2.5rem;
+   margin: 0;
+   color: var(--secondary-color);
+ }
+ 
+ p {
+   margin: 0.5rem 0;
+ }
+ 
+ main {
+   display: flex;
+   flex-direction: column;
+   align-items: center;
+   gap: 1rem;
+   padding: 1rem;
+ }
+ 
+ canvas {
+   background-color: var(--primary-color);
+   border-radius: 8px;
+   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+ }
+ 
+ .controls {
+   display: flex;
+   align-items: center;
+   gap: 1rem;
+ }
+ 
+ button {
+   background-color: var(--secondary-color);
+   color: var(--text-color);
+   border: none;
+   padding: 0.5rem 1rem;
+   border-radius: 4px;
+   cursor: pointer;
+   font-size: 1rem;
+   transition: background-color 0.3s;
+ }
+ 
+ button:hover {
+   background-color: var(--accent-color);
+ }
+ 
+ .score {
+   font-size: 1.2rem;
+ }
+ 
+ footer {
+   margin-top: auto;
+   padding: 1rem;
+   text-align: center;
+ }
+ 
+ @media (max-width: 480px) {
+   canvas {
+     width: 100%;
+     height: auto;
+   }
+ }