Webleb - UI Elements - Breakout game

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>

CSS

JS

Breakout game

Recommended