如何制作一个射击游戏（干死我了）
2023-09-14 21:21:57
发布于：江苏
184阅读
0回复
0点赞
1.新建一个txt文件
2.将以下代码复制到文本中：
<!DOCTYPE html>
<html>
<head>
<title>飞机大战游戏</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #f1f1f1;
overflow: hidden;
}
canvas {
display: block;
}
#score {
position: absolute;
top: 10px;
left: 10px;
font-size: 24px;
color: #000;
z-index: 1;
}
</style>
</head>
<body>
<canvas id="game" width="500" height="500"></canvas>
<div id="score"></div>
<script>
// 获取画布和上下文
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
// 获取计分元素
const scoreElement = document.getElementById('score');
// 设置游戏状态
let gameOver = false;
// 设置初始计分
let score = 0;
// 创建玩家飞机对象
const player = {
x: canvas.width / 2 - 25,
y: canvas.height - 100,
width: 50,
height: 100,
color: '#000',
isShooting: false,
bullets: []
}
// 监听鼠标移动事件
canvas.addEventListener('mousemove', movePlayer);
// 监听鼠标点击事件
canvas.addEventListener('mousedown', shoot);
function movePlayer(e) {
const rect = canvas.getBoundingClientRect();
const offsetX = e.clientX - rect.left;
const offsetY = e.clientY - rect.top;
// 扩大飞机移动范围
const margin = 50;
const minX = margin;
const maxX = canvas.width - player.width - margin;
const minY = margin;
const maxY = canvas.height - player.height - margin;
player.x = Math.min(Math.max(offsetX - player.width / 2, minX), maxX);
player.y = Math.min(Math.max(offsetY - player.height / 2, minY), maxY);
}
function shoot() {
player.isShooting = true;
const bullet = {
x: player.x + player.width / 2,
y: player.y,
width: 5,
height: 10,
color: '#00f',
speed: 5
}
player.bullets.push(bullet);
}
function updateBullets() {
for (let i = 0; i < player.bullets.length; i++) {
const bullet = player.bullets[i];
bullet.y -= bullet.speed;
if (bullet.y < 0) {
player.bullets.splice(i, 1);
i--;
} else {
drawRect(bullet.x, bullet.y, bullet.width, bullet.height, bullet.color);
}
}
}
// 创建敌机对象
const enemy = {
x: Math.random() * (canvas.width - 50),
y: 0,
width: 50,
height: 50,
color: '#f00',
speed: 1,
direction: 1
}
// 更新游戏画面
function update() {
// 清除画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制玩家飞机
drawRect(player.x, player.y, player.width, player.height, player.color);
// 绘制敌机
drawRect(enemy.x, enemy.y, enemy.width, enemy.height, enemy.color);
// 绘制子弹
updateBullets();
// 更新敌机的位置
enemy.x += enemy.speed * enemy.direction;
enemy.y += enemy.speed;
// 敌机碰壁时改变方向
if (enemy.x < 0 || enemy.x > canvas.width - enemy.width) {
enemy.direction *= -1;
}
// 敌机超出画布底部时重新生成
if (enemy.y > canvas.height) {
enemy.x = Math.random() * (canvas.width - enemy.width);
enemy.y = 0;
score += 10; // 每次敌机重新生成时，计分加10
}
// 碰撞检测
if (colliding(player, enemy)) {
gameOver = true;
}
// 检测子弹与敌机碰撞
for (let i = 0; i < player.bullets.length; i++) {
const bullet = player.bullets[i];
if (colliding(bullet, enemy)) {
player.bullets.splice(i, 1);
i--;
enemy.x = Math.random() * (canvas.width - enemy.width);
enemy.y = 0;
score += 1; // 每次击中敌机时，计分加1
}
}
// 更新计分文本
scoreElement.innerText = `Score: ${score}`;
if (!gameOver) {
requestAnimationFrame(update);
} else {
gameOverScreen();
}
}
// 绘制矩形
function drawRect(x, y, width, height, color) {
ctx.fillStyle = color;
ctx.fillRect(x, y, width, height);
}
// 碰撞检测
function colliding(rect1, rect2) {
return rect1.x < rect2.x + rect2.width &&
rect1.x + rect1.width > rect2.x &&
rect1.y < rect2.y + rect2.height &&
rect1.y + rect1.height > rect2.y;
}
// 游戏结束时显示信息
function gameOverScreen() {
ctx.font = '48px Arial';
ctx.fillStyle = '#000';
ctx.fillText('游戏结束', canvas.width / 2 - 100, canvas.height / 2);
}
// 启动游戏
update();
</script>
</body>
</html>
3.将文件后缀改为.HTML
这个射击游戏需要你操控角色来打敌人，鼠标移动，按下鼠标发射子弹
有帮助，赞一个