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