Meta Description" name="description" />
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Neon Defender Pro</title>
<style>
body { margin: 0; overflow: hidden; background: #050505; font-family: 'Segoe UI', sans-serif; }
canvas { display: block; touch-action: none; }
#ui {
position: absolute; top: 10px; left: 10px; color: #0f0;
font-size: 20px; text-shadow: 0 0 5px #0f0; pointer-events: none;
}
</style>
</head>
<body>
<div id="ui">Score: 0 | High: <span id="high">0</span></div>
<canvas id="gameCanvas"></canvas>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const ui = document.getElementById('ui');
const highDisplay = document.getElementById('high');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let score = 0;
let highScore = localStorage.getItem('neonHigh') || 0;
highDisplay.innerText = highScore;
let gameActive = true;
let turretX = canvas.width / 2;
const bullets = [];
const enemies = [];
const particles = [];
function animate() {
if (!gameActive) return;
// Motion Blur Background
ctx.fillStyle = 'rgba(5, 5, 5, 0.3)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 1. Spawn Enemies (Faster as score increases)
if (Math.random() < 0.02 + (score / 2000)) {
enemies.push({
x: Math.random() * (canvas.width - 30),
y: -30,
size: 25 + Math.random() * 15,
speed: 2 + (score / 15)
});
}
// 2. Update/Draw Bullets
ctx.shadowBlur = 10;
ctx.shadowColor = '#0ff';
ctx.fillStyle = '#0ff';
for (let i = bullets.length - 1; i >= 0; i--) {
bullets[i].y -= 12;
ctx.fillRect(bullets[i].x - 2, bullets[i].y, 4, 15);
if (bullets[i].y < 0) bullets.splice(i, 1);
}
// 3. Update/Draw Enemies
ctx.shadowBlur = 15;
ctx.shadowColor = '#f0f';
ctx.fillStyle = '#f0f';
for (let i = enemies.length - 1; i >= 0; i--) {
enemies[i].y += enemies[i].speed;
ctx.fillRect(enemies[i].x, enemies[i].y, enemies[i].size, enemies[i].size);
// Collision Detection
for (let j = bullets.length - 1; j >= 0; j--) {
if (bullets[j] && bullets[j].x > enemies[i].x &&
bullets[j].x < enemies[i].x + enemies[i].size &&
bullets[j].y < enemies[i].y + enemies[i].size &&
bullets[j].y > enemies[i].y) {
createParticles(enemies[i].x + enemies[i].size/2, enemies[i].y + enemies[i].size/2);
enemies.splice(i, 1);
bullets.splice(j, 1);
score++;
ui.childNodes[0].nodeValue = `Score: ${score} | High: `;
break;
}
}
// Game Over
if (enemies[i] && enemies[i].y > canvas.height) {
endGame();
}
}
//1
1
4KB
4KB
273.0ms
380.0ms
284.0ms