Código del juego TON 618
📋 Copiar código
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>TON 618 - Extreme Demon</title> <style> body{margin:0;overflow:hidden;background:#000;font-family:'Courier New',monospace} canvas{display:none;background:#000} #ui{position:absolute;top:20px;width:100%;text-align:center;color:#f00;font-size:24px;font-weight:bold;pointer-events:none;text-shadow:0 0 10px #f00;display:none} #menu{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;color:#ff0000;background:radial-gradient(circle,#200,#000)} h1{font-size:70px;margin:0;text-shadow:0 0 30px #f00;letter-spacing:10px} button{margin-top:40px;padding:15px 60px;font-size:20px;background:black;border:2px solid #f00;color:#f00;cursor:pointer;transition:.2s} button:hover{background:#f00;color:black;box-shadow:0 0 50px #f00} </style> </head> <body> <div id="ui">0%</div> <div id="menu"> <h1>TON 618</h1> <p style="color:#400;">TEST YOUR LIMITS</p> <button onclick="startGame()">DESAFÍO TOTAL</button> </div> <canvas id="gameCanvas"></canvas> <script> const canvas=document.getElementById('gameCanvas'),ctx=canvas.getContext('2d'),menu=document.getElementById('menu'),ui=document.getElementById('ui');canvas.width=innerWidth;canvas.height=innerHeight;let gameRunning=false,isMovingUp=false,trail=[],hazards=[],percentage=0,distanceTravelled=0,shake=0;const player={x:250,y:canvas.height/2,size:25,dy:0,waveSpeed:9.5,speed:15};onkeydown=e=>{if(e.code==='Space'){isMovingUp=true;e.preventDefault()}};onkeyup=e=>{if(e.code==='Space')isMovingUp=false};onmousedown=()=>isMovingUp=true;onmouseup=()=>isMovingUp=false;function createHazard(x){const gap=145,waveFreq=.0035,waveAmp=200,center=canvas.height/2+Math.sin(x*waveFreq)*waveAmp;hazards.push({x:x,type:'wall',topHeight:center-gap/2,botY:center+gap/2,w:90})} function startGame(){menu.style.display='none';canvas.style.display='block';ui.style.display='block';gameRunning=true;for(let i=0;i<10;i++)createHazard(1000+i*220);requestAnimationFrame(update)} function update(){if(!gameRunning)return;let sx=(Math.random()-.5)*shake,sy=(Math.random()-.5)*shake;ctx.setTransform(1,0,0,1,sx,sy);ctx.clearRect(-10,-10,canvas.width+20,canvas.height+20);ctx.fillStyle="#000";ctx.fillRect(-10,-10,canvas.width+20,canvas.height+20);distanceTravelled+=player.speed;percentage=Math.min(Math.floor(distanceTravelled/300),99);ui.innerText=percentage+'%';player.dy=isMovingUp?-player.waveSpeed:player.waveSpeed;player.y+=player.dy;trail.push({x:player.x,y:player.y+player.size/2});trail.length>35&&trail.shift();ctx.beginPath();ctx.strokeStyle="#f00";ctx.lineWidth=4;ctx.shadowBlur=10;ctx.shadowColor="#f00";trail.forEach((t,i)=>{t.x-=player.speed;i?ctx.lineTo(t.x,t.y):ctx.moveTo(t.x,t.y)});ctx.stroke();ctx.shadowBlur=0;ctx.fillStyle="#fff";ctx.beginPath();ctx.moveTo(player.x,player.y);ctx.lineTo(player.x+player.size+10,player.y+player.size/2);ctx.lineTo(player.x,player.y+player.size);ctx.fill();if(player.y<0||player.y+player.size>canvas.height)gameOver();hazards.forEach((h,i)=>{h.x-=player.speed;ctx.fillStyle="#0a0000";ctx.strokeStyle="#400";ctx.lineWidth=2;ctx.fillRect(h.x,0,h.w,h.topHeight);ctx.strokeRect(h.x,0,h.w,h.topHeight);ctx.fillRect(h.x,h.botY,h.w,canvas.height-h.botY);ctx.strokeRect(h.x,h.botY,h.w,canvas.height-h.botY);const m=6;if(player.x+player.size-m>h.x&&player.x+m<h.x+h.w){if(player.y+m<h.topHeight||player.y+player.size-m>h.botY)gameOver();shake=4}else shake=Math.max(0,shake-.1);if(h.x<-200){hazards.splice(i,1);createHazard(hazards[hazards.length-1].x+220)}});requestAnimationFrame(update)} function gameOver(){gameRunning=false;ctx.setTransform(1,0,0,1,0,0);ctx.fillStyle='white';ctx.fillRect(0,0,canvas.width,canvas.height);setTimeout(()=>location.reload(),150)} </script> </body> </html>