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

No:4448

1756

←

Prev Next

→

Fully Automatic Tetris
Developer User1006｜Date and time 23/6/28 1:15:04
Build time 89.676 sec｜Game capacity 6.379KB｜

Script

のプログラムを作成しました。

Tetris

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

のプログラムを作成しました。

<!DOCTYPE html>
<html>
<head>
	<title>Tetris</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="background-color: black; text-align: center;">
	<h1 style="color: white;">Tetris</h1>
	<canvas id="tetris" width="240" height="400" style="border: 1px solid white;"></canvas>
	<script>
		const canvas = document.getElementById('tetris');
		const ctx = canvas.getContext('2d');

// ブロックの横幅
		const BLOCK_WIDTH = 20;

// 色のリスト
		const COLORS = [
			'cyan',
			'blue',
			'orange',
			'yellow',
			'green',
			'purple',
			'red'
		];

// ブロックに関する定数
		const PIECES = [
			[
				[0, 1, 0],
				[1, 1, 1],
				[0, 0, 0]
			],
			[
				[2, 2],
				[2, 2]
			],
			[
				[0, 3, 3],
				[3, 3, 0],
				[0, 0, 0]
			],
			[
				[4, 0, 0],
				[4, 4, 4],
				[0, 0, 0]
			],
			[
				[0, 0, 5],
				[5, 5, 5],
				[0, 0, 0]
			],
			[
				[6, 6, 0],
				[0, 6, 6],
				[0, 0, 0]
			],
			[
				[0, 7, 7],
				[7, 7, 0],
				[0, 0, 0]
			]
		];

// ブロックの初期位置
		const START_X = 3;
		const START_Y = -2;

// 下方向への移動速度
		const SPEED = 500;

// ブロックの状態
		let currentPiece;
		let currentX;
		let currentY;
		let timer;
		let board;

// ブロックの座標からcanvas上の座標を計算する関数
		function getCanvasX(x) {
			return x * BLOCK_WIDTH;
		}
		function getCanvasY(y) {
			return y * BLOCK_WIDTH;
		}

// ブロックをcanvasに描画する関数
		function drawPiece() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);

for (let y = 0; y < currentPiece.length; y++) {
				for (let x = 0; x < currentPiece[y].length; x++) {
					if (currentPiece[y][x] !== 0) {
						ctx.fillStyle = COLORS[currentPiece[y][x] - 1];
						ctx.fillRect(getCanvasX(currentX + x), getCanvasY(currentY + y), BLOCK_WIDTH, BLOCK_WIDTH);
					}
				}
			}

// 盤面を描画する
			for (let y = 0; y < board.length; y++) {
				for (let x = 0; x < board[y].length; x++) {
					if (board[y][x] !== 0) {
						ctx.fillStyle = COLORS[board[y][x] - 1];
						ctx.fillRect(getCanvasX(x), getCanvasY(y), BLOCK_WIDTH, BLOCK_WIDTH);
					}
				}
			}
		}

// ブロックを回転させる関数
		function rotateBlock(piece) {
			const newPiece = [];
			for (let y = 0; y < piece[0].length; y++) {
				const row = [];
				for (let x = 0; x < piece.length; x++) {
					row.push(piece[piece.length - 1 - x][y]);
				}
				newPiece.push(row);
			}
			return newPiece;
		}

// 新しいブロックを作り、初期位置にセットする関数
		function newPiece() {
			const pieceIndex = Math.floor(Math.random() * PIECES.length);
			currentPiece = PIECES[pieceIndex];
			currentX = START_X;
			currentY = START_Y;
		}

// 盤面の初期化
		function initBoard() {
			board = [];
			for (let y = 0; y < 20; y++) {
				const row = [];
				for (let x = 0; x < 12; x++) {
					if (x === 0 || x === 11 || y === 19) {
						row.push(8);
					} else {
						row.push(0);
					}
				}
				board.push(row);
			}
		}

// ブロックが盤面に乗ったときに呼ばれる関数
		function fixBlock() {
			for (let y = 0; y < currentPiece.length; y++) {
				for (let x = 0; x < currentPiece[y].length; x++) {
					if (currentPiece[y][x] !== 0) {
						board[currentY + y][currentX + x] = currentPiece[y][x];
					}
				}
			}
			newPiece();

// ブロックが盤面の上にある場合はゲームオーバー
			if (isGameOver()) {
				clearInterval(timer);
				alert('Game Over!');
			}
		}

// ブロックが盤面の上にあるかどうかを調べる関数
		function isGameOver() {
			for (let x = 0; x < board[0].length; x++) {
				if (board[0][x] !== 0) {
					return true;
				}
			}
			return false;
		}

// 一列揃った行を消す関数
		function deleteLines() {
			let numLines = 0;
			for (let y = board.length - 2; y >= 0; y--) {
				let isLineComplete = true;
				for (let x = 1; x < board[y].length - 1; x++) {
					if (board[y][x] === 0) {
						isLineComplete = false;
						break;
					}
				}
				if (isLineComplete) {
					numLines++;
					for (let i = y; i >= 1; i--) {
						board[i] = board[i - 1];
					}
					for (let x = 1; x < board[y].length - 1; x++) {
						board[0][x] = 0;
					}
					y++;
				}
			}
			return numLines;
		}

// スコアを表示する関数
		function updateScore(numLines) {
			const scoreElem = document.getElementById('score');
			let score = parseInt(scoreElem.innerText);
			score += numLines * 10;
			scoreElem.innerText = score;
		}

// ブロックを下方向に移動させる関数
		function moveDown() {
			currentY++;

if (isColliding()) {
				currentY--;
				fixBlock();
				const numLines = deleteLines();
				updateScore(numLines);
				drawPiece();
				return;
			}

drawPiece();
		}

// ブロックを左方向に移動させる関数
		function moveLeft() {
			currentX--;
			if (isColliding()) {
				currentX++;
			}
			drawPiece();
		}

// ブロックを右方向に移動させる関数
		function moveRight() {
			currentX++;
			if (isColliding()) {
				currentX--;
			}
			drawPiece();
		}

// ブロックが衝突しているかどうかを調べる関数
		function isColliding() {
			for (let y = 0; y < currentPiece.length; y++) {
				for (let x = 0; x < currentPiece[y].length; x++) {
					if (currentPiece[y][x] !== 0) {
						const newX = currentX + x;
						const newY = currentY + y;
						if (newX < 1 || newX >= 11 || newY >= 20 || board[newY][newX] !== 0) {
							return true;
						}
					}
				}
			}
			return false;
		}

// キーボードイベントの設定
		document.addEventListener('keydown', event => {
			switch (event.keyCode) {
				case 37: // 左キー
					moveLeft();
					break;
				case 38: // 上キー
					currentPiece = rotateBlock(currentPiece);
					if (isColliding()) {
						currentPiece = rotateBlock(currentPiece);
						currentPiece = rotateBlock(currentPiece);
						currentPiece = rotateBlock(currentPiece);
					}
					drawPiece();
					break;
				case 39: // 右キー
					moveRight();
					break;
				case 40: // 下キー
					moveDown();
					break;
				default:
					break;
			}
		});

// ゲームのスタート
		initBoard();
		newPiece();
		drawPiece();
		timer = setInterval(moveDown, SPEED);
	</script>
</body>
</html>