Spaces:

Novaciano
/

OutRun

Running

App Files Files Community

Novaciano commited on Sep 17, 2025

Commit

7e9f5dd

verified ·

1 Parent(s): f1d61eb

Update index.html

Browse files

Files changed (1) hide show

index.html +65 -81

index.html CHANGED Viewed

@@ -2,10 +2,10 @@
 <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;
@@ -34,85 +34,8 @@ 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;
@@ -130,6 +53,67 @@ window.addEventListener("keyup",e=>{
   b.addEventListener("touchstart",()=>keys[id]=true);
   b.addEventListener("touchend",()=>keys[id]=false);
 });
 </script>
 </body>
 </html>

 <html lang="es">
 <head>
 <meta charset="UTF-8">
+<title>OutRun Demo</title>
 <style>
+  body { margin:0; overflow:hidden; background:#6dd5fa; }
+  canvas { display:block; width:100vw; height:80vh; background:#87CEEB; }
   #controls {
     position: fixed; bottom: 0; width: 100%;
     display: flex; justify-content: space-around;
 function resize(){canvas.width=window.innerWidth;canvas.height=window.innerHeight*0.8;}
 resize();window.addEventListener("resize",resize);
 // controles
+let keys={left:false,right:false,up:false,down:false};
 window.addEventListener("keydown",e=>{
   if(e.key==="ArrowLeft")keys.left=true;
   if(e.key==="ArrowRight")keys.right=true;
   b.addEventListener("touchstart",()=>keys[id]=true);
   b.addEventListener("touchend",()=>keys[id]=false);
 });
+// jugador
+let playerX=0; // -1 a 1
+let speed=0;
+// sprites pequeños en base64
+const palmImg=new Image();
+palmImg.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAfCAYAAABu7W0UAAAAvUlEQVR42mNgoBUwAqMxIBGZgzFQK7cA7UdGZwC4nSU+g4EYw0kAgSlQJBcwAHEBzgdwARygzMCaQoUSFhHI6wYSkVQEyNUBKg5g4g9iM5FeA4QhOgPBIRLUI2GtgSAUM1FQ3wB8ghIUIgGkCaAgvQGB8A+FPCAGYqwYIIhQwoVgghu4jICcZsLoAEwXwCRfDYoA0aYVAYhtGAr6RhEkJgfAoWYg1AdH2AgBa7z6EKZnCw8AAAAASUVORK5CYII=";
+function drawRoad(){
+  const h=canvas.height,w=canvas.width;
+  const roadW=0.8,lanes=2;
+  for(let i=0;i<30;i++){
+    let z=i/30;
+    let scale=1/(z*1.2+0.001);
+    let mid=0.5+playerX*0.3*scale;
+    let roadHalf=roadW*0.5*scale;
+    let grass= h*(1-z);
+    ctx.fillStyle=(i%2===0)?"#007700":"#009900";
+    ctx.fillRect(0,grass,w,h/30+1);
+    ctx.fillStyle="#555";
+    ctx.beginPath();
+    ctx.moveTo((mid-roadHalf)*w,grass);
+    ctx.lineTo((mid+roadHalf)*w,grass);
+    ctx.lineTo((mid+roadHalf*1.2)*w,grass+h/30);
+    ctx.lineTo((mid-roadHalf*1.2)*w,grass+h/30);
+    ctx.closePath();
+    ctx.fill();
+    // líneas de carril
+    ctx.strokeStyle="white"; ctx.lineWidth=2;
+    ctx.beginPath();
+    ctx.moveTo(mid*w,grass);
+    ctx.lineTo(mid*w,grass+h/30);
+    ctx.stroke();
+    // palmeras
+    if(i%5===0){
+      let size=40*scale;
+      ctx.drawImage(palmImg,(mid-roadHalf*1.4)*w-size/2,grass-size,size,size);
+      ctx.drawImage(palmImg,(mid+roadHalf*1.4)*w-size/2,grass-size,size,size);
+    }
+  }
+}
+function drawPlayer(){
+  const h=canvas.height,w=canvas.width;
+  ctx.fillStyle="red";
+  ctx.fillRect(w/2-20+playerX*200,h-80,40,60);
+}
+function loop(){
+  ctx.clearRect(0,0,canvas.width,canvas.height);
+  if(keys.left) playerX-=0.02;
+  if(keys.right) playerX+=0.02;
+  if(keys.up) speed+=2;
+  if(keys.down) speed-=2;
+  if(speed<0)speed=0;if(speed>200)speed=200;
+  drawRoad();
+  drawPlayer();
+  requestAnimationFrame(loop);
+}
+loop();
 </script>
 </body>
 </html>