Webleb - fragmentos de código

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>

Juego de escape

Recomendado

Deslizarse.IO

Plantas vs Zombies sin jardín

Tarjeta de producto de Glassmorphism

HTML

CSS

JS

Recomendado

Deslizarse.IO

Plantas vs Zombies sin jardín

Tarjeta de producto de Glassmorphism

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS