Ultimate Football 2027

<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ultimate Football 2027</title>
<style>
body{margin:0;background:#123;color:white;text-align:center;font-family:Arial}
canvas{display:block}
#game{width:100%;height:65vh}
button{padding:12px;margin:5px;border:0;border-radius:8px;font-weight:bold}
</style>
</head>
<body>
<h2>⚽ Ultimate Football 2027</h2>
<p>🪙 কয়েন: <span id="coins">1000</span>
 | ⚽ গোল: <span id="goals">0</span></p>
<div id="game"></div>
<button onclick="move(-1)">⬅️ বামে</button>
<button onclick="move(1)">➡️ ডানে</button>
<button onclick="kick()">⚽ শট</button>
<button onclick="buy()">🛒 প্লেয়ার কিনুন (500)</button>
<script src="https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.min.js"></script>
<script>
const scene=new THREE.Scene();
scene.background=new THREE.Color(0x87ceeb);
scene.fog=new THREE.Fog(0x87ceeb,25,65);
const camera=new THREE.PerspectiveCamera(60,1,.1,100);
camera.position.set(0,9,15);
camera.lookAt(0,0,0);
const renderer=new THREE.WebGLRenderer({antialias:true});
renderer.setPixelRatio(Math.min(devicePixelRatio,2));
document.getElementById("game").appendChild(renderer.domElement);
scene.add(new THREE.HemisphereLight(0xffffff,0x446644,2));
const light=new THREE.DirectionalLight(0xffffff,2);
light.position.set(5,10,5);scene.add(light);
function box(w,h,d,color,x,y,z){
const m=new THREE.Mesh(new THREE.BoxGeometry(w,h,d),
new THREE.MeshStandardMaterial({color}));
m.position.set(x,y,z);scene.add(m);return m}
box(12,.1,20,0x16843b,0,0,-2);
for(let z=-11;z<8;z+=2)
box(12,.015,1,0x1c9145,0,.06,z);
box(12,.04,.12,0xffffff,0,.1,8);
box(12,.04,.12,0xffffff,0,.1,-12);
box(.05,.04,20,0xffffff,-6,.1,-2);
box(.05,.04,20,0xffffff,6,.1,-2);
box(3,.1,.12,0xffffff,0,.12,8);
box(3,.1,.12,0xffffff,0,.12,-12);
function player(x,z,color){
const g=new THREE.Group();
const shirt=new THREE.Mesh(
new THREE.CylinderGeometry(.3,.38,.8,12),
new THREE.MeshStandardMaterial({color}));
shirt.position.y=1.25;g.add(shirt);
const head=new THREE.Mesh(
new THREE.SphereGeometry(.22,12,12),
new THREE.MeshStandardMaterial({color:0xffcc99}));
head.position.y=1.85;g.add(head);
for(let s of [-1,1]){
const leg=box(.16,.65,.18,0x202d55,0,0,0);
leg.position.set(s*.16,.48,0);g.add(leg);
const arm=box(.14,.65,.14,color,0,0,0);
arm.position.set(s*.39,1.25,0);arm.rotation.z=s*.15;g.add(arm);
}
g.position.set(x,0,z);scene.add(g);return g}
const p=player(0,5,0xffffff);
player(-3,-5,0xff3333);
player(3,-5,0xff3333);
const ball=new THREE.Mesh(
new THREE.SphereGeometry(.25,20,20),
new THREE.MeshStandardMaterial({color:0xffffff}));
ball.position.set(0,.3,3);scene.add(ball);
let coins=1000,goals=0,shots=0;
function resize(){
const el=document.getElementById("game");
renderer.setSize(el.clientWidth,el.clientHeight);
camera.aspect=el.clientWidth/el.clientHeight;
camera.updateProjectionMatrix()}
window.addEventListener("resize",resize);resize();
function move(n){p.position.x=Math.max(-5,Math.min(5,p.position.x+n));}
function kick(){
if(Math.abs(ball.position.x-p.position.x)<2&&
Math.abs(ball.position.z-p.position.z)<3){
ball.position.x=p.position.x;
ball.position.z=-10;
goals++;coins+=100;
document.getElementById("goals").textContent=goals;
document.getElementById("coins").textContent=coins;
setTimeout(()=>ball.position.set(0,.3,3),800);
}else{
ball.position.z-=1;
}
shots++;
}
function buy(){
if(coins>=500){
coins-=500;player(Math.random()*8-4,-7,0xffdd00);
document.getElementById("coins").textContent=coins;
alert("নতুন প্লেয়ার কেনা হয়েছে!");
}else alert("কয়েন যথেষ্ট নেই!");
}
function animate(){
requestAnimationFrame(animate);
ball.rotation.x+=.04;
renderer.render(scene,camera)}
animate();
</script>
</body>
</html>