commit d7ca2aaefadad93e141519ac1836ad57043ac19e
Author: root <root@hub.scroll.pub>
Date: 2024-12-27 07:28:21 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..d858dcd
--- /dev/null
+++ b/body.html
@@ -0,0 +1,20 @@
+<header>
+ <h1>Cat Chase</h1>
+ <div class="score-container">Score: <span id="score">0</span></div>
+</header>
+
+<main>
+ <div id="game-container">
+ <div id="mouse" role="img" aria-label="Mouse"></div>
+ <div id="cat" role="img" aria-label="Cat"></div>
+ </div>
+
+ <div class="controls">
+ <button id="start-btn" aria-label="Start Game">Start Game</button>
+ <button id="reset-btn" aria-label="Reset Game">Reset</button>
+ </div>
+</main>
+
+<footer>
+ <p>Created with ♥️ for cat lovers everywhere</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..d6fbaca
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://catchmouse.scroll.pub
+metaTags
+editButton /edit.html
+title Cat Chase - A Fun Mouse-Catching Game
+style.css
+body.html
+script.js
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..22908a5
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# catchmouse.scroll.pub
+Website generated by Claude 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..5e0766b
--- /dev/null
+++ b/script.js
@@ -0,0 +1,90 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const cat = document.getElementById('cat');
+ const mouse = document.getElementById('mouse');
+ const startBtn = document.getElementById('start-btn');
+ const resetBtn = document.getElementById('reset-btn');
+ const scoreElement = document.getElementById('score');
+ const container = document.getElementById('game-container');
+
+ let score = 0;
+ let gameActive = false;
+ let mouseInterval;
+
+ function getRandomPosition(element) {
+ const containerRect = container.getBoundingClientRect();
+ const elementRect = element.getBoundingClientRect();
+
+ return {
+ x: Math.random() * (containerRect.width - elementRect.width),
+ y: Math.random() * (containerRect.height - elementRect.height)
+ };
+ }
+
+ function moveMouse() {
+ const position = getRandomPosition(mouse);
+ mouse.style.transform = `translate(${position.x}px, ${position.y}px)`;
+ }
+
+ function updateCatPosition(e) {
+ if (!gameActive) return;
+
+ const containerRect = container.getBoundingClientRect();
+ const catRect = cat.getBoundingClientRect();
+ const mouseRect = mouse.getBoundingClientRect();
+
+ let x = e.clientX - containerRect.left - catRect.width / 2;
+ let y = e.clientY - containerRect.top - catRect.height / 2;
+
+ // Boundary checking
+ x = Math.max(0, Math.min(x, containerRect.width - catRect.width));
+ y = Math.max(0, Math.min(y, containerRect.height - catRect.height));
+
+ cat.style.transform = `translate(${x}px, ${y}px)`;
+
+ // Check collision
+ if (isCollision(catRect, mouseRect)) {
+ score++;
+ scoreElement.textContent = score;
+ moveMouse();
+ }
+ }
+
+ function isCollision(rect1, rect2) {
+ return !(rect1.right < rect2.left ||
+ rect1.left > rect2.right ||
+ rect1.bottom < rect2.top ||
+ rect1.top > rect2.bottom);
+ }
+
+ function startGame() {
+ gameActive = true;
+ score = 0;
+ scoreElement.textContent = score;
+ moveMouse();
+ mouseInterval = setInterval(moveMouse, 2000);
+ startBtn.disabled = true;
+ }
+
+ function resetGame() {
+ gameActive = false;
+ clearInterval(mouseInterval);
+ score = 0;
+ scoreElement.textContent = score;
+ cat.style.transform = 'translate(0, 0)';
+ mouse.style.transform = 'translate(0, 0)';
+ startBtn.disabled = false;
+ }
+
+ // Event listeners
+ container.addEventListener('mousemove', updateCatPosition);
+ container.addEventListener('touchmove', (e) => {
+ e.preventDefault();
+ updateCatPosition(e.touches[0]);
+ });
+ startBtn.addEventListener('click', startGame);
+ resetBtn.addEventListener('click', resetGame);
+
+ // Mobile touch events
+ container.addEventListener('touchstart', (e) => e.preventDefault());
+ container.addEventListener('touchend', (e) => e.preventDefault());
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..88d98e1
--- /dev/null
+++ b/style.css
@@ -0,0 +1,123 @@
+:root {
+ --primary-color: #ff6b6b;
+ --secondary-color: #4ecdc4;
+ --background-color: #f7f7f7;
+ --text-color: #2d3436;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ background-color: var(--background-color);
+ color: var(--text-color);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+}
+
+header {
+ text-align: center;
+ padding: 2rem;
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+ color: white;
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+h1 {
+ font-size: 2.5rem;
+ margin-bottom: 1rem;
+ text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
+}
+
+.score-container {
+ font-size: 1.5rem;
+ font-weight: bold;
+}
+
+main {
+ flex: 1;
+ padding: 2rem;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+#game-container {
+ width: 100%;
+ max-width: 600px;
+ height: 400px;
+ background-color: white;
+ border-radius: 15px;
+ position: relative;
+ overflow: hidden;
+ box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+ margin-bottom: 2rem;
+}
+
+#cat, #mouse {
+ position: absolute;
+ transition: transform 0.1s ease-out;
+}
+
+#cat {
+ width: 50px;
+ height: 50px;
+ background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 20c-16 0-30 12-30 30 0 16 14 30 30 30s30-14 30-30c0-18-14-30-30-30zm-8 20c2.2 0 4 1.8 4 4s-1.8 4-4 4-4-1.8-4-4 1.8-4 4-4zm16 0c2.2 0 4 1.8 4 4s-1.8 4-4 4-4-1.8-4-4 1.8-4 4-4z" fill="%23ff6b6b"/></svg>');
+}
+
+#mouse {
+ width: 30px;
+ height: 30px;
+ background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="%234ecdc4"/></svg>');
+}
+
+.controls {
+ display: flex;
+ gap: 1rem;
+}
+
+button {
+ padding: 0.8rem 1.5rem;
+ font-size: 1rem;
+ border: none;
+ border-radius: 25px;
+ background: var(--primary-color);
+ color: white;
+ cursor: pointer;
+ transition: transform 0.2s, background-color 0.2s;
+}
+
+button:hover {
+ transform: translateY(-2px);
+ background: var(--secondary-color);
+}
+
+button:active {
+ transform: translateY(0);
+}
+
+footer {
+ text-align: center;
+ padding: 1rem;
+ background-color: white;
+ box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
+}
+
+@media (max-width: 768px) {
+ #game-container {
+ height: 300px;
+ }
+
+ h1 {
+ font-size: 2rem;
+ }
+
+ .controls {
+ flex-direction: column;
+ }
+}