<!DOCTYPE html>
<html>
<head>
<title>像素射击游戏（简单版）</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #222;
overflow: hidden;
}
canvas {
border: 2px solid #444;
background-color: #111;
}
#gameInfo {
position: absolute;
top: 10px;
left: 10px;
color: white;
font-family: Arial, sans-serif;
}
#startScreen {
position: absolute;
color: white;
font-family: Arial, sans-serif;
text-align: center;
}
button {
padding: 10px 20px;
font-size: 16px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div id=”gameInfo”>
分数: <span id=”score”>0</span> | 生命: <span id=”lives”>3</span>
</div>
<div id=”startScreen”>
<h1>像素射击游戏（简单版）</h1>
<p>使用WASD或方向键移动，鼠标点击射击</p>
<p>消灭所有敌人获得分数</p>
<button id=”startButton”>开始游戏</button>
</div>
<canvas id=”gameCanvas” width=”600″ height=”400″></canvas>
<script>
// 游戏变量
const canvas = document.getElementById(‘gameCanvas’);
const ctx = canvas.getContext(‘2d’);
const scoreElement = document.getElementById(‘score’);
const livesElement = document.getElementById(‘lives’);
const startScreen = document.getElementById(‘startScreen’);
const startButton = document.getElementById(‘startButton’);
let score = 0;
let lives = 3;
let gameRunning = false;
let gameOver = false;
// 玩家设置
const player = {
x: canvas.width / 2,
y: canvas.height – 50,
width: 30,
height: 30,
speed: 5,
color: ‘#3498db’,
isMoving: {
up: false,
down: false,
left: false,
right: false
}
};
// 子弹数组
let bullets = [];
const bulletSpeed = 7;
const bulletSize = 5;
// 敌人数组
let enemies = [];
const enemySize = 25;
let enemySpawnRate = 60; // 帧数
let enemySpawnCounter = 0;
// 爆炸效果数组
let explosions = [];
// 控制设置
const keys = {
ArrowUp: false,
ArrowDown: false,
ArrowLeft: false,
ArrowRight: false,
w: false,
a: false,
s: false,
d: false
};
// 事件监听
window.addEventListener(‘keydown’, (e) => {
if (keys.hasOwnProperty(e.key)) {
keys[e.key] = true;
updatePlayerMovement();
}
});
window.addEventListener(‘keyup’, (e) => {
if (keys.hasOwnProperty(e.key)) {
keys[e.key] = false;
updatePlayerMovement();
}
});
canvas.addEventListener(‘click’, (e) => {
if (gameRunning && !gameOver) {
shootBullet();
}
});
startButton.addEventListener(‘click’, startGame);
// 更新玩家移动状态
function updatePlayerMovement() {
player.isMoving.up = keys.ArrowUp || keys.w;
player.isMoving.down = keys.ArrowDown || keys.s;
player.isMoving.left = keys.ArrowLeft || keys.a;
player.isMoving.right = keys.ArrowRight || keys.d;
}
// 开始游戏
function startGame() {
score = 0;
lives = 3;
bullets = [];
enemies = [];
explosions = [];
gameRunning = true;
gameOver = false;
enemySpawnRate = 60; // 重置敌人生成速率
startScreen.style.display = ‘none’;
updateScore();
updateLives();
gameLoop();
}
// 游戏主循环
function gameLoop() {
if (!gameRunning) return;
// 清除画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 更新和绘制玩家
updatePlayer();
drawPlayer();
// 更新和绘制子弹
updateBullets();
drawBullets();
// 生成和更新敌人
spawnEnemies();
updateEnemies();
drawEnemies();
// 更新和绘制爆炸效果
updateExplosions();
drawExplosions();
// 检查游戏结束
if (gameOver) {
endGame();
return;
}
// 继续游戏循环
requestAnimationFrame(gameLoop);
}
// 更新玩家位置
function updatePlayer() {
if (player.isMoving.up && player.y > 0) {
player.y -= player.speed;
}
if (player.isMoving.down && player.y < canvas.height – player.height) {
player.y += player.speed;
}
if (player.isMoving.left && player.x > 0) {
player.x -= player.speed;
}
if (player.isMoving.right && player.x < canvas.width – player.width) {
player.x += player.speed;
}
}
// 绘制玩家
function drawPlayer() {
ctx.fillStyle = player.color;
ctx.fillRect(player.x, player.y, player.width, player.height);
// 绘制炮管
ctx.fillStyle = ‘#e74c3c’;
ctx.fillRect(player.x + player.width/2 – 2, player.y – 10, 4, 10);
}
// 发射子弹
function shootBullet() {
bullets.push({
x: player.x + player.width/2 – bulletSize/2,
y: player.y – bulletSize,
width: bulletSize,
height: bulletSize,
speed: bulletSpeed
});
}
// 更新子弹位置
function updateBullets() {
for (let i = bullets.length – 1; i >= 0; i–) {
bullets[i].y -= bullets[i].speed;
// 移除超出屏幕的子弹
if (bullets[i].y < 0) {
bullets.splice(i, 1);
}
}
}
// 绘制子弹
function drawBullets() {
ctx.fillStyle = ‘#f1c40f’;
bullets.forEach(bullet => {
ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
});
}
// 生成敌人
function spawnEnemies() {
enemySpawnCounter++;
if (enemySpawnCounter >= enemySpawnRate) {
enemySpawnCounter = 0;
// 随机减少生成间隔以增加难度（比原版更慢）
if (enemySpawnRate > 30) {
enemySpawnRate -= 0.2;
}
// 在屏幕顶部随机位置生成敌人
const x = Math.random() * (canvas.width – enemySize);
enemies.push({
x: x,
y: -enemySize,
width: enemySize,
height: enemySize,
speed: 0.5 + Math.random() * 1.5, // 降低敌人移动速度
color: `hsl(${Math.random() * 360}, 70%, 50%)`
});
}
}
// 更新敌人位置
function updateEnemies() {
for (let i = enemies.length – 1; i >= 0; i–) {
enemies[i].y += enemies[i].speed;
// 检查敌人是否超出屏幕底部
if (enemies[i].y > canvas.height) {
enemies.splice(i, 1);
lives–;
updateLives();
if (lives <= 0) {
gameOver = true;
}
}
// 检查敌人与玩家碰撞
if (checkCollision(player, enemies[i])) {
enemies.splice(i, 1);
lives–;
updateLives();
createExplosion(player.x, player.y, player.width, player.height);
if (lives <= 0) {
gameOver = true;
}
}
// 检查子弹与敌人碰撞
for (let j = bullets.length – 1; j >= 0; j–) {
if (checkCollision(bullets[j], enemies[i])) {
enemies.splice(i, 1);
bullets.splice(j, 1);
score += 10;
updateScore();
createExplosion(enemies[i].x, enemies[i].y, enemies[i].width, enemies[i].height);
break;
}
}
}
}
// 绘制敌人
function drawEnemies() {
enemies.forEach(enemy => {
ctx.fillStyle = enemy.color;
ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
// 绘制敌人眼睛
ctx.fillStyle = ‘white’;
ctx.fillRect(enemy.x + 5, enemy.y + 5, 5, 5);
ctx.fillRect(enemy.x + 15, enemy.y + 5, 5, 5);
});
}
// 创建爆炸效果
function createExplosion(x, y, width, height) {
explosions.push({
x: x,
y: y,
width: width,
height: height,
particles: [],
duration: 30,
counter: 0
});
// 创建爆炸粒子
for (let i = 0; i < 20; i++) {
explosions[explosions.length – 1].particles.push({
x: x + width/2,
y: y + height/2,
size: Math.random() * 4 + 2,
color: `hsl(${Math.random() * 60 + 10}, 100%, 50%)`,
speedX: (Math.random() – 0.5) * 8,
speedY: (Math.random() – 0.5) * 8
});
}
}
// 更新爆炸效果
function updateExplosions() {
for (let i = explosions.length – 1; i >= 0; i–) {
explosions[i].counter++;
// 更新粒子位置
explosions[i].particles.forEach(particle => {
particle.x += particle.speedX;
particle.y += particle.speedY;
});
// 移除过期的爆炸效果
if (explosions[i].counter >= explosions[i].duration) {
explosions.splice(i, 1);
}
}
}
// 绘制爆炸效果
function drawExplosions() {
explosions.forEach(explosion => {
explosion.particles.forEach(particle => {
ctx.fillStyle = particle.color;
ctx.fillRect(particle.x, particle.y, particle.size, particle.size);
});
});
}
// 碰撞检测
function checkCollision(obj1, obj2) {
return obj1.x < obj2.x + obj2.width &&
obj1.x + obj1.width > obj2.x &&
obj1.y < obj2.y + obj2.height &&
obj1.y + obj1.height > obj2.y;
}
// 更新分数显示
function updateScore() {
scoreElement.textContent = score;
}
// 更新生命显示
function updateLives() {
livesElement.textContent = lives;
}
// 游戏结束
function endGame() {
gameRunning = false;
startScreen.style.display = ‘block’;
startScreen.innerHTML = `
<h1>游戏结束</h1>
<p>你的最终分数: ${score}</p>
<button id=”restartButton”>再玩一次</button>
`;
document.getElementById(‘restartButton’).addEventListener(‘click’, startGame);
}
</script>
</body>
</html>