Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>DragonCraft</title>
<style>
*{box-sizing:border-box}
body{margin:0;background:#18251d;color:white;font-family:Arial;overflow:hidden}
header{padding:10px;background:#101b16;text-align:center;font-size:22px;font-weight:bold}
#stats{display:flex;justify-content:space-around;padding:8px;background:#26382b}
canvas{display:block;width:100%;height:65vh;background:#85c9ed;image-rendering:pixelated;touch-action:none}
#controls{display:flex;justify-content:space-around;padding:12px;gap:8px}
button{background:#344c3b;color:white;border:2px solid #8ba58c;border-radius:10px;padding:13px;font-size:17px}
#inventory{text-align:center;padding:5px}
</style>
</head>
<body>
<header>🐉 DRAGONCRAFT</header>
<div id="stats">
<span>❤️ <b id="hp">10</b></span>
<span>🪵 কাঠ: <b id="wood">0</b></span>
<span>🪨 পাথর: <b id="stone">0</b></span>
</div>
<canvas id="game"></canvas>
<div id="controls">
<button id="left">◀</button>
<button id="jump">⬆ লাফ</button>
<button id="right">▶</button>
<button id="break">⛏ ভাঙো</button>
<button id="place">🧱 বসাও</button>
</div>
<div id="inventory">🎒 Inventory: <span id="items">খালি</span></div>
<script>
const canvas=document.getElementById("game");
const ctx=canvas.getContext("2d");
const W=900,H=500;
canvas.width=W;canvas.height=H;
let player={x:100,y:300,vx:0,vy:0,ground:false};
let hp=10,wood=0,stone=0,blocks=[];
let keys={left:false,right:false};
const size=40, ground=400;
for(let x=0;x<W;x+=size){
blocks.push({x,y:ground,w:size,h:100,type:"grass"});
}
for(let x of [240,520,760]){
blocks.push({x,y:ground-80,w:40,h:80,type:"tree"});
}
function drawBlock(b){
ctx.fillStyle=b.type==="grass"?"#398b42":
b.type==="tree"?"#86512d":
b.type==="stone"?"#777":"#4c9a44";
ctx.fillRect(b.x,b.y,b.w,b.h);
if(b.type==="grass"){
ctx.fillStyle="#65ba49";ctx.fillRect(b.x,b.y,b.w,8);
}
if(b.type==="tree"){
ctx.fillStyle="#27853a";ctx.fillRect(b.x-15,b.y-45,70,50);
}
}
function draw(){
ctx.clearRect(0,0,W,H);
ctx.fillStyle="#85c9ed";ctx.fillRect(0,0,W,H);
ctx.fillStyle="#f8df70";ctx.beginPath();ctx.arc(790,70,35,0,7);ctx.fill();
blocks.forEach(drawBlock);
ctx.fillStyle="#2255b8";ctx.fillRect(player.x,player.y,28,48);
ctx.fillStyle="#ffdbac";ctx.fillRect(player.x+4,player.y-15,22,20);
ctx.fillStyle="#222";ctx.fillRect(player.x+17,player.y-8,4,4);
ctx.fillStyle="#fff";ctx.font="20px Arial";ctx.fillText("🐉",600,250);
requestAnimationFrame(draw);
}
function update(){
player.vx=keys.left?-4:keys.right?4:0;
player.x+=player.vx;
player.vy+=0.6;
player.y+=player.vy;
player.ground=false;
for(let b of blocks){
if(player.x+28>b.x&&player.x<b.x+b.w&&
player.y+48>=b.y&&player.y+48<=b.y+25&&player.vy>=0){
player.y=b.y-48;player.vy=0;player.ground=true;
}
}
player.x=Math.max(0,Math.min(W-28,player.x));
if(player.y>H){player.y=200;hp=Math.max(0,hp-1);}
document.getElementById("hp").textContent=hp;
document.getElementById("wood").textContent=wood;
document.getElementById("stone").textContent=stone;
document.getElementById("items").textContent=
"🪵 "+wood+" | 🪨 "+stone;
}
function loop(){update();requestAnimationFrame(loop);}
function control(id,key){
let b=document.getElementById(id);
b.onpointerdown=e=>{e.preventDefault();keys[key]=true};
b.onpointerup=b.onpointerleave=b.onpointercancel=()=>keys[key]=false;
}
control("left","left");control("right","right");
document.getElementById("jump").onclick=()=>{
if(player.ground){player.vy=-12;player.ground=false;}
};
document.getElementById("break").onclick=()=>{
let b=blocks.find(b=>Math.abs(b.x-player.x)<65&&b.y>=ground-100);
if(b&&b.type!=="grass"){
if(b.type==="tree")wood+=2;else stone+=1;
blocks.splice(blocks.indexOf(b),1);
}
};
document.getElementById("place").onclick=()=>{
if(wood>0){
blocks.push({x:Math.floor((player.x+60)/40)*40,y:ground-40,w:40,h:40,type:"wood"});
wood--;
}
};
loop();draw();
</script>
</body>
</html>
Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
1
Requests
1
Domains
4KB
Transfer Size
4KB
Content Size
105.0ms
Dom Content Loaded
200.0ms
First Paint
105.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...