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

No:1989

1826

←

Prev Next

→

Tetris 100✕at 100.
Developer User3309｜Date and time 23/6/19 16:37:38
Build time 93.062 sec｜Game capacity 6.466KB｜

Script

実装する例を示します。

テトリス

スコア：0

このプログラムはスマホでも動作します。ゲームの概要は、「テトリス」というブロックを操作して、落下するブロックを積み上げていくゲームです。ブロックを横に移動したり、回転させたりして、たくさんの行を消して高得点を狙いましょう。また、このプログラムは絵文字を多く使っています。

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

実装する例を示します。

<!DOCTYPE html>
<html>
<head>
	<title>テトリス</title>
	<meta charset="UTF-8">
	<style>
		body {
			background-color: #f3f3f3;
			text-align: center;
		}
		
		#board {
			margin: auto;
			width: 600px;
			height: 800px;
			border: 2px solid #444;
			background-color: #fff;
			position: relative;
		}
		
		.block {
			position: absolute;
			border: 2px solid #444;
			box-sizing: border-box;
		}

#score {
			font-size: 36px;
		}
	</style>
</head>
<body>
	<h1>テトリス</h1>
	<div id="board"></div>
	<p id="score">スコア：0</p>

// ブロックを移動する関数
		function moveBlock(dx, dy) {
			var x = currentX + dx;
			var y = currentY + dy;
			if (isBlockOut(currentBlock, x, y)) {
				return false;
			}
			if (isBlockCollide(currentBlock, x, y)) {
				if (dy == 1) {
					lockBlock();
					removeFullRows();
					if (isGameOver()) {
						alert("ゲームオーバー！");
						clearInterval(intervalId);
					} else {
						newBlock();
					}
				}
				return false;
			}
			currentX = x;
			currentY = y;
			drawBlock(currentBlock, currentX, currentY);
			return true;
		}

// ブロックを回転する関数
		function rotateBlock() {
			var newBlock = [];
			for (var i = 0; i < currentBlock.length; i++) {
				newBlock[i] = [];
				for (var j = 0; j < currentBlock[i].length; j++) {
					newBlock[i][j] = currentBlock[currentBlock[i].length-1-j][i];
				}
			}
			if (!isBlockOut(newBlock, currentX, currentY) && !isBlockCollide(newBlock, currentX, currentY)) {
				currentBlock = newBlock;
				drawBlock(currentBlock, currentX, currentY);
			}
		}

// ブロックを描画する関数
		function drawBlock(block, x, y) {
			var divs = [];
			for (var i = 0; i < block.length; i++) {
				for (var j = 0; j < block[i].length; j++) {
					if (block[i][j]) {
						var div = document.createElement("div");
						div.className = "block";
						div.style.width = blockWidth + "px";
						div.style.height = blockHeight + "px";
						div.style.top = (y+i)*blockHeight + "px";
						div.style.left = (x+j)*blockWidth + "px";
						div.style.backgroundImage = "url('https://i.imgur.com/XdXRidK.png')";
						board.appendChild(div);
						divs.push(div);
					}
				}
			}
			blocks.push(divs);
		}

// ブロックを移動できるかどうかを判定する関数
		function isBlockOut(block, x, y) {
			for (var i = 0; i < block.length; i++) {
				for (var j = 0; j < block[i].length; j++) {
					if (block[i][j] && (x+j < 0 || x+j >= cols || y+i >= rows)) {
						return true;
					}
				}
			}
			return false;
		}

// ブロックが衝突するかどうかを判定する関数
		function isBlockCollide(block, x, y) {
			for (var i = 0; i < block.length; i++) {
				for (var j = 0; j < block[i].length; j++) {
					if (block[i][j] && (y+i >= 0) && blocks[y+i][x+j]) {
						return true;
					}
				}
			}
			return false;
		}

// ブロックを固定する関数
		function lockBlock() {
			for (var i = 0; i < currentBlock.length; i++) {
				for (var j = 0; j < currentBlock[i].length; j++) {
					if (currentBlock[i][j]) {
						blocks[currentY+i][currentX+j] = blocks[blocks.length-1].slice();
					}
				}
			}
		}

// 行が完全に埋まっているかどうかを判定する関数
		function isRowFull(row) {
			for (var i = 0; i < blocks[row].length; i++) {
				if (!blocks[row][i]) {
					return false;
				}
			}
			return true;
		}

// 埋まった行を消去する関数
		function removeFullRows() {
			var count = 0;
			for (var i = blocks.length-1; i >= 0; i--) {
				if (isRowFull(i)) {
					board.removeChild(board.children[i]);
					blocks.splice(i, 1);
					count++;
				}
			}
			if (count > 0) {
				var divs = [];
				for (var i = 0; i < count; i++) {
					var div = document.createElement("div");
					div.className = "block";
					div.style.width = cols*blockWidth + "px";
					div.style.height = blockHeight + "px";
					div.style.top = 0;
					div.style.left = 0;
					div.style.backgroundImage = "url('https://i.imgur.com/KlSzr1b.png')";
					board.insertBefore(div, board.firstChild);
					divs.push(div);
				}
				blocks.unshift.apply(blocks, divs.map(function(div) { return div.style.top = blockHeight*count + "px", div.style.left = 0, [div] }));
				scoreValue += count * 100;
				score.textContent = "スコア：" + scoreValue;
			}
		}

// ゲームオーバーかどうかを判定する関数
		function isGameOver() {
			for (var i = 0; i < blocks[0].length; i++) {
				if (blocks[0][i]) {
					return true;
				}
			}
			return false;
		}

// 新しいブロックを生成する関数
		function newBlock() {
			currentX = Math.floor(cols/2 - 1);
			currentY = 0;
			currentBlock = randomBlock();
			drawBlock(currentBlock, currentX, currentY);
		}

// ランダムなブロックを生成する関数
		function randomBlock() {
			var blocks = [
				[[1,1,1,1]], // I
				[[1,1],[1,1]], // O
				[[1,0,0],[1,1,1]], // L
				[[0,0,1],[1,1,1]], // J
				[[0,1,1],[1,1,0]], // S
				[[1,1,0],[0,1,1]], // Z
				[[1,0],[1,1],[0,1]] // T
			];
			return blocks[Math.floor(Math.random()*blocks.length)];
		}

// キーボードの入力を受け付ける関数
		function onKeyDown(e) {
			switch (e.keyCode) {
				case 37: // 左
					moveBlock(-1, 0);
					break;
				case 38: // 上
					rotateBlock();
					break;
				case 39: // 右
					moveBlock(1, 0);
					break;
				case 40: // 下
					moveBlock(0, 1);
					break;
			}
		}

newBlock();
		intervalId = setInterval(function() { moveBlock(0, 1); }, 500);
		document.addEventListener("keydown", onKeyDown);
	</script>
</body>
</html>