I'll help you create a 2D ragdoll fighting game with knockback physics for kicking and punching. This will use HTML5 Canvas and JavaScript physics.
<!DOCTYPE html>
<html>
<head>
<title>2D Ragdoll Fighting Game</title>
<style>
body {
margin: 0;
overflow: hidden;
background: #222;
}
canvas {
display: block;
background: #333;
}
.score {
position: absolute;
top: 10px;
color: white;
font-family: Arial;
font-size: 24px;
}
#player1Score {
left: 20px;
}
#player2Score {
right: 20px;
}
</style>
</head>
<body>
<div id="player1Score" class="score">Player 1: 0</div>
<div id="player2Score" class="score">Player 2: 0</div>
<canvas id="gameCanvas"></canvas>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
canvas.width = 1000;
canvas.height = 600;
// Game state
const game = {
players: [],
lastTime: 0,
score: [0, 0],
keys: {
w: false, a: false, s: false, d: false,
up: false, left: false, down: false, right: false
}
};
// Physics parameters
const physics = {
gravity: 0.5,
friction: 0.9,
bounce: 0.6,
punchForce: 8,
kickForce: 12
};
// Player class
class Player {
constructor(x, y, color, controls) {
this.parts = [];
this.color = color;
this.controls = controls;
this.health = 100;
this.facing = 1; // 1 for right, -1 for left
this.attackCooldown = 0;
// Head
this.parts.push({
x, y,
width: 30,
height: 30,
vx: 0,
vy: 0
});
// Torso
this.parts.push({
x, y + 40,
width: 20,
height: 40,
vx: 0,
vy: 0
});
// Left arm
this.parts.push({
x: x - 20,
y: y + 40,
width: 15,
height: 30,
vx: 0,
vy: 0
});
// Right arm
this.parts.push({
x: x + 20,
y: y + 40,
width: 15,
height: 30,
vx: 0,
vy: 0
});
// Left leg
this.parts.push({
x: x - 10,
y: y + 80,
width: 15,
height: 30,
vx: 0,
vy: 0
});
// Right leg
this.parts.push({
x: x + 10,
y: y + 80,
width: 15,
height: 30,
vx: 0,
vy: 0
});
}
update() {
// Update facing direction
if (this.controls.left) this.facing = -1;
if (this.controls.right) this.facing = 1;
// Movement
if (this.controls.left) this.parts.forEach(p => p.x -= 2);
if (this.controls.right) this.parts.forEach(p => p.x += 2);
// Jump
if (this.controls.up && this.parts[1].y + this.parts[1].height >= canvas.height - 10) {
this.parts.forEach(p => p.vy = -12);
}
// Apply physics to each part
this.parts.forEach(part => {
part.vy += physics.gravity;
part.vx *= physics.friction;
part.vy *= physics.friction;
part.x += part.vx;
part.y += part.vy;
// Ground collision
<!DOCTYPE html>
<html>
<head>
<title>2D Ragdoll Fighting Game</title>
<style>
body {
margin: 0;
overflow: hidden;
background: #222;
}
canvas {
display: block;
background: #333;
}
.score {
position: absolute;
top: 10px;
color: white;
font-family: Arial;
font-size: 24px;
}
#player1Score {
left: 20px;
}
#player2Score {
right: 20px;
}
</style>
</head>
<body>
<div id="player1Score" class="score">Player 1: 0</div>
<div id="player2Score" class="score">Player 2: 0</div>
<canvas id="gameCanvas"></canvas>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
canvas.width = 1000;
canvas.height = 600;
// Game state
const game = {
players: [],
lastTime: 0,
score: [0, 0],
keys: {
w: false, a: false, s: false, d: false,
up: false, left: false, down: false, right: false
}
};
// Physics parameters
const physics = {
gravity: 0.5,
friction: 0.9,
bounce: 0.6,
punchForce: 8,
kickForce: 12
};
// Player class
class Player {
constructor(x, y, color, controls) {
this.parts = [];
this.color = color;
this.controls = controls;
this.health = 100;
this.facing = 1; // 1 for right, -1 for left
this.attackCooldown = 0;
// Head
this.parts.push({
x, y,
width: 30,
height: 30,
vx: 0,
vy: 0
});
// Torso
this.parts.push({
x, y + 40,
width: 20,
height: 40,
vx: 0,
vy: 0
});
// Left arm
this.parts.push({
x: x - 20,
y: y + 40,
width: 15,
height: 30,
vx: 0,
vy: 0
});
// Right arm
this.parts.push({
x: x + 20,
y: y + 40,
width: 15,
height: 30,
vx: 0,
vy: 0
});
// Left leg
this.parts.push({
x: x - 10,
y: y + 80,
width: 15,
height: 30,
vx: 0,
vy: 0
});
// Right leg
this.parts.push({
x: x + 10,
y: y + 80,
width: 15,
height: 30,
vx: 0,
vy: 0
});
}
update() {
// Update facing direction
if (this.controls.left) this.facing = -1;
if (this.controls.right) this.facing = 1;
// Movement
if (this.controls.left) this.parts.forEach(p => p.x -= 2);
if (this.controls.right) this.parts.forEach(p => p.x += 2);
// Jump
if (this.controls.up && this.parts[1].y + this.parts[1].height >= canvas.height - 10) {
this.parts.forEach(p => p.vy = -12);
}
// Apply physics to each part
this.parts.forEach(part => {
part.vy += physics.gravity;
part.vx *= physics.friction;
part.vy *= physics.friction;
part.x += part.vx;
part.y += part.vy;
// Ground collision