|
|
非常高兴听到你对初步效果感到满意！如果你想要用本地的小图标图片来代替原来的方块，需要在JavaScript中进行修改，因为飞机对象是通过JS绘制的。
以下是如何修改代码以使用图片代替方块作为飞机的步骤：
### 1. 准备图片：
- 假设你的飞机图片名为 `player.png`，放在与你的HTML文件相同的目录下。
### 2. 修改JavaScript代码：
- 加载图片并在绘制时使用它。
### 更新后的代码：
#### HTML（index.html）部分保持不变：
飞机大战
飞机大战
#### CSS（style.css）部分保持不变：
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #000;
color: #fff;
font-family: Arial, sans-serif;
}
h1 {
margin-bottom: 20px;
}
canvas {
border: 1px solid #fff;
}
#### JavaScript（script.js）部分更新：
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const playerWidth = 50;
const playerHeight = 50;
let playerX = (canvas.width - playerWidth) / 2;
let playerY = canvas.height - playerHeight - 10;
const playerSpeed = 7;
let bullets = [];
let enemies = [];
let score = 0;
// 加载飞机图片
const playerImage = new Image();
playerImage.src = 'player.png';
document.addEventListener('keydown', movePlayer);
document.addEventListener('keydown', shootBullet);
function movePlayer(e) {
if (e.key === 'ArrowLeft' && playerX > 0) {
playerX -= playerSpeed;
}
if (e.key === 'ArrowRight' && playerX < canvas.width - playerWidth) {
playerX += playerSpeed;
}
}
function shootBullet(e) {
if (e.key === ' ') {
bullets.push({ x: playerX + playerWidth / 2 - 2.5, y: playerY, speed: 10 });
}
}
function drawPlayer() {
ctx.drawImage(playerImage, playerX, playerY, playerWidth, playerHeight);
}
function drawBullets() {
ctx.fillStyle = '#ff0';
bullets.forEach((bullet, index) => {
bullet.y -= bullet.speed;
ctx.fillRect(bullet.x, bullet.y, 5, 15);
if (bullet.y < 0) {
bullets.splice(index, 1);
}
});
}
function drawEnemies() {
ctx.fillStyle = '#f00';
enemies.forEach((enemy, index) => {
enemy.y += enemy.speed;
ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
if (enemy.y > canvas.height) {
enemies.splice(index, 1);
}
});
}
function generateEnemies() {
if (Math.random() < 0.02) {
const x = Math.random() * (canvas.width - playerWidth);
enemies.push({ x: x, y: 0, width: 50, height: 50, speed: 3 });
}
}
function detectCollisions() {
bullets.forEach((bullet, bIndex) => {
enemies.forEach((enemy, eIndex) => {
if (bullet.x > enemy.x && bullet.x < enemy.x + enemy.width &&
bullet.y > enemy.y && bullet.y < enemy.y + enemy.height) {
score += 10;
bullets.splice(bIndex, 1);
enemies.splice(eIndex, 1);
}
});
});
enemies.forEach(enemy => {
if (playerX < enemy.x + enemy.width &&
playerX + playerWidth > enemy.x &&
playerY < enemy.y + enemy.height &&
playerY + playerHeight > enemy.y) {
gameOver();
}
});
}
function gameOver() {
alert(`Game Over! Your score is ${score}`);
document.location.reload();
}
function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawPlayer();
drawBullets();
drawEnemies();
detectCollisions();
generateEnemies();
requestAnimationFrame(update);
}
update();
### 解释：
1. **加载飞机图片**：
- 使用 `new Image()` 创建一个新的图片对象，并将 `src` 属性设置为图片路径。
- const playerImage = new Image();
- playerImage.src = 'player.png';
2. **在 `drawPlayer` 函数中使用 `drawImage` 方法绘制飞机**：
- 用 `ctx.drawImage()` 方法替代 `fillRect` 方法来绘制飞机。
- function drawPlayer() {
- ctx.drawImage(playerImage, playerX, playerY, playerWidth, playerHeight);
- }
完成这些修改后，你的游戏中的玩家飞机将显示为你指定的图片，而不是一个方块。确保图片文件 `player.png` 存在于你的项目目录中并且路径正确。你可以用相同的方式替换敌人的方块或子弹外观。
如果你有任何其他问题或需要进一步的说明，请告诉我！ |
|
发表于 2024-7-14 09:12:41
发表于 2024-7-14 09:13:00
楼主