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

Fondo de puntos animados

Un código de cleanbug411

Piedra, papel, tijera V.2

HTML

CSS

JS

Recomendado

Fondo de puntos animados

Un código de cleanbug411

Piedra, papel, tijera V.2

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS