Untitled

<!DOCTYPE html>
<html>
<head>
  <title>F1 2D Ultimate Simulator</title>
  <style>
    body { margin:0; background:#0a0a0a; color:white; font-family:Arial; text-align:center;}
    canvas { display:block; margin:auto; background:#1e1e1e; }
    button { padding:8px 15px; margin:5px; font-size:14px; cursor:pointer; }
    #hud,#standings,#lights { margin-top:10px; font-size:14px; }
  </style>
</head>
<body>

<h1>🏆 F1 Ultimate Simulator</h1>

<div id="menu">
  <h3>Select Team</h3>
  <button onclick="selectTeam('Ferrari')">Ferrari</button>
  <button onclick="selectTeam('Mercedes')">Mercedes</button>
  <button onclick="selectTeam('RedBull')">Red Bull</button>
</div>

<div id="strategy" style="display:none;">
  <h3>Select Starting Tire</h3>
  <button onclick="startRace('soft')">Soft</button>
  <button onclick="startRace('medium')">Medium</button>
  <button onclick="startRace('hard')">Hard</button>
</div>

<div id="lights"></div>
<canvas id="game" width="400" height="650" style="display:none;"></canvas>
<div id="hud"></div>
<div id="standings" style="display:none;"></div>

<script>
const canvas=document.getElementById("game");
const ctx=canvas.getContext("2d");
const hud=document.getElementById("hud");
const standingsDiv=document.getElementById("standings");
const lightsDiv=document.getElementById("lights");

let player={x:200,y:540};
let aiCars=[];
let keys={};
let team;
let tireType;
let tireWear=100;
let damage=0;
let baseSpeed=4;
let raceTime=300;
let lastTime;
let raceActive=false;
let raceNumber=1;
let totalRaces=5;
let championshipPoints={};
let allTeams=["Ferrari","Mercedes","RedBull","McLaren","Alpine","AlphaTauri","AstonMartin","AlfaRomeo","Haas","Williams"];
let playerTeamPosition;
let startingGrid=[];

const teamData={
  Ferrari:{color:"#dc0000",speed:1.0},
  Mercedes:{color:"#00d2be",speed:0.98},
  RedBull:{color:"#1e41ff",speed:1.05},
  McLaren:{color:"#ff8700",speed:0.97},
  Alpine:{color:"#0090ff",speed:0.96},
  AlphaTauri:{color:"#2b2b2b",speed:0.95},
  AstonMartin:{color:"#006f62",speed:0.94},
  AlfaRomeo:{color:"#900000",speed:0.93},
  Haas:{color:"#c0c0c0",speed:0.92},
  Williams:{color:"#005aff",speed:0.91}
};

document.addEventListener("keydown",e=>keys[e.key]=true);
document.addEventListener("keyup",e=>keys[e.key]=false);

function selectTeam(t){
  team=t;
  document.getElementById("menu").style.display="none";
  document.getElementById("strategy").style.display="block";
  allTeams.forEach(t=>championshipPoints[t]=0);
}

function startRace(tire){
  tireType=tire;
  tireWear=100;
  damage=0;
  raceTime=300;
  raceActive=false;
  player.x=200;
  aiCars=[];
  startingGrid=[];
  setupStartingGrid();
  lightsDiv.innerHTML="<h3>Get Ready! Lights Out in 3...</h3>";
  setTimeout(()=>lightsCountdown(2),1000);
}

function lightsCountdown(count){
  if(count>0){
    lightsDiv.innerHTML="Lights Out in "+count+"...";
    setTimeout(()=>lightsCountdown(count-1),1000);
  }else{
    lightsDiv.innerHTML="🏁 GO!";
    setTimeout(()=>{lightsDiv.innerHTML=""; raceActive=true; lastTime=performance.now(); requestAnimationFrame(update);},500);
  }
}

function setupStartingGrid(){
  let gridX=[100,150,200,250,300,100,150,200,250,300,100,150,200,250,300,100,150,200,250,300];
  let gridY=[-50,-50,-50,-50,-50,-100,-100,-100,-100,-100,-150,-150,-150,-150,-150,-200,-200,-200,-200,-200];
  for(let i=0;i<20;i++){
    let carTeam=i===0?team:allTeams[i%allTeams.length];
    startingGrid.push({x:gridX[i],y:gridY[i],team:carTeam,speed:teamData[carTeam].speed});
    if(carTeam===team) playerTeamPosition=i+1;
  }
}

function drawF1Car(x,y,color){
  ctx.fillStyle=color;
  ctx.fillRect(x-5,y-30,10,20);
  ctx.fillRect(x-20,y-10,40,5);
  ctx.fillRect(x-10,y,20,50);
  ctx.fillRect(x-25,y+45,50,8);
  ctx.fillStyle="black";
  ctx.fillRect(x-18,y,6,15);
  ctx.fillRect(x+12,y,6,15);
  ctx.fillRect(x-18,y+35,6,15);
  ctx.fillRect(x+12,y+35,6,15);
}

function pitStop(){
  tireWear=100;
  damage=Math.max(0,damage-20);
}

function update(time){
  if(!raceActive) return;

  let delta=(time-lastTime)/1000;
  lastTime=time;
  raceTime-=delta;

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

  // Track
  ctx.strokeStyle="#555";
  ctx.setLineDash([20,15]);
  ctx.beginPath();
  ctx.moveTo(200,0);
  ctx.lineTo(200,650);
  ctx.stroke();
  ctx.setLineDash([]);

  // Tire wear
  if(tireType==="soft") tireWear-=0.4;
  if(tireType==="medium") tireWear-=0.25;
  if(tireType==="hard") tireWear-=0.15;

  let playerSpeed=baseSpeed*teamData[team].speed*(tireWear/100)*(1-damage/100);
  if(keys["ArrowLeft"] && player.x>30) player.x-=playerSpeed;
  if(keys["ArrowRight"] && player.x<370) player.x+=playerSpeed;

  // Update AI cars
  startingGrid.forEach(c=>{
    if(c.team===team) return;
    c.y+=baseSpeed*c.speed;
    if(c.y>700) c.y=-50;
  });

  // Draw all cars
  startingGrid.forEach(c=>{
    drawF1Car(c.x,c.y,teamData[c.team].color);
  });
  drawF1Car(player.x,player.y,teamData[team].color);

  // Collisions
  startingGrid.forEach(c=>{
    if(c.team===team) return;
    if(Math.abs(player.x-c.x)<25 && Math.abs(player.y-c.y)<40){
      damage+=20;
    }
  });

  if(keys["p"]||keys["P"]) pitStop();

  hud.innerHTML="⏱️ Time: "+Math.max(0,Math.floor(raceTime))+
    "s | Tire: "+tireType+" | Wear: "+Math.floor(tireWear)+"% | Damage: "+damage+"% | Press P to Pit";

  if(damage>=100){
    raceActive=false;
    alert("💥 DNF!");
    finishRace(20);
    return;
  }

  if(raceTime<=0){
    raceActive=false;
    finishRace(1);
    return;
  }

  requestAnimationFrame(update);
}

function finishRace(position){
  championshipPoints[team]+=Math.max(0,25-(position-1)*3); // simple points
  raceNumber++;
  if(raceNumber>totalRaces){
    showStandings();
  }else{
    document.getElementById("strategy").style.display="block";
  }
}

function showStandings(){
  canvas.style.display="none";
  standingsDiv.style.display="block";
  let sorted=Object.entries(championshipPoints).sort((a,b)=>b[1]-a[1]);
  let html="<h2>🏆 Championship Standings</h2>";
  sorted.forEach((t,i)=>{
    html+=(i+1)+". "+t[0]+" - "+t[1]+" pts<br>";
  });
  standingsDiv.innerHTML=html;
}

</script>

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