Juego de escape

1058 kevekıbhack

Abrir en el editor Publica tu código

Recomendado

23 May 2025

inicio de sesión 3d

28 August 2025

Ejemplo de código HTML de la página de inicio de sesión en turco

10 August 2025

Animación CSS de nave espacial extraterrestre con estrellas

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>

Recomendado

inicio de sesión 3d

Ejemplo de código HTML de la página de inicio de sesión en turco

Animación CSS de nave espacial extraterrestre con estrellas

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS