From 8e7afdfcef60ca6a6b9694be3ad56745e05f6b06 Mon Sep 17 00:00:00 2001 From: apuu03 <57383340+apuu03@users.noreply.github.com> Date: Wed, 21 Feb 2024 11:38:09 -0300 Subject: [PATCH 1/3] agregada funcionalidad de que la bola se quede pegada a la pala cada vez que comienza la partida --- 02-arkanoid-game/index.html | 103 +++++++++++++++++++++++------------- 1 file changed, 65 insertions(+), 38 deletions(-) diff --git a/02-arkanoid-game/index.html b/02-arkanoid-game/index.html index 3df5fc9..aa57a86 100644 --- a/02-arkanoid-game/index.html +++ b/02-arkanoid-game/index.html @@ -34,7 +34,7 @@ /* Variables de nuestro juego */ /* VARIABLES DE LA PELOTA */ - const ballRadius = 3; + const ballRadius = 3 // posicion de la pelota let x = canvas.width / 2 let y = canvas.height - 30 @@ -45,28 +45,28 @@ /* VARIABLES DE LA PALETA */ const PADDLE_SENSITIVITY = 8 - const paddleHeight = 10; - const paddleWidth = 50; + const paddleHeight = 10 + const paddleWidth = 50 let paddleX = (canvas.width - paddleWidth) / 2 let paddleY = canvas.height - paddleHeight - 10 let rightPressed = false let leftPressed = false - + let spacePressed = false /* VARIABLES DE LOS LADRILLOS */ - const brickRowCount = 6; - const brickColumnCount = 13; - const brickWidth = 32; - const brickHeight = 16; - const brickPadding = 0; - const brickOffsetTop = 80; - const brickOffsetLeft = 16; - const bricks = []; + const brickRowCount = 6 + const brickColumnCount = 13 + const brickWidth = 32 + const brickHeight = 16 + const brickPadding = 0 + const brickOffsetTop = 80 + const brickOffsetLeft = 16 + const bricks = [] const BRICK_STATUS = { ACTIVE: 1, - DESTROYED: 0 + DESTROYED: 0, } for (let c = 0; c < brickColumnCount; c++) { @@ -82,12 +82,11 @@ x: brickX, y: brickY, status: BRICK_STATUS.ACTIVE, - color: random + color: random, } } } - function drawBall() { ctx.beginPath() // iniciar el trazado ctx.arc(x, y, ballRadius, 0, Math.PI * 2) @@ -114,7 +113,7 @@ for (let c = 0; c < brickColumnCount; c++) { for (let r = 0; r < brickRowCount; r++) { const currentBrick = bricks[c][r] - if (currentBrick.status === BRICK_STATUS.DESTROYED) continue; + if (currentBrick.status === BRICK_STATUS.DESTROYED) continue const clipX = currentBrick.color * 32 @@ -141,15 +140,13 @@ for (let c = 0; c < brickColumnCount; c++) { for (let r = 0; r < brickRowCount; r++) { const currentBrick = bricks[c][r] - if (currentBrick.status === BRICK_STATUS.DESTROYED) continue; + if (currentBrick.status === BRICK_STATUS.DESTROYED) continue const isBallSameXAsBrick = - x > currentBrick.x && - x < currentBrick.x + brickWidth + x > currentBrick.x && x < currentBrick.x + brickWidth const isBallSameYAsBrick = - y > currentBrick.y && - y < currentBrick.y + brickHeight + y > currentBrick.y && y < currentBrick.y + brickHeight if (isBallSameXAsBrick && isBallSameYAsBrick) { dy = -dy @@ -167,24 +164,35 @@ ) { dx = -dx } - + if (!spacePressed) { + // si la pelota no se ha lanzado, la pelota se mueve con la pala + dx = + leftPressed && paddleX > 0 + ? -PADDLE_SENSITIVITY + : rightPressed && paddleX < canvas.width - paddleWidth + ? PADDLE_SENSITIVITY + : 0 + dy = 0 + } else if (spacePressed && dx === 0 && dy === 0) { + dx = 3 + dy = -3 + } // rebotar en la parte de arriba if (y + dy < ballRadius) { dy = -dy } // la pelota toca la pala - const isBallSameXAsPaddle = - x > paddleX && - x < paddleX + paddleWidth + const isBallSameXAsPaddle = x > paddleX && x < paddleX + paddleWidth - const isBallTouchingPaddle = - y + dy > paddleY + const isBallTouchingPaddle = y + dy > paddleY if (isBallSameXAsPaddle && isBallTouchingPaddle) { dy = -dy // cambiamos la dirección de la pelota - } else if ( // la pelota toca el suelo - y + dy > canvas.height - ballRadius || y + dy > paddleY + paddleHeight + } else if ( + // la pelota toca el suelo + y + dy > canvas.height - ballRadius || + y + dy > paddleY + paddleHeight ) { console.log('Game Over') document.location.reload() @@ -208,10 +216,29 @@ } function initEvents() { + let keysPressed = {} document.addEventListener('keydown', keyDownHandler) document.addEventListener('keyup', keyUpHandler) + // bloqueo de teclas para que no se puedan pulsar el izquierdo y el derecho a la vez si esta la bola pegada a la pala (de lo contrario hace cosas raras ;) ) + document.addEventListener('keydown', (event) => { + if (spacePressed === false) { + keysPressed[event.key] = true + if (keysPressed['ArrowRight'] && keysPressed['ArrowLeft']) { + // Ambas teclas están presionadas + rightPressed = false + leftPressed = false + } + } + }) + document.addEventListener('keyup', (event) => { + if (spacePressed === false) { + delete keysPressed[event.key] + } + }) + function keyDownHandler(event) { + console.log(event.key) const { key } = event if (key === 'Right' || key === 'ArrowRight') { rightPressed = true @@ -226,18 +253,20 @@ rightPressed = false } else if (key === 'Left' || key === 'ArrowLeft') { leftPressed = false + } else if (key === ' ' || key === 'ArrowUp') { + spacePressed = true } } } // a que velocidad de fps queremos que renderice nuestro juego const fps = 60 - + let msPrev = window.performance.now() - let msFPSPrev = window.performance.now() + 1000; + let msFPSPrev = window.performance.now() + 1000 const msPerFrame = 1000 / fps let frames = 0 - let framesPerSec = fps; + let framesPerSec = fps function draw() { window.requestAnimationFrame(draw) @@ -252,11 +281,10 @@ frames++ - if (msFPSPrev < msNow) - { + if (msFPSPrev < msNow) { msFPSPrev = window.performance.now() + 1000 - framesPerSec = frames; - frames = 0; + framesPerSec = frames + frames = 0 } // ... render code @@ -271,9 +299,8 @@ collisionDetection() ballMovement() paddleMovement() - } draw() initEvents() - \ No newline at end of file + From 331fc5f5c26257178f3970a791a146059ca07d5b Mon Sep 17 00:00:00 2001 From: apuu03 <57383340+apuu03@users.noreply.github.com> Date: Wed, 21 Feb 2024 11:47:03 -0300 Subject: [PATCH 2/3] agregada funcionalidad de que la bola se quede pegada a la pala cuando inicia la partida --- 02-arkanoid-game/index.html | 39 ++++++++++++++++++------------------- 1 file changed, 19 insertions(+), 20 deletions(-) diff --git a/02-arkanoid-game/index.html b/02-arkanoid-game/index.html index aa57a86..0b474cc 100644 --- a/02-arkanoid-game/index.html +++ b/02-arkanoid-game/index.html @@ -34,7 +34,7 @@ /* Variables de nuestro juego */ /* VARIABLES DE LA PELOTA */ - const ballRadius = 3 + const ballRadius = 3; // posicion de la pelota let x = canvas.width / 2 let y = canvas.height - 30 @@ -45,8 +45,8 @@ /* VARIABLES DE LA PALETA */ const PADDLE_SENSITIVITY = 8 - const paddleHeight = 10 - const paddleWidth = 50 + const paddleHeight = 10; + const paddleWidth = 50; let paddleX = (canvas.width - paddleWidth) / 2 let paddleY = canvas.height - paddleHeight - 10 @@ -55,18 +55,18 @@ let leftPressed = false let spacePressed = false /* VARIABLES DE LOS LADRILLOS */ - const brickRowCount = 6 - const brickColumnCount = 13 - const brickWidth = 32 - const brickHeight = 16 - const brickPadding = 0 - const brickOffsetTop = 80 - const brickOffsetLeft = 16 - const bricks = [] + const brickRowCount = 6; + const brickColumnCount = 13; + const brickWidth = 32; + const brickHeight = 16; + const brickPadding = 0; + const brickOffsetTop = 80; + const brickOffsetLeft = 16; + const bricks = []; const BRICK_STATUS = { ACTIVE: 1, - DESTROYED: 0, + DESTROYED: 0 } for (let c = 0; c < brickColumnCount; c++) { @@ -82,7 +82,7 @@ x: brickX, y: brickY, status: BRICK_STATUS.ACTIVE, - color: random, + color: random } } } @@ -113,7 +113,7 @@ for (let c = 0; c < brickColumnCount; c++) { for (let r = 0; r < brickRowCount; r++) { const currentBrick = bricks[c][r] - if (currentBrick.status === BRICK_STATUS.DESTROYED) continue + if (currentBrick.status === BRICK_STATUS.DESTROYED) continue; const clipX = currentBrick.color * 32 @@ -140,7 +140,7 @@ for (let c = 0; c < brickColumnCount; c++) { for (let r = 0; r < brickRowCount; r++) { const currentBrick = bricks[c][r] - if (currentBrick.status === BRICK_STATUS.DESTROYED) continue + if (currentBrick.status === BRICK_STATUS.DESTROYED) continue; const isBallSameXAsBrick = x > currentBrick.x && x < currentBrick.x + brickWidth @@ -238,7 +238,6 @@ function keyDownHandler(event) { - console.log(event.key) const { key } = event if (key === 'Right' || key === 'ArrowRight') { rightPressed = true @@ -263,10 +262,10 @@ const fps = 60 let msPrev = window.performance.now() - let msFPSPrev = window.performance.now() + 1000 + let msFPSPrev = window.performance.now() + 1000; const msPerFrame = 1000 / fps let frames = 0 - let framesPerSec = fps + let framesPerSec = fps; function draw() { window.requestAnimationFrame(draw) @@ -283,8 +282,8 @@ if (msFPSPrev < msNow) { msFPSPrev = window.performance.now() + 1000 - framesPerSec = frames - frames = 0 + framesPerSec = frames; + frames = 0; } // ... render code From 4b51f4b00df3508606a13388a766dff6dd095d8c Mon Sep 17 00:00:00 2001 From: apuu03 <57383340+apuu03@users.noreply.github.com> Date: Wed, 21 Feb 2024 12:22:32 -0300 Subject: [PATCH 3/3] =?UTF-8?q?funcionalidad:=20si=20la=20pelota=20toca=20?= =?UTF-8?q?la=20pala=20del=20lado=20izquierdo=20o=20derecho=20la=20bola=20?= =?UTF-8?q?va=20a=20tomar=20una=20direcci=C3=B3n=20diferente?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 02-arkanoid-game/index.html | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/02-arkanoid-game/index.html b/02-arkanoid-game/index.html index 0b474cc..808e5a4 100644 --- a/02-arkanoid-game/index.html +++ b/02-arkanoid-game/index.html @@ -186,8 +186,20 @@ const isBallSameXAsPaddle = x > paddleX && x < paddleX + paddleWidth const isBallTouchingPaddle = y + dy > paddleY + const centerPaddle = (paddleWidth / 2) + //! si la pelota toca la pala del lado izquierdo o derecho la bola va a tomar una dirección diferente + if (isBallTouchingPaddle && isBallSameXAsPaddle) { + if (x < paddleX + centerPaddle) { + dx = -3 + dy = -3 + } else { + dx = 3 + dy = -3 + } + } else if (isBallSameXAsPaddle && isBallTouchingPaddle) { + dy = -dy // cambiamos la dirección de la pelota } else if ( // la pelota toca el suelo