Spaces:

Novaciano
/

OutRun

Running

App Files Files Community

Novaciano commited on Sep 17, 2025

Commit

f1d61eb

verified ·

1 Parent(s): 1289656

Update index.html

Browse files

Files changed (1) hide show

index.html +83 -125

index.html CHANGED Viewed

@@ -2,43 +2,21 @@
 <html lang="es">
 <head>
 <meta charset="UTF-8">
-<title>Mini OutRun Clone</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;
-  }
   #controls {
-    position: fixed;
-    bottom: 0;
-    width: 100%;
-    display: flex;
-    justify-content: space-around;
-    padding: 10px;
-    background: rgba(0,0,0,0.3);
   }
   .btn {
-    width: 70px;
-    height: 70px;
-    border-radius: 50%;
-    border: none;
-    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>
@@ -51,127 +29,107 @@
 </div>
 <script>
-const canvas = document.getElementById("game");
-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 = [];
 for(let i=0;i<500;i++){
-  segments.push({i,curve: Math.sin(i/30)*2, y: i*segL});
 }
-function project(p, camX, camY, camZ){
-  let dz = p.z - 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){
-  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.closePath();
-  ctx.fill();
-  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.closePath();
-  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.closePath();
-  ctx.fill();
 }
 function frame(dt){
   ctx.clearRect(0,0,canvas.width,canvas.height);
-  pos += speed*dt;
-  while(pos >= segments.length*segL) pos -= segments.length*segL;
-  let base = Math.floor(pos/segL);
-  let camY = 1000;
-  let camZ = pos+500;
-  let x=0,dx=0;
   for(let n=0;n<300;n++){
-    let seg = segments[(base+n)%segments.length];
-    seg.looped = seg.i<base;
-    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);
   }
   ctx.fillStyle="red";
-  ctx.fillRect(canvas.width/2-20+playerX*200, canvas.height-80, 40,60);
 }
 let last=0;
 function loop(ts){
-  let dt=(ts-last)/1000; if(dt>0.05) dt=0.05; last=ts;
-  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;
-  frame(dt);
-  requestAnimationFrame(loop);
 }
 requestAnimationFrame(loop);
 window.addEventListener("keydown",e=>{
-  if(e.key==="ArrowLeft") keys.left=true;
-  if(e.key==="ArrowRight") keys.right=true;
-  if(e.key==="ArrowUp") keys.up=true;
-  if(e.key==="ArrowDown") keys.down=true;
 });
 window.addEventListener("keyup",e=>{
-  if(e.key==="ArrowLeft") keys.left=false;
-  if(e.key==="ArrowRight") keys.right=false;
-  if(e.key==="ArrowUp") keys.up=false;
-  if(e.key==="ArrowDown") keys.down=false;
 });
-document.getElementById("left").addEventListener("touchstart",()=>keys.left=true);
-document.getElementById("left").addEventListener("touchend",()=>keys.left=false);
-document.getElementById("right").addEventListener("touchstart",()=>keys.right=true);
-document.getElementById("right").addEventListener("touchend",()=>keys.right=false);
-document.getElementById("up").addEventListener("touchstart",()=>keys.up=true);
-document.getElementById("up").addEventListener("touchend",()=>keys.up=false);
-document.getElementById("down").addEventListener("touchstart",()=>keys.down=true);
-document.getElementById("down").addEventListener("touchend",()=>keys.down=false);
 </script>
 </body>
 </html>

 <html lang="es">
 <head>
 <meta charset="UTF-8">
+<title>Mini OutRun con Sprites</title>
 <style>
+  body { margin:0; background:#6dd5fa; overflow:hidden; }
+  canvas { display:block; width:100vw; height:80vh; background:skyblue; }
   #controls {
+    position: fixed; bottom: 0; width: 100%;
+    display: flex; justify-content: space-around;
+    padding: 10px; background: rgba(0,0,0,0.3);
   }
   .btn {
+    width:70px; height:70px; border-radius:50%; border:none;
+    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>
 </div>
 <script>
+const canvas=document.getElementById("game");
+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, segL=200, camD=0.84;
+let playerX=0, pos=0, speed=200;
+let keys={left:false,right:false,up:false,down:false};
+let segments=[];
+// tiny sprites (palmera y auto rival) en base64
+const palmImg=new Image();
+palmImg.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAfCAYAAABu7W0UAAAAvUlEQVR42mNgoBUwAqMxIBGZgzFQK7cA7UdGZwC4nSU+g4EYw0kAgSlQJBcwAHEBzgdwARygzMCaQoUSFhHI6wYSkVQEyNUBKg5g4g9iM5FeA4QhOgPBIRLUI2GtgSAUM1FQ3wB8ghIUIgGkCaAgvQGB8A+FPCAGYqwYIIhQwoVgghu4jICcZsLoAEwXwCRfDYoA0aYVAYhtGAr6RhEkJgfAoWYg1AdH2AgBa7z6EKZnCw8AAAAASUVORK5CYII=";
+const carImg=new Image();
+carImg.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAAkElEQVR42mNggAJGIHGQOwNjW3kMxWwGCqL9DAwMjExkBgYGigLwMKCOQpwHTGA2gWhBkGBbJBcT6E4gLUEMpHEIkA0MIsg1IAXxAS1I4jQbkmQWI6QAKxFqIA+RaQqQkBiI1IMqGiNA/AOQHzGpAxNJoEZkY8kQDCsBlwQxFCDEhRAAbfRAQGyqkIwgxgWAIMV/YOot9MNQAAAAASUVORK5CYII=";
+// generar segmentos
 for(let i=0;i<500;i++){
+  segments.push({i,curve:Math.sin(i/30)*2,y:i*segL,sprites:[]});
+  if(i%20===0) segments[i].sprites.push({img:palmImg,offset:-2});
+  if(i%25===0) segments[i].sprites.push({img:palmImg,offset:2});
+  if(i%40===0) segments[i].sprites.push({img:carImg,offset:(Math.random()*2-1)});
 }
+function project(p,camX,camY,camZ){
+  let dz=p.z-camZ,dx=p.x-camX,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, scale
   };
 }
+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.closePath();ctx.fill();
 }
 function frame(dt){
   ctx.clearRect(0,0,canvas.width,canvas.height);
+  pos+=speed*dt; while(pos>=segments.length*segL) pos-=segments.length*segL;
+  let base=Math.floor(pos/segL), camY=1000, camZ=pos+500;
+  let x=0,dx=0, maxY=canvas.height;
   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);
+    if(p1.y>=p2.y || p2.y>=maxY) continue;
+    let color={road:n%2?"#707070":"#696969",grass:n%2?"#10aa10":"#009900"};
+    drawSegment(p1,p2,color); maxY=p2.y;
+    seg.sprites.forEach(s=>{
+      let spriteX=p1.x+p1.w*s.offset;
+      let spriteY=p1.y;
+      let size=80*p1.scale;
+      ctx.drawImage(s.img,spriteX-size/2,spriteY-size,size,size);
+    });
   }
+  // dibujar coche del jugador
   ctx.fillStyle="red";
+  ctx.fillRect(canvas.width/2-20+playerX*200,canvas.height-80,40,60);
 }
 let last=0;
 function loop(ts){
+  let dt=(ts-last)/1000;if(dt>0.05)dt=0.05;last=ts;
+  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;
+  frame(dt);requestAnimationFrame(loop);
 }
 requestAnimationFrame(loop);
+// controles
 window.addEventListener("keydown",e=>{
+  if(e.key==="ArrowLeft")keys.left=true;
+  if(e.key==="ArrowRight")keys.right=true;
+  if(e.key==="ArrowUp")keys.up=true;
+  if(e.key==="ArrowDown")keys.down=true;
 });
 window.addEventListener("keyup",e=>{
+  if(e.key==="ArrowLeft")keys.left=false;
+  if(e.key==="ArrowRight")keys.right=false;
+  if(e.key==="ArrowUp")keys.up=false;
+  if(e.key==="ArrowDown")keys.down=false;
+});
+["left","right","up","down"].forEach(id=>{
+  const b=document.getElementById(id);
+  b.addEventListener("touchstart",()=>keys[id]=true);
+  b.addEventListener("touchend",()=>keys[id]=false);
 });
 </script>
 </body>
 </html>