Changes to snake.scroll.pub

root
root
19 days ago
Initial commit
body.html
Changed around line 1
+
+

Snake Game

+
+
+
+
+
+
+
+
+

Score: 0

+
+
+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://snake.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Snake Game - Classic Retro Fun
+ style.css
+ body.html
+ script.js
prompt.json
Changed around line 1
+ {
+ "id": "8971387f-9644-4337-8ff1-de06aa81280b",
+ "object": "chat.completion",
+ "created": 1735870701,
+ "model": "deepseek-chat",
+ "choices": [
+ {
+ "index": 0,
+ "message": {
+ "role": "assistant",
+ "content": "---domain---\nsnake.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://snake.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Snake Game - Classic Retro Fun\nstyle.css\nbody.html\nscript.js\n---body.html---\n
\n

Snake Game

\n
\n \n
\n \n \n \n \n
\n

Score: 0

\n \n
\n
\n---style.css---\n:root {\n --primary-color: #4CAF50;\n --secondary-color: #388E3C;\n --background-color: #1A1A1A;\n --text-color: #FFFFFF;\n --button-color: #2E7D32;\n}\n\nbody {\n margin: 0;\n padding: 0;\n font-family: 'Arial', sans-serif;\n background-color: var(--background-color);\n color: var(--text-color);\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n}\n\nmain {\n text-align: center;\n padding: 20px;\n}\n\nh1 {\n color: var(--primary-color);\n margin-bottom: 20px;\n}\n\n.game-container {\n background-color: var(--secondary-color);\n padding: 20px;\n border-radius: 10px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n}\n\ncanvas {\n display: block;\n margin: 0 auto;\n background-color: #000;\n border: 2px solid var(--primary-color);\n}\n\n.controls {\n display: flex;\n justify-content: center;\n gap: 10px;\n margin-top: 10px;\n}\n\nbutton {\n background-color: var(--button-color);\n color: var(--text-color);\n border: none;\n padding: 10px 20px;\n border-radius: 5px;\n cursor: pointer;\n font-size: 16px;\n transition: background-color 0.3s ease;\n}\n\nbutton:hover {\n background-color: var(--primary-color);\n}\n\n.score {\n margin-top: 10px;\n font-size: 18px;\n}\n\n#startBtn {\n margin-top: 20px;\n padding: 10px 30px;\n font-size: 18px;\n}\n\n@media (max-width: 600px) {\n canvas {\n width: 90%;\n height: auto;\n }\n\n .controls {\n flex-direction: column;\n }\n\n button {\n width: 100%;\n margin-bottom: 10px;\n }\n}\n---script.js---\nconst canvas = document.getElementById('gameCanvas');\nconst ctx = canvas.getContext('2d');\nconst scoreElement = document.getElementById('score');\nconst startBtn = document.getElementById('startBtn');\n\nconst gridSize = 20;\nconst tileCount = canvas.width / gridSize;\n\nlet snake = [{ x: 10, y: 10 }];\nlet direction = { x: 0, y: 0 };\nlet food = { x: 5, y: 5 };\nlet score = 0;\nlet gameLoop;\n\nfunction drawGame() {\n clearCanvas();\n drawSnake();\n drawFood();\n moveSnake();\n checkCollision();\n}\n\nfunction clearCanvas() {\n ctx.fillStyle = '#000';\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n}\n\nfunction drawSnake() {\n ctx.fillStyle = '#4CAF50';\n snake.forEach(segment => {\n ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize, gridSize);\n });\n}\n\nfunction drawFood() {\n ctx.fillStyle = '#FF5252';\n ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize, gridSize);\n}\n\nfunction moveSnake() {\n const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };\n snake.unshift(head);\n if (head.x === food.x && head.y === food.y) {\n score++;\n scoreElement.textContent = score;\n placeFood();\n } else {\n snake.pop();\n }\n}\n\nfunction placeFood() {\n food.x = Math.floor(Math.random() * tileCount);\n food.y = Math.floor(Math.random() * tileCount);\n}\n\nfunction checkCollision() {\n const head = snake[0];\n if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount || snake.slice(1).some(segment => segment.x === head.x && segment.y === head.y)) {\n clearInterval(gameLoop);\n alert('Game Over! Your score: ' + score);\n resetGame();\n }\n}\n\nfunction resetGame() {\n snake = [{ x: 10, y: 10 }];\n direction = { x: 0, y: 0 };\n score = 0;\n scoreElement.textContent = score;\n placeFood();\n}\n\ndocument.getElementById('upBtn').addEventListener('click', () => direction = { x: 0, y: -1 });\ndocument.getElementById('leftBtn').addEventListener('click', () => direction = { x: -1, y: 0 });\ndocument.getElementById('downBtn').addEventListener('click', () => direction = { x: 0, y: 1 });\ndocument.getElementById('rightBtn').addEventListener('click', () => direction = { x: 1, y: 0 });\n\nstartBtn.addEventListener('click', () => {\n resetGame();\n gameLoop = setInterval(drawGame, 100);\n});\n\ndocument.addEventListener('keydown', (e) => {\n switch (e.key) {\n case 'ArrowUp': direction = { x: 0, y: -1 }; break;\n case 'ArrowLeft': direction = { x: -1, y: 0 }; break;\n case 'ArrowDown': direction = { x: 0, y: 1 }; break;\n case 'ArrowRight': direction = { x: 1, y: 0 }; break;\n }\n});\n---end---"
+ },
+ "logprobs": null,
+ "finish_reason": "stop"
+ }
+ ],
+ "usage": {
+ "prompt_tokens": 242,
+ "completion_tokens": 1453,
+ "total_tokens": 1695,
+ "prompt_cache_hit_tokens": 0,
+ "prompt_cache_miss_tokens": 242
+ },
+ "system_fingerprint": "fp_3a5770e1b4"
+ }
readme.scroll
Changed around line 1
+ # snake.scroll.pub
+ Website generated by DeepSeek from prompt: i want a website that can run Snake.
script.js
Changed around line 1
+ const canvas = document.getElementById('gameCanvas');
+ const ctx = canvas.getContext('2d');
+ const scoreElement = document.getElementById('score');
+ const startBtn = document.getElementById('startBtn');
+
+ const gridSize = 20;
+ const tileCount = canvas.width / gridSize;
+
+ let snake = [{ x: 10, y: 10 }];
+ let direction = { x: 0, y: 0 };
+ let food = { x: 5, y: 5 };
+ let score = 0;
+ let gameLoop;
+
+ function drawGame() {
+ clearCanvas();
+ drawSnake();
+ drawFood();
+ moveSnake();
+ checkCollision();
+ }
+
+ function clearCanvas() {
+ ctx.fillStyle = '#000';
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
+ }
+
+ function drawSnake() {
+ ctx.fillStyle = '#4CAF50';
+ snake.forEach(segment => {
+ ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize, gridSize);
+ });
+ }
+
+ function drawFood() {
+ ctx.fillStyle = '#FF5252';
+ ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize, gridSize);
+ }
+
+ function moveSnake() {
+ const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };
+ snake.unshift(head);
+ if (head.x === food.x && head.y === food.y) {
+ score++;
+ scoreElement.textContent = score;
+ placeFood();
+ } else {
+ snake.pop();
+ }
+ }
+
+ function placeFood() {
+ food.x = Math.floor(Math.random() * tileCount);
+ food.y = Math.floor(Math.random() * tileCount);
+ }
+
+ function checkCollision() {
+ const head = snake[0];
+ if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount || snake.slice(1).some(segment => segment.x === head.x && segment.y === head.y)) {
+ clearInterval(gameLoop);
+ alert('Game Over! Your score: ' + score);
+ resetGame();
+ }
+ }
+
+ function resetGame() {
+ snake = [{ x: 10, y: 10 }];
+ direction = { x: 0, y: 0 };
+ score = 0;
+ scoreElement.textContent = score;
+ placeFood();
+ }
+
+ document.getElementById('upBtn').addEventListener('click', () => direction = { x: 0, y: -1 });
+ document.getElementById('leftBtn').addEventListener('click', () => direction = { x: -1, y: 0 });
+ document.getElementById('downBtn').addEventListener('click', () => direction = { x: 0, y: 1 });
+ document.getElementById('rightBtn').addEventListener('click', () => direction = { x: 1, y: 0 });
+
+ startBtn.addEventListener('click', () => {
+ resetGame();
+ gameLoop = setInterval(drawGame, 100);
+ });
+
+ document.addEventListener('keydown', (e) => {
+ switch (e.key) {
+ case 'ArrowUp': direction = { x: 0, y: -1 }; break;
+ case 'ArrowLeft': direction = { x: -1, y: 0 }; break;
+ case 'ArrowDown': direction = { x: 0, y: 1 }; break;
+ case 'ArrowRight': direction = { x: 1, y: 0 }; break;
+ }
+ });
style.css
Changed around line 1
+ :root {
+ --primary-color: #4CAF50;
+ --secondary-color: #388E3C;
+ --background-color: #1A1A1A;
+ --text-color: #FFFFFF;
+ --button-color: #2E7D32;
+ }
+
+ body {
+ margin: 0;
+ padding: 0;
+ font-family: 'Arial', sans-serif;
+ background-color: var(--background-color);
+ color: var(--text-color);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 100vh;
+ }
+
+ main {
+ text-align: center;
+ padding: 20px;
+ }
+
+ h1 {
+ color: var(--primary-color);
+ margin-bottom: 20px;
+ }
+
+ .game-container {
+ background-color: var(--secondary-color);
+ padding: 20px;
+ border-radius: 10px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+ }
+
+ canvas {
+ display: block;
+ margin: 0 auto;
+ background-color: #000;
+ border: 2px solid var(--primary-color);
+ }
+
+ .controls {
+ display: flex;
+ justify-content: center;
+ gap: 10px;
+ margin-top: 10px;
+ }
+
+ button {
+ background-color: var(--button-color);
+ color: var(--text-color);
+ border: none;
+ padding: 10px 20px;
+ border-radius: 5px;
+ cursor: pointer;
+ font-size: 16px;
+ transition: background-color 0.3s ease;
+ }
+
+ button:hover {
+ background-color: var(--primary-color);
+ }
+
+ .score {
+ margin-top: 10px;
+ font-size: 18px;
+ }
+
+ #startBtn {
+ margin-top: 20px;
+ padding: 10px 30px;
+ font-size: 18px;
+ }
+
+ @media (max-width: 600px) {
+ canvas {
+ width: 90%;
+ height: auto;
+ }
+
+ .controls {
+ flex-direction: column;
+ }
+
+ button {
+ width: 100%;
+ margin-bottom: 10px;
+ }
+ }