Changes to arkanoid.scroll.pub

root

25 days ago

Initial commit

body.html

Changed around line 1
+ 
+   Arkanoid Game
+   Break the bricks and score points!
+ 
+ 
+   
+     
+     
+     
+   
+   Score: 0
+   
+ 
+ 
+   Enjoy the game!
+ 

index.scroll

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

prompt.json

Changed around line 1
+ {
+   "id": "bb5f5301-4eba-45ea-9b1a-b96928ef2756",
+   "object": "chat.completion",
+   "created": 1735318940,
+   "model": "deepseek-chat",
+   "choices": [
+     {
+       "index": 0,
+       "message": {
+         "role": "assistant",
+         "content": "---domain---\narkanoid.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://arkanoid.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Arkanoid Game\nstyle.css\nbody.html\nscript.js\n---body.html---\n\n  Arkanoid Game\n  Break the bricks and score points!
\n\n\n  \n    \n    \n    \n  \n  Score: 0
\n  \n\n\n  Enjoy the game!
\n\n---style.css---\nbody {\n  font-family: 'Arial', sans-serif;\n  background-color: #f4f4f4;\n  color: #333;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100vh;\n}\n\nheader {\n  text-align: center;\n  margin-bottom: 20px;\n}\n\nh1 {\n  font-size: 2.5rem;\n  color: #4CAF50;\n}\n\np {\n  font-size: 1.2rem;\n}\n\n#gameArea {\n  background-color: #fff;\n  border: 2px solid #4CAF50;\n  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n}\n\n#paddle {\n  transition: x 0.1s;\n}\n\n#ball {\n  transition: cx 0.1s, cy 0.1s;\n}\n\n#bricks rect {\n  fill: #2196F3;\n  stroke: #0D47A1;\n  stroke-width: 2;\n}\n\n#score {\n  font-size: 1.5rem;\n  margin-top: 20px;\n}\n\n#startButton {\n  margin-top: 20px;\n  padding: 10px 20px;\n  font-size: 1rem;\n  background-color: #4CAF50;\n  color: #fff;\n  border: none;\n  cursor: pointer;\n  transition: background-color 0.3s;\n}\n\n#startButton:hover {\n  background-color: #45a049;\n}\n\nfooter {\n  margin-top: 20px;\n  text-align: center;\n  font-size: 0.9rem;\n  color: #777;\n}\n---script.js---\nconst paddle = document.getElementById('paddle');\nconst ball = document.getElementById('ball');\nconst bricks = document.getElementById('bricks');\nconst startButton = document.getElementById('startButton');\nconst scoreDisplay = document.getElementById('score');\n\nlet paddleX = 350;\nlet ballX = 400;\nlet ballY = 300;\nlet ballDX = 4;\nlet ballDY = -4;\nlet score = 0;\nlet gameInterval;\n\nconst brickRowCount = 5;\nconst brickColumnCount = 10;\nconst brickWidth = 75;\nconst brickHeight = 20;\nconst brickPadding = 10;\nconst brickOffsetTop = 30;\nconst brickOffsetLeft = 30;\n\nconst brickLayout = [];\n\nfor (let c = 0; c < brickColumnCount; c++) {\n  brickLayout[c] = [];\n  for (let r = 0; r < brickRowCount; r++) {\n    brickLayout[c][r] = { x: 0, y: 0, status: 1 };\n  }\n}\n\nfunction drawBricks() {\n  bricks.innerHTML = '';\n  for (let c = 0; c < brickColumnCount; c++) {\n    for (let r = 0; r < brickRowCount; r++) {\n      if (brickLayout[c][r].status === 1) {\n        const brickX = c * (brickWidth + brickPadding) + brickOffsetLeft;\n        const brickY = r * (brickHeight + brickPadding) + brickOffsetTop;\n        brickLayout[c][r].x = brickX;\n        brickLayout[c][r].y = brickY;\n        const brick = document.createElementNS('http://www.w3.org/2000/svg', 'rect');\n        brick.setAttribute('x', brickX);\n        brick.setAttribute('y', brickY);\n        brick.setAttribute('width', brickWidth);\n        brick.setAttribute('height', brickHeight);\n        bricks.appendChild(brick);\n      }\n    }\n  }\n}\n\nfunction movePaddle(event) {\n  const gameArea = document.getElementById('gameArea');\n  const rect = gameArea.getBoundingClientRect();\n  paddleX = event.clientX - rect.left - paddle.getAttribute('width') / 2;\n  if (paddleX < 0) paddleX = 0;\n  if (paddleX > 700) paddleX = 700;\n  paddle.setAttribute('x', paddleX);\n}\n\nfunction moveBall() {\n  ballX += ballDX;\n  ballY += ballDY;\n\n  if (ballX < 10 || ballX > 790) ballDX = -ballDX;\n  if (ballY < 10) ballDY = -ballDY;\n\n  if (ballY > 540) {\n    if (ballX > paddleX && ballX < paddleX + 100) {\n      ballDY = -ballDY;\n    } else {\n      clearInterval(gameInterval);\n      alert('Game Over! Your score: ' + score);\n      resetGame();\n    }\n  }\n\n  ball.setAttribute('cx', ballX);\n  ball.setAttribute('cy', ballY);\n\n  collisionDetection();\n}\n\nfunction collisionDetection() {\n  for (let c = 0; c < brickColumnCount; c++) {\n    for (let r = 0; r < brickRowCount; r++) {\n      const b = brickLayout[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          scoreDisplay.textContent = 'Score: ' + score;\n          if (score === brickRowCount * brickColumnCount) {\n            alert('You Win!');\n            resetGame();\n          }\n        }\n      }\n    }\n  }\n}\n\nfunction resetGame() {\n  ballX = 400;\n  ballY = 300;\n  ballDX = 4;\n  ballDY = -4;\n  score = 0;\n  scoreDisplay.textContent = 'Score: 0';\n  for (let c = 0; c < brickColumnCount; c++) {\n    for (let r = 0; r < brickRowCount; r++) {\n      brickLayout[c][r].status = 1;\n    }\n  }\n  drawBricks();\n}\n\nstartButton.addEventListener('click', () => {\n  resetGame();\n  gameInterval = setInterval(moveBall, 10);\n});\n\ndocument.addEventListener('mousemove', movePaddle);\n\ndrawBricks();\n---end---"
+       },
+       "logprobs": null,
+       "finish_reason": "stop"
+     }
+   ],
+   "usage": {
+     "prompt_tokens": 246,
+     "completion_tokens": 1599,
+     "total_tokens": 1845,
+     "prompt_cache_hit_tokens": 0,
+     "prompt_cache_miss_tokens": 246
+   },
+   "system_fingerprint": "fp_f1afce2943"
+ }

readme.scroll

Changed around line 1

+ # arkanoid.scroll.pub

+ Website generated by DeepSeek from prompt: Build a game similar to arkanoid using svg images

script.js

Changed around line 1
+ const paddle = document.getElementById('paddle');
+ const ball = document.getElementById('ball');
+ const bricks = document.getElementById('bricks');
+ const startButton = document.getElementById('startButton');
+ const scoreDisplay = document.getElementById('score');
+ 
+ let paddleX = 350;
+ let ballX = 400;
+ let ballY = 300;
+ let ballDX = 4;
+ let ballDY = -4;
+ let score = 0;
+ let gameInterval;
+ 
+ const brickRowCount = 5;
+ const brickColumnCount = 10;
+ const brickWidth = 75;
+ const brickHeight = 20;
+ const brickPadding = 10;
+ const brickOffsetTop = 30;
+ const brickOffsetLeft = 30;
+ 
+ const brickLayout = [];
+ 
+ for (let c = 0; c < brickColumnCount; c++) {
+   brickLayout[c] = [];
+   for (let r = 0; r < brickRowCount; r++) {
+     brickLayout[c][r] = { x: 0, y: 0, status: 1 };
+   }
+ }
+ 
+ function drawBricks() {
+   bricks.innerHTML = '';
+   for (let c = 0; c < brickColumnCount; c++) {
+     for (let r = 0; r < brickRowCount; r++) {
+       if (brickLayout[c][r].status === 1) {
+         const brickX = c * (brickWidth + brickPadding) + brickOffsetLeft;
+         const brickY = r * (brickHeight + brickPadding) + brickOffsetTop;
+         brickLayout[c][r].x = brickX;
+         brickLayout[c][r].y = brickY;
+         const brick = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+         brick.setAttribute('x', brickX);
+         brick.setAttribute('y', brickY);
+         brick.setAttribute('width', brickWidth);
+         brick.setAttribute('height', brickHeight);
+         bricks.appendChild(brick);
+       }
+     }
+   }
+ }
+ 
+ function movePaddle(event) {
+   const gameArea = document.getElementById('gameArea');
+   const rect = gameArea.getBoundingClientRect();
+   paddleX = event.clientX - rect.left - paddle.getAttribute('width') / 2;
+   if (paddleX < 0) paddleX = 0;
+   if (paddleX > 700) paddleX = 700;
+   paddle.setAttribute('x', paddleX);
+ }
+ 
+ function moveBall() {
+   ballX += ballDX;
+   ballY += ballDY;
+ 
+   if (ballX < 10 || ballX > 790) ballDX = -ballDX;
+   if (ballY < 10) ballDY = -ballDY;
+ 
+   if (ballY > 540) {
+     if (ballX > paddleX && ballX < paddleX + 100) {
+       ballDY = -ballDY;
+     } else {
+       clearInterval(gameInterval);
+       alert('Game Over! Your score: ' + score);
+       resetGame();
+     }
+   }
+ 
+   ball.setAttribute('cx', ballX);
+   ball.setAttribute('cy', ballY);
+ 
+   collisionDetection();
+ }
+ 
+ function collisionDetection() {
+   for (let c = 0; c < brickColumnCount; c++) {
+     for (let r = 0; r < brickRowCount; r++) {
+       const b = brickLayout[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++;
+           scoreDisplay.textContent = 'Score: ' + score;
+           if (score === brickRowCount * brickColumnCount) {
+             alert('You Win!');
+             resetGame();
+           }
+         }
+       }
+     }
+   }
+ }
+ 
+ function resetGame() {
+   ballX = 400;
+   ballY = 300;
+   ballDX = 4;
+   ballDY = -4;
+   score = 0;
+   scoreDisplay.textContent = 'Score: 0';
+   for (let c = 0; c < brickColumnCount; c++) {
+     for (let r = 0; r < brickRowCount; r++) {
+       brickLayout[c][r].status = 1;
+     }
+   }
+   drawBricks();
+ }
+ 
+ startButton.addEventListener('click', () => {
+   resetGame();
+   gameInterval = setInterval(moveBall, 10);
+ });
+ 
+ document.addEventListener('mousemove', movePaddle);
+ 
+ drawBricks();

style.css

Changed around line 1
+ body {
+   font-family: 'Arial', sans-serif;
+   background-color: #f4f4f4;
+   color: #333;
+   margin: 0;
+   padding: 0;
+   display: flex;
+   flex-direction: column;
+   align-items: center;
+   justify-content: center;
+   height: 100vh;
+ }
+ 
+ header {
+   text-align: center;
+   margin-bottom: 20px;
+ }
+ 
+ h1 {
+   font-size: 2.5rem;
+   color: #4CAF50;
+ }
+ 
+ p {
+   font-size: 1.2rem;
+ }
+ 
+ #gameArea {
+   background-color: #fff;
+   border: 2px solid #4CAF50;
+   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+ }
+ 
+ #paddle {
+   transition: x 0.1s;
+ }
+ 
+ #ball {
+   transition: cx 0.1s, cy 0.1s;
+ }
+ 
+ #bricks rect {
+   fill: #2196F3;
+   stroke: #0D47A1;
+   stroke-width: 2;
+ }
+ 
+ #score {
+   font-size: 1.5rem;
+   margin-top: 20px;
+ }
+ 
+ #startButton {
+   margin-top: 20px;
+   padding: 10px 20px;
+   font-size: 1rem;
+   background-color: #4CAF50;
+   color: #fff;
+   border: none;
+   cursor: pointer;
+   transition: background-color 0.3s;
+ }
+ 
+ #startButton:hover {
+   background-color: #45a049;
+ }
+ 
+ footer {
+   margin-top: 20px;
+   text-align: center;
+   font-size: 0.9rem;
+   color: #777;
+ }