像素風球球大作戰 HTML 游戲

下面是一個簡單的像素風格球球大作戰 HTML 游戲代碼：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>像素風球球大作戰</title><style>body {margin: 0;overflow: hidden;background-color: #222;font-family: 'Courier New', monospace;text-align: center;color: white;}canvas {display: block;margin: 0 auto;background-color: #333;image-rendering: pixelated;image-rendering: crisp-edges;}#gameInfo {position: absolute;top: 10px;left: 10px;color: white;font-size: 16px;}#startScreen {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.7);display: flex;flex-direction: column;justify-content: center;align-items: center;}button {background-color: #4CAF50;border: none;color: white;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 10px 2px;cursor: pointer;border-radius: 5px;}</style>
</head>
<body><div id="gameInfo">分數: <span id="score">0</span> | 大小: <span id="size">10</span></div><canvas id="gameCanvas"></canvas><div id="startScreen"><h1>像素風球球大作戰</h1><p>使用鼠標移動你的球球，吃掉小點點變大，避開比你大的球球！</p><button id="startButton">開始游戲</button></div><script>const canvas = document.getElementById('gameCanvas');const ctx = canvas.getContext('2d');const scoreElement = document.getElementById('score');const sizeElement = document.getElementById('size');const startScreen = document.getElementById('startScreen');const startButton = document.getElementById('startButton');// 設置畫布大小canvas.width = window.innerWidth;canvas.height = window.innerHeight;// 游戲變量let score = 0;let gameRunning = false;let player = {x: canvas.width / 2,y: canvas.height / 2,radius: 10,color: '#4CAF50'};let dots = [];let enemies = [];let mouseX = player.x;let mouseY = player.y;// 初始化游戲function initGame() {score = 0;player.radius = 10;dots = [];enemies = [];// 創建小點點for (let i = 0; i < 50; i++) {createDot();}// 創建敵人for (let i = 0; i < 5; i++) {createEnemy();}gameRunning = true;startScreen.style.display = 'none';updateGameInfo();gameLoop();}// 創建小點點function createDot() {dots.push({x: Math.random() * canvas.width,y: Math.random() * canvas.height,radius: 5,color: getRandomColor()});}// 創建敵人function createEnemy() {const radius = Math.random() * 20 + 15;enemies.push({x: Math.random() * canvas.width,y: Math.random() * canvas.height,radius: radius,color: getRandomColor(),speed: 50 / radius,dx: (Math.random() - 0.5) * 2,dy: (Math.random() - 0.5) * 2});}// 獲取隨機顏色function getRandomColor() {const colors = ['#FF5252', '#FFEB3B', '#4CAF50', '#2196F3', '#9C27B0', '#FF9800'];return colors[Math.floor(Math.random() * colors.length)];}// 更新游戲信息function updateGameInfo() {scoreElement.textContent = score;sizeElement.textContent = Math.floor(player.radius);}// 游戲主循環function gameLoop() {if (!gameRunning) return;// 清空畫布ctx.clearRect(0, 0, canvas.width, canvas.height);// 更新玩家位置const dx = mouseX - player.x;const dy = mouseY - player.y;const distance = Math.sqrt(dx * dx + dy * dy);const speed = 200 / player.radius;if (distance > 5) {player.x += dx / distance * speed;player.y += dy / distance * speed;}// 繪制玩家drawPixelCircle(player.x, player.y, player.radius, player.color);// 更新和繪制小點點for (let i = dots.length - 1; i >= 0; i--) {const dot = dots[i];drawPixelCircle(dot.x, dot.y, dot.radius, dot.color);// 檢測碰撞if (checkCollision(player, dot)) {player.radius += 0.5;score += 1;dots.splice(i, 1);createDot();updateGameInfo();}}// 更新和繪制敵人for (let i = enemies.length - 1; i >= 0; i--) {const enemy = enemies[i];// 敵人移動enemy.x += enemy.dx * enemy.speed;enemy.y += enemy.dy * enemy.speed;// 邊界檢測if (enemy.x < enemy.radius || enemy.x > canvas.width - enemy.radius) {enemy.dx *= -1;}if (enemy.y < enemy.radius || enemy.y > canvas.height - enemy.radius) {enemy.dy *= -1;}drawPixelCircle(enemy.x, enemy.y, enemy.radius, enemy.color);// 檢測碰撞if (checkCollision(player, enemy)) {if (player.radius > enemy.radius * 0.8) {// 玩家吃掉敵人player.radius += enemy.radius * 0.2;score += Math.floor(enemy.radius);enemies.splice(i, 1);createEnemy();updateGameInfo();} else {// 游戲結束gameOver();}}}requestAnimationFrame(gameLoop);}// 檢測碰撞function checkCollision(circle1, circle2) {const dx = circle1.x - circle2.x;const dy = circle1.y - circle2.y;const distance = Math.sqrt(dx * dx + dy * dy);return distance < circle1.radius + circle2.radius;}// 繪制像素風圓形function drawPixelCircle(x, y, radius, color) {ctx.fillStyle = color;// 為了像素風效果，我們將坐標和半徑取整const pixelX = Math.floor(x);const pixelY = Math.floor(y);const pixelRadius = Math.floor(radius);ctx.beginPath();ctx.arc(pixelX, pixelY, pixelRadius, 0, Math.PI * 2);ctx.fill();// 添加像素風格的邊緣ctx.strokeStyle = '#000';ctx.lineWidth = 1;ctx.stroke();}// 游戲結束function gameOver() {gameRunning = false;startScreen.style.display = 'flex';document.querySelector('#startScreen h1').textContent = '游戲結束!';document.querySelector('#startScreen p').textContent = `你的最終分數: ${score}，大小: ${Math.floor(player.radius)}`;startButton.textContent = '再玩一次';}// 事件監聽canvas.addEventListener('mousemove', (e) => {mouseX = e.clientX;mouseY = e.clientY;});startButton.addEventListener('click', initGame);// 窗口大小改變時調整畫布window.addEventListener('resize', () => {canvas.width = window.innerWidth;canvas.height = window.innerHeight;});</script>
</body>
</html>