Un juego que sea un tetris dividido en dos juegos donde podamos elegir cual de los dos jugar's game

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

No:13051

174

←

Prev Next

→

Un juego que sea un tetris dividido en dos juegos ..ALL
Developer User3408｜Date and time 23/8/26 14:47:39
Build time 28.653 sec｜Game capacity 4.147KB｜

Script

テトリス

操作方法
←：左に移動　→：右に移動　↓：下に移動　↑：回転

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>テトリス</title>
	<style>
		canvas {
			border: 1px solid black;
			background-color: #f2f5f8;
		}
	</style>
</head>
<body>
	<h2>テトリス</h2>
	<canvas id="canvas" width="200" height="400"></canvas>
	<div>
		<button id="startButton">スタート</button>
		<button id="pauseButton" disabled>一時停止</button>
		<button id="resetButton" disabled>リセット</button>
	</div>
	<script>
		const canvas = document.getElementById('canvas');
		const ctx = canvas.getContext('2d');
		const blockSize = 20;
		const boardWidth = canvas.width / blockSize;
		const boardHeight = canvas.height / blockSize;
		let board = new Array(boardHeight).fill(0).map(() => new Array(boardWidth).fill(0));
		let currentPiece = null;
		let gameIntervalId = null;
		let score = 0;

function drawBlock(x, y) {
			ctx.fillRect(x * blockSize, y * blockSize, blockSize, blockSize);
			ctx.strokeRect(x * blockSize, y * blockSize, blockSize, blockSize);
		}

function updateScore() {
			document.getElementById('score').innerText = `スコア：${score}`;
		}

function gameOver() {
			clearInterval(gameIntervalId);
			alert('ゲームオーバー！');
			document.getElementById('startButton').disabled = false;
			document.getElementById('pauseButton').disabled = true;
			document.getElementById('resetButton').disabled = false;
		}

function moveLeft() {
			currentPiece.x--;
			if (isCollide()) {
				currentPiece.x++;
			}
		}

function moveRight() {
			currentPiece.x++;
			if (isCollide()) {
				currentPiece.x--;
			}
		}

function startGame() {
			board = new Array(boardHeight).fill(0).map(() => new Array(boardWidth).fill(0));
			currentPiece = createPiece();
			score = 0;
			updateScore();
			drawBoard();
			gameIntervalId = setInterval(() => {
				moveDown();
				drawBoard();
				drawPiece();
			}, 500);
			document.getElementById('startButton').disabled = true;
			document.getElementById('pauseButton').disabled = false;
			document.getElementById('resetButton').disabled = true;
		}

function pauseGame() {
			clearInterval(gameIntervalId);
			document.getElementById('startButton').disabled = false;
			document.getElementById('pauseButton').disabled = true;
			document.getElementById('resetButton').disabled = false;
		}

function resetGame() {
			clearInterval(gameIntervalId);
			board = new Array(boardHeight).fill(0).map(() => new Array(boardWidth).fill(0));
			currentPiece = null;
			score = 0;
			updateScore();
			drawBoard();
			document.getElementById('startButton').disabled = false;
			document.getElementById('pauseButton').disabled = true;
			document.getElementById('resetButton').disabled = true;
		}

document.getElementById('startButton').addEventListener('click', startGame);
		document.getElementById('pauseButton').addEventListener('click', pauseGame);
		document.getElementById('resetButton').addEventListener('click', resetGame);

document.addEventListener('keydown', event => {
			switch (event.key) {
				case 'ArrowDown':
					moveDown();
					drawBoard();
					drawPiece();
					break;
				case 'ArrowLeft':
					moveLeft();
					drawBoard();
					drawPiece();
					break;
				case 'ArrowRight':
					moveRight();
					drawBoard();
					drawPiece();
					break;
				case 'ArrowUp':
					let oldShape = currentPiece.shape;
					rotatePiece();
					drawBoard();
					drawPiece();
					break;
			}
		});
	</script>
	<div id="score"></div>
操作方法<br>
←：左に移動　→：右に移動　↓：下に移動　↑：回転<br><br>
</body>
</html>