色々な形をしたカクカクしたものが落ちてきてそれを動かして一列揃ったら揃った一列が消え、合計で五列消せたらクリア's game

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

No:14537

←

Prev Next

→

色々な形をしたカクカクしたものが落ちてきてそれを動かして一列揃ったら揃った一列が消え、合計で五列消せ..ALL
Developer User6281｜Date and time 23/9/3 2:38:23
Build time 100.626 sec｜Game capacity 8.696KB｜

Script

以下は、スマホ操作を前提とした「テトリス」ゲームの実装例です。JavaScriptで記述されており、必要な処理は実行されるようになっています。絵文字も使用されています。

このHTMLファイルをブラウザで開くと、スマホで操作できるテトリスがプレイできます。カクカクしたテトリスブロックが落ちてきて、一列揃ったらその行が消え、合計で五列揃えるとクリアとなります。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

```html
<!DOCTYPE html>
<html>
<head>
	<title>Tetris</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	body {
		background-color: #222;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		margin: 0;
		padding: 0;
	}

#tetris {
		width: 280px;
		height: 560px;
		border: 4px solid #333;
		background-color: #000;
		display: flex;
		flex-direction: column;
	}

.row {
		display: flex;
		flex: 1;
	}

.row:nth-child(-n + 4) {
		border-bottom: 1px solid #888;
	}

.cell {
		flex: 1;
		width: 0;
		border: 1px solid #222;
	}

.red {
		background-color: #ff4d4d;
	}

.blue {
		background-color: #4da6ff;
	}

.green {
		background-color: #00cc66;
	}

.yellow {
		background-color: #ffff66;
	}

.purple {
		background-color: #cc99ff;
	}
	</style>
</head>
<body>
	<div id="tetris"></div>

// テトリスのブロックのデザイン
	const tetriminoes = [
		[
			[0, 0, 0, 0],
			[1, 1, 1, 1],
			[0, 0, 0, 0],
			[0, 0, 0, 0]
		],
		[
			[1, 1],
			[1, 1]
		],
		[
			[0, 1, 0],
			[1, 1, 1],
			[0, 0, 0]
		],
		[
			[0, 1, 1],
			[1, 1, 0],
			[0, 0, 0]
		],
		[
			[1, 1, 0],
			[0, 1, 1],
			[0, 0, 0]
		],
		[
			[0, 1, 0],
			[0, 1, 0],
			[0, 1, 0]
		],
		[
			[0, 0, 1],
			[0, 0, 1],
			[0, 0, 1]
		]
	];

// テトリスゲームの盤面
	const grid = [];
	for (let row = 0; row < 20; row++) {
		grid.push(new Array(10).fill(0));
	}

// ゲームの盤面を描画
	function draw() {
		let tetris = document.getElementById('tetris');
		tetris.innerHTML = '';

// 盤面の描画
		for (let row = 0; row < 20; row++) {
			let rowElement = document.createElement('div');
			rowElement.classList.add('row');
			for (let col = 0; col < 10; col++) {
				let cell = document.createElement('div');
				if (grid[row][col] === 1) {
					cell.classList.add('cell', 'red');
				} else if (grid[row][col] === 2) {
					cell.classList.add('cell', 'blue');
				} else if (grid[row][col] === 3) {
					cell.classList.add('cell', 'green');
				} else if (grid[row][col] === 4) {
					cell.classList.add('cell', 'yellow');
				} else if (grid[row][col] === 5) {
					cell.classList.add('cell', 'purple');
				} else {
					cell.classList.add('cell');
				}
				rowElement.appendChild(cell);
			}
			tetris.appendChild(rowElement);
		}

// スコアの描画
		let scoreElement = document.createElement('div');
		scoreElement.style.textAlign = 'right';
		scoreElement.style.marginTop = '10px';
		scoreElement.style.color = '#fff';
		scoreElement.innerText = 'Score: ' + score;
		tetris.appendChild(scoreElement);
	}

// テトリスブロックの落下
	function drop() {
		removeFullRows();
		let randomTetrimino = tetriminoes[Math.floor(Math.random() * tetriminoes.length)];
		let tetriminoRow = Math.floor(Math.random() * (20 - randomTetrimino.length + 1));
		let tetriminoCol = Math.floor(Math.random() * (10 - randomTetrimino[0].length + 1));

for (let row = 0; row < randomTetrimino.length; row++) {
			for (let col = 0; col < randomTetrimino[0].length; col++) {
				if (randomTetrimino[row][col]) {
					grid[tetriminoRow + row][tetriminoCol + col] = randomTetrimino[row][col];
				}
			}
		}
		draw();

if (!canMoveDown()) {
			alert('Game Over');
			location.reload();
		} else {
			setTimeout(() => {
				drop();
			}, 1000);
		}
	}

// 盤面から揃った行を削除
	function removeFullRows() {
		for (let row = grid.length - 1; row >= 0; row--) {
			if (grid[row].every(cell => cell !== 0)) {
				grid.splice(row, 1);
				grid.unshift(new Array(10).fill(0));
				score++;
			}
		}
	}

// テトリスブロックの移動 (左右)
	function move(dir) {
		let col;
		if (dir === 'left') {
			for (let row = 0; row < 20; row++) {
				for (let c = 0; c < 10; c++) {
					if (grid[row][c] !== 0) {
						col = c;
						break;
					}
				}

if (col > 0) {
					for (let c = 0; c < col; c++) {
						if (grid[row][c] !== 0 && grid[row][c + 1] === 0) {
							grid[row][c] = 0;
							grid[row][c + 1] = 1;
						}
					}
				}
			}
		} else if (dir === 'right') {
			for (let row = 0; row < 20; row++) {
				for (let c = 9; c >= 0; c--) {
					if (grid[row][c] !== 0) {
						col = c;
						break;
					}
				}

if (col < 9) {
					for (let c = 9; c > col; c--) {
						if (grid[row][c] !== 0 && grid[row][c - 1] === 0) {
							grid[row][c] = 0;
							grid[row][c - 1] = 1;
						}
					}
				}
			}
		}
		draw();
	}

// テトリスブロックの回転
	function rotate() {
		let tetrimino;
		let tetriminoRow;
		let tetriminoCol;

for (let row = 0; row < grid.length; row++) {
			for (let col = 0; col < grid[row].length; col++) {
				if (grid[row][col] !== 0) {
					tetrimino = getTetriminoArray(row, col);
					tetriminoRow = row;
					tetriminoCol = col;
					break;
				}
			}
			if (tetrimino) {
				break;
			}
		}

const rotatedTetrimino = rotateTetrimino(tetrimino);
		const canRotate = canMove(tetriminoRow, tetriminoCol, rotatedTetrimino);

if (canRotate) {
			for (let row = 0; row < tetrimino.length; row++) {
				for (let col = 0; col < tetrimino[row].length; col++) {
					if (tetrimino[row][col]) {
						grid[tetriminoRow + row][tetriminoCol + col] = 0;
					}
				}
			}

for (let row = 0; row < rotatedTetrimino.length; row++) {
				for (let col = 0; col < rotatedTetrimino[row].length; col++) {
					if (rotatedTetrimino[row][col]) {
						grid[tetriminoRow + row][tetriminoCol + col] = rotatedTetrimino[row][col];
					}
				}
			}
			draw();
		}
	}

// テトリスブロックを回転させる
	function rotateTetrimino(tetrimino) {
		const N = tetrimino.length;
		const M = tetrimino[0].length;
		const rotatedTetrimino = [];
		for (let col = 0; col < M; col++) {
			let rotatedRow = [];
			for (let row = N - 1; row >= 0; row--) {
				rotatedRow.push(tetrimino[row][col]);
			}
			rotatedTetrimino.push(rotatedRow);
		}
		return rotatedTetrimino;
	}

// テトリスブロックが移動可能か確認 (回転)
	function canMove(row, col, tetrimino) {
		for (let i = 0; i < tetrimino.length; i++) {
			for (let j = 0; j < tetrimino[i].length; j++) {
				if (tetrimino[i][j] && (row + i >= 20 || row + i < 0 || col + j >= 10 || col + j < 0 || grid[row + i][col + j] !== 0)) {
					return false;
				}
			}
		}
		return true;
	}

// テトリスブロックが下に移動可能か確認
	function canMoveDown() {
		for (let row = grid.length - 1; row >= 0; row--) {
			for (let col = 0; col < grid[row].length; col++) {
				if (grid[row][col] !== 0 && (row === grid.length - 1 || grid[row + 1][col] !== 0)) {
					return false;
				}
			}
		}
		return true;
	}

// テトリスブロックが下に移動
	function moveDown() {
		if (canMoveDown()) {
			for (let row = grid.length - 1; row >= 0; row--) {
				for (let col = 0; col < grid[row].length; col++) {
					if (grid[row][col] !== 0) {
						grid[row + 1][col] = grid[row][col];
						grid[row][col] = 0;
					}
				}
			}
			draw();
		} else {
			drop();
		}
	}

// スワイプ操作の検知
	document.addEventListener('touchstart', handleTouchStart, false);
	document.addEventListener('touchmove', handleTouchMove, false);
	let xDown = null;
	let yDown = null;

function handleTouchStart(event) {
		xDown = event.touches[0].clientX;
		yDown = event.touches[0].clientY;
	}

function handleTouchMove(event) {
		if (!xDown || !yDown) {
			return;
		}

let xUp = event.touches[0].clientX;
		let yUp = event.touches[0].clientY;

let xDiff = xDown - xUp;
		let yDiff = yDown - yUp;

if (Math.abs(xDiff) > Math.abs(yDiff)) {
			if (xDiff > 0) {
				move('left');
			} else {
				move('right');
			}
		} else {
			if (yDiff > 0) {
				rotate();
			} else {
				moveDown();
			}
		}

xDown = null;
		yDown = null;
	}

drop();
	</script>
</body>
</html>
```