Changes to breakout1.scroll.pub

root

24 days ago

Initial commit

body.html

Changed around line 1
+ 
+   Colorful Breakout Game
+   Move the paddle with your mouse to break all the bricks!
+ 
+ 
+   
+ 
+ 
+   Enjoy the game!
+ 

index.scroll

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

prompt.json

Changed around line 1
+ {
+   "id": "41637fb2-c8e6-4d73-8c17-b77e11a91d79",
+   "object": "chat.completion",
+   "created": 1735432580,
+   "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 Colorful Breakout Game\nstyle.css\nbody.html\nscript.js\n---body.html---\n\n  Colorful Breakout Game\n  Move the paddle with your mouse to break all the bricks!
\n\n\n  \n\n\n  Enjoy the game!
\n\n---style.css---\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nbody {\n  font-family: 'Arial', sans-serif;\n  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);\n  color: #fff;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  min-height: 100vh;\n  padding: 20px;\n}\n\nheader {\n  text-align: center;\n  margin-bottom: 20px;\n}\n\nheader h1 {\n  font-size: 2.5rem;\n  margin-bottom: 10px;\n}\n\nheader p {\n  font-size: 1.2rem;\n}\n\nmain {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\ncanvas {\n  background: #000;\n  border-radius: 10px;\n  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);\n}\n\nfooter {\n  text-align: center;\n  margin-top: 20px;\n  font-size: 1rem;\n}\n\n@media (max-width: 768px) {\n  canvas {\n    width: 100%;\n    height: auto;\n  }\n}\n---script.js---\nconst canvas = document.getElementById('gameCanvas');\nconst ctx = canvas.getContext('2d');\n\nconst paddleWidth = 100;\nconst paddleHeight = 10;\nconst paddleSpeed = 8;\nconst ballRadius = 10;\nconst brickRowCount = 5;\nconst brickColumnCount = 7;\nconst brickWidth = 75;\nconst brickHeight = 20;\nconst brickPadding = 10;\nconst brickOffsetTop = 30;\nconst brickOffsetLeft = 30;\n\nlet paddleX = (canvas.width - paddleWidth) / 2;\nlet ballX = canvas.width / 2;\nlet ballY = canvas.height - 30;\nlet ballDX = 4;\nlet ballDY = -4;\nlet rightPressed = false;\nlet leftPressed = false;\nlet score = 0;\nlet bricks = [];\n\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('mousemove', (e) => {\n  const relativeX = e.clientX - canvas.offsetLeft;\n  if (relativeX > 0 && relativeX < canvas.width) {\n    paddleX = relativeX - paddleWidth / 2;\n  }\n});\n\nfunction drawBall() {\n  ctx.beginPath();\n  ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);\n  ctx.fillStyle = '#ff4757';\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 = '#2ed573';\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 = '#ffa502';\n        ctx.fill();\n        ctx.closePath();\n      }\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 (ballX > b.x && ballX < b.x + brickWidth && ballY > b.y && ballY < b.y + brickHeight) {\n          ballDY = -ballDY;\n          b.status = 0;\n          score++;\n          if (score === brickRowCount * brickColumnCount) {\n            alert('YOU WIN, CONGRATULATIONS!');\n            document.location.reload();\n          }\n        }\n      }\n    }\n  }\n}\n\nfunction drawScore() {\n  ctx.font = '16px Arial';\n  ctx.fillStyle = '#fff';\n  ctx.fillText('Score: ' + score, 8, 20);\n}\n\nfunction draw() {\n  ctx.clearRect(0, 0, canvas.width, canvas.height);\n  drawBricks();\n  drawBall();\n  drawPaddle();\n  drawScore();\n  collisionDetection();\n\n  if (ballX + ballDX > canvas.width - ballRadius || ballX + ballDX < ballRadius) {\n    ballDX = -ballDX;\n  }\n  if (ballY + ballDY < ballRadius) {\n    ballDY = -ballDY;\n  } else if (ballY + ballDY > canvas.height - ballRadius) {\n    if (ballX > paddleX && ballX < paddleX + paddleWidth) {\n      ballDY = -ballDY;\n    } else {\n      alert('GAME OVER');\n      document.location.reload();\n    }\n  }\n\n  ballX += ballDX;\n  ballY += ballDY;\n  requestAnimationFrame(draw);\n}\n\ndraw();\n---end---"
+       },
+       "logprobs": null,
+       "finish_reason": "stop"
+     }
+   ],
+   "usage": {
+     "prompt_tokens": 243,
+     "completion_tokens": 1377,
+     "total_tokens": 1620,
+     "prompt_cache_hit_tokens": 0,
+     "prompt_cache_miss_tokens": 243
+   },
+   "system_fingerprint": "fp_f1afce2943"
+ }

readme.scroll

Changed around line 1

+ # breakout1.scroll.pub

+ Website generated by DeepSeek from prompt: full functional colorful breakout game controlled by the mouse

script.js

Changed around line 1
+ const canvas = document.getElementById('gameCanvas');
+ const ctx = canvas.getContext('2d');
+ 
+ const paddleWidth = 100;
+ const paddleHeight = 10;
+ const paddleSpeed = 8;
+ const ballRadius = 10;
+ const brickRowCount = 5;
+ const brickColumnCount = 7;
+ const brickWidth = 75;
+ const brickHeight = 20;
+ const brickPadding = 10;
+ const brickOffsetTop = 30;
+ const brickOffsetLeft = 30;
+ 
+ let paddleX = (canvas.width - paddleWidth) / 2;
+ let ballX = canvas.width / 2;
+ let ballY = canvas.height - 30;
+ let ballDX = 4;
+ let ballDY = -4;
+ let rightPressed = false;
+ let leftPressed = false;
+ let score = 0;
+ 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('mousemove', (e) => {
+   const relativeX = e.clientX - canvas.offsetLeft;
+   if (relativeX > 0 && relativeX < canvas.width) {
+     paddleX = relativeX - paddleWidth / 2;
+   }
+ });
+ 
+ function drawBall() {
+   ctx.beginPath();
+   ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
+   ctx.fillStyle = '#ff4757';
+   ctx.fill();
+   ctx.closePath();
+ }
+ 
+ function drawPaddle() {
+   ctx.beginPath();
+   ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
+   ctx.fillStyle = '#2ed573';
+   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 = '#ffa502';
+         ctx.fill();
+         ctx.closePath();
+       }
+     }
+   }
+ }
+ 
+ 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 (ballX > b.x && ballX < b.x + brickWidth && ballY > b.y && ballY < b.y + brickHeight) {
+           ballDY = -ballDY;
+           b.status = 0;
+           score++;
+           if (score === brickRowCount * brickColumnCount) {
+             alert('YOU WIN, CONGRATULATIONS!');
+             document.location.reload();
+           }
+         }
+       }
+     }
+   }
+ }
+ 
+ function drawScore() {
+   ctx.font = '16px Arial';
+   ctx.fillStyle = '#fff';
+   ctx.fillText('Score: ' + score, 8, 20);
+ }
+ 
+ function draw() {
+   ctx.clearRect(0, 0, canvas.width, canvas.height);
+   drawBricks();
+   drawBall();
+   drawPaddle();
+   drawScore();
+   collisionDetection();
+ 
+   if (ballX + ballDX > canvas.width - ballRadius || ballX + ballDX < ballRadius) {
+     ballDX = -ballDX;
+   }
+   if (ballY + ballDY < ballRadius) {
+     ballDY = -ballDY;
+   } else if (ballY + ballDY > canvas.height - ballRadius) {
+     if (ballX > paddleX && ballX < paddleX + paddleWidth) {
+       ballDY = -ballDY;
+     } else {
+       alert('GAME OVER');
+       document.location.reload();
+     }
+   }
+ 
+   ballX += ballDX;
+   ballY += ballDY;
+   requestAnimationFrame(draw);
+ }
+ 
+ draw();

style.css

Changed around line 1
+ * {
+   margin: 0;
+   padding: 0;
+   box-sizing: border-box;
+ }
+ 
+ body {
+   font-family: 'Arial', sans-serif;
+   background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+   color: #fff;
+   display: flex;
+   flex-direction: column;
+   align-items: center;
+   justify-content: center;
+   min-height: 100vh;
+   padding: 20px;
+ }
+ 
+ header {
+   text-align: center;
+   margin-bottom: 20px;
+ }
+ 
+ header h1 {
+   font-size: 2.5rem;
+   margin-bottom: 10px;
+ }
+ 
+ header p {
+   font-size: 1.2rem;
+ }
+ 
+ main {
+   display: flex;
+   justify-content: center;
+   align-items: center;
+ }
+ 
+ canvas {
+   background: #000;
+   border-radius: 10px;
+   box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
+ }
+ 
+ footer {
+   text-align: center;
+   margin-top: 20px;
+   font-size: 1rem;
+ }
+ 
+ @media (max-width: 768px) {
+   canvas {
+     width: 100%;
+     height: auto;
+   }
+ }