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

No:1197

205

←

Prev Next

→

Tetris
Developer User3279｜Date and time 23/6/18 7:55:32
Build time 74.355 sec｜Game capacity 6.017KB｜

Script

テトリス

左右の矢印キーで移動、上キーで回転、下キーで落下

以上は、スマホでも遊べるテトリスの実装例です。このゲームは、ブロックを積み上げていくゲームで、矢印キーでブロックを移動したり、回転させたりして遊びます。また、ブロックが1列揃うごとに得点が加算されます。ゲームオーバーになったらスコアを表示し、リロードして再挑戦できるようになっています。絵文字は使用していませんが、スマホで遊ぶことを前提にシンプルなUIで実装しています。

←

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>
		#tetris {
			height: 600px;
			width: 300px;
			border: 2px solid black;
			margin: auto;
			display: flex;
			flex-wrap: wrap;
		}
		.cell {
			box-sizing: border-box;
			height: 20px;
			width: 20px;
			border: 1px solid black;
			background-color: white;
		}
		.active {
			background-color: red;
		}
	</style>
</head>
<body>
	<h1>テトリス</h1>
	<div id="tetris"></div>
	<p>左右の矢印キーで移動、上キーで回転、下キーで落下</p>

// 新しいテトリスのピースをランダムに作成
		function createPiece() {
			var pieces = [
				[[1,1,1],[0,1,0]],
				[[0,2,2],[2,2,0]],
				[[3,3,0],[0,3,3]],
				[[4,0,0],[4,4,4]],
				[[0,0,5],[5,5,5]],
				[[6,6],[6,6]],
				[[7,7,7,7]],
			];
			var pieceIndex = Math.floor(Math.random() * pieces.length);
			return pieces[pieceIndex];
		}

// テトリスのセルを描画する
		function render() {
			var tetris = document.getElementById('tetris');
			tetris.innerHTML = '';
			for (var y=0; y<height; y++) {
				var row = [];
				for (var x=0; x<width; x++) {
					var cell = document.createElement('div');
					cell.className = 'cell';
					if (currentPiece && currentPosition[1] <= y && y < currentPosition[1] + currentPiece.length && currentPosition[0] <= x && x < currentPosition[0] + currentPiece[0].length && currentPiece[y-currentPosition[1]][x-currentPosition[0]] !== 0) {
						cell.classList.add('active');
					}
					row.push(cell);
					tetris.appendChild(cell);
				}
				cells.push(row);
			}
		}

// テトリスのセルを更新する
		function update() {
			if (!currentPiece) {
				currentPosition = [4, 0];
				currentPiece = createPiece();
				if (!canMove(currentPiece, currentPosition)) {
					endGame();
					return;
				}
			}
			if (canMove(currentPiece, [currentPosition[0], currentPosition[1]+1])) {
				currentPosition[1]++;
			} else {
				fixPiece(currentPiece, currentPosition);
				currentPiece = null;
				currentPosition = null;
				updateScore();
			}
			render();
		}

// テトリスのピースが動けるかどうかを判定する
		function canMove(piece, position) {
			for (var y=0; y<piece.length; y++) {
				for (var x=0; x<piece[0].length; x++) {
					if (piece[y][x] === 0) {
						continue;
					}
					var newY = position[1] + y;
					var newX = position[0] + x;
					if (cells[newY][newX].classList.contains('active') || newX < 0 || newX >= width || newY >= height) {
						return false;
					}
				}
			}
			return true;
		}

// テトリスのピースを固定する
		function fixPiece(piece, position) {
			for (var y=0; y<piece.length; y++) {
				for (var x=0; x<piece[0].length; x++) {
					if (piece[y][x] !== 0) {
						var newY = position[1] + y;
						var newX = position[0] + x;
						cells[newY][newX].classList.add('active');
					}
				}
			}
		}

// テトリスのスコアを更新する
		function updateScore() {
			var lines = 0;
			for (var y=0; y<height; y++) {
				var rowComplete = true;
				for (var x=0; x<width; x++) {
					if (!cells[y][x].classList.contains('active')) {
						rowComplete = false;
						break;
					}
				}
				if (rowComplete) {
					lines++;
					cells.splice(y, 1);
					cells.unshift([]);
					for (var x=0; x<width; x++) {
						cells[0][x] = document.createElement('div');
						cells[0][x].className = 'cell';
						document.getElementById('tetris').removeChild(cells[19][x]);
					}
				}
			}
			score += lines*100;
			document.getElementById('score').innerText = 'Score: ' + score;
		}

// テトリスのゲーム終了時の処理
		function endGame() {
			clearInterval(timer);
			alert('Game Over. Score: ' + score);
			location.reload();
		}

// キーボード入力でテトリスを操作
		document.addEventListener('keydown', function(event) {
			switch (event.keyCode) {
				case 37: // 左
					if (canMove(currentPiece, [currentPosition[0]-1, currentPosition[1]])) {
						currentPosition[0]--;
						render();
					}
					break;
				case 38: // 上
					var newPiece = [];
					for (var x=0; x<currentPiece[0].length; x++) {
						newPiece[x] = [];
						for (var y=currentPiece.length-1; y>=0; y--) {
							newPiece[x][currentPiece.length-y-1] = currentPiece[y][x];
						}
					}
					if (canMove(newPiece, currentPosition)) {
						currentPiece = newPiece;
						render();
					}
					break;
				case 39: // 右
					if (canMove(currentPiece, [currentPosition[0]+1, currentPosition[1]])) {
						currentPosition[0]++;
						render();
					}
					break;
				case 40: // 下
					if (canMove(currentPiece, [currentPosition[0], currentPosition[1]+1])) {
						currentPosition[1]++;
						render();
					} else {
						fixPiece(currentPiece, currentPosition);
						currentPiece = null;
						currentPosition = null;
						updateScore();
					}
					break;
			}
		});

// テトリスを開始する
		render();
		timer = setInterval(update, 500);
	</script>

</body>
</html>