Untitled
unknown
plain_text
a month ago
5.8 kB
2
Indexable
<!DOCTYPE html> <html> <head> <title>Dog Chase Runner</title> <style> canvas { border: 1px solid black; display: block; margin: 0 auto; max-width: 100%; } body { background: #f0f0f0; margin: 0; padding: 0; overflow: hidden; } </style> </head> <body> <canvas id="gameCanvas"></canvas> <script> const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); // Set canvas size for mobile canvas.width = Math.min(360, window.innerWidth); canvas.height = Math.min(640, window.innerHeight); // Game objects const player = { x: canvas.width / 2 - 20, y: canvas.height - 100, width: 40, height: 60, speed: 5, jumping: false, jumpHeight: 150, yVelocity: 0 }; const dog = { x: canvas.width / 2 - 25, y: canvas.height - 40, width: 50, height: 30, speed: 3 }; const obstacles = []; let score = 0; let gameOver = false; // Controls let leftPressed = false; let rightPressed = false; // Generate obstacles function createObstacle() { const width = Math.random() * 50 + 30; obstacles.push({ x: Math.random() * (canvas.width - width), y: -50, width: width, height: 30, speed: 3 }); } // Jump mechanics function jump() { if (!player.jumping) { player.jumping = true; player.yVelocity = -15; } } // Touch controls for mobile canvas.addEventListener('touchstart', (e) => { const touchX = e.touches[0].clientX - canvas.offsetLeft; if (touchX < canvas.width / 3) leftPressed = true; else if (touchX > canvas.width * 2 / 3) rightPressed = true; else jump(); }); canvas.addEventListener('touchend', () => { leftPressed = false; rightPressed = false; }); // Game loop function update() { if (gameOver) return; // Player movement if (leftPressed && player.x > 0) player.x -= player.speed; if (rightPressed && player.x < canvas.width - player.width) { player.x += player.speed; } // Jump physics if (player.jumping) { player.y += player.yVelocity; player.yVelocity += 0.8; // Gravity if (player.y >= canvas.height - 100) { player.y = canvas.height - 100; player.jumping = false; player.yVelocity = 0; } } // Dog follows player if (dog.x < player.x) dog.x += dog.speed; if (dog.x > player.x) dog.x -= dog.speed; // Obstacle movement and collision obstacles.forEach((obs, index) => { obs.y += obs.speed; if (obs.y > canvas.height) obstacles.splice(index, 1); // Collision detection if (player.x < obs.x + obs.width && player.x + player.width > obs.x && player.y < obs.y + obs.height && player.y + player.height > obs.y) { gameOver = true; } }); // Dog collision if (player.x < dog.x + dog.width && player.x + player.width > dog.x && player.y < dog.y + dog.height && player.y + player.height > dog.y) { gameOver = true; } // Score and obstacle generation score++; if (Math.random() < 0.02) createObstacle(); } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); // Draw ground ctx.fillStyle = '#666'; ctx.fillRect(0, canvas.height - 40, canvas.width, 40); // Draw player (chubby brunette boy) ctx.fillStyle = '#8B4513'; // Brown hair ctx.fillRect(player.x + 10, player.y - 10, 20, 20); ctx.fillStyle = '#FFDAB9'; // Skin ctx.fillRect(player.x + 5, player.y, 30, 30); ctx.fillStyle = '#0000FF'; // Blue shirt ctx.fillRect(player.x, player.y + 30, 40, 30); // Draw dog ctx.fillStyle = '#8B4513'; ctx.fillRect(dog.x, dog.y, dog.width, dog.height); ctx.fillStyle = '#000'; ctx.fillRect(dog.x, dog.y, 10, 10); // Nose // Draw obstacles ctx.fillStyle = '#FF0000'; obstacles.forEach(obs => { ctx.fillRect(obs.x, obs.y, obs.width, obs.height); }); // Draw score ctx.fillStyle = '#000'; ctx.font = '20px Arial'; ctx.fillText(`Score: ${score}`, 10, 30); if (gameOver) { ctx.fillStyle = 'rgba(0, 0, 0, 0.7)'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = '#FFF'; ctx.font = '40px Arial'; ctx.fillText('Game Over!', canvas.width/2 - 100, canvas.height/2); } } function gameLoop() { update(); draw(); requestAnimationFrame(gameLoop); } // Start game gameLoop(); </script> </body> </html>
Editor is loading...
Leave a Comment