<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Ninja Dash Auto Run</title>
<style>
body {
margin:0;
background:#0a0a12;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
}
.game-area {
position:relative;
width:100%;
max-width:960px;
height:520px;
background:#041020;
border-radius:12px;
overflow:hidden;
box-shadow:0 0 20px rgba(0,0,0,0.6);
}
canvas {
width:100%;
height:100%;
background:#87ceeb;
display:none;
}
.overlay {
position:absolute;
inset:0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
background:rgba(0,0,0,0.8);
z-index:2;
color:white;
text-align:center;
}
.overlay button {
padding:14px 40px;
font-size:20px;
background:#ff5722;
color:white;
border:none;
border-radius:8px;
margin-top:12px;
}
.mobile-controls {
position:absolute;
bottom:15px;
left:15px;
right:15px;
display:flex;
justify-content:space-between;
z-index:3;
}
.circle {
width:80px;
height:80px;
border-radius:50%;
background:rgba(255,255,255,0.1);
border:1px solid rgba(255,255,255,0.3);
display:flex;
align-items:center;
justify-content:center;
font-size:28px;
color:white;
}
</style>
</head>
<body>
<div class="game-area">
<canvas id="gameCanvas" width="960" height="520"></canvas>
<div id="menu" class="overlay">
<h1>🏃♂️ Ninja Dash</h1>
<button id="startBtn">Start Game</button>
</div>
<div id="gameOver" class="overlay" style="display:none">
<h1>💀 Game Over</h1>
<p id="finalScore"></p>
<p style="font-size:18px;color:#ff8080">Play once more if you are not noob 😏</p>
<button id="restartBtn">Restart</button>
</div>
<div class="mobile-controls" id="controls" style="display:none">
<div></div>
<div style="display:flex;gap:10px">
<div class="circle" id="btnJump">⬆️</div>
<div class="circle" id="btnSlide">⤵️</div>
</div>
</div>
</div>
<script>
const canvas=document.getElementById("gameCanvas");
const ctx=canvas.getContext("2d");
const menu=document.getElementById("menu");
const gameOver=document.getElementById("gameOver");
const finalScore=document.getElementById("finalScore");
const controls=document.getElementById("controls");
let gameRunning=false, gameEnded=false;
const player={x:140,y:350,w:50,h:90,vy:0,onGround:true};
let obstacles=[]; let spawnTimer=0;
let score=0,speed=300,last=performance.now();
const keys={};
// Mobile buttons
function bindTouch(id,key){
const el=document.getElementById(id);
el.addEventListener("touchstart",()=>{keys[key]=true;});
el.addEventListener("touchend",()=>{keys[key]=false;});
}
bindTouch("btnJump","jump");
bindTouch("btnSlide","slide");
function loop(ts){
const dt=(ts-last)/1000; last=ts;
if(gameRunning){update(dt); render();}
requestAnimationFrame(loop);
}
function update(dt){
const ground=canvas.height-80-player.h;
player.vy+=1800*dt; player.y+=player.vy*dt;
if(player.y>=ground){player.y=ground;player.vy=0;player.onGround=true;}
if(keys.jump && player.onGround){player.vy=-700;player.onGround=false;keys.jump=false;}
if(keys.slide && player.onGround){player.h=50;} else player.h=90;
// Speed increases with score
speed=300+score*1.2;
obstacles.forEach(o=>o.x-=speed*dt);
obstacles=obstacles.filter(o=>o.x+o.w>0);
spawnTimer-=dt;
if(spawnTimer<=0){
const type=Math.random()<0.5?"low":"high";
const h=(type==="low"?40:80);
const y=canvas.height-80-h;
obstacles.push({x:canvas.width+40,y,w:40,h});
spawnTimer=1+Math.random()*1.5;
}
for(let o of obstacles){
if(player.x<o.x+o.w&&player.x+player.w>o.x&&player.y<o.y+o.h&&player.y+player.h>o.y){
endGame();
return;
}
}
score+=dt*10;
}
function render(){
ctx.clearRect(0,0,canvas.width,canvas.height);
// Background
let grad=ctx.createLinearGradient(0,0,0,canvas.height);
grad.addColorStop(0,"#66ccff");
grad.addColorStop(1,"#228B22");
ctx.fillStyle=grad; ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.fillStyle="#013220";
ctx.fillRect(0,canvas.height-80,canvas.width,80);
// Obstacles
ctx.fillStyle="red";
obstacles.forEach(o=>ctx.fillRect(o.x,o.y,o.w,o.h));
// Ninja
ctx.fillStyle="black";
ctx.fillRect(player.x,player.y,player.w,player.h);
ctx.beginPath();
ctx.arc(player.x+player.w/2,player.y-20,20,0,Math.PI*2);
ctx.fill();
ctx.fillStyle="white";
ctx.fillRect(player.x+10,player.y-25,30,8);
ctx.fillStyle="red";
ctx.fillRect(player.x+5,player.y-35,40,6);
// Score
ctx.fillStyle="yellow";
ctx.font="20px sans-serif";
ctx.fillText("Score: "+Math.floor(score),20,30);
}
function startGame(){
menu.style.display="none";
gameOver.style.display="none";
canvas.style.display="block";
controls.style.display="flex";
player.x=140;player.y=350;player.vy=0;player.onGround=true;player.h=90;
obstacles=[];spawnTimer=0;score=0;
speed=300;
gameRunning=true;gameEnded=false;
}
function endGame(){
gameRunning=false;gameEnded=true;
finalScore.textContent="Your Score: "+Math.floor(score);
gameOver.style.display="flex";
}
document.getElementById("startBtn").addEventListener("click",startGame);
document.getElementById("restartBtn").addEventListener("click",startGame);
requestAnimationFrame(loop);
</script>
</body>
</html>
Comments
Post a Comment