ब्रेकआउट गेम

520 kevekıbhack

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

10 January 2025

माइकीकुन द्वारा एक कोड

21 December 2024

cleancloud166 द्वारा एक कोड

30 August 2025

CSS एनिमेटेड बटन और परत

HTML

<!DOCTYPE html><html lang="en">

<head>

<title>Breakout Game - Mobile Touch, Levels, Power-ups</title>

<style>

body {

margin: 0;

background: #000;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

touch-action: none;

}

canvas {

background: #111;

border: 2px solid #fff;

}

</style>

</head>

<body>

const canvas = document.getElementById('breakout');

const ctx = canvas.getContext('2d');let level = 1;

let lives = 3;

let paddleWidth = 75;

let paddleHeight = 10;

let paddleX = (canvas.width - paddleWidth) / 2;

let x = canvas.width / 2;

let y = canvas.height - 30;

let dx = 2;

let dy = -2;

let ballRadius = 8;

let touchX = null;

let bricks = [];

const brickRowCount = 3;

const brickColumnCount = 7;

const brickWidth = 60;

const brickHeight = 20;

const brickPadding = 10;

const brickOffsetTop = 30;

const brickOffsetLeft = 35;

let score = 0;

let totalBricks = brickRowCount * brickColumnCount;

function initBricks() {

bricks = [];

for (let c = 0; c < brickColumnCount; c++) {

bricks[c] = [];

for (let r = 0; r < brickRowCount + level; r++) {

bricks[c][r] = { x: 0, y: 0, status: 1 };

}

totalBricks = brickColumnCount * (brickRowCount + level);

}

initBricks();

canvas.addEventListener('touchmove', e => {

e.preventDefault();

const rect = canvas.getBoundingClientRect();

touchX = e.touches[0].clientX - rect.left;

paddleX = touchX - paddleWidth / 2;

});

function drawBall() {

ctx.beginPath();

ctx.arc(x, y, ballRadius, 0, Math.PI * 2);

ctx.fillStyle = '#0ff';

ctx.fill();

ctx.closePath();

}

function drawPaddle() {

ctx.beginPath();

ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);

ctx.fillStyle = '#0f0';

ctx.fill();

ctx.closePath();

}

function drawBricks() {

for (let c = 0; c < brickColumnCount; c++) {

for (let r = 0; r < bricks[c].length; r++) {

if (bricks[c][r].status === 1) {

let brickX = c * (brickWidth + brickPadding) + brickOffsetLeft;

let brickY = r * (brickHeight + brickPadding) + brickOffsetTop;

bricks[c][r].x = brickX;

bricks[c][r].y = brickY;

ctx.beginPath();

ctx.rect(brickX, brickY, brickWidth, brickHeight);

ctx.fillStyle = '#f33';

ctx.fill();

ctx.closePath();

}

function collisionDetection() {

for (let c = 0; c < brickColumnCount; c++) {

for (let r = 0; r < bricks[c].length; r++) {

let b = bricks[c][r];

if (b.status === 1) {

if (x > b.x && x < b.x + brickWidth && y > b.y && y < b.y + brickHeight) {

dy = -dy;

b.status = 0;

score++;

// Power-up

if (Math.random() < 0.2) paddleWidth += 10;

if (score === totalBricks) {

level++;

resetBall();

initBricks();

}

function drawInfo() {

ctx.font = '14px Arial';

ctx.fillStyle = '#fff';

ctx.fillText('Score: ' + score, 8, 20);

ctx.fillText('Level: ' + level, 200, 20);

ctx.fillText('Lives: ' + lives, 400, 20);

}

function resetBall() {

x = canvas.width / 2;

y = canvas.height - 30;

dx = 2 + level;

dy = -2 - level;

paddleX = (canvas.width - paddleWidth) / 2;

}

function draw() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

drawBricks();

drawBall();

drawPaddle();

drawInfo();

collisionDetection();

if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) dx = -dx;

if (y + dy < ballRadius) dy = -dy;

else if (y + dy > canvas.height - ballRadius) {

if (x > paddleX && x < paddleX + paddleWidth) dy = -dy;

else {

lives--;

if (lives === 0) {

alert('Game Over!');

document.location.reload();

} else {

resetBall();

}

x += dx;

y += dy;

requestAnimationFrame(draw);

}

draw();

</script>

</body>

</html>

अनुशंसित

माइकीकुन द्वारा एक कोड

cleancloud166 द्वारा एक कोड

CSS एनिमेटेड बटन और परत

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS