From c7e11b6825022617e544092ae6b335883d270a9d Mon Sep 17 00:00:00 2001 From: kkharwatekar-creator Date: Sat, 6 Dec 2025 18:43:33 +0530 Subject: [PATCH] Revamp index.html for WWE Fighting Game --- _project_starter_/index.html | 159 ++++++++++++++++++++++++++++++++--- 1 file changed, 149 insertions(+), 10 deletions(-) diff --git a/_project_starter_/index.html b/_project_starter_/index.html index 47835013..d8fde67a 100644 --- a/_project_starter_/index.html +++ b/_project_starter_/index.html @@ -1,13 +1,152 @@ - - - - - My Project - - -

Project Starter

- - + + + WWE Fighting Game + + + + +
+ +
+
+
+
+ + + + +
+ + + +body { + background: #111; + display: flex; + justify-content: center; + margin-top: 40px; + font-family: sans-serif; +} + +#gameArea { + width: 900px; + height: 450px; + background: url("ring.png") no-repeat center/cover; + position: relative; + overflow: hidden; + border: 4px solid #fff; +} + +.fighter { + position: absolute; + bottom: 0; + width: 180px; + transition: transform 0.1s; +} + +#player { left: 100px; } +#enemy { right: 100px; transform: scaleX(-1); } + +/* HP bars */ +#ui { + width: 100%; + position: absolute; + top: 10px; +} + +.bar { + height: 20px; + border-radius: 6px; +} + +.playerHP { + background: #2196f3; + width: 350px; + margin-left: 10px; +} + +.enemyHP { + background: #f44336; + width: 350px; + margin-left: 540px; +} +const player = document.getElementById("player"); +const enemy = document.getElementById("enemy"); +const hp1 = document.querySelector(".playerHP"); +const hp2 = document.querySelector(".enemyHP"); + +let pX = 100; +let eX = 650; +let pHP = 350; +let eHP = 350; +let gravity = 0; +let jumping = false; + +// Movement +document.addEventListener("keydown", e => { + if (e.key === "ArrowRight") pX += 15; + if (e.key === "ArrowLeft") pX -= 15; + + // Punch + if (e.key === "z") attackEnemy(25); + + // Kick + if (e.key === "x") attackEnemy(35); + + // Jump + if (e.key === "ArrowUp" && !jumping) { + gravity = 18; + jumping = true; + } + + updatePositions(); +}); + +// Update positions +function updatePositions() { + // Keep inside ring + pX = Math.max(0, Math.min(pX, 750)); + eX = Math.max(0, Math.min(eX, 750)); + + player.style.left = pX + "px"; + enemy.style.left = eX + "px"; +} + +// Attack hit detection +function attackEnemy(dmg) { + if (Math.abs(pX - eX) < 120) { + eHP -= dmg; + hp2.style.width = eHP + "px"; + } +} + +// Simple AI +setInterval(() => { + // Enemy moves toward player + if (eX > pX + 120) eX -= 10; + else if (eX < pX - 120) eX += 10; + + // Enemy attacks + if (Math.abs(pX - eX) < 120) { + pHP -= 10; + hp1.style.width = pHP + "px"; + } + + updatePositions(); +}, 200); + +// Jump physics +setInterval(() => { + if (jumping) { + player.style.bottom = gravity + "px"; + gravity -= 2; + + if (gravity <= 0) { + gravity = 0; + jumping = false; + player.style.bottom = "0px"; + } + } +}, 40);