像素风球球大作战 HTML 游戏
下面是一个简单的像素风格球球大作战 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和圆形的粗糙边缘渲染实现像素风格。
相关参考链接
-
HTML5 Canvas 教程 - MDN Web Docs
- Mozilla 开发者网络提供的 Canvas 教程，是学习 HTML5 游戏开发的基础资源。
-
- 关于如何设计像素风格游戏的指南，包括视觉风格和设计原则。
-
- GitHub 上的一个开源 .io 类游戏项目，可以帮助理解这类游戏的核心机制。
- GitHub 上的一个开源 .io 类游戏项目，可以帮助理解这类游戏的核心机制。
这个游戏可以进一步扩展，比如添加多人游戏功能、更多类型的食物和敌人、技能系统等。当前的实现提供了一个基础框架，你可以根据需要继续开发。