项目简介
这是一个使用 HTML、CSS 和 jQuery 开发的简单射击游戏。以下是项目的详细描述：
项目名称：加农炮气球射击游戏
技术栈：
HTML5
CSS3
jQuery 3.6.0
游戏特点：
简单易上手：只需点击鼠标即可操作，适合所有年龄段玩家
即时反馈：击中气球有分数反馈，游戏结束时显示最终得分
持续挑战：气球会持续生成，难度逐渐提升
响应式设计：游戏界面居中显示，适应不同屏幕尺寸
核心功能
- 加农炮射击
- 固定位置的加农炮
- 点击屏幕发射子弹
- 子弹按照点击方向运动
气球系统
- 定时从右侧生成气球
- 气球匀速向左移动
- 碰撞检测系统
计分系统
- 击中气球得10分
- 实时显示当前得分
- 游戏结束显示最终得分
游戏控制
- 游戏开始/重新开始功能
- 游戏结束条件判定
- 状态管理系统
项目展示
代码展示
代码文件
<!DOCTYPE html>
<html>
<head>
<title>加农炮游戏</title>
<style>
body {
display: flex;
justify-content: center;
align-items: flex-start;
min-height: 100vh;
margin: 0;
padding: 20px;
background: #f5f5f5;
font-family: Arial, sans-serif;
}
.container {
display: flex;
gap: 20px;
max-width: 1200px;
}
.game-instructions {
width: 250px;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.game-instructions h2 {
color: #333;
margin-top: 0;
}
.game-instructions ul {
padding-left: 20px;
line-height: 1.6;
}
.game-wrapper {
text-align: center;
}
#gameArea {
width: 800px;
height: 600px;
border: 2px solid black;
position: relative;
overflow: hidden;
background: #f0f0f0;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
#score {
margin-top: 10px;
font-size: 20px;
font-weight: bold;
}
.cannon {
width: 50px;
height: 50px;
background: #333;
position: absolute;
bottom: 20px;
left: 20px;
border-radius: 25px;
}
.bullet {
width: 10px;
height: 10px;
background: #000;
position: absolute;
border-radius: 5px;
}
.balloon {
width: 30px;
height: 40px;
background: #0066ff;
position: absolute;
border-radius: 15px;
}
.game-over {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 20px;
border: 2px solid #333;
text-align: center;
z-index: 1000;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.game-over button {
margin-top: 10px;
padding: 8px 20px;
cursor: pointer;
background: #0066ff;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
}
.game-over button:hover {
background: #0052cc;
}
</style>
</head>
<body>
<div class="container">
<div class="game-instructions">
<h2>游戏说明</h2>
<ul>
<li>点击屏幕任意位置发射炮弹</li>
<li>炮弹会朝着点击位置发射</li>
<li>击中蓝色气球可得10分</li>
<li>不要让气球碰到左边界</li>
<li>气球碰到左边界游戏结束</li>
</ul>
<h2>操作方法</h2>
<ul>
<li>使用鼠标点击进行射击</li>
<li>瞄准气球的运动轨迹</li>
<li>预判气球的位置进行射击</li>
</ul>
</div>
<div class="game-wrapper">
<div id="gameArea">
<div class="cannon"></div>
</div>
<div id="score">得分：<span>0</span></div>
</div>
</div>
<div class="game-over">
<h2>游戏结束！</h2>
<p>最终得分：<span class="final-score">0</span></p>
<button onclick="restartGame()">重新开始</button>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
let score = 0;
let gameActive = true;
let balloonInterval;
function createBalloon() {
if (!gameActive) return;
const $balloon = $('<div class="balloon"></div>');
const startY = Math.random() * 400;
const gameWidth = $('#gameArea').width();
$balloon.css({
left: gameWidth, // 改用 left 属性来控制位置
top: startY
});
$('#gameArea').append($balloon);
let currentLeft = gameWidth;
const moveSpeed = 2; // 控制气球移动速度
const moveBalloon = setInterval(function() {
if (!gameActive) {
clearInterval(moveBalloon);
return;
}
currentLeft -= moveSpeed;
$balloon.css('left', currentLeft);
// 检查是否触碰左边界
if (currentLeft <= 0) {
clearInterval(moveBalloon);
gameOver();
return;
}
// 检查气球是否被移除（比如被子弹击中）
if (!$.contains(document, $balloon[0])) {
clearInterval(moveBalloon);
return;
}
}, 16); // 约60fps的更新频率
}
function startGame() {
gameActive = true;
score = 0;
$('#score span').text(score);
// 清除所有现有的气球和定时器
$('.balloon').remove();
if (balloonInterval) {
clearInterval(balloonInterval);
}
// 开始定期创建气球
balloonInterval = setInterval(function() {
if (gameActive) {
createBalloon();
}
}, 2000);
}
function gameOver() {
gameActive = false;
$('.final-score').text(score);
$('.game-over').show();
// 清除所有定时器和气球
clearInterval(balloonInterval);
$('.balloon').stop();
}
window.restartGame = function() {
$('.game-over').hide();
startGame();
};
// 初始化游戏
startGame();
// 子弹碰撞检测优化
$('#gameArea').on('click', function(e) {
if (!gameActive) return;
const $bullet = $('<div class="bullet"></div>');
const cannonPos = $('.cannon').position();
const gameAreaOffset = $('#gameArea').offset();
// 计算鼠标点击在游戏区域内的相对位置
const clickX = e.pageX - gameAreaOffset.left;
const clickY = e.pageY - gameAreaOffset.top;
$bullet.css({
left: cannonPos.left + 25,
top: cannonPos.top + 25
});
$('#gameArea').append($bullet);
// 计算炮弹角度（使用游戏区域内的相对坐标）
const angle = Math.atan2(
clickY - (cannonPos.top + 25),
clickX - (cannonPos.left + 25)
);
// 调整炮弹速度和移动逻辑
const speed = 15; // 增加速度使射击更流畅
const vx = Math.cos(angle) * speed;
const vy = Math.sin(angle) * speed;
const bulletInterval = setInterval(function() {
if (!gameActive) {
clearInterval(bulletInterval);
$bullet.remove();
return;
}
const pos = $bullet.position();
const newLeft = pos.left + vx;
const newTop = pos.top + vy;
$bullet.css({
left: newLeft,
top: newTop
});
// 检测碰撞
$('.balloon').each(function() {
const $balloon = $(this);
if ($balloon.length && isColliding($bullet, $balloon)) {
$balloon.remove();
$bullet.remove();
clearInterval(bulletInterval);
score += 10;
$('#score span').text(score);
}
});
// 移除超出边界的炮弹
if (newLeft < 0 || newLeft > 800 ||
newTop < 0 || newTop > 600) {
$bullet.remove();
clearInterval(bulletInterval);
}
}, 16);
});
// 碰撞检测
function isColliding($div1, $div2) {
const rect1 = $div1[0].getBoundingClientRect();
const rect2 = $div2[0].getBoundingClientRect();
return !(rect1.right < rect2.left ||
rect1.left > rect2.right ||
rect1.bottom < rect2.top ||
rect1.top > rect2.bottom);
}
});
</script>
</body>
</html>
总结
这个项目适合作为前端开发学习案例，展示了如何使用基础的 Web 技术实现一个互动性强的小游戏。