当前位置：首页 > news >正文

像素风球球大作战 HTML 游戏

news 2025/8/21 3:16:38

像素风球球大作战 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>

游戏说明

这个像素风球球大作战是一个简单的 HTML5 游戏，灵感来自流行的 .io 类游戏。以下是游戏的主要特点：

游戏目标：控制你的球球吃掉小点点和其他较小的球球来成长，同时避免被更大的球球吃掉。
控制方式：使用鼠标移动来控制你的球球。
游戏机制：
- 吃掉彩色小点点可以缓慢增长
- 吃掉比你小的敌人可以快速成长
- 碰到比你大的敌人会导致游戏结束
- 你的球球越大，移动速度越慢
像素风效果：通过 image-rendering: pixelated 和圆形的粗糙边缘渲染实现像素风格。

像素风球球大作战 HTML 游戏

像素风球球大作战 HTML 游戏

游戏说明

相关参考链接

相关文章：