Changes to rainbowbreakout.scroll.pub

root

24 days ago

Initial commit

body.html

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

index.scroll

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

prompt.json

Changed around line 1
+ {
+   "id": "d8c9922a-c5c4-4073-8925-592c38075e01",
+   "object": "chat.completion",
+   "created": 1735432755,
+   "model": "deepseek-chat",
+   "choices": [
+     {
+       "index": 0,
+       "message": {
+         "role": "assistant",
+         "content": "---domain---\nrainbowbreakout.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://rainbowbreakout.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Rainbow Breakout Game\nstyle.css\nbody.html\nscript.js\n---body.html---\n\n  Rainbow Breakout\n  Move the paddle with your mouse to break all the rainbow 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: white;\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\nh1 {\n  font-size: 2.5rem;\n  margin-bottom: 10px;\n}\n\np {\n  font-size: 1.2rem;\n}\n\nmain {\n  width: 100%;\n  max-width: 800px;\n  display: flex;\n  justify-content: center;\n}\n\ncanvas {\n  background: #000;\n  border: 5px solid #fff;\n  border-radius: 10px;\n  box-shadow: 0 0 20px rgba(255, 255, 255, 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  h1 {\n    font-size: 2rem;\n  }\n\n  p {\n    font-size: 1rem;\n  }\n\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 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 x = canvas.width / 2;\nlet y = canvas.height - 30;\nlet dx = 2;\nlet dy = -2;\nlet paddleX = (canvas.width - paddleWidth) / 2;\nlet rightPressed = false;\nlet leftPressed = false;\nlet score = 0;\nlet lives = 3;\n\nconst 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('mousemove', mouseMoveHandler);\n\nfunction mouseMoveHandler(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(x, y, ballRadius, 0, Math.PI * 2);\n  ctx.fillStyle = '#fff';\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 = '#fff';\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 = `hsl(${c * 50}, 100%, 50%)`;\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 (x > b.x && x < b.x + brickWidth && y > b.y && y < b.y + brickHeight) {\n          dy = -dy;\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 drawLives() {\n  ctx.font = '16px Arial';\n  ctx.fillStyle = '#fff';\n  ctx.fillText(`Lives: ${lives}`, canvas.width - 65, 20);\n}\n\nfunction draw() {\n  ctx.clearRect(0, 0, canvas.width, canvas.height);\n  drawBricks();\n  drawBall();\n  drawPaddle();\n  drawScore();\n  drawLives();\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      lives--;\n      if (!lives) {\n        alert('GAME OVER');\n        document.location.reload();\n      } else {\n        x = canvas.width / 2;\n        y = canvas.height - 30;\n        dx = 2;\n        dy = -2;\n        paddleX = (canvas.width - paddleWidth) / 2;\n      }\n    }\n  }\n\n  x += dx;\n  y += dy;\n  requestAnimationFrame(draw);\n}\n\ndraw();\n---end---"
+       },
+       "logprobs": null,
+       "finish_reason": "stop"
+     }
+   ],
+   "usage": {
+     "prompt_tokens": 243,
+     "completion_tokens": 1515,
+     "total_tokens": 1758,
+     "prompt_cache_hit_tokens": 0,
+     "prompt_cache_miss_tokens": 243
+   },
+   "system_fingerprint": "fp_f1afce2943"
+ }

readme.scroll

Changed around line 1

+ # rainbowbreakout.scroll.pub

+ Website generated by DeepSeek from prompt: full functional rainbow 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 ballRadius = 10;
+ const brickRowCount = 5;
+ const brickColumnCount = 7;
+ const brickWidth = 75;
+ const brickHeight = 20;
+ const brickPadding = 10;
+ const brickOffsetTop = 30;
+ const brickOffsetLeft = 30;
+ 
+ let x = canvas.width / 2;
+ let y = canvas.height - 30;
+ let dx = 2;
+ let dy = -2;
+ let paddleX = (canvas.width - paddleWidth) / 2;
+ let rightPressed = false;
+ let leftPressed = false;
+ let score = 0;
+ let lives = 3;
+ 
+ const 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', mouseMoveHandler);
+ 
+ function mouseMoveHandler(e) {
+   const relativeX = e.clientX - canvas.offsetLeft;
+   if (relativeX > 0 && relativeX < canvas.width) {
+     paddleX = relativeX - paddleWidth / 2;
+   }
+ }
+ 
+ function drawBall() {
+   ctx.beginPath();
+   ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
+   ctx.fillStyle = '#fff';
+   ctx.fill();
+   ctx.closePath();
+ }
+ 
+ function drawPaddle() {
+   ctx.beginPath();
+   ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
+   ctx.fillStyle = '#fff';
+   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 = `hsl(${c * 50}, 100%, 50%)`;
+         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 (x > b.x && x < b.x + brickWidth && y > b.y && y < b.y + brickHeight) {
+           dy = -dy;
+           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 drawLives() {
+   ctx.font = '16px Arial';
+   ctx.fillStyle = '#fff';
+   ctx.fillText(`Lives: ${lives}`, canvas.width - 65, 20);
+ }
+ 
+ function draw() {
+   ctx.clearRect(0, 0, canvas.width, canvas.height);
+   drawBricks();
+   drawBall();
+   drawPaddle();
+   drawScore();
+   drawLives();
+   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 {
+       lives--;
+       if (!lives) {
+         alert('GAME OVER');
+         document.location.reload();
+       } else {
+         x = canvas.width / 2;
+         y = canvas.height - 30;
+         dx = 2;
+         dy = -2;
+         paddleX = (canvas.width - paddleWidth) / 2;
+       }
+     }
+   }
+ 
+   x += dx;
+   y += dy;
+   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: white;
+   display: flex;
+   flex-direction: column;
+   align-items: center;
+   justify-content: center;
+   min-height: 100vh;
+   padding: 20px;
+ }
+ 
+ header {
+   text-align: center;
+   margin-bottom: 20px;
+ }
+ 
+ h1 {
+   font-size: 2.5rem;
+   margin-bottom: 10px;
+ }
+ 
+ p {
+   font-size: 1.2rem;
+ }
+ 
+ main {
+   width: 100%;
+   max-width: 800px;
+   display: flex;
+   justify-content: center;
+ }
+ 
+ canvas {
+   background: #000;
+   border: 5px solid #fff;
+   border-radius: 10px;
+   box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
+ }
+ 
+ footer {
+   text-align: center;
+   margin-top: 20px;
+   font-size: 1rem;
+ }
+ 
+ @media (max-width: 768px) {
+   h1 {
+     font-size: 2rem;
+   }
+ 
+   p {
+     font-size: 1rem;
+   }
+ 
+   canvas {
+     width: 100%;
+     height: auto;
+   }
+ }