| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Fortress Game</title> |
| <style> |
| body { |
| margin: 0; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| min-height: 100vh; |
| background: #1a1a1a; |
| } |
| |
| #gameCanvas { |
| background: #000; |
| border: 2px solid #444; |
| } |
| |
| .controls { |
| position: fixed; |
| bottom: 20px; |
| display: flex; |
| gap: 10px; |
| } |
| |
| button { |
| padding: 10px 20px; |
| font-size: 16px; |
| cursor: pointer; |
| background: #444; |
| color: white; |
| border: none; |
| border-radius: 4px; |
| } |
| |
| button:hover { |
| background: #555; |
| } |
| |
| #power { |
| color: white; |
| position: fixed; |
| top: 20px; |
| left: 20px; |
| } |
| |
| #angle { |
| color: white; |
| position: fixed; |
| top: 50px; |
| left: 20px; |
| } |
| </style> |
| </head> |
| <body> |
| <canvas id="gameCanvas" width="800" height="600"></canvas> |
| <div id="power">Power: 50</div> |
| <div id="angle">Angle: 45°</div> |
| <div class="controls"> |
| <button id="powerDown">Power -</button> |
| <button id="powerUp">Power +</button> |
| <button id="angleDown">Angle -</button> |
| <button id="angleUp">Angle +</button> |
| <button id="fire">FIRE!</button> |
| </div> |
|
|
| <script> |
| const canvas = document.getElementById('gameCanvas'); |
| const ctx = canvas.getContext('2d'); |
| const powerDisplay = document.getElementById('power'); |
| const angleDisplay = document.getElementById('angle'); |
| |
| let power = 50; |
| let angle = 45; |
| let projectiles = []; |
| let targets = []; |
| let isGameOver = false; |
| |
| |
| const tank = { |
| x: 50, |
| y: canvas.height - 30, |
| width: 40, |
| height: 20, |
| barrelLength: 30 |
| }; |
| |
| |
| for(let i = 0; i < 3; i++) { |
| targets.push({ |
| x: Math.random() * (canvas.width - 200) + 400, |
| y: canvas.height - 30, |
| width: 30, |
| height: 30, |
| isHit: false |
| }); |
| } |
| |
| function drawTank() { |
| ctx.fillStyle = '#4a4'; |
| ctx.fillRect(tank.x, tank.y, tank.width, tank.height); |
| |
| |
| ctx.beginPath(); |
| ctx.strokeStyle = '#4a4'; |
| ctx.lineWidth = 5; |
| const radians = angle * Math.PI / 180; |
| ctx.moveTo(tank.x + tank.width/2, tank.y); |
| ctx.lineTo( |
| tank.x + tank.width/2 + Math.cos(radians) * tank.barrelLength, |
| tank.y - Math.sin(radians) * tank.barrelLength |
| ); |
| ctx.stroke(); |
| } |
| |
| function drawTargets() { |
| targets.forEach(target => { |
| if(!target.isHit) { |
| ctx.fillStyle = '#a44'; |
| ctx.fillRect(target.x, target.y, target.width, target.height); |
| } |
| }); |
| } |
| |
| function fire() { |
| const radians = angle * Math.PI / 180; |
| projectiles.push({ |
| x: tank.x + tank.width/2 + Math.cos(radians) * tank.barrelLength, |
| y: tank.y - Math.sin(radians) * tank.barrelLength, |
| vx: Math.cos(radians) * power / 10, |
| vy: -Math.sin(radians) * power / 10 |
| }); |
| } |
| |
| function update() { |
| ctx.clearRect(0, 0, canvas.width, canvas.height); |
| |
| drawTank(); |
| drawTargets(); |
| |
| |
| projectiles.forEach((proj, index) => { |
| proj.x += proj.vx; |
| proj.y += proj.vy; |
| proj.vy += 0.2; |
| |
| ctx.beginPath(); |
| ctx.arc(proj.x, proj.y, 3, 0, Math.PI * 2); |
| ctx.fillStyle = '#fff'; |
| ctx.fill(); |
| |
| |
| targets.forEach(target => { |
| if(!target.isHit && |
| proj.x > target.x && |
| proj.x < target.x + target.width && |
| proj.y > target.y && |
| proj.y < target.y + target.height) { |
| target.isHit = true; |
| projectiles.splice(index, 1); |
| } |
| }); |
| |
| |
| if(proj.y > canvas.height || proj.x > canvas.width) { |
| projectiles.splice(index, 1); |
| } |
| }); |
| |
| |
| if(targets.every(target => target.isHit)) { |
| ctx.fillStyle = '#fff'; |
| ctx.font = '48px Arial'; |
| ctx.fillText('YOU WIN!', canvas.width/2 - 100, canvas.height/2); |
| isGameOver = true; |
| } |
| |
| if(!isGameOver) { |
| requestAnimationFrame(update); |
| } |
| } |
| |
| |
| document.getElementById('powerDown').addEventListener('click', () => { |
| if(power > 10) power -= 5; |
| powerDisplay.textContent = `Power: ${power}`; |
| }); |
| |
| document.getElementById('powerUp').addEventListener('click', () => { |
| if(power < 100) power += 5; |
| powerDisplay.textContent = `Power: ${power}`; |
| }); |
| |
| document.getElementById('angleDown').addEventListener('click', () => { |
| if(angle > 0) angle -= 5; |
| angleDisplay.textContent = `Angle: ${angle}°`; |
| }); |
| |
| document.getElementById('angleUp').addEventListener('click', () => { |
| if(angle < 90) angle += 5; |
| angleDisplay.textContent = `Angle: ${angle}°`; |
| }); |
| |
| document.getElementById('fire').addEventListener('click', fire); |
| |
| update(); |
| </script> |
| </body> |
| </html> |
