commit 045b9395d3f6a62950b73c91a99d253fd63dbc7a
Author: root <root@hub.scroll.pub>
Date: 2024-12-27 07:28:27 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..24cc6c0
--- /dev/null
+++ b/body.html
@@ -0,0 +1,10 @@
+<main>
+ <div class="game-container">
+ <div class="cat"></div>
+ <div class="mouse"></div>
+ <div class="score">Score: <span>0</span></div>
+ </div>
+ <div class="instructions">
+ <p>Move the cat with arrow keys to catch the mouse!</p>
+ </div>
+</main>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..9bc0ad2
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://catmouse.scroll.pub
+metaTags
+editButton /edit.html
+title Cat Chasing Mouse Game
+style.css
+body.html
+script.js
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..1a0f4d3
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# catmouse.scroll.pub
+Website generated by DeepSeek from prompt: write a "cat chasing mouse" game
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..53cb5f1
--- /dev/null
+++ b/script.js
@@ -0,0 +1,53 @@
+const cat = document.querySelector('.cat');
+const mouse = document.querySelector('.mouse');
+const scoreDisplay = document.querySelector('.score span');
+let score = 0;
+
+function getRandomPosition() {
+ const x = Math.floor(Math.random() * (window.innerWidth - 50));
+ const y = Math.floor(Math.random() * (window.innerHeight - 50));
+ return { x, y };
+}
+
+function moveMouse() {
+ const { x, y } = getRandomPosition();
+ mouse.style.left = `${x}px`;
+ mouse.style.top = `${y}px`;
+}
+
+function checkCollision() {
+ const catRect = cat.getBoundingClientRect();
+ const mouseRect = mouse.getBoundingClientRect();
+
+ if (
+ catRect.left < mouseRect.right &&
+ catRect.right > mouseRect.left &&
+ catRect.top < mouseRect.bottom &&
+ catRect.bottom > mouseRect.top
+ ) {
+ score++;
+ scoreDisplay.textContent = score;
+ moveMouse();
+ }
+}
+
+document.addEventListener('keydown', (e) => {
+ const catRect = cat.getBoundingClientRect();
+ switch (e.key) {
+ case 'ArrowUp':
+ cat.style.top = `${Math.max(catRect.top - 10, 0)}px`;
+ break;
+ case 'ArrowDown':
+ cat.style.top = `${Math.min(catRect.top + 10, window.innerHeight - 50)}px`;
+ break;
+ case 'ArrowLeft':
+ cat.style.left = `${Math.max(catRect.left - 10, 0)}px`;
+ break;
+ case 'ArrowRight':
+ cat.style.left = `${Math.min(catRect.left + 10, window.innerWidth - 50)}px`;
+ break;
+ }
+ checkCollision();
+});
+
+moveMouse();
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..7e09178
--- /dev/null
+++ b/style.css
@@ -0,0 +1,73 @@
+:root {
+ --primary: #ff6f61;
+ --secondary: #6b5b95;
+ --accent: #88b04b;
+ --text: #333;
+ --bg: #f4f4f4;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Arial', sans-serif;
+ background: var(--bg);
+ color: var(--text);
+ min-height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.game-container {
+ position: relative;
+ width: 90vw;
+ max-width: 800px;
+ height: 60vh;
+ background: white;
+ border-radius: 20px;
+ box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+ overflow: hidden;
+}
+
+.cat, .mouse {
+ position: absolute;
+ width: 50px;
+ height: 50px;
+ background-size: contain;
+ background-repeat: no-repeat;
+ transition: all 0.1s ease;
+}
+
+.cat {
+ background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMjU2IDBDMTE0LjYgMCAwIDExNC42IDAgMjU2czExNC42IDI1NiAyNTYgMjU2IDI1Ni0xMTQuNiAyNTYtMjU2UzM5Ny40IDAgMjU2IDB6bTAgNDQ4Yy0xMDUuOSAwLTE5Mi04Ni4xLTE5Mi0xOTJzODYuMS0xOTIgMTkyLTE5MiAxOTIgODYuMSAxOTIgMTkyLTg2LjEgMTkyLTE5MiAxOTJ6bTk2LTE2MGMwIDUzLTQzIDk2LTk2IDk2cy05Ni00My05Ni05NiA0My05NiA5Ni05NiA5NiA0MyA5NiA5NnptLTE5MiAwYzAgNTMtNDMgOTYtOTYgOTZzLTk2LTQzLTk2LTk2IDQzLTk2IDk2LTk2IDk2IDQzIDk2IDk2em0xOTIgMGMwIDUzLTQzIDk2LTk2IDk2cy05Ni00My05Ni05NiA0My05NiA5Ni05NiA5NiA0MyA5NiA5NnoiIGZpbGw9IiNmZjZmNjEiLz48L3N2Zz4=');
+}
+
+.mouse {
+ background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMjU2IDBDMTE0LjYgMCAwIDExNC42IDAgMjU2czExNC42IDI1NiAyNTYgMjU2IDI1Ni0xMTQuNiAyNTYtMjU2UzM5Ny40IDAgMjU2IDB6bTAgNDQ4Yy0xMDUuOSAwLTE5Mi04Ni4xLTE5y0xOTJzODYuMS0xOTIgMTkyLTE5MiAxOTIgODYuMSAxOTIgMTkyLTg2LjEgMTkyLTE5MiAxOTJ6bS05Ni0xNjBjMCA1My00MyA5Ni05NiA5NnMtOTYtNDMtOTYtOTYgNDMtOTYgOTYtOTYgOTYgNDMgOTYgOTZ6bTk2IDBjMCA1My00MyA5Ni05NiA5NnMtOTYtNDMtOTYtOTYgNDMtOTYgOTYtOTYgOTYgNDMgOTYgOTZ6IiBmaWxsPSIjNjhiMDQiLz48L3N2Zz4=');
+}
+
+.score {
+ position: absolute;
+ top: 20px;
+ right: 20px;
+ font-size: 1.5rem;
+ font-weight: bold;
+ color: var(--primary);
+}
+
+.instructions {
+ margin-top: 20px;
+ text-align: center;
+ font-size: 1.2rem;
+ color: var(--secondary);
+}
+
+@media (max-width: 600px) {
+ .game-container {
+ height: 50vh;
+ }
+}
\ No newline at end of file