<title>Fighting Game</title>
<style>
body {
margin: 0;
overflow: hidden;
background-color: black;
}
canvas {
display: block;
background: url('https://i.imgur.com/AqXxZb8.png') center/cover; /* Background Image */
}
#hud {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
color: white;
font-size: 20px;
font-family: Arial, sans-serif;
}
.health-bar {
height: 20px;
background: red;
width: 100px;
}
#player1-health {
float: left;
background: green;
}
#player2-health {
float: right;
background: green;
}
</style>
<div id="hud">
<div class="health-bar" id="player1-health"></div>
<div class="health-bar" id="player2-health"></div>
</div>
<canvas id="gameCanvas"></canvas>
<script>
// Setup canvas
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
canvas.width = 800;
canvas.height = 400;
// Load images
const fighter1Img = new Image();
fighter1Img.src = "https://i.imgur.com/qINwEdO.png"; // Replace with your sprite
const fighter2Img = new Image();
fighter2Img.src = "https://i.imgur.com/XSTVMSq.png"; // Replace with your sprite
// Fighter class
class Fighter {
constructor(x, y, img) {
this.x = x;
this.y = y;
this.width = 50;
this.height = 100;
this.health = 100;
this.speed = 5;
this.velocityY = 0;
this.gravity = 0.5;
this.img = img;
this.isAttacking = false;
}
draw() {
ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
}
update() {
this.y += this.velocityY;
if (this.y + this.height < canvas.height) {
this.velocityY += this.gravity;
} else {
this.y = canvas.height - this.height;
this.velocityY = 0;
}
this.draw();
}
attack(opponent) {
if (this.isAttacking) return;
this.isAttacking = true;
setTimeout(() => this.isAttacking = false, 500);
// Check collision
if (this.x + this.width >= opponent.x && this.x <= opponent.x + opponent.width) {
opponent.health -= 10;
updateHealthBars();
}
}
}
// Initialize fighters
const player1 = new Fighter(100, canvas.height - 100, fighter1Img);
const player2 = new Fighter(600, canvas.height - 100, fighter2Img);
// Update health bars
function updateHealthBars() {
document.getElementById("player1-health").style.width = player1.health + "%";
document.getElementById("player2-health").style.width = player2.health + "%";
if (player1.health <= 0 || player2.health <= 0) {
alert(player1.health <= 0 ? "Player 2 Wins!" : "Player 1 Wins!");
location.reload();
}
}
// Game loop
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
player1.update();
player2.update();
requestAnimationFrame(animate);
}
animate();
// Controls
const keys = {};
window.addEventListener("keydown", (e) => {
keys[e.key] = true;
if (e.key === "w" && player1.y + player1.height >= canvas.height
