NEON CHAOS

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>NEON CHAOS</title>
<style>
* { box-sizing:border-box; }
body {
 margin:0;
 background:#05000d;
 color:white;
 font-family:Arial,sans-serif;
 text-align:center;
 overflow:hidden;
 touch-action:none;
}
h1 {
 font-size:clamp(28px,8vw,48px);
 color:#ff00ea;
 text-shadow:0 0 15px #ff00ea,0 0 30px #00eaff;
 margin:12px 0;
}
#stats {
 font-size:19px;
 padding:8px;
}
#game {
 display:block;
 width:min(100vw, 55vh);
 height:auto;
 max-height:65vh;
 margin:auto;
 border:2px solid #00eeff;
 box-shadow:0 0 20px #00eeff;
 background:#080018;
 touch-action:none;
}
#controls {
 display:flex;
 justify-content:center;
 gap:35px;
 margin-top:12px;
}
.control {
 width:85px;
 height:65px;
 border-radius:18px;
 border:2px solid #00eeff;
 background:#17002d;
 color:white;
 font-size:30px;
 box-shadow:0 0 15px #00eeff;
 touch-action:none;
}
#overlay {
 position:fixed;
 inset:0;
 background:rgba(5,0,13,.96);
 display:flex;
 justify-content:center;
 align-items:center;
 flex-direction:column;
 z-index:10;
 padding:20px;
}
#overlay h1 {
 font-size:clamp(35px,10vw,55px);
}
#overlay p { font-size:17px; }
#start {
 background:#ff00cc;
 border:0;
 border-radius:40px;
 padding:18px 40px;
 color:white;
 font-size:23px;
 font-weight:bold;
 box-shadow:0 0 30px #ff00cc;
 cursor:pointer;
 touch-action:manipulation;
}
</style>
</head>
<body>

<h1>⚡ NEON CHAOS ⚡</h1>

<div id="stats">
 SCORE: <span id="score">0</span>
 &nbsp; BEST: <span id="best">0</span>
</div>

<canvas id="game" width="400" height="550"></canvas>

<div id="controls">
 <button class="control" id="left">◀</button>
 <button class="control" id="right">▶</button>
</div>

<div id="overlay">
 <h1>⚡ NEON CHAOS ⚡</h1>
 <p>DODGE THE NEON ORBS.</p>
 <p>Survive as long as you can!</p>
 <button id="start">START GAME</button>
</div>

<script>
const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");
const overlay = document.getElementById("overlay");
const startButton = document.getElementById("start");

const scoreText = document.getElementById("score");
const bestText = document.getElementById("best");

let player = {x:200,y:490,r:13};
let enemies = [];
let particles = [];
let score = 0;
let best = 0;
let running = false;
let frame = 0;
let animation = null;
let movingLeft = false;
let movingRight = false;

try {
 best = Number(localStorage.getItem("neonBest")) || 0;
} catch(e) {}
bestText.textContent = best;

function startGame() {
 if(running) return;

 cancelAnimationFrame(animation);

 score = 0;
 frame = 0;
 enemies = [];
 particles = [];
 player.x = 200;
 movingLeft = false;
 movingRight = false;
 running = true;

 scoreText.textContent = "0";
 overlay.style.display = "none";

 animation = requestAnimationFrame(gameLoop);
}

// Reliable mobile and desktop button handling
startButton.addEventListener("click", startGame);

function bindButton(id, direction) {
 const btn = document.getElementById(id);

 btn.addEventListener("pointerdown", e => {
  e.preventDefault();
  if(direction === "left") movingLeft = true;
  else movingRight = true;
 });

 function release(e) {
  e.preventDefault();
  if(direction === "left") movingLeft = false;
  else movingRight = false;
 }

 btn.addEventListener("pointerup", release);
 btn.addEventListener("pointercancel", release);
 btn.addEventListener("lostpointercapture", release);
}

bindButton("left","left");
bindButton("right","right");

function movePlayer(e) {
 if(!running) return;
 const rect = canvas.getBoundingClientRect();
 player.x = (e.clientX-rect.left)*400/rect.width;
 player.x = Math.max(15,Math.min(385,player.x));
}

canvas.addEventListener("pointerdown", movePlayer);
canvas.addEventListener("pointermove", e => {
 if(e.buttons || e.pointerType === "touch") movePlayer(e);
});

function spawnEnemy() {
 const r = 10 + Math.random()*13;
 enemies.push({
  x:Math.random()*370+15,
  y:-25,
  r,
  speed:2+Math.random()*2+score/350,
  color:["#ff0055","#00eeff","#aaff00","#ff8800"][Math.floor(Math.random()*4)]
 });
}

function drawPlayer() {
 ctx.shadowBlur=25;
 ctx.shadowColor="#00ffff";
 ctx.fillStyle="#00ffff";
 ctx.beginPath();
 ctx.arc(player.x,player.y,player.r,0,Math.PI*2);
 ctx.fill();
 ctx.shadowBlur=0;
}

function gameLoop() {
 if(!running) return;

 frame++;
 score++;
 scoreText.textContent = score;

 if(movingLeft) player.x -= 6;
 if(movingRight) player.x += 6;
 player.x = Math.max(15,Math.min(385,player.x));

 ctx.clearRect(0,0,400,550);

 // Stars
 for(let i=0;i<35;i++){
  let x=(i*71)%400;
  let y=(i*137+frame*2)%550;
  ctx.fillStyle="#443366";
  ctx.fillRect(x,y,2,2);
 }

 // Increasing difficulty
 if(frame % Math.max(12,40-Math.floor(score/150))===0) {
  spawnEnemy();
 }

 drawPlayer();

 for(let i=enemies.length-1;i>=0;i--){
  const e=enemies[i];
  e.y += e.speed;

  ctx.shadowBlur=20;
  ctx.shadowColor=e.color;
  ctx.fillStyle=e.color;
  ctx.beginPath();
  ctx.arc(e.x,e.y,e.r,0,Math.PI*2);
  ctx.fill();
  ctx.shadowBlur=0;

  const distance=Math.hypot(player.x-e.x,player.y-e.y);

  if(distance < player.r+e.r) {
   endGame();
   return;
  }

  if(e.y>570) enemies.splice(i,1);
 }

 // Background particles
 if(frame%4===0) {
  particles.push({
   x:player.x,
   y:player.y,
   life:18
  });
 }

 for(let i=particles.length-1;i>=0;i--){
  const p=particles[i];
  p.life--;
  ctx.globalAlpha=p.life/18;
  ctx.fillStyle="#00ffff";
  ctx.fillRect(p.x,p.y,3,3);
  if(p.life<=0) particles.splice(i,1);
 }
 ctx.globalAlpha=1;

 animation=requestAnimationFrame(gameLoop);
}

function endGame() {
 running=false;
 movingLeft=false;
 movingRight=false;

 if(score>best) {
  best=score;
  bestText.textContent=best;
  try {
   localStorage.setItem("neonBest",best);
  } catch(e) {}
 }

 overlay.innerHTML=`
  <h1>💥 GAME OVER 💥</h1>
  <h2>SCORE: ${score}</h2>
  <h3>BEST: ${best}</h3>
  <button id="start">PLAY AGAIN</button>
 `;
 overlay.style.display="flex";

 document.getElementById("start").addEventListener("click",startGame);
}
</script>
</body>
</html>