テトリスみたいなゲーム's game

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

No:22624

←

Prev Next

→

テトリスみたいなゲーム
Developer User10436｜Date and time 23/10/23 18:51:32
Build time 121.412 sec｜Game capacity 5.144KB｜

Script

了解です。以下にテトリス風のゲームの実装例を示します。

このHTMLファイルを保存し、ブラウザで開くとテトリス風のゲームが遊べます。スマホで操作する場合は、キーボード操作の部分をタップやスワイプのイベントに変更する必要があります。また、絵文字を使用してゲームを装飾することも可能です。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

了解です。以下にテトリス風のゲームの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Tetris Game</title>
	<style>
		body {
			margin: 0;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100vh;
			background-color: #222;
		}
		#game-board {
			background-color: #444;
			border: 4px solid #000;
			box-sizing: border-box;
			width: 300px;
			height: 600px;
			display: grid;
			grid-template-rows: repeat(20, 1fr);
			grid-template-columns: repeat(10, 1fr);
		}
		.block {
			background-color: #999;
			border: 1px solid #000;
		}
	</style>
</head>
<body>
	<div id="game-board"></div>

// ピースの定義
	const pieces = [
		[
			[1, 1],
			[1, 1],
		],
		[
			[1, 1, 1, 1],
		],
		[
			[1, 1, 1],
			[0, 0, 1],
		],
		[
			[1, 1, 1],
			[1, 0, 0],
		],
		[
			[1, 1, 1],
			[0, 1, 0],
		],
		[
			[0, 1, 1],
			[1, 1, 0],
		],
		[
			[1, 1, 0],
			[0, 1, 1],
		],
	];

// ゲーム状態
	let board = Array.from({ length: height }, () => Array(width).fill(0));
	let currentPiece = null;
	let currentPieceX = 0;
	let currentPieceY = 0;

// ゲームの描画
	function draw() {
		let html = "";
		for (let i = 0; i < height; i++) {
			for (let j = 0; j < width; j++) {
				if (board[i][j]) {
					html += `<div class="block" style="top: ${i * blockHeight}px; left: ${j * blockWidth}px;"></div>`;
				}
			}
		}

if (currentPiece) {
			for (let i = 0; i < currentPiece.length; i++) {
				for (let j = 0; j < currentPiece[i].length; j++) {
					if (currentPiece[i][j]) {
						html += `<div class="block" style="top: ${(i + currentPieceY) * blockHeight}px; left: ${(j + currentPieceX) * blockWidth}px;"></div>`;
					}
				}
			}
		}

gameBoard.innerHTML = html;
	}

// ピースの衝突判定
	function isCollision(piece, x, y) {
		for (let i = 0; i < piece.length; i++) {
			for (let j = 0; j < piece[i].length; j++) {
				if (piece[i][j] && (board[i + y] && board[i + y][j + x]) !== 0) {
					return true;
				}
			}
		}

return false;
	}

// ピースの回転
	function rotate(piece) {
		let rotatedPiece = [];
		for (let i = 0; i < piece[0].length; i++) {
			let newRow = [];
			for (let j = piece.length - 1; j >= 0; j--) {
				newRow.push(piece[j][i]);
			}
			rotatedPiece.push(newRow);
		}
		return rotatedPiece;
	}

// ピースの移動
	function movePiece(dx, dy) {
		if (!isCollision(currentPiece, currentPieceX + dx, currentPieceY + dy)) {
			currentPieceX += dx;
			currentPieceY += dy;
		}
	}

// ピースの固定
	function fixPiece() {
		for (let i = 0; i < currentPiece.length; i++) {
			for (let j = 0; j < currentPiece[i].length; j++) {
				if (currentPiece[i][j]) {
					board[i + currentPieceY][j + currentPieceX] = 1;
				}
			}
		}

clearLines();
		spawnPiece();
	}

// 行の削除
	function clearLines() {
		for (let i = height - 1; i >= 0; i--) {
			if (board[i].every((value) => value === 1)) {
				board.splice(i, 1);
				board.unshift(Array(width).fill(0));
			}
		}
	}

// ピースの生成
	function spawnPiece() {
		const pieceIndex = Math.floor(Math.random() * pieces.length);
		currentPiece = pieces[pieceIndex];
		currentPieceX = Math.floor((width - currentPiece[0].length) / 2);
		currentPieceY = 0;

if (isCollision(currentPiece, currentPieceX, currentPieceY)) {
			// ゲームオーバー処理
			board = Array.from({ length: height }, () => Array(width).fill(0));
			alert("Game over!");
		}
	}

// キーボード操作
	document.addEventListener("keydown", (event) => {
		switch (event.key) {
			case "ArrowLeft":
				movePiece(-1, 0);
				break;
			case "ArrowRight":
				movePiece(1, 0);
				break;
			case "ArrowDown":
				movePiece(0, 1);
				break;
			case "ArrowUp":
				const rotatedPiece = rotate(currentPiece);
				if (!isCollision(rotatedPiece, currentPieceX, currentPieceY)) {
					currentPiece = rotatedPiece;
				}
				break;
			case " ":
				while (!isCollision(currentPiece, currentPieceX, currentPieceY + 1)) {
					movePiece(0, 1);
				}
				break;
		}
	});

// ゲームループ
	function gameLoop() {
		movePiece(0, 1);

if (isCollision(currentPiece, currentPieceX, currentPieceY + 1)) {
			fixPiece();
		}

draw();
	}

spawnPiece();
	setInterval(gameLoop, 1000 / 2); // ゲームループを20FPSで実行
	</script>
</body>
</html>
```