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

No:4504

8627

←

Prev Next

→

Tetris represented in one dimension
Developer User3589｜Date and time 23/6/28 3:00:33
Build time 40.374 sec｜Game capacity 3.534KB｜

Script

1D Tetris

操作方法: スマホの画面タップまたはキーボードの左右キーで動かします。

Score: 0

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<html>
<head>
	<title>1D Tetris</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			background-color: #f8f8f8;
			text-align: center;
		}
		h1 {
			font-size: 2em;
			margin-top: 30px;
		}
		#board {
			margin-top: 50px;
			font-size: 3em;
			display: inline-block;
			border: 3px solid black;
			padding: 10px;
			background-color: #fff;
		}
		#score {
			font-size: 2em;
			margin-top: 30px;
		}
	</style>
</head>
<body>
	<h1>1D Tetris</h1>
	<p>操作方法: スマホの画面タップまたはキーボードの左右キーで動かします。</p>
	<div id="board"></div>
	<div id="score">Score: 0</div>

// ブロックの定義 (絵文字)
		var blocks = ["🟥", "🟦", "🟩", "🟨", "🟪"];

function spawnBlock() {
			// ブロックをランダムに生成
			var blockIndex = Math.floor(Math.random() * blocks.length);
			var block = blocks[blockIndex];

// ブロックをランダムな位置に配置
			var xPos = Math.floor(Math.random() * (boardWidth - block.length + 1));
			for (var i = 0; i < block.length; i++) {
				board[xPos + i] = block[i];
			}
		}

spawnBlock();
		drawBoard();

// ゲームループ
		var score = 0;
		var gameLoop = setInterval(function() {
			moveBlockDown();
			drawBoard();
			checkIfGameOver();
		}, 1000);

function checkIfGameOver() {
			if (board[0] !== "") {
				clearInterval(gameLoop);
				document.getElementById("board").style.border = "3px solid red";
				document.getElementById("score").textContent += " GAME OVER";
			}
		}

function drawBoard() {
			var boardDiv = document.getElementById("board");
			boardDiv.innerHTML = "";
			for (var i = 0; i < board.length; i++) {
				boardDiv.innerHTML += "<span>" + board[i] + "</span>";
			}
		}

// タッチイベント
		document.addEventListener("touchstart", function(event) {
			var boardDiv = document.getElementById("board");
			var xPos = event.changedTouches[0].pageX - boardDiv.offsetLeft;
			if (xPos < boardDiv.offsetWidth / 2) {
				moveBlockLeft();
			} else {
				moveBlockRight();
			}
		});

// キーボードイベント
		document.addEventListener("keydown", function(event) {
			if (event.keyCode === 37) {
				moveBlockLeft();
			} else if (event.keyCode === 39) {
				moveBlockRight();
			}
		});