Meta Description" name="description" />
<!DOCTYPE html>
<html>
<head>
<title>2D Game</title>
<style>
canvas { background: #eee; display: block; margin: 0 auto; border: 2px solid #000; }
</style>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Player ki position
let x = canvas.width / 2;
let y = canvas.height - 30;
let dx = 2; // Speed X
let dy = -2; // Speed Y
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // Purana frame saaf karna
// Player Block banana
ctx.beginPath();
ctx.rect(x, y, 20, 20);
ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.closePath();
// Movement logic
x += dx;
y += dy;
// Deewar se takrane par direction change karna
if(x + dx > canvas.width-20 || x + dx < 0) { dx = -dx; }
if(y + dy > canvas.height-20 || y + dy < 0) { dy = -dy; }
requestAnimationFrame(draw);
}
draw();
</script>
</body>
</html>1
1
1KB
1KB
126.0ms
180.0ms
127.0ms