AI game creator

Click here for free DL of the app version that can save data.

No:39651

←

Prev Next

→

広いテトリス
Developer User17762｜Date and time 24/1/29 18:27:10
Build time 37.755 sec｜Game capacity 4.735KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
	<title>テトリス</title>
	<style>
		body {
			margin: 0;
			padding: 0;
		}
		canvas {
			background: #000;
		}
	</style>
</head>
<body>
	<script>
		// テトリスのゲーム処理を実装する

// ゲームの設定
		const ROW = 20; // テトリスの行数
		const COL = 10; // テトリスの列数
		const SIZE = 30; // マスのサイズ
		const DELAY = 500; // ブロックの落ちる速度

// テトリスのキャンバスを取得
		const canvas = document.createElement('canvas');
		const context = canvas.getContext('2d');
		canvas.width = COL * SIZE;
		canvas.height = ROW * SIZE;
		document.body.appendChild(canvas);

// スコアの表示
		const scoreElement = document.createElement('div');
		let score = 0;
		scoreElement.textContent = 'Score: ' + score;
		document.body.appendChild(scoreElement);

// テトリスのフィールドの初期化
		const field = [];
		for (let row = 0; row < ROW; row++) {
			field[row] = [];
			for (let col = 0; col < COL; col++) {
				field[row][col] = 0;
			}
		}

// テトリスのブロックを定義
		const blocks = [
			[
				[1, 1],
				[1, 1],
			],
			[
				[1, 1, 1, 1]
			],
			[
				[1, 1, 0],
				[0, 1, 1],
			],
			[
				[0, 1, 1],
				[1, 1, 0],
			],
			[
				[1, 1, 1],
				[0, 1, 0],
			],
			[
				[1, 1, 1],
				[1, 0, 0],
			],
			[
				[1, 0, 0],
				[1, 1, 1],
			],
		];

// テトリスのブロックを作成
		const createBlock = () => {
			const index = Math.floor(Math.random() * blocks.length);
			const block = blocks[index];
			const col = Math.floor((COL - block[0].length) / 2);
			return {
				block,
				row: 0,
				col,
			};
		};

// テトリスのブロックを描画
		const draw = () => {
			context.clearRect(0, 0, canvas.width, canvas.height);
			for (let row = 0; row < ROW; row++) {
				for (let col = 0; col < COL; col++) {
					if (field[row][col] === 1) {
						context.fillStyle = '#F27163';
						context.fillRect(col * SIZE, row * SIZE, SIZE, SIZE);
					}
				}
			}

// テトリスのブロックを移動
		const moveBlock = (direction) => {
			const { block, row, col } = currentBlock;
			let newRow = row;
			let newCol = col;
			switch (direction) {
				case 'left':
					newCol--;
					break;
				case 'right':
					newCol++;
					break;
				case 'down':
					newRow++;
					break;
			}
			if (isValidMove(block, newRow, newCol)) {
				currentBlock.row = newRow;
				currentBlock.col = newCol;
			} else {
				if (direction === 'down') {
					addBlockToField(block, row, col);
					clearLines();
					currentBlock = createBlock();
				}
			}
		};

// テトリスのブロックの移動が有効かチェック
		const isValidMove = (block, row, col) => {
			for (let i = 0; i < block.length; i++) {
				for (let j = 0; j < block[i].length; j++) {
					if (
						block[i][j] &&
						(row + i < 0 || row + i >= ROW || col + j < 0 || col + j >= COL || field[row + i][col + j])
					) {
						return false;
					}
				}
			}
			return true;
		};

// テトリスのブロックをフィールドに追加
		const addBlockToField = (block, row, col) => {
			for (let i = 0; i < block.length; i++) {
				for (let j = 0; j < block[i].length; j++) {
					if (block[i][j]) {
						field[row + i][col + j] = 1;
					}
				}
			}
		};

// ラインをクリアしスコアを加算
		const clearLines = () => {
			for (let row = ROW - 1; row >= 0; row--) {
				if (field[row].every((cell) => cell === 1)) {
					field.splice(row, 1);
					field.unshift(new Array(COL).fill(0));
					score += 10;
					scoreElement.textContent = 'Score: ' + score;
				}
			}
		};

// ゲームオーバー判定
		const isGameOver = () => {
			const { block, row, col } = currentBlock;
			return !isValidMove(block, row, col);
		};

// キーボード操作
		const onKeyDown = (e) => {
			switch (e.keyCode) {
				case 37:
					moveBlock('left');
					break;
				case 39:
					moveBlock('right');
					break;
				case 40:
					moveBlock('down');
					break;
			}
		};

// ゲームループ
		const gameLoop = () => {
			if (!isGameOver()) {
				moveBlock('down');
				draw();
			} else {
				alert('Game over!');
			}
		};

// ゲームの開始
		let currentBlock = createBlock();
		draw();
		setInterval(gameLoop, DELAY);
		document.addEventListener('keydown', onKeyDown);
	</script>
</body>
</html>