diff --git a/02-arkanoid-game/index.html b/02-arkanoid-game/index.html index 01ea8fb..1ab4579 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 = 150 let paddleX = (canvas.width - paddleWidth) / 2 let paddleY = canvas.height - paddleHeight - 10 @@ -55,14 +55,14 @@ let leftPressed = 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, @@ -98,10 +98,10 @@ function drawPaddle() { ctx.drawImage( - $sprite, // imagen + $sprite, // imagen. 29, // clipX: coordenadas de recorte 174, // clipY: coordenadas de recorte - paddleWidth, // el tamaño del recorte + paddleWidth - 100, // el tamaño del recorte paddleHeight, // tamaño del recorte paddleX, // posición X del dibujo paddleY, // posición Y del dibujo @@ -114,7 +114,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,7 +141,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 && @@ -231,13 +231,13 @@ } // a que velocidad de fps queremos que renderice nuestro juego - const fps = 60 - + const fps = 120 + 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 +252,10 @@ frames++ - if (msFPSPrev < msNow) - { + if (msFPSPrev < msNow) { msFPSPrev = window.performance.now() + 1000 - framesPerSec = frames; - frames = 0; + framesPerSec = frames + frames = 0 } // ... render code