|
<!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> |
