commit e3076e9b752f938779523d1bdbdbb592801094b8
Author: root <root@hub.scroll.pub>
Date: 2025-01-03 02:18:45 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..487deb7
--- /dev/null
+++ b/body.html
@@ -0,0 +1,14 @@
+<main>
+ <h1>Snake Game</h1>
+ <div class="game-container">
+ <canvas id="gameCanvas" width="400" height="400"></canvas>
+ <div class="controls">
+ <button id="upBtn" aria-label="Move Up">↑</button>
+ <button id="leftBtn" aria-label="Move Left">←</button>
+ <button id="downBtn" aria-label="Move Down">↓</button>
+ <button id="rightBtn" aria-label="Move Right">→</button>
+ </div>
+ <p class="score">Score: <span id="score">0</span></p>
+ <button id="startBtn">Start Game</button>
+ </div>
+</main>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..cd38638
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://snake.scroll.pub
+metaTags
+editButton /edit.html
+title Snake Game - Classic Retro Fun
+style.css
+body.html
+script.js
\ No newline at end of file
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..b87976f
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,25 @@
+{
+ "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<main>\n <h1>Snake Game</h1>\n <div class=\"game-container\">\n <canvas id=\"gameCanvas\" width=\"400\" height=\"400\"></canvas>\n <div class=\"controls\">\n <button id=\"upBtn\" aria-label=\"Move Up\">↑</button>\n <button id=\"leftBtn\" aria-label=\"Move Left\">←</button>\n <button id=\"downBtn\" aria-label=\"Move Down\">↓</button>\n <button id=\"rightBtn\" aria-label=\"Move Right\">→</button>\n </div>\n <p class=\"score\">Score: <span id=\"score\">0</span></p>\n <button id=\"startBtn\">Start Game</button>\n </div>\n</main>\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"
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..3e085af
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# snake.scroll.pub
+Website generated by DeepSeek from prompt: i want a website that can run Snake.
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..8b63447
--- /dev/null
+++ b/script.js
@@ -0,0 +1,91 @@
+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;
+ }
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..5f71ea8
--- /dev/null
+++ b/style.css
@@ -0,0 +1,92 @@
+: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;
+ }
+}
\ No newline at end of file