Space Invaders And Tetris's game

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

No:17335

←

Prev Next

→

Space Invaders And Tetris
Developer User7638｜Date and time 23/9/23 5:37:26
Build time 18.312 sec｜Game capacity 1.843KB｜

Script

Score: 0

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<title>Tetris Game</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			margin: 0;
			padding: 0;
			overflow: hidden;
			background-color: #333333;
		}
		canvas {
			display: block;
			margin: 0 auto;
			border: 1px solid #FFFFFF;
		}
		#score {
			display: block;
			margin: 10px auto 0;
			color: #FFFFFF;
			font-size: 24px;
			text-align: center;
		}
		.button {
			display: block;
			margin: 0 auto;
			padding: 10px;
			width: 150px;
			color: #FFFFFF;
			background-color: #FFA500;
			border: none;
			border-radius: 10px;
			font-size: 18px;
			text-align: center;
			cursor: pointer;
		}
		.button:hover {
			background-color: #FFD700;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="200" height="400"></canvas>
	<div id="score">Score: 0</div>
	<button class="button" id="rotate">回転</button>

let canvas = document.getElementById("canvas");
		let ctx = canvas.getContext("2d");
		let scoreElement = document.getElementById("score");
		let rotateButton = document.getElementById("rotate");

let width = canvas.width / 10;
		let height = canvas.height / 20;
		let blocksInPlay = [];
		let score = 0;

// ブロックを生成する関数
		function createBlock() {
			let block = blocks[Math.floor(Math.random() * blocks.length)];
			let x = Math.floor(Math.random() * (10 - block[0].length + 1));
			let y = 0;
			return { block, x, y };
		}

// ブロックを描画する関数
		function drawBlock(block, x, y) {
			let color = "#FFFFFF";
			switch (block) {
				case 1: color = "#FF0000"; break;
				case 2: color = "#00FF00"; break;
				case 3: color = "#0000FF"; break;
				case 4: color = "#FFFF00"; break;
				case 5: color = "#FF00FF"; break;
				case 6: color = "#00FFFF"; break;
				case 7: color = "#FFFFFF"; break;
			}
			ctx.fillStyle = color;
			ctx.fillRect(x * width, y * height, width, height);
			ctx.strokeStyle = "#000000";
			ctx.strokeRect(x * width, y * height, width, height);
		}

// 画面を描画する関数
		function draw() {
			// 背景を塗りつぶす
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			ctx.fillStyle = "#333333";
			ctx.fillRect(0, 0, canvas.width, canvas.height);

// ブロックを描画する
			for (let i = 0; i < 20; i++) {
				for (let j = 0; j < 10; j++) {
					if (blocksInPlay[i] && blocksInPlay[i][j] !== 0) {
						drawBlock(blocksInPlay[i][j], j, i);
					}
				}
			}

// スコアを表示する
			scoreElement.innerHTML = "Score: " + score;
		}

// ブロックを落下させる関数
		function moveBlocks() {
			let canMove = true;
			// ブロックが他のブロックまたは床に当たるまで下に移動する
			while (canMove) {
				canMove = false;
				for (let i = 0; i < blocksInPlay.length; i++) {
					for (let j = 0; j < blocksInPlay[i].length; j++) {
						if (blocksInPlay[i][j] !== 0) {
							if (i + 1 === blocksInPlay.length || blocksInPlay[i + 1][j] !== 0) {
								canMove = false;
								break;
							}
							canMove = true;
						}
					}
					if (canMove) {
						break;
					}
				}
				if (canMove) {
					for (let i = blocksInPlay.length - 2; i >= 0; i--) {
						for (let j = 0; j < blocksInPlay[i].length; j++) {
							if (blocksInPlay[i][j] !== 0) {
								blocksInPlay[i + 1][j] = blocksInPlay[i][j];
								blocksInPlay[i][j] = 0;
							}
						}
					}
				}
			}
			// 揃った行を消して、スコアを加算する
			let rowsCleared = 0;
			for (let i = blocksInPlay.length - 1; i >= 0; i--) {
				let rowCleared = true;
				for (let j = 0; j < blocksInPlay[i].length; j++) {
					if (blocksInPlay[i][j] === 0) {
						rowCleared = false;
						break;
					}
				}
				if (rowCleared) {
					blocksInPlay.splice(i, 1);
					blocksInPlay.unshift(new Array(10).fill(0));
					rowsCleared++;
					score += 100;
				}
			}
			if (rowsCleared > 0) {
				score += 100 * Math.pow(2, rowsCleared - 1);
			}
			// 新しいブロックを生成する
			let newBlock = createBlock();
			for (let i = 0; i < newBlock.block.length; i++) {
				for (let j = 0; j < newBlock.block[i].length; j++) {
					if (newBlock.block[i][j] !== 0) {
						if (blocksInPlay[newBlock.y + i][newBlock.x + j] !== 0) {
							alert("Game Over!");
							location.reload();
						}
						blocksInPlay[newBlock.y + i][newBlock.x + j] = newBlock.block[i][j];
					}
				}
			}
			// 画面を描画する
			draw();
		}

// キー入力でブロックを操作する関数
		function handleKeyDown(event) {
			switch (event.keyCode) {
				case 37: { // ←
					let canMoveLeft = true;
					for (let i = 0; i < blocksInPlay.length; i++) {
						for (let j = 0; j < blocksInPlay[i].length; j++) {
							if (blocksInPlay[i][j] !== 0) {
								if (j - 1 < 0 || blocksInPlay[i][j - 1] !== 0) {
									canMoveLeft = false;
									break;
								}
							}
						}
						if (!canMoveLeft) {
							break;
						}
					}
					if (canMoveLeft) {
						for (let i = 0; i < blocksInPlay.length; i++) {
							for (let j = 1; j < blocksInPlay[i].length; j++) {
								if (blocksInPlay[i][j] !== 0) {
									blocksInPlay[i][j - 1] = blocksInPlay[i][j];
									blocksInPlay[i][j] = 0;
								}
							}
						}
						draw();
					}
					break;
				}
				case 39: { // →
					let canMoveRight = true;
					for (let i = 0; i < blocksInPlay.length; i++) {
						for (let j = 0; j < blocksInPlay[i].length; j++) {
							if (blocksInPlay[i][j] !== 0) {
								if (j + 1 >= blocksInPlay[i].length || blocksInPlay[i][j + 1] !== 0) {
									canMoveRight = false;
									break;
								}
							}
						}
						if (!canMoveRight) {
							break;
						}
					}
					if (canMoveRight) {
						for (let i = 0; i < blocksInPlay.length; i++) {
							for (let j = blocksInPlay[i].length - 2; j >= 0; j--) {
								if (blocksInPlay[i][j] !== 0) {
									blocksInPlay[i][j + 1] = blocksInPlay[i][j];
									blocksInPlay[i][j] = 0;
								}
							}
						}
						draw();
					}
					break;
				}
			}
		}

// 回転ボタンをクリックしてブロックを回転させる関数
		function handleRotate() {
			let rotatedBlock = new Array(blocksInPlay.length).fill(0).map(() => new Array(blocksInPlay[0].length).fill(0));
			for (let i = 0; i < blocksInPlay.length; i++) {
				for (let j = 0; j < blocksInPlay[i].length; j++) {
					if (blocksInPlay[i][j] !== 0) {
						let x = j - (blocksInPlay[i].length - 1) / 2;
						let y = (blocksInPlay.length - 1) / 2 - i;
						let newX = Math.round(y + (blocksInPlay[i].length - 1) / 2);
						let newY = Math.round((blocksInPlay.length - 1) / 2 - x);
						if (newX < 0 || newX >= blocksInPlay[i].length || newY < 0 || newY >= blocksInPlay.length || blocksInPlay[newY][newX] !== 0) {
							return;
						}
						rotatedBlock[newY][newX] = blocksInPlay[i][j];
					}
				}
			}
			blocksInPlay = rotatedBlock;
			draw();
		}

// 初期化
		blocksInPlay = new Array(20).fill(0).map(() => new Array(10).fill(0));
		window.addEventListener("keydown", handleKeyDown);
		rotateButton.addEventListener("click", handleRotate);
		setInterval(moveBlocks, 1000);

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