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

No:49390

Make a Tetris game where the camera is locked on t..ALL
Developer User21041｜Date and time 24/3/5 1:07:23
Build time 15.481 sec｜Game capacity 2.427KB｜

Script

テトリス

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>テトリス</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		canvas {
			border: 3px solid black;
			background-color: #eee;
		}
	</style>
</head>
<body>
	<div>
		<h1>テトリス</h1>
	</div>
	<div>
		<canvas id="canvas" width="200" height="400"></canvas>
	</div>
	<div>
		<button onclick="startGame()">スタート</button>
		<button onclick="pauseGame()">一時停止</button>
		<button onclick="resumeGame()">再開</button>
		<button onclick="stopGame()">ストップ</button>
	</div>
	<script>
		let canvas = document.getElementById("canvas");
		let ctx = canvas.getContext("2d");

// ブロックの種類
		const BLOCK_TYPE = {
			1: {color: "red", shape: [[1, 1], [1, 1]]},
			2: {color: "blue", shape: [[0, 2, 0], [2, 2, 2]]},
			3: {color: "orange", shape: [[0, 3, 3], [3, 3, 0]]},
			4: {color: "green", shape: [[4, 4, 0], [0, 4, 4]]},
			5: {color: "purple", shape: [[5, 0, 0], [5, 5, 5]]},
			6: {color: "yellow", shape: [[0, 6, 0, 0], [0, 6, 6, 6]]},
			7: {color: "cyan", shape: [[0, 0, 7], [7, 7, 7]]}
		};

// ゲームの状態
		let gameState = {
			blocks: [], // 現在落ちているブロック
			nextBlockType: 1, // 次のブロックの種類
			board: [], // 盤面
			score: 0, // 得点
			gameOver: false // ゲームオーバーかどうか
		};

// ゲームの設定
		const GAME_SETTINGS = {
			blockSize: 20, // ブロックのサイズ
			boardWidth: 10, // 盤面の横幅
			boardHeight: 20, // 盤面の縦幅
			fallInterval: 500 // ブロックが落ちる間隔（ミリ秒）
		};

// キーボードの入力に対応する移動方向
		const MOVE_DIRECTION = {
			"ArrowLeft": -1, // 左に移動
			"ArrowRight": 1, // 右に移動
			"ArrowDown": 0 // 下に移動
		};

// 初期化
		function init() {
			// 盤面の初期化
			for (let i = 0; i < GAME_SETTINGS.boardHeight; i++) {
				gameState.board[i] = new Array(GAME_SETTINGS.boardWidth).fill(0);
			}
			// キーボード入力のイベントハンドラを設定
			document.addEventListener("keydown", handleKeyDown);
			// ゲームを開始
			startGame();
		}

// ゲームの開始
		function startGame() {
			// ブロックを初期化
			gameState.blocks = createBlock(GAME_SETTINGS.blockSize, BLOCK_TYPE[gameState.nextBlockType]);
			// 次のブロックをランダムに決定
			gameState.nextBlockType = Math.floor(Math.random() * 7) + 1;
			// スコアを初期化
			gameState.score = 0;
			// ゲームオーバーを解除
			gameState.gameOver = false;
			// 落下するブロックを描画
			drawBlock(ctx, gameState.blocks);
			// ループを開始
			loop();
		}

// ゲームの一時停止
		function pauseGame() {
			clearInterval(gameState.intervalId);
		}

// ゲームの再開
		function resumeGame() {
			gameState.intervalId = setInterval(moveBlockDown, GAME_SETTINGS.fallInterval);
		}

// ゲームのストップ
		function stopGame() {
			clearInterval(gameState.intervalId);
			gameState.gameOver = true;
			alert("ゲームオーバー");
		}

// ループ
		function loop() {
			gameState.intervalId = setInterval(moveBlockDown, GAME_SETTINGS.fallInterval);
		}

// ブロックを作成
		function createBlock(blockSize, blockType) {
			let block = {
				x: Math.floor((GAME_SETTINGS.boardWidth - blockType.shape[0].length) / 2),
				y: 0,
				type: blockType
			};
			return [block];
		}

// ブロックを描画
		function drawBlock(ctx, blocks) {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			for (let i = 0; i < blocks.length; i++) {
				let block = blocks[i];
				for (let y = 0; y < block.type.shape.length; y++) {
					for (let x = 0; x < block.type.shape[0].length; x++) {
						if (block.type.shape[y][x] !== 0) {
							drawBlockSquare(ctx, block.x + x, block.y + y, block.type.color);
						}
					}
				}
			}
		}

// ブロックの1マスを描画
		function drawBlockSquare(ctx, x, y, color) {
			ctx.fillStyle = color;
			ctx.fillRect(x * GAME_SETTINGS.blockSize, y * GAME_SETTINGS.blockSize, GAME_SETTINGS.blockSize, GAME_SETTINGS.blockSize);
			ctx.strokeRect(x * GAME_SETTINGS.blockSize, y * GAME_SETTINGS.blockSize, GAME_SETTINGS.blockSize, GAME_SETTINGS.blockSize);
		}

// ブロックを移動
		function moveBlock(blocks, dx, dy) {
			for (let i = 0; i < blocks.length; i++) {
				let block = blocks[i];
				block.x += dx;
				block.y += dy;
			}
			drawBlock(ctx, blocks);
		}

// ブロックを左に移動
		function moveBlockLeft() {
			if (!gameState.gameOver) {
				if (canMoveBlock(gameState.blocks, -1, 0)) {
					moveBlock(gameState.blocks, -1, 0);
				}
			}
		}

// ブロックを右に移動
		function moveBlockRight() {
			if (!gameState.gameOver) {
				if (canMoveBlock(gameState.blocks, 1, 0)) {
					moveBlock(gameState.blocks, 1, 0);
				}
			}
		}

// ブロックを下に移動
		function moveBlockDown() {
			if (!gameState.gameOver) {
				if (canMoveBlock(gameState.blocks, 0, 1)) {
					moveBlock(gameState.blocks, 0, 1);
				} else {
					placeBlock(gameState.blocks);
					createNewBlock();
				}
			}
		}

// ブロックを回転
		function rotateBlock() {
			if (!gameState.gameOver) {
				rotateMatrix(gameState.blocks[0].type.shape);
				if (!checkPosition(gameState.blocks[0], gameState.board)) {
					rotateMatrix(gameState.blocks[0].type.shape);
					rotateMatrix(gameState.blocks[0].type.shape);
					rotateMatrix(gameState.blocks[0].type.shape);
				}
				drawBlock(ctx, gameState.blocks);
			}
		}

// 行を消去
		function removeRows(board) {
			let numRowsRemoved = 0;
			for (let y = 0; y < GAME_SETTINGS.boardHeight; y++) {
				let rowIsFull = true;
				for (let x = 0; x < GAME_SETTINGS.boardWidth; x++) {
					if (board[y][x] === 0) {
						rowIsFull = false;
						break;
					}
				}
				if (rowIsFull) {
					board.splice(y, 1);
					board.unshift(new Array(GAME_SETTINGS.boardWidth).fill(0));
					numRowsRemoved++;
					y--;
				}
			}
			return numRowsRemoved;
		}

// 新しいブロックを作成
		function createNewBlock() {
			gameState.blocks = createBlock(GAME_SETTINGS.blockSize, BLOCK_TYPE[gameState.nextBlockType]);
			gameState.nextBlockType = Math.floor(Math.random() * 7) + 1;
			drawBlock(ctx, gameState.blocks);
			if (!canMoveBlock(gameState.blocks, 0, 0)) {
				stopGame();
			}
		}

// ブロックを落とし込む
		function placeBlock(blocks) {
			for (let i = 0; i < blocks.length; i++) {
				let block = blocks[i];
				gameState.board[block.y][block.x] = block.type.color;
			}
			let numRowsRemoved = removeRows(gameState.board);
			gameState.score += 100 * numRowsRemoved;
		}

// ブロックを移動できるかどうか判定
		function canMoveBlock(blocks, dx, dy) {
			for (let i = 0; i < blocks.length; i++) {
				let block = blocks[i];
				if (block.x + dx < 0 || block.x + dx >= GAME_SETTINGS.boardWidth || block.y + dy >= GAME_SETTINGS.boardHeight || gameState.board[block.y + dy][block.x + dx] !== 0) {
					return false;
				}
			}
			return true;
		}

// ブロックを回転できるかどうか判定
		function checkPosition(block, board) {
			for (let y = 0; y < block.type.shape.length; y++) {
				for (let x = 0; x < block.type.shape[0].length; x++) {
					if (block.type.shape[y][x] !== 0) {
						if (block.y + y >= GAME_SETTINGS.boardHeight || block.x + x < 0 || block.x + x >= GAME_SETTINGS.boardWidth || board[block.y + y][block.x + x] !== 0) {
							return false;
						}
					}
				}
			}
			return true;
		}

// 行列を回転
		function rotateMatrix(matrix) {
			let N = matrix.length;
			for (let i = 0; i < Math.floor(N / 2); i++) {
				for (let j = i; j < N - i - 1; j++) {
					let temp = matrix[i][j];
					matrix[i][j] = matrix[N - 1 - j][i];
					matrix[N - 1 - j][i] = matrix[N - 1 - i][N - 1 - j];
					matrix[N - 1 - i][N - 1 - j] = matrix[j][N - 1 - i];
					matrix[j][N - 1 - i] = temp;
				}
			}
		}

// キーボード入力のイベントを処理
		function handleKeyDown(event) {
			switch (event.key) {
				case "ArrowLeft":
					moveBlockLeft();
					break;
				case "ArrowRight":
					moveBlockRight();
					break;
				case "ArrowDown":
					moveBlockDown();
					break;
				case "ArrowUp":
					rotateBlock();
					break;
			}
		}

init();
	</script>
</body>
</html>