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

No:1666

7519

←

Prev Next

→

Tetris
Developer anonymous｜Date and time 70/1/1 10:54:54
Build time unknown sec｜Game capacity 6.894KB｜

Script

テトリス

左右の矢印キーで移動、上向きの矢印キーで回転、下向きの矢印キーで落下を加速します。

←

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">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			font-size: 24px;
			background-color: #f1f1f1;
		}
		#gameArea {
			display: flex;
			flex-wrap: wrap;
			width: 280px;
			height: 560px;
			margin: auto;
			border: 1px solid black;
			background-color: white;
		}
		.block {
			width: 40px;
			height: 40px;
			border: 1px solid black;
			background-color: white;
			box-sizing: border-box;
		}
	</style>
</head>
<body>
	<h1>テトリス</h1>
	<p>左右の矢印キーで移動、上向きの矢印キーで回転、下向きの矢印キーで落下を加速します。</p>
	<div id="gameArea"></div>
	<script>
		const BLOCK_SIZE = 40;
		const ROWS = 14;
		const COLS = 7;
		const SHAPES = [
			[[0,0,0,0],
			 [1,1,1,1],
			 [0,0,0,0],
			 [0,0,0,0]],
			[[0,0,0],
			 [2,2,2],
			 [0,2,0]],
			[[0,0,0],
			 [3,3,3],
			 [3,0,0]],
			[[0,0,0],
			 [4,4,0],
			 [0,4,4]],
			[[0,0,0],
			 [0,5,5],
			 [5,5,0]],
			[[0,0,0],
			 [6,6,0],
			 [0,6,6]],
			[[0,0],
			 [7,7],
			 [7,7]]
		];
		const COLORS = [
			"gray",
			"cyan",
			"purple",
			"green",
			"yellow",
			"red",
			"blue"
		];
		let currentShape;
		let currentRow;
		let currentCol;
		let currentRotation;
		let board;
		let intervalId;
		let isPaused;

setupGame();

function setupGame() {
			board = new Array(ROWS);
			for (let i = 0; i < ROWS; i++) {
				board[i] = new Array(COLS).fill(0);
			}

currentShape = getRandomShape();
			currentRow = 0;
			currentCol = 3;
			currentRotation = 0;

drawBoard();
			drawShape();
			startGame();
		}

function startGame() {
			intervalId = setInterval(() => {
				moveDown();
			}, 500);
			isPaused = false;
		}

function pauseGame() {
			clearInterval(intervalId);
			isPaused = true;
			showMessage("一時停止中");
		}

function resumeGame() {
			startGame();
			hideMessage();
		}

function gameOver() {
			clearInterval(intervalId);
			showMessage("ゲームオーバー");
		}

function showMessage(message) {
			const messageDiv = document.createElement("div");
			messageDiv.id = "message";
			messageDiv.textContent = message;
			messageDiv.style.position = "absolute";
			messageDiv.style.top = "200px";
			messageDiv.style.left = "50%";
			messageDiv.style.transform = "translate(-50%, 0)";

document.body.appendChild(messageDiv);
		}

function hideMessage() {
			const messageDiv = document.getElementById("message");
			if (messageDiv) {
				document.body.removeChild(messageDiv);
			}
		}

function getRandomShape() {
			const index = Math.floor(Math.random() * SHAPES.length);
			return SHAPES[index];
		}

function clearShape() {
			const blocks = document.querySelectorAll(".block");
			blocks.forEach((block) => {
				block.parentNode.removeChild(block);
			});
		}

function moveDown() {
			const nextRow = currentRow + 1;
			if (isCollidingWithBoard(currentShape, currentRow, currentCol, nextRow, currentRotation)) {
				lockShape();
				checkFullRows();
				currentShape = getRandomShape();
				currentRow = 0;
				currentCol = 3;
				currentRotation = 0;

if (isCollidingWithBoard(currentShape, currentRow, currentCol, nextRow, currentRotation)) {
					gameOver();
				} else {
					drawShape();
				}
			} else {
				clearShape();
				currentRow = nextRow;
				drawShape();
			}
		}

function moveLeft() {
			const nextCol = currentCol - 1;
			if (!isCollidingWithBoard(currentShape, currentRow, nextCol, currentRotation)) {
				clearShape();
				currentCol = nextCol;
				drawShape();
			}
		}

function moveRight() {
			const nextCol = currentCol + 1;
			if (!isCollidingWithBoard(currentShape, currentRow, nextCol, currentRotation)) {
				clearShape();
				currentCol = nextCol;
				drawShape();
			}
		}

function rotateShape() {
			const nextRotation = (currentRotation + 1) % 4;
			if (!isCollidingWithBoard(currentShape, currentRow, currentCol, nextRotation)) {
				clearShape();
				currentRotation = nextRotation;
				drawShape();
			}
		}

function speedUp() {
			clearInterval(intervalId);
			intervalId = setInterval(() => {
				moveDown();
			}, 50);
		}

function isCollidingWithBoard(shape, row, col, rotation) {
			const nextRotation = (rotation + 1) % 4;
			return isColliding(shape, row, col, nextRotation) ||
				   col < 0 || col + shape[0].length > COLS;
		}

function isColliding(shape, row, col, rotation) {
			for (let i = 0; i < shape.length; i++) {
				for (let j = 0; j < shape[i].length; j++) {
					if (shape[i][j] !== 0) {
						const x = col + j;
						const y = row + i;

if (y < 0) {
							continue;
						}

if (y >= ROWS || x < 0 || x >= COLS || board[y][x] !== 0) {
							return true;
						}
					}
				}
			}
			return false;
		}