Tetris With a ball bouncing around And It can destroy The tetris blocks's game

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

No:17363

114

←

Prev Next

→

Tetris With a ball bouncing around And It can dest..ALL
Developer User7638｜Date and time 23/9/23 6:14:42
Build time 32.078 sec｜Game capacity 3.049KB｜

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>