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

No:3349

2089

←

Prev Next

→

Tetris where only sticks fall
Developer User3181｜Date and time 23/6/24 15:26:11
Build time 40.033 sec｜Game capacity 3.759KB｜

Script

棒しか落ちて来ないテトリス

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>棒しか落ちて来ないテトリス</title>
</head>
<body>
	<h1>棒しか落ちて来ないテトリス</h1>
	<canvas id="gameCanvas"></canvas>
	<script>
		const canvas = document.getElementById("gameCanvas");
		const ctx = canvas.getContext("2d");
		const blockWidth = 20; // ブロックの幅
		let score = 0; // スコア
		let gameIntervalId; // ゲームの間隔ID
		let gameState = "play"; // ゲームの状態

// ブロックを表すクラス
		class Block {
			constructor(x, y) {
				this.x = x;
				this.y = y;
			}
			draw() {
				ctx.fillRect(this.x, this.y, blockWidth, blockWidth);
			}
			moveDown() {
				this.y += blockWidth;
			}
			get bottom() {
				return this.y + blockWidth;
			}
		}

const blocks = []; // 落下中のブロックを格納する配列
		let currentBlock; // 現在操作中のブロック

// 初期化処理
		function init() {
			gameState = "play"; // ゲームをプレイ中に設定
			score = 0; // スコアをリセット
			blocks.length = 0; // 落下中のブロック配列を空にする
			currentBlock = new Block(0, 0); // 初期ブロック生成

gameIntervalId = setInterval(gameLoop, 1000); // ゲームループを1000ms毎に実行
		}

// ゲームループ
		function gameLoop() {
			if (gameState != "play") return; // ゲームがプレイ中でない場合は終了

// 落下中のブロックを一つ下に動かす
			blocks.forEach(block => block.moveDown());

// 新しいブロックが落ちてくる時間の場合は新しいブロックを生成
			if (currentBlock.bottom > canvas.height - 1) {
				// ブロックが一番下の状態で画面下に接触した場合
				gameState = "end";
				alert(`GAME OVER\nスコア: ${score}`);
				clearInterval(gameIntervalId); // ゲームループを停止
				return; // ゲームループを終了
			} else if (blocks.some(block => block.bottom == currentBlock.y)) {
				// ブロックが他のブロックに接触した場合
				blocks.push(currentBlock); // 現在のブロックを落下中のブロック配列に追加
				currentBlock = generateNewBlock(); // 新しいブロックを生成
			}

ctx.clearRect(0, 0, canvas.width, canvas.height); // キャンバスをクリア

// 落下中のブロックを描画
			blocks.forEach(block => block.draw());

// 現在のブロックを描画
			currentBlock.draw();

// スコアを表示
			ctx.fillText(`スコア: ${score}`, 10, 20);

score++; // スコアを加算
		}

// 新しいブロックを生成
		function generateNewBlock() {
			const x = Math.floor(Math.random() * (canvas.width / blockWidth)) * blockWidth; // ランダムな位置にx座標を決定
			return new Block(x, 0); // y座標は0から開始
		}

// キー操作処理
		document.addEventListener("keydown", e => {
			if (gameState != "play") return; // ゲームがプレイ中でない場合は終了

switch (e.keyCode) {
				case 37: // 左キー
					if (currentBlock.x > 0) currentBlock.x -= blockWidth; // 画面左端に達していなければ移動
					break;
				case 39: // 右キー
					if (currentBlock.x < canvas.width - blockWidth) currentBlock.x += blockWidth; // 画面右端に達していなければ移動
					break;
				case 40: // 下キー
					currentBlock.moveDown(); // 強制的に一つ下に移動
					break;
			}
		});

// ゲームを開始するためのボタン
		const startButton = document.createElement("button");
		startButton.textContent = "ゲームスタート!";
		startButton.addEventListener("click", init);
		document.body.appendChild(startButton);

// 初期設定
		ctx.font = "16px Arial";
		ctx.fillStyle = "#0095DD";

</script>
</body>
</html>