Untitled

<!DOCTYPE html>
<html>
<head>
<title>Wave Dash X</title>

<style>
body {
  margin:0;
  font-family:Arial;
  background: linear-gradient(135deg,#0f0f0f,#1a1a2e);
  color:white;
  text-align:center;
}

h1 {
  margin-top:20px;
  font-size:40px;
  color:cyan;
}

#menu, #gameContainer {
  margin-top:20px;
}

button {
  padding:12px 25px;
  margin:10px;
  font-size:16px;
  border:none;
  border-radius:8px;
  background:cyan;
  color:black;
  cursor:pointer;
}

button:hover {
  background:white;
}

select {
  padding:10px;
  border-radius:5px;
}

canvas {
  background:#111;
  border:2px solid cyan;
  margin-top:20px;
}

.panel {
  margin-top:20px;
  padding:15px;
  max-width:600px;
  margin-left:auto;
  margin-right:auto;
  background:#00000088;
  border-radius:10px;
}
</style>
</head>

<body>

<h1>🌊 Wave Dash X</h1>

<div id="menu">
  <button onclick="startGame()">▶ Play</button>

  <br>

  <label>🎵 Select Song:</label>
  <select id="songSelect">
    <option value="song1.mp3">Song 1</option>
    <option value="song2.mp3">Song 2</option>
  </select>

  <div class="panel">
    <h3>🎮 How to Play</h3>
    <p>Hold click or key to go up. Release to go down.</p>
    <p>Avoid obstacles and survive as long as possible.</p>
  </div>

  <div class="panel">
    <h3>⭐ Features</h3>
    <p>Endless mode • Increasing difficulty • Music sync ready</p>
  </div>

  <div class="panel">
    <h3>👤 Credits</h3>
    <p>Game by You + ChatGPT</p>
    <p>Inspired by Geometry Dash</p>
  </div>
</div>

<div id="gameContainer" style="display:none;">
  <button onclick="backToMenu()">⬅ Back</button>
  <br>
  <canvas id="game" width="900" height="400"></canvas>
</div>

<audio id="music" loop></audio>

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

let state = "menu";
let holding = false;

let player = {x:150,y:200,size:10,trail:[]};

let obstacles = [];
let speed = 4;
let score = 0;
let best = 0;
let difficulty = 1;

// SONGS
function getSelectedSong(){
  return document.getElementById("songSelect").value;
}

// INPUT
document.addEventListener("mousedown",()=>holding=true);
document.addEventListener("mouseup",()=>holding=false);
document.addEventListener("keydown",()=>holding=true);
document.addEventListener("keyup",()=>holding=false);

// START GAME
function startGame(){
  document.getElementById("menu").style.display="none";
  document.getElementById("gameContainer").style.display="block";

  music.src = getSelectedSong();
  music.currentTime = 0;
  music.play();

  resetGame();
  state = "playing";
}

// BACK
function backToMenu(){
  state = "menu";
  music.pause();

  document.getElementById("menu").style.display="block";
  document.getElementById("gameContainer").style.display="none";
}

// RESET
function resetGame(){
  player.y = 200;
  player.trail = [];
  obstacles = [];
  score = 0;
  speed = 4;
  difficulty = 1;
}

// SPAWN
function spawnObstacle(){
  let gap = 120 - difficulty * 5;
  let top = Math.random() * (canvas.height - gap);

  obstacles.push({x:canvas.width,y:0,w:20,h:top});
  obstacles.push({x:canvas.width,y:top+gap,w:20,h:canvas.height});
}

// COLLISION
function collision(a,b){
  return a.x < b.x+b.w && a.x+a.size > b.x &&
         a.y < b.y+b.h && a.y+a.size > b.y;
}

// LOOP
function update(){
  ctx.clearRect(0,0,canvas.width,canvas.height);

  if(state !== "playing"){
    return requestAnimationFrame(update);
  }

  // movement
  if(holding) player.y -= speed;
  else player.y += speed;

  // bounds
  if(player.y < 0) player.y = 0;
  if(player.y > canvas.height-player.size)
    player.y = canvas.height-player.size;

  // trail
  player.trail.push({x:player.x,y:player.y});
  if(player.trail.length > 15) player.trail.shift();

  ctx.fillStyle="rgba(0,255,255,0.3)";
  player.trail.forEach(t=>{
    ctx.fillRect(t.x,t.y,player.size,player.size);
  });

  // player
  ctx.fillStyle="cyan";
  ctx.fillRect(player.x,player.y,player.size,player.size);

  // obstacles
  ctx.fillStyle="white";
  for(let o of obstacles){
    o.x -= speed*1.5;
    ctx.fillRect(o.x,o.y,o.w,o.h);

    if(collision(player,o)){
      best = Math.max(best,score);
      alert("Crash! Score: "+score);
      backToMenu();
    }
  }

  obstacles = obstacles.filter(o=>o.x>-50);

  if(obstacles.length < 4) spawnObstacle();

  // difficulty
  score++;
  if(score % 200 === 0){
    difficulty += 0.5;
    speed += 0.2;
  }

  // UI
  ctx.fillStyle="white";
  ctx.fillText("Score: "+score,20,30);

  requestAnimationFrame(update);
}

update();
</script>

</body>
</html>
Editor is loading...