Spaces:

Novaciano
/

OutRun

Running

App Files Files Community

Novaciano commited on Sep 17, 2025

Commit

046ea31

verified ·

1 Parent(s): 149c1bb

Update index.html

Browse files

Files changed (1) hide show

index.html +59 -76

index.html CHANGED Viewed

@@ -2,7 +2,7 @@
 <html lang="es">
 <head>
 <meta charset="UTF-8">
-<title>OutRun Base Engine</title>
 <style>
   body { margin:0; overflow:hidden; background:#6dd5fa; font-family:sans-serif; touch-action:none; }
   canvas { display:block; width:100vw; height:80vh; background:skyblue; }
@@ -16,11 +16,22 @@
     background:rgba(255,255,255,0.7);
     font-size:24px; font-weight:bold; user-select:none;
   }
   @media(max-width:600px){ .btn{ width:60px; height:60px; font-size:20px; } }
 </style>
 </head>
 <body>
 <canvas id="game"></canvas>
 <div id="controls">
   <button class="btn" id="left">⟵</button>
   <button class="btn" id="right">⟶</button>
@@ -35,25 +46,28 @@ const ctx = canvas.getContext("2d");
 function resize(){ canvas.width = window.innerWidth; canvas.height = window.innerHeight*0.8; }
 resize(); window.addEventListener("resize", resize);
-let roadWidth = 2000;
-let segL = 200;
-let camD = 0.84;
-let playerX = 0;
-let pos = 0;
-let speed = 200;
 let keys = {left:false,right:false,up:false,down:false};
 let segments = [];
 // road segments with curves
-for(let i=0;i<500;i++){
-  segments.push({i,curve: Math.sin(i/30)*2, y:i*segL});
-}
-// sample sprites
-let palmImg = new Image();
-palmImg.src = "https://i.ibb.co/6Hw6yHr/palm.png"; // palmera lateral
-let carImg = new Image();
-carImg.src = "https://i.ibb.co/VVvTqYm/car.png";   // auto rival
 // ===================== INPUT =====================
 window.addEventListener("keydown",e=>{
@@ -68,7 +82,6 @@ window.addEventListener("keyup",e=>{
   if(e.key==="ArrowUp") keys.up=false;
   if(e.key==="ArrowDown") keys.down=false;
 });
 function bindTouch(id,key){
   let el=document.getElementById(id);
   el.addEventListener("touchstart",()=>keys[key]=true);
@@ -85,99 +98,69 @@ function project(p, camX, camY, camZ){
   let dx = p.x - camX;
   let dy = p.y - camY;
   let scale = camD / dz;
-  return {
-    x: (1+scale*dx)*canvas.width/2,
-    y: (1-scale*dy)*canvas.height/2,
-    w: scale*roadWidth/2
-  };
 }
 function drawSegment(p1,p2,color){
-  // grass
-  ctx.fillStyle=color.grass;
-  ctx.fillRect(0,p2.y,canvas.width,p1.y-p2.y);
-  // road
   ctx.fillStyle=color.road;
   ctx.beginPath();
-  ctx.moveTo(p1.x-p1.w,p1.y);
-  ctx.lineTo(p1.x+p1.w,p1.y);
-  ctx.lineTo(p2.x+p2.w,p2.y);
-  ctx.lineTo(p2.x-p2.w,p2.y);
   ctx.fill();
-  // rumble strips
   ctx.fillStyle=color.rumble;
-  ctx.beginPath();
-  ctx.moveTo(p1.x-p1.w*1.2,p1.y);
-  ctx.lineTo(p1.x-p1.w,p1.y);
-  ctx.lineTo(p2.x-p2.w,p2.y);
-  ctx.lineTo(p2.x-p2.w*1.2,p2.y);
-  ctx.fill();
-  ctx.beginPath();
-  ctx.moveTo(p1.x+p1.w*1.2,p1.y);
-  ctx.lineTo(p1.x+p1.w,p1.y);
-  ctx.lineTo(p2.x+p2.w,p2.y);
-  ctx.lineTo(p2.x+p2.w*1.2,p2.y);
-  ctx.fill();
-}
-function drawSprite(img,scale,x,y,width,height){
-  let w=width*scale, h=height*scale;
-  ctx.drawImage(img,x-w/2,y-h,w,h);
 }
 // ===================== UPDATE =====================
 function update(dt){
-  pos += speed*dt;
-  while(pos >= segments.length*segL) pos -= segments.length*segL;
   if(keys.left) playerX-=0.02;
   if(keys.right) playerX+=0.02;
   if(keys.up) speed+=5;
   if(keys.down) speed-=5;
-  if(speed<0) speed=0;
-  if(speed>2000) speed=2000;
 }
 // ===================== RENDER =====================
 function render(){
   ctx.clearRect(0,0,canvas.width,canvas.height);
-  let base=Math.floor(pos/segL);
-  let camY=1000, camZ=pos+500;
   let x=0,dx=0;
   for(let n=0;n<300;n++){
     let seg=segments[(base+n)%segments.length];
-    seg.z=seg.y-(pos);
-    x+=dx; dx+=seg.curve*0.001;
     let p1=project({x:x,y:0,z:seg.z},playerX*roadWidth,camY,camZ);
     let p2=project({x:x+dx,y:0,z:seg.z+segL},playerX*roadWidth,camY,camZ);
     let color={ road:n%2?"#707070":"#696969", grass:n%2?"#10aa10":"#009900", rumble:"#fff" };
     if(p1.y>=p2.y && p2.y<canvas.height) drawSegment(p1,p2,color);
-    // simple decoration: palmeras cada 20 segmentos
-    if(n%20===0 && palmImg.complete){
-      let scale= p1.w/250;
-      drawSprite(palmImg,scale,p1.x-p1.w*1.5,p1.y,200,200);
-      drawSprite(palmImg,scale,p1.x+p1.w*1.5,p1.y,200,200);
-    }
-    // auto rival cada 60 segmentos
-    if(n%60===0 && carImg.complete){
-      let scale=p1.w/350;
-      drawSprite(carImg,scale,p1.x,p1.y,120,60);
-    }
   }
-  // player car
   ctx.fillStyle="red";
   ctx.fillRect(canvas.width/2-20+playerX*200, canvas.height-80,40,60);
 }
 // ===================== GAME LOOP =====================
 let last=0;
-function loop(ts){
-  let dt=(ts-last)/1000; if(dt>0.05) dt=0.05; last=ts;
-  update(dt);
-  render();
-  requestAnimationFrame(loop);
-}
 requestAnimationFrame(loop);
 </script>
 </body>

 <html lang="es">
 <head>
 <meta charset="UTF-8">
+<title>OutRun Engine + HUD + Rivales</title>
 <style>
   body { margin:0; overflow:hidden; background:#6dd5fa; font-family:sans-serif; touch-action:none; }
   canvas { display:block; width:100vw; height:80vh; background:skyblue; }
     background:rgba(255,255,255,0.7);
     font-size:24px; font-weight:bold; user-select:none;
   }
+  #hud {
+    position:fixed; top:5px; left:0; right:0;
+    display:flex; justify-content:space-around;
+    font-size:20px; font-weight:bold;
+    color:white; text-shadow:2px 2px 3px black;
+  }
   @media(max-width:600px){ .btn{ width:60px; height:60px; font-size:20px; } }
 </style>
 </head>
 <body>
 <canvas id="game"></canvas>
+<div id="hud">
+  <div id="score">SCORE: 0</div>
+  <div id="time">TIME: 60</div>
+  <div id="speed">SPEED: 0 km/h</div>
+</div>
 <div id="controls">
   <button class="btn" id="left">⟵</button>
   <button class="btn" id="right">⟶</button>
 function resize(){ canvas.width = window.innerWidth; canvas.height = window.innerHeight*0.8; }
 resize(); window.addEventListener("resize", resize);
+let roadWidth = 2000, segL = 200, camD = 0.84;
+let playerX = 0, pos = 0, speed = 200;
+let score=0, timeLeft=60;
 let keys = {left:false,right:false,up:false,down:false};
 let segments = [];
 // road segments with curves
+for(let i=0;i<500;i++){ segments.push({i,curve:Math.sin(i/30)*2,y:i*segL}); }
+// sprites
+let palmImg = new Image(); palmImg.src="https://i.ibb.co/6Hw6yHr/palm.png";
+let carImg = new Image();  carImg.src="https://i.ibb.co/VVvTqYm/car.png";
+// rivales
+let rivals = [];
+function spawnRival(){
+  let lane = (Math.random()*2-1)*0.8; // -0.8, 0, 0.8
+  let z = pos + 2000 + Math.random()*3000;
+  let spd = 400+Math.random()*400;
+  rivals.push({x:lane,z,spd});
+}
+setInterval(spawnRival,4000); // cada 4 segundos aparece uno nuevo
 // ===================== INPUT =====================
 window.addEventListener("keydown",e=>{
   if(e.key==="ArrowUp") keys.up=false;
   if(e.key==="ArrowDown") keys.down=false;
 });
 function bindTouch(id,key){
   let el=document.getElementById(id);
   el.addEventListener("touchstart",()=>keys[key]=true);
   let dx = p.x - camX;
   let dy = p.y - camY;
   let scale = camD / dz;
+  return { x:(1+scale*dx)*canvas.width/2, y:(1-scale*dy)*canvas.height/2, w:scale*roadWidth/2 };
 }
 function drawSegment(p1,p2,color){
+  ctx.fillStyle=color.grass; ctx.fillRect(0,p2.y,canvas.width,p1.y-p2.y);
   ctx.fillStyle=color.road;
   ctx.beginPath();
+  ctx.moveTo(p1.x-p1.w,p1.y); ctx.lineTo(p1.x+p1.w,p1.y);
+  ctx.lineTo(p2.x+p2.w,p2.y); ctx.lineTo(p2.x-p2.w,p2.y);
   ctx.fill();
   ctx.fillStyle=color.rumble;
+  ctx.fillRect(p1.x-p1.w*1.2,p2.y,p1.w*0.2,(p1.y-p2.y));
+  ctx.fillRect(p1.x+p1.w,p2.y,p1.w*0.2,(p1.y-p2.y));
 }
+function drawSprite(img,scale,x,y,w,h){ ctx.drawImage(img,x-w*scale/2,y-h*scale,w*scale,h*scale); }
 // ===================== UPDATE =====================
 function update(dt){
+  pos += speed*dt; if(pos >= segments.length*segL) pos-=segments.length*segL;
   if(keys.left) playerX-=0.02;
   if(keys.right) playerX+=0.02;
   if(keys.up) speed+=5;
   if(keys.down) speed-=5;
+  if(speed<0) speed=0; if(speed>2000) speed=2000;
+  // rivals
+  for(let r of rivals){ r.z -= (speed-r.spd)*dt; }
+  rivals = rivals.filter(r=>r.z>pos && r.z<pos+8000);
+  // tiempo y score
+  timeLeft-=dt; if(timeLeft<=0){ timeLeft=0; speed=0; }
+  score += Math.floor(speed*dt*0.1);
+  document.getElementById("score").textContent="SCORE: "+score;
+  document.getElementById("time").textContent="TIME: "+Math.floor(timeLeft);
+  document.getElementById("speed").textContent="SPEED: "+Math.floor(speed/10)+" km/h";
 }
 // ===================== RENDER =====================
 function render(){
   ctx.clearRect(0,0,canvas.width,canvas.height);
+  let base=Math.floor(pos/segL), camY=1000, camZ=pos+500;
   let x=0,dx=0;
   for(let n=0;n<300;n++){
     let seg=segments[(base+n)%segments.length];
+    seg.z=seg.y-pos; x+=dx; dx+=seg.curve*0.001;
     let p1=project({x:x,y:0,z:seg.z},playerX*roadWidth,camY,camZ);
     let p2=project({x:x+dx,y:0,z:seg.z+segL},playerX*roadWidth,camY,camZ);
     let color={ road:n%2?"#707070":"#696969", grass:n%2?"#10aa10":"#009900", rumble:"#fff" };
     if(p1.y>=p2.y && p2.y<canvas.height) drawSegment(p1,p2,color);
+    // palmeras
+    if(n%20===0 && palmImg.complete){ let s=p1.w/250; drawSprite(palmImg,s,p1.x-p1.w*1.5,p1.y,200,200); drawSprite(palmImg,s,p1.x+p1.w*1.5,p1.y,200,200); }
   }
+  // rivales
+  for(let r of rivals){
+    let dz=r.z-pos; if(dz<0) continue;
+    let proj=project({x:r.x*roadWidth,y:0,z:dz},playerX*roadWidth,camY,camZ);
+    if(carImg.complete){ let s=proj.w/350; drawSprite(carImg,s,proj.x,proj.y,120,60); }
+  }
+  // auto jugador
   ctx.fillStyle="red";
   ctx.fillRect(canvas.width/2-20+playerX*200, canvas.height-80,40,60);
 }
 // ===================== GAME LOOP =====================
 let last=0;
+function loop(ts){ let dt=(ts-last)/1000; if(dt>0.05) dt=0.05; last=ts; update(dt); render(); requestAnimationFrame(loop); }
 requestAnimationFrame(loop);
 </script>
 </body>