Tetris inspired game that you need to be very careful and every round you need to be quicker, there is only 28 levels's game

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

No:44483

←

Prev Next

→

Tetris inspired game that you need to be very care..ALL
Developer User19400｜Date and time 24/2/18 5:58:35
Build time 5.336 sec｜Game capacity 1.424KB｜

Script

GAME OVER

SCORE:0

SCORE: 0

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Tetris</title>
	<style>
		body {
			background-color: #222;
			color: #fff;
		}
		#game-board {
			margin: 50px auto;
			width: 300px;
			height: 600px;
			background-color: #333;
			position: relative;
			border: 5px solid #fff;
		}
		#game-over {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background-color: rgba(255, 255, 255, 0.8);
			padding: 30px;
			border-radius: 10px;
			display: none;
		}
		#game-over p {
			color: #222;
			font-size: 32px;
			font-weight: bold;
			text-align: center;
		}
		#score-board {
			text-align: center;
			font-size: 24px;
		}
	</style>
</head>
<body>
	<div id="game-board"></div>
	<div id="game-over">
		<p>GAME OVER</p>
		<p>SCORE:<span id="score">0</span></p>
		<button id="restart-btn">RESTART</button>
	</div>
	<div id="score-board">SCORE: <span id="score">0</span></div>
	<script>
		// 定数
		const ROWS = 20;
		const COLS = 10;
		const BLOCK_SIZE = 30;
		const SHAPE_TYPES = [
			[
				[0, 0, 0, 0],
				[1, 1, 1, 1],
				[0, 0, 0, 0],
				[0, 0, 0, 0]
			],
			[
				[2, 0, 0],
				[2, 2, 2],
				[0, 0, 0]
			],
			[
				[0, 0, 3],
				[3, 3, 3],
				[0, 0, 0]
			],
			[
				[4, 4],
				[4, 4]
			],
			[
				[0, 5, 5],
				[5, 5, 0],
				[0, 0, 0]
			],
			[
				[0, 6, 0],
				[6, 6, 6],
				[0, 0, 0]
			],
			[
				[7, 7, 0],
				[0, 7, 7],
				[0, 0, 0]
			],
		];
		const COLORS = [
			'#fff', // 空
			'#f00', // 赤
			'#0f0', // 緑
			'#00f', // 青
			'#ff0', // 黄
			'#f80', // オレンジ
			'#0ff', // 水色
			'#f0f'  // 紫
		];
		
		// 変数
		let board = [];
		let currentShape = null;
		let currentShapeIndex = 0;
		let currentShapeColor = null;
		let score = 0;
		let gameover = false;
		
		// HTML要素
		const gameBoardElement = document.getElementById('game-board');
		const gameOverElement = document.getElementById('game-over');
		const scoreElement = document.getElementById('score');
		const restartBtnElement = document.getElementById('restart-btn');
		
		// ブロックオブジェクト
		class Block {
			constructor(x, y, color) {
				this.x = x;
				this.y = y;
				this.color = color;
			}
		}
		
		// ゲームボードを初期化
		function initBoard() {
			board = [];
			for (let i = 0; i < ROWS; i++) {
				let row = [];
				for (let j = 0; j < COLS; j++) {
					row.push(0);
				}
				board.push(row);
			}
		}
		
		// 新しいブロックを生成
		function generateBlock() {
			currentShapeIndex = Math.floor(Math.random() * SHAPE_TYPES.length);
			currentShape = SHAPE_TYPES[currentShapeIndex];
			currentShapeColor = COLORS[currentShapeIndex + 1];
			currentShape.forEach(function(row, i) {
				row.forEach(function(cell, j) {
					if (cell) {
						let y = i;
						let x = Math.floor(COLS / 2) - Math.floor(currentShape[0].length / 2) + j;
						board[y][x] = new Block(x, y, currentShapeColor);
					}
				});
			});
		}
		
		// ブロックを移動
		function moveBlock(dx, dy) {
			if (gameover) {
				return false;
			}
			let newBoard = [];
			for (let i = 0; i < ROWS; i++) {
				let row = [];
				for (let j = 0; j < COLS; j++) {
					row.push(0);
				}
				newBoard.push(row);
			}
			let isBlocked = false;
			board.forEach(function(row, i) {
				row.forEach(function(cell, j) {
					if (cell) {
						let newX = j + dx;
						let newY = i + dy;
						if (newX < 0 || newX >= COLS || newY >= ROWS || board[newY][newX]) {
							// 壁または他のブロックに当たる
							isBlocked = true;
							newBoard[i][j] = cell;
						} else {
							// 移動可能
							newBoard[newY][newX] = cell;
						}
					}
				});
			});
			if (isBlocked && dy !== 0) {
				// 落下中のブロックが止まったとき
				currentShape.forEach(function(row, i) {
					row.forEach(function(cell, j) {
						if (cell) {
							let y = currentShape.length - i - 1;
							let x = j;
							board[y][x] = new Block(x, y, currentShapeColor);
						}
					});
				});
				score += removeCompletedLines();
				if (board[0].some(cell => !!cell)) {
					// 一番上にブロックが積み重なったらゲームオーバー
					gameover = true;
					gameOverElement.style.display = 'block';
				} else {
					generateBlock();
				}
			} else {
				// 移動可能
				board = newBoard;
			}
		}
		
		// ラインが揃った場合は消す
		function removeCompletedLines() {
			let scoreToAdd = 0;
			for (let i = ROWS - 1; i >= 0; i--) {
				if (board[i].every(cell => !!cell)) {
					// ラインが揃った
					board.splice(i, 1);
					board.unshift(new Array(COLS).fill(0));
					scoreToAdd++;
					i++;
				}
			}
			return scoreToAdd ** 2 * 100;
		}
		
		// ゲームを初期化
		function initGame() {
			initBoard();
			generateBlock();
		}
		
		// キーダウンイベントのリスナー
		document.addEventListener('keydown', function(e) {
			switch (e.code) {
				case 'ArrowLeft': // 左
					moveBlock(-1, 0);
					break;
				case 'ArrowRight': // 右
					moveBlock(1, 0);
					break;
				case 'ArrowDown': // 下
					moveBlock(0, 1);
					break;
				case 'ArrowUp': // 上
					rotateBlock();
					break;
			}
		});
		
		// 回転
		function rotateBlock() {
			if (gameover) {
				return false;
			}
			let newShape = [];
			currentShape.forEach(function(row, i) {
				row.forEach(function(cell, j) {
					if (!newShape[j]) {
						newShape[j] = [];
					}
					newShape[j][currentShape.length - 1 - i] = cell;
				});
			});
			let isBlocked = false;
			newShape.forEach(function(row, i) {
				row.forEach(function(cell, j) {
					if (cell) {
						let newX = currentShape[0].length - i - 1 + Math.floor(COLS / 2) - Math.floor(currentShape[0].length / 2);
						let newY = currentShape.length - j - 1;
						if (newX < 0 || newX >= COLS || newY >= ROWS || board[newY][newX]) {
							isBlocked = true;
						}
					}
				});
			});
			if (!isBlocked) {
				currentShape = newShape;
				board.forEach(function(row, i) {
					row.forEach(function(cell, j) {
						if (cell && cell.color === currentShapeColor) {
							board[i][j] = 0;
						}
					});
				});
				currentShape.forEach(function(row, i) {
					row.forEach(function(cell, j) {
						if (cell) {
							let y = currentShape.length - i - 1;
							let x = Math.floor(COLS / 2) - Math.floor(currentShape[0].length / 2) + j;
							board[y][x] = new Block(x, y, currentShapeColor);
						}
					});
				});
			}
		}
		
		// リスタートする
		restartBtnElement.addEventListener('click', function() {
			location.reload();
		});
		
		// ゲーム開始
		initGame();
		
		// 描画処理
		setInterval(function() {
			gameBoardElement.innerHTML = '';
			board.forEach(function(row, i) {
				row.forEach(function(cell, j) {
					let div = document.createElement('div');
					div.style.width = BLOCK_SIZE + 'px';
					div.style.height = BLOCK_SIZE + 'px';
					div.style.background = cell ? cell.color : '#000';
					div.style.border = '1px solid #fff';
					div.style.borderRadius = '5px';
					div.style.position = 'absolute';
					div.style.left = j * BLOCK_SIZE + 'px';
					div.style.top = i * BLOCK_SIZE + 'px';
					gameBoardElement.appendChild(div);
				});
			});
			scoreElement.textContent = score;
		}, 1000 / 60); // 60fps
	</script>
</body>
</html>