<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Stable 3D Human Fighting Game</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body { margin:0; overflow:hidden; background:#000; }
#attack {
position:fixed;
bottom:20px;
right:20px;
width:70px;
height:70px;
border-radius:50%;
border:none;
font-size:28px;
background:#e63946;
color:#fff;
}
</style>
</head>
<body>
<button id="attack">👊</button>
<script
src="[Link]
<script>
/* BASIC SETUP */
const scene = new [Link]();
[Link] = new [Link](0x1b1b1b);
const camera = new [Link](70,
innerWidth/innerHeight, 0.1, 100);
[Link](0,5,9);
const renderer = new [Link]({ antialias:true });
[Link](innerWidth, innerHeight);
[Link]([Link](devicePixelRatio, 2));
[Link]([Link]);
/* LIGHT */
[Link](new [Link](0xffffff,0.7));
const sun = new [Link](0xffffff,0.8);
[Link](5,10,5);
[Link](sun);
/* GROUND */
const ground = new [Link](
new [Link](40,40),
new [Link]({color:0x2a2a2a})
);
[Link].x = -[Link]/2;
[Link](ground);
/* HUMAN BUILDER (LOW POLY) */
function human(color){
const g = new [Link]();
const m = new [Link]({color});
const body = new [Link](new
[Link](0.8,1.2,0.4), m);
[Link].y = 1.4;
const head = new [Link](new
[Link](0.35,16,16), m);
[Link].y = 2.3;
const armR = new [Link](new
[Link](0.25,0.9,0.25), m);
[Link](0.6,1.5,0);
const armL = [Link]();
[Link].x = -0.6;
const legR = new [Link](new
[Link](0.3,0.9,0.3), m);
[Link](0.25,0.45,0);
const legL = [Link]();
[Link].x = -0.25;
[Link](body, head, armR, armL,
legR, legL);
[Link] = { armR, armL,
legR, legL };
return g;
}
/* PLAYER & ENEMY */
const player =
human(0x2ec4b6);
[Link](player);
const enemy =
human(0xe63946);
[Link](4,0,0);
[Link](enemy);
/* INPUT */
const keys = {};
addEventListener("keydown", e => keys[[Link]()] = true);
addEventListener("keyup",
e => keys[[Link]()] = false);
let attackNow = false;
[Link]("attack").onclick = () => attackNow = true;
/* SAFE ANIMATION */
let walk = 0;
function punch(h){
[Link].x = -1;
setTimeout(()=>[Link].x = 0,120);
}
/* MAIN LOOP */
function loop(){
requestAnimationFrame(loop);
let moving =
false;
const speed =
0.07;
if(keys["w"])
{ [Link].z -= speed; moving=true; }
if(keys["s"]){ [Link].z += speed; moving=true; }
if(keys["a"]){ [Link].x -= speed; moving=true; }
if(keys["d"]){ [Link].x += speed; moving=true; }
/*
WALK */
if(moving){
walk += 0.15;
[Link].x = [Link](walk)*0.5;
[Link].x = -[Link](walk)*0.5;
} else {
[Link].x = 0;
[Link].x = 0;
/* ATTACK */
if(keys[" "] || attackNow){
punch(player);
if([Link]([Link]) < 1.7){
[Link].x += ([Link]()-0.5);
[Link].z += ([Link]()-0.5);
attackNow = false;
}
/* ENEMY AI (SAFE) */
const d = [Link]().sub([Link]);
if([Link]() > 1.6){
[Link]();
[Link]([Link](0.025));
[Link].x = [Link].x;
[Link].z = [Link].z + 9;
[Link]([Link]);
[Link](scene,camera);
loop();
/* RESIZE SAFE */
addEventListener("resize",()=>{
[Link] = innerWidth/innerHeight;
[Link]();
[Link](innerWidth,innerHeight);
});
</script>
</body>
</html>