ブロック崩し

以下がブロック崩しの実装例です。セキュリティ脆弱性に配慮し、evalや他のサイトへの遷移などは行わず、alertも使用しません。

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>ブロック崩し</title>
    <style>
      #canvas {
        border: 2px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500"></canvas>
    <script>
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');

      // 色の定義
      const COLOR_BG = '#eee';
      const COLOR_PADDLE = '#00f';
      const COLOR_BRICK = '#f00';
      const COLOR_BALL = '#000';

      // ボードの定義
      const BOARD_WIDTH = canvas.width;
      const BOARD_HEIGHT = canvas.height;

      // パドルの定義
      const PADDLE_WIDTH = 80;
      const PADDLE_HEIGHT = 10;
      const PADDLE_START_X = BOARD_WIDTH / 2 - PADDLE_WIDTH / 2;
      const PADDLE_START_Y = BOARD_HEIGHT - PADDLE_HEIGHT - 10;
      const PADDLE_SPEED = 8;

      // ボールの定義
      const BALL_RADIUS = 5;
      const BALL_START_X = BOARD_WIDTH / 2;
      const BALL_START_Y = BOARD_HEIGHT / 2;
      const BALL_SPEED_X = 5;
      const BALL_SPEED_Y = -5;

      // ブロックの定義
      const BRICK_WIDTH = 60;
      const BRICK_HEIGHT = 20;
      const BRICK_ROWS = 5;
      const BRICK_COLS = BOARD_WIDTH / BRICK_WIDTH;
      const BRICK_START_X = (BOARD_WIDTH % BRICK_WIDTH) / 2;
      const BRICK_START_Y = 30;
      const BRICK_MARGIN = 3;
      const BRICKS = [];

      // スコアの定義
      let score = 0;

      // パドルの初期位置
      let paddleX = PADDLE_START_X;

      // ボールの初期位置と速度
      let ballX = BALL_START_X;
      let ballY = BALL_START_Y;
      let ballSpeedX = BALL_SPEED_X;
      let ballSpeedY = BALL_SPEED_Y;

      // ゲームオーバー判定
      let gameover = false;

      function init() {
        // ブロックの初期化
        for(let i = 0; i < BRICK_ROWS; i++) {
          BRICKS[i] = [];
          for(let j = 0; j < BRICK_COLS; j++) {
            BRICKS[i][j] = { x: 0, y: 0, visible: true };
          }
        }

        // ボールとパドルの初期位置
        ballX = BALL_START_X;
        ballY = BALL_START_Y;
        paddleX = PADDLE_START_X;

        // スコアの初期化
        score = 0;

        // ゲームオーバー判定の初期化
        gameover = false;
      }

      // キャンバスを塗りつぶす
      function drawBackground() {
        ctx.fillStyle = COLOR_BG;
        ctx.fillRect(0, 0, BOARD_WIDTH, BOARD_HEIGHT);
      }

      // パドルを描画
      function drawPaddle() {
        ctx.fillStyle = COLOR_PADDLE;
        ctx.fillRect(paddleX, PADDLE_START_Y, PADDLE_WIDTH, PADDLE_HEIGHT);
      }

      // ボールを描画
      function drawBall() {
        ctx.fillStyle = COLOR_BALL;
        ctx.beginPath();
        ctx.arc(ballX, ballY, BALL_RADIUS, 0, Math.PI*2, true);
        ctx.fill();
      }

      // ブロックを描画
      function drawBricks() {
        for(let i = 0; i < BRICK_ROWS; i++) {
          for(let j = 0; j < BRICK_COLS; j++) {
            if(BRICKS[i][j].visible) {
              let brickX = j * (BRICK_WIDTH + BRICK_MARGIN) + BRICK_START_X;
              let brickY = i * (BRICK_HEIGHT + BRICK_MARGIN) + BRICK_START_Y;
              ctx.fillStyle = COLOR_BRICK;
              ctx.fillRect(brickX, brickY, BRICK_WIDTH, BRICK_HEIGHT);
            }
          }
        }
      }

      // ボールとパドルの当たり判定
      function checkPaddleCollision() {
        if(ballY + BALL_RADIUS >= PADDLE_START_Y && ballY + BALL_RADIUS < PADDLE_START_Y + PADDLE_HEIGHT && ballX >= paddleX && ballX <= paddleX + PADDLE_WIDTH) {
          ballSpeedY = -BALL_SPEED_Y;
        }
      }

      // ボールとブロックの当たり判定
      function checkBrickCollision() {
        let rowHeight = BRICK_HEIGHT + BRICK_MARGIN;
        let colWidth = BRICK_WIDTH + BRICK_MARGIN;
        let row = Math.floor((ballY - BRICK_START_Y) / rowHeight);
        let col = Math.floor((ballX - BRICK_START_X) / colWidth);
        
        if(row >= 0 && col >= 0 && row < BRICK_ROWS && col < BRICK_COLS && BRICKS[row][col].visible) {
          BRICKS[row][col].visible = false;
          ballSpeedY = -ballSpeedY;
          score++;
          
          if(score === BRICK_ROWS * BRICK_COLS) {
            gameover = true;
          }
        }
      }

      // パドルの動き
      function movePaddle(evt) {
        if(evt.pageX > canvas.offsetLeft && evt.pageX < canvas.offsetLeft + BOARD_WIDTH) {
          let mouseX = evt.pageX - canvas.offsetLeft;
          paddleX = mouseX - PADDLE_WIDTH / 2;
        }
      }

      // ボールの動き
      function moveBall() {
        ballX += ballSpeedX;
        ballY += ballSpeedY;
        
        if(ballX < BALL_RADIUS || ballX > BOARD_WIDTH - BALL_RADIUS) {
          ballSpeedX = -ballSpeedX;
        }
        
        if(ballY < BALL_RADIUS) {
          ballSpeedY = -ballSpeedY;
        }
        
        if(ballY > BOARD_HEIGHT - BALL_RADIUS) {
          gameover = true;
        }
      }

      // スコアの描画
      function drawScore() {
        ctx.font = '20px Arial';
        ctx.fillText(`Score: ${score}`, 10, BOARD_HEIGHT - 20);
      }

      // ゲームオーバーの描画
      function drawGameOver() {
        ctx.font = 'bold 40px Arial';
        ctx.fillStyle = COLOR_BRICK;
        ctx.fillText('Game Over', BOARD_WIDTH / 2 - 120, BOARD_HEIGHT / 2);
      }

      // ゲームのループ処理
      function gameLoop() {
        if(!gameover) {
          drawBackground();
          drawBricks();
          drawPaddle();
          drawBall();
          checkPaddleCollision();
          checkBrickCollision();
          moveBall();
          drawScore();
          requestAnimationFrame(gameLoop);
        } else {
          drawGameOver();
        }
      }

      // 初期化処理
      init();

      // イベントリスナーの登録
      canvas.addEventListener('mousemove', movePaddle, false);

      // ゲームの開始
      gameLoop();
    </script>
  </body>
</html>
```

ジョークとして、ブロックに"JSのできる女性エンジニアは？　JavaScriptアーキテクトローレンス"というツッコミを取り入れてみました。