| <!DOCTYPE html> |
| <html lang="es"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>OutRun con Rivales visibles</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;} |
| #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;} |
| </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> |
| <button class="btn" id="up">⏫</button> |
| <button class="btn" id="down">⏬</button> |
| </div> |
|
|
| <script> |
| |
| const canvas=document.getElementById("game"),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 score=0,timeLeft=60; |
| 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});} |
| |
| |
| 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"; |
| |
| |
| let rivals=[]; |
| function spawnRival(){ |
| let lane=(Math.random()*2-1)*0.8; |
| let z=pos+2000+Math.random()*3000; |
| let spd=400+Math.random()*400; |
| rivals.push({x:lane,z,spd}); |
| } |
| setInterval(spawnRival,3000); |
| |
| |
| 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; |
| }); |
| function bindTouch(id,key){ |
| let el=document.getElementById(id); |
| el.addEventListener("touchstart",()=>keys[key]=true); |
| el.addEventListener("touchend",()=>keys[key]=false); |
| } |
| bindTouch("left","left"); bindTouch("right","right"); |
| bindTouch("up","up"); bindTouch("down","down"); |
| |
| |
| function project(p,camX,camY,camZ){ |
| let dz=p.z-camZ; if(dz<=0.1)dz=0.1; |
| let 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}; |
| } |
| 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(); |
| } |
| function drawSprite(img,scale,x,y,w,h){ctx.drawImage(img,x-w*scale/2,y-h*scale,w*scale,h*scale);} |
| |
| |
| 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; |
| for(let r of rivals){r.z-= (speed-r.spd)*dt;} |
| rivals=rivals.filter(r=>r.z>pos&&r.z<pos+8000); |
| 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"; |
| } |
| |
| |
| 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); |
| 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); |
| } |
| } |
| |
| 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,1000,pos+500); |
| if(carImg.complete){ |
| let s=proj.w/350; |
| drawSprite(carImg,s,proj.x,proj.y,120,60); |
| } |
| } |
| |
| 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;update(dt);render();requestAnimationFrame(loop);} |
| requestAnimationFrame(loop); |
| </script> |
| </body> |
| </html> |
|
|
