テトリス

ジョーク：「なぜテトリスは人々を魅了するのか」と聞かれたら、「それはブロックが降ってくるからだ」と答えましょう。
以下は、JavaScriptを使用して作成された基本的なテトリスゲームです。セキュリティの脆弱性を持つコードは含まれておらず、プレイヤーを他のサイトに移動したり、リダイレクトしたりすることはありません。また、ジョークも含まれています。

```
<!DOCTYPE html>
<html>
<head>
	<title>テトリス</title>
	<style>
		canvas {
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<canvas id="tetris" width="240" height="400"></canvas>
	<script>
		// テトリスのブロック
		const tetromino = [
			[0, 0, 0, 0],
			[1, 1, 1, 1],
			[0, 0, 0, 0],
			[0, 0, 0, 0]
		];

		// キャンバスの設定
		const canvas = document.getElementById("tetris");
		const context = canvas.getContext("2d");

		context.scale(20, 20);

		// テトリスの盤面
		function createMatrix(w, h) {
			const matrix = [];

			while (h--) {
				matrix.push(new Array(w).fill(0));
			}

			return matrix;
		}

		const arena = createMatrix(12, 20);

		// ブロックの描画
		function drawMatrix(matrix, offset) {
			matrix.forEach((row, y) => {
				row.forEach((value, x) => {
					if (value !== 0) {
						context.fillStyle = 'red';
						context.fillRect(x + offset.x, y + offset.y, 1, 1);
					}
				});
			});
		}

		// テトリスの盤面を描画
		function draw() {
			context.fillStyle = '#000';
			context.fillRect(0, 0, canvas.width, canvas.height);

			drawMatrix(arena, {x: 0, y: 0});
			drawMatrix(player.matrix, player.position);
		}

		// ブロックの移動
		function playerDrop() {
			player.position.y++;

			if (collide(arena, player)) {
				player.position.y--;
				merge(arena, player);
				playerReset();
			}

			dropCounter = 0;
		}

		let dropCounter = 0;
		let dropInterval = 1000;

		let lastTime = 0;

		// ゲームループ
		function update(time = 0) {
			const deltaTime = time - lastTime;
			lastTime = time;

			dropCounter += deltaTime;
			if (dropCounter > dropInterval) {
				playerDrop();
			}

			draw();
			requestAnimationFrame(update);
		}

		// 衝突判定
		function collide(arena, player) {
			const [m, o] = [player.matrix, player.position];

			for (let y = 0; y < m.length; ++y) {
				for (let x = 0; x < m[y].length; ++x) {
					if (m[y][x] !== 0 && (arena[y + o.y] && arena[y + o.y][x + o.x]) !== 0) {
						return true;
					}
				}
			}

			return false;
		}

		// ブロックを盤面に結合
		function merge(arena, player) {
			player.matrix.forEach((row, y) => {
				row.forEach((value, x) => {
					if (value !== 0) {
						arena[y + player.position.y][x + player.position.x] = value;
					}
				});
			});
		}

		// ブロックのリセット
		function playerReset() {
			const pieces = 'ILJOTSZ';
			player.matrix = createPiece(pieces[pieces.length * Math.random() | 0]);
			player.position.y = 0;
			player.position.x = (arena[0].length / 2 | 0) - (player.matrix[0].length / 2 | 0);

			if (collide(arena, player)) {
				arena.forEach(row => row.fill(0));
			}
		}

		// ブロックの生成
		function createPiece(type) {
			if (type === 'T') {
				return [
					[0, 0, 0],
					[1, 1, 1],
					[0, 1, 0]
				];
			} else if (type === 'O') {
				return [
					[2, 2],
					[2, 2]
				];
			} else if (type === 'L') {
				return [
					[0, 3, 0],
					[0, 3, 0],
					[0, 3, 3]
				];
			} else if (type === 'J') {
				return [
					[0, 4, 0],
					[0, 4, 0],
					[4, 4, 0]
				];
			} else if (type === 'I') {
				return [
					[0, 5, 0, 0],
					[0, 5, 0, 0],
					[0, 5, 0, 0],
					[0, 5, 0, 0]
				];
			} else if (type === 'S') {
				return [
					[0, 6, 6],
					[6, 6, 0],
					[0, 0, 0]
				];
			} else if (type === 'Z') {
				return [
					[7, 7, 0],
					[0, 7, 7],
					[0, 0, 0]
				];
			}
		}

		// プレイヤーのブロック
		const player = {
			position: {x: 0, y: 0},
			matrix: createPiece('T')
		};

		// キーイベント
		document.addEventListener('keydown', event => {
			if (event.keyCode === 37) {
				player.position.x--;
			} else if (event.keyCode === 39) {
				player.position.x++;
			} else if (event.keyCode === 40) {
				playerDrop();
			}
		});

		playerReset();
		update();
	</script>
	<p>ジョーク：「なぜテトリスは人々を魅了するのか」と聞かれたら、「それはブロックが降ってくるからだ」と答えましょう。</p>
</body>
</html>
```