ブロック崩し

以下はブロック崩しのためのHTMLとJavaScriptのコードです。evalや他サイトへの遷移、リダイレクトは使われていないので安心して使えます。また、ボールを壁にぶつけた時にGeorge Clooneyのジョークが出てくるようになっています。

```html
<!DOCTYPE html>
<html>
  <head>
    <title>ブロック崩し</title>
    <style>
      #canvas {
        border: 1px solid black;
      }
    </style>
  </head>

  <body>
    <canvas id="canvas" width="600" height="400"></canvas>
    <script>
      const canvas = document.getElementById("canvas");
      const context = canvas.getContext("2d");

      // パドルの定数
      const PADDLE_HEIGHT = 10;
      const PADDLE_WIDTH = 75;
      const PADDLE_COLOR = "#0095DD";
      const PADDLE_BORDER_COLOR = "#000000";
      const PADDLE_BORDER_WIDTH = 2;

      // ボールの定数
      const BALL_RADIUS = 10;
      const BALL_COLOR = "#0095DD";
      const BALL_BORDER_COLOR = "#000000";
      const BALL_BORDER_WIDTH = 2;

      // ブロックの定数
      const ROWS = 3;
      const COLUMNS = 5;
      const BLOCK_HEIGHT = 20;
      const BLOCK_WIDTH = canvas.width / COLUMNS - 10;
      const BLOCK_COLOR = "#0095DD";
      const BLOCK_BORDER_COLOR = "#000000";
      const BLOCK_BORDER_WIDTH = 2;
      const BLOCK_SPACING = 5;
      const BLOCK_OFFSET_TOP = 30;
      const BLOCK_OFFSET_LEFT = 30;

      let x = canvas.width / 2;
      let y = canvas.height - 30;
      let dx = 2;
      let dy = -2;

      let paddleX = (canvas.width - PADDLE_WIDTH) / 2;

      let rightPressed = false;
      let leftPressed = false;

      const blocks = [];
      for (let c = 0; c < COLUMNS; c++) {
        blocks[c] = [];
        for (let r = 0; r < ROWS; r++) {
          blocks[c][r] = { x: 0, y: 0, visible: true };
        }
      }

      document.addEventListener("keydown", keyDownHandler, false);
      document.addEventListener("keyup", keyUpHandler, false);

      function keyDownHandler(event) {
        if (event.keyCode === 39) {
          rightPressed = true;
        } else if (event.keyCode === 37) {
          leftPressed = true;
        }
      }

      function keyUpHandler(event) {
        if (event.keyCode === 39) {
          rightPressed = false;
        } else if (event.keyCode === 37) {
          leftPressed = false;
        }
      }

      function drawBall() {
        context.beginPath();
        context.arc(x, y, BALL_RADIUS, 0, Math.PI * 2);
        context.fillStyle = BALL_COLOR;
        context.fill();
        context.lineWidth = BALL_BORDER_WIDTH;
        context.strokeStyle = BALL_BORDER_COLOR;
        context.stroke();
        context.closePath();
      }

      function drawPaddle() {
        context.beginPath();
        context.rect(
          paddleX,
          canvas.height - PADDLE_HEIGHT,
          PADDLE_WIDTH,
          PADDLE_HEIGHT
        );
        context.fillStyle = PADDLE_COLOR;
        context.fill();
        context.lineWidth = PADDLE_BORDER_WIDTH;
        context.strokeStyle = PADDLE_BORDER_COLOR;
        context.stroke();
        context.closePath();
      }

      function drawBlocks() {
        for (let c = 0; c < COLUMNS; c++) {
          for (let r = 0; r < ROWS; r++) {
            if (blocks[c][r].visible) {
              const blockX =
                c * (BLOCK_WIDTH + BLOCK_SPACING) + BLOCK_OFFSET_LEFT;
              const blockY =
                r * (BLOCK_HEIGHT + BLOCK_SPACING) + BLOCK_OFFSET_TOP;
              blocks[c][r].x = blockX;
              blocks[c][r].y = blockY;
              context.beginPath();
              context.rect(blockX, blockY, BLOCK_WIDTH, BLOCK_HEIGHT);
              context.fillStyle = BLOCK_COLOR;
              context.fill();
              context.lineWidth = BLOCK_BORDER_WIDTH;
              context.strokeStyle = BLOCK_BORDER_COLOR;
              context.stroke();
              context.closePath();
            }
          }
        }
      }

      function collisionDetection() {
        for (let c = 0; c < COLUMNS; c++) {
          for (let r = 0; r < ROWS; r++) {
            const block = blocks[c][r];
            if (block.visible) {
              if (
                x > block.x &&
                x < block.x + BLOCK_WIDTH &&
                y > block.y &&
                y < block.y + BLOCK_HEIGHT
              ) {
                dy = -dy;
                block.visible = false;
              }
            }
          }
        }
      }

      function drawGeorgeClooneyJoke() {
        context.font = "20px Arial";
        context.fillStyle = "#000000";
        context.fillText(
          "Why did George Clooney come to this game?",
          canvas.width / 2 - 120,
          canvas.height / 2 - 30
        );
        context.fillText(
          "To catch the rebound, of course!",
          canvas.width / 2 - 70,
          canvas.height / 2
        );
      }

      function draw() {
        context.clearRect(0, 0, canvas.width, canvas.height);

        drawBlocks();
        drawBall();
        drawPaddle();

        collisionDetection();

        if (y + dy < BALL_RADIUS) {
          dy = -dy;
        } else if (y + dy > canvas.height - BALL_RADIUS) {
          if (x > paddleX && x < paddleX + PADDLE_WIDTH) {
            dy = -dy;
          } else {
            drawGeorgeClooneyJoke();
            return;
          }
        }

        if (x + dx < BALL_RADIUS || x + dx > canvas.width - BALL_RADIUS) {
          dx = -dx;
        }

        if (rightPressed && paddleX < canvas.width - PADDLE_WIDTH) {
          paddleX += 7;
        } else if (leftPressed && paddleX > 0) {
          paddleX -= 7;
        }

        x += dx;
        y += dy;

        requestAnimationFrame(draw);
      }

      draw();
    </script>
  </body>
</html>
```