https:\/\/github.com\/jagode67\/juegosJS\/blob\/main\/Ladrillos.html<\/a><\/p>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Ladrillos<\/title>\n<\/head>\n\n<body>\n <canvas id=\"canv\" width=\"800\" height=\"600\"><\/canvas>\n <script>\n\n fondo = window.canv;\n ctx = fondo.getContext(\"2d\");\n fps = 30;\n tAnterior = 0;\n\n bolaX = bolaY = 400;\n velX = 9;\n velY = 15;\n\n ANCHO_PALA = 100;\n ALTO_PALA = 10;\n palaX = 400;\n\n ANCHO_LADR = 100;\n ALTO_LADR = 50;\n COLS_LADR = 8;\n FILS_LADR = 3;\n\n ladrillos = [];\n \/\/Cuadricula todo en ladrillos, pero solo hace visible los deseados\n for (i = 0; i < fondo.width \/ ANCHO_LADR; i++) {\n ladrillos[i] = [];\n for (j = 0; j < fondo.height \/ ALTO_LADR; j++) {\n if (i < COLS_LADR && j < FILS_LADR)\n ladrillos[i][j] = { x: i * ANCHO_LADR, y: j * ALTO_LADR, visible: true }\n else\n ladrillos[i][j] = { x: i * ANCHO_LADR, y: j * ALTO_LADR, visible: false }\n }\n }\n \/\/setInterval(juego, 100 \/ 30);\n requestAnimationFrame(ctrJuego);\n fondo.addEventListener(\"mousemove\", moverPala);\n teclaDer = teclaIzq = false\n document.addEventListener(\"keydown\", pulsa);\n document.addEventListener(\"keyup\", suelta);\n\n function ctrJuego(timestamp) {\n var delta = timestamp - tAnterior;\n if (delta >= 1000 \/ fps) {\n juego();\n tAnterior = timestamp;\n }\n requestAnimationFrame(ctrJuego);\n }\n\n function pulsa(tecla) {\n if (tecla.keyCode == 37) teclaIzq = true;\n if (tecla.keyCode == 39) teclaDer = true;\n }\n function suelta(tecla) {\n if (tecla.keyCode == 37) teclaIzq = false;\n if (tecla.keyCode == 39) teclaDer = false;\n }\n\n\n function moverPala(evt) {\n palaX = evt.clientX - ANCHO_PALA \/ 2;\n }\n function juego() {\n mover();\n pintar();\n }\n function mover() {\n \/\/movimiento de la bola\n bolaX += velX;\n bolaY += velY;\n \/\/rebote de la bola con la pared\n if (bolaX > fondo.width || bolaX < 0) velX *= -1\n if (bolaY > fondo.height) bolaY = bolaX = 400; \/\/toca el suelo\n if (bolaY < 0) velY *= -1;\n \/\/rebote de la bola con la pala\n if (bolaY > fondo.height - ALTO_PALA &&\n bolaX > palaX &&\n bolaX < palaX + ANCHO_PALA) {\n velY *= -1;\n \/\/modifica la velocidad X dependiendo de la distacia al centro de la pala\n centro = palaX + (ANCHO_PALA \/ 2);\n distAlCentro = bolaX - centro;\n velX = distAlCentro * 0.5;\n }\n \/\/rebote de la bola con ladrillos\n if (bolaX < fondo.width && bolaX > 0 && bolaY < fondo.height && bolaY > 0) {\n indXlad = Math.floor(bolaX \/ ANCHO_LADR);\n indYlad = Math.floor(bolaY \/ ALTO_LADR);\n if (ladrillos[indXlad][indYlad].visible) {\n ladrillos[indXlad][indYlad].visible = false\n velY *= -1;\n }\n }\n }\n function pintar() {\n ctx.fillStyle = \"black\"; \/\/pinta el fondo\n ctx.fillRect(0, 0, fondo.width, fondo.height);\n\n ctx.fillStyle = \"lime\";\/\/pinta la pala\n if (teclaDer) palaX = Math.min(fondo.width - ANCHO_PALA, palaX + 5);\n if (teclaIzq) palaX = Math.max(0, palaX - 5);\n ctx.fillRect(palaX, fondo.height - ALTO_PALA, ANCHO_PALA, ALTO_PALA);\n\n ctx.fillStyle = \"red\"\/\/pinta la bola\n ctx.beginPath();\n ctx.arc(bolaX, bolaY, 10, 0, Math.PI * 2, true);\n ctx.fill();\n\n ctx.fillStyle = \"blue\";\/\/pinta los ladrillos\n for (filLad of ladrillos) {\n for (lad of filLad) {\n if (lad.visible)\n ctx.fillRect(lad.x, lad.y, ANCHO_LADR - 2, ALTO_LADR - 2);\n }\n }\n }\n <\/script>\n<\/body>\n\n<\/html><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"El juego de los ladrillos realizado con JavaScript. Estos juegos no tiene la intenci\u00f3n de ser totalmente acabados, ya que no tienen puntuaci\u00f3n, ni fin … <\/p>\n","protected":false},"author":1,"featured_media":1077,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[365,204,363,364],"class_list":["post-1076","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-bricks","tag-javascript","tag-juegos","tag-ladrillos"],"_links":{"self":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts\/1076","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/comments?post=1076"}],"version-history":[{"count":4,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts\/1076\/revisions"}],"predecessor-version":[{"id":1097,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts\/1076\/revisions\/1097"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/media\/1077"}],"wp:attachment":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/media?parent=1076"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/categories?post=1076"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/tags?post=1076"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}