body.html
Changed around line 1
+
+
Cat Chase
+
Score: 0
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Created with ♥️ for cat lovers everywhere
+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://catchmouse.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Cat Chase - A Fun Mouse-Catching Game
+ style.css
+ body.html
+ script.js
readme.scroll
Changed around line 1
+ # catchmouse.scroll.pub
+ Website generated by Claude from prompt: write a "cat chasing mouse" game
script.js
Changed around line 1
+ 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());
+ });
style.css
Changed around line 1
+ :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,');
+ }
+
+ #mouse {
+ width: 30px;
+ height: 30px;
+ background: url('data:image/svg+xml,');
+ }
+
+ .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;
+ }
+ }