テトリス十字のボタンと、回転ボタンを作ってください 's game

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

No:1906

133

←

Prev Next

→

テトリス十字のボタンと、回転ボタンを作ってください
Developer User3431｜Date and time 23/6/19 13:56:06
Build time 125.479 sec｜Game capacity 9.039KB｜

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>