纯js实现游戏加农炮

项目简介

这是一个使用 HTML、CSS 和 jQuery 开发的简单射击html" title=游戏>游戏。以下是项目的详细描述：
项目名称：加农炮气球射击html" title=游戏>游戏
技术栈：
HTML5
CSS3
jQuery 3.6.0
html" title=游戏>游戏特点：
简单易上手：只需点击鼠标即可操作，适合所有年龄段玩家
即时反馈：击中气球有分数反馈，html" title=游戏>游戏结束时显示最终得分
持续挑战：气球会持续生成，难度逐渐提升
响应式设计：html" title=游戏>游戏界面居中显示，适应不同屏幕尺寸

核心功能

加农炮射击

固定位置的加农炮
点击屏幕发射子弹
子弹按照点击方向运动

气球系统

定时从右侧生成气球
气球匀速向左移动
碰撞检测系统

计分系统

击中气球得10分
实时显示当前得分
html" title=游戏>游戏结束显示最终得分

html" title=游戏>游戏控制

html" title=游戏>游戏开始/重新开始功能
html" title=游戏>游戏结束条件判定
状态管理系统

项目展示

代码展示

代码文件

html"><!DOCTYPE html>
<html>
<head><title>加农炮html" 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>html" title=游戏>游戏说明</h2><ul><li>点击屏幕任意位置发射炮弹</li><li>炮弹会朝着点击位置发射</li><li>击中蓝色气球可得10分</li><li>不要让气球碰到左边界</li><li>气球碰到左边界html" title=游戏>游戏结束</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>html" title=游戏>游戏结束！</h2><p>最终得分：<span class="final-score">0</span></p><button onclick="restartGame()">重新开始</button></div><script src="https://code.html" title=jquery>jquery.com/html" title=jquery>jquery-3.6.0.min.js"></script><script>html" title=javascript>javascript">$(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();};// 初始化html" title=游戏>游戏startGame();// 子弹碰撞检测优化$('#gameArea').on('click', function(e) {if (!gameActive) return;const $bullet = $('<div class="bullet"></div>');const cannonPos = $('.cannon').position();const gameAreaOffset = $('#gameArea').offset();// 计算鼠标点击在html" title=游戏>游戏区域内的相对位置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);// 计算炮弹角度（使用html" title=游戏>游戏区域内的相对坐标）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>