diff --git a/02-arkanoid-game/index.html b/02-arkanoid-game/index.html index 3df5fc9..808e5a4 100644 --- a/02-arkanoid-game/index.html +++ b/02-arkanoid-game/index.html @@ -53,7 +53,7 @@ let rightPressed = false let leftPressed = false - + let spacePressed = false /* VARIABLES DE LOS LADRILLOS */ const brickRowCount = 6; const brickColumnCount = 13; @@ -87,7 +87,6 @@ } } - function drawBall() { ctx.beginPath() // iniciar el trazado ctx.arc(x, y, ballRadius, 0, Math.PI * 2) @@ -144,12 +143,10 @@ 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,47 @@ ) { 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 isBallTouchingPaddle = - y + dy > paddleY + 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 - 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,8 +228,26 @@ } 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) { const { key } = event @@ -226,13 +264,15 @@ 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; const msPerFrame = 1000 / fps @@ -252,8 +292,7 @@ frames++ - if (msFPSPrev < msNow) - { + if (msFPSPrev < msNow) { msFPSPrev = window.performance.now() + 1000 framesPerSec = frames; frames = 0; @@ -271,9 +310,8 @@ collisionDetection() ballMovement() paddleMovement() - } draw() initEvents() - \ No newline at end of file +