body.html
Changed around line 1
+
+
+
+
+
Score: 0
+
+
+
Move the cat with arrow keys to catch the mouse!
+
+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://catmouse.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Cat Chasing Mouse Game
+ style.css
+ body.html
+ script.js
readme.scroll
Changed around line 1
+ # catmouse.scroll.pub
+ Website generated by DeepSeek from prompt: write a "cat chasing mouse" game
script.js
Changed around line 1
+ 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();
style.css
Changed around line 1
+ :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;
+ }
+ }