https://mikerossiter.tech/tags/game/ Recent content in Game on Mike's Blog Hugo -- gohugo.io en-gb Fri, 31 Jul 2026 09:00:09 +0100 https://mikerossiter.tech/posts/cat-and-mouse-game/ Thu, 03 Apr 2025 09:40:44 +0100 https://mikerossiter.tech/posts/cat-and-mouse-game/ <img src="https://mikerossiter.tech/catandmouse.png" alt="Featured image of post Cat and Mouse Game!" /><h1 id="cat-and-mouse-game">Cat and Mouse Game </h1><p>A fun game I discovered on YouTube. It has elements of graph theory and algorithmic thinking but in essence its a <strong>chase and evade</strong> type game that is super easy to grasp. I played this with my kids using cushions on the floor and they loved it. For all of ten minutes.</p> <p>Give it a go! I&rsquo;ve added a score for the mouse so see how high you can get it. Sadly, there is no winning/prize involved!</p> <div class="cat-mouse-game"> <style> .cat-mouse-game { margin: 0; padding: 20px; font-family: sans-serif; display: flex; flex-direction: column; align-items: center; } .cat-mouse-game canvas { display: block; width: 100%; max-width: 600px; height: auto; touch-action: manipulation; } .cat-mouse-game .instructions { text-align: center; max-width: 500px; font-size: 14px; padding: 0 20px; } .cat-mouse-game .score { margin-bottom: 10px; font-size: 16px; } </style> <div class="score" id="scoreDisplay">Score: 0</div> <canvas id="gameCanvas" width="600" height="600"></canvas> <div class="instructions"> <p><strong>Instructions:</strong></p> <p>You are the mouse (blue). Click on a connected node to move.</p> <p>The cat (red) will move after you and try to catch you.</p> <p>If the cat lands on your node, the game resets and your score returns to 0.</p> <p>You gain 1 point for every move you make without getting caught!</p> </div> <script> const canvas = document.getElementById('gameCanvas'); canvas.width = 600; canvas.height = 600; const ctx = canvas.getContext('2d'); const scoreDisplay = document.getElementById('scoreDisplay'); const nodes = { center: { x: 300, y: 300 }, top: { x: 300, y: 150 }, bottomLeft: { x: 200, y: 450 }, bottomRight: { x: 400, y: 450 }, left: { x: 100, y: 300 }, right: { x: 500, y: 300 } }; const connectionLines = [ ['center', 'top'], ['center', 'bottomLeft'], ['center', 'bottomRight'], ['top', 'right'], ['right', 'bottomRight'], ['bottomRight', 'bottomLeft'], ['bottomLeft', 'left'], ['left', 'top'] ]; let mouse = { node: 'right' }; let cat = { node: 'center' }; let score = 0; function updateScoreDisplay() { scoreDisplay.textContent = `Score: ${score}`; } function resetGame() { resizeCanvasForDPR(); const outerNodes = ['top', 'bottomLeft', 'bottomRight', 'left', 'right']; mouse.node = outerNodes[Math.floor(Math.random() * outerNodes.length)]; const firstMoves = getValidMoves(mouse.node); const secondMoves = firstMoves.flatMap(n => getValidMoves(n)); const possibleCats = secondMoves.filter(n => n !== mouse.node && !firstMoves.includes(n)); cat.node = possibleCats[Math.floor(Math.random() * possibleCats.length)] || 'center'; score = 0; updateScoreDisplay(); drawNodes(); setTimeout(() => { moveCatTowardMouse(); updateGame(); }, 500); } function resizeCanvasForDPR() { const dpr = window.devicePixelRatio || 1; // Pick actual pixel size based on canvas container (max 600) const containerWidth = Math.min(canvas.parentElement.clientWidth, 600); const size = containerWidth; canvas.style.width = size + 'px'; canvas.style.height = size + 'px'; canvas.width = size * dpr; canvas.height = size * dpr; ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.scale(dpr, dpr); updateNodePositions(size); } function getClickRadius() { return 'ontouchstart' in window ? 25 : 15; } function updateNodePositions(size) { nodes.center = { x: size / 2, y: size / 2 }; nodes.top = { x: size / 2, y: size * 0.25 }; nodes.bottomLeft = { x: size * 0.33, y: size * 0.75 }; nodes.bottomRight = { x: size * 0.66, y: size * 0.75 }; nodes.left = { x: size * 0.15, y: size / 2 }; nodes.right = { x: size * 0.85, y: size / 2 }; } function drawNodes() { ctx.clearRect(0, 0, canvas.width, canvas.height); connectionLines.forEach(([a, b]) => { const posA = nodes[a]; const posB = nodes[b]; ctx.beginPath(); ctx.moveTo(posA.x, posA.y); ctx.lineTo(posB.x, posB.y); ctx.strokeStyle = '#ccc'; ctx.stroke(); }); Object.entries(nodes).forEach(([key, pos]) => { ctx.beginPath(); ctx.arc(pos.x, pos.y, 10, 0, 2 * Math.PI); ctx.fillStyle = 'gray'; ctx.fill(); }); const mousePos = nodes[mouse.node]; ctx.beginPath(); ctx.arc(mousePos.x, mousePos.y, 12, 0, 2 * Math.PI); ctx.fillStyle = 'blue'; ctx.fill(); const catPos = nodes[cat.node]; ctx.beginPath(); ctx.arc(catPos.x, catPos.y, 12, 0, 2 * Math.PI); ctx.fillStyle = 'red'; ctx.fill(); } function getValidMoves(node) { const moves = []; connectionLines.forEach(([a, b]) => { if (a === node) moves.push(b); else if (b === node) moves.push(a); }); return moves; } function handleClick(e) { const rect = canvas.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const clickedNode = Object.entries(nodes).find(([name, pos]) => { const dx = x - pos.x; const dy = y - pos.y; return Math.sqrt(dx * dx + dy * dy) < getClickRadius(); }); if (!clickedNode) return; const [clickedName] = clickedNode; const valid = getValidMoves(mouse.node); if (valid.includes(clickedName)) { mouse.node = clickedName; score++; updateScoreDisplay(); updateGame(true); } } function moveCatTowardMouse() { const moves = getValidMoves(cat.node); if (moves.includes(mouse.node)) { cat.node = mouse.node; } else if (moves.length > 0) { cat.node = moves[Math.floor(Math.random() * moves.length)]; } } function isMouseTrapped() { const moves = getValidMoves(mouse.node); return moves.length === 1 && moves[0] === 'center' && cat.node === 'center'; } function updateGame(mouseMoved = false) { drawNodes(); if (mouse.node === cat.node) { alert(`Final score: ${score}. Cat caught the mouse! Restarting game.`); resetGame(); } else if (isMouseTrapped()) { alert('Mouse is trapped! Cat wins! Restarting game.'); resetGame(); } else if (mouseMoved) { setTimeout(() => { moveCatTowardMouse(); updateGame(); }, 500); } } canvas.addEventListener('click', handleClick); canvas.addEventListener('touchstart', function(e) { // Prevent simulated mouse event e.preventDefault(); const touch = e.touches[0]; handleClick({ clientX: touch.clientX, clientY: touch.clientY }); }, { passive: false }); window.addEventListener('resize', () => { resetGame(); }); document.addEventListener('DOMContentLoaded', () => { resetGame(); // ✅ wait for layout before sizing canvas }); </script> </div>