blockhead's game | AI game creator

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

No:2688

2701

blockhead
Developer anonymous｜Date and time 70/1/1 9:00:01
Build time unknown sec｜Game capacity 4.767KB｜

→ 　

0　

0　

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

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ブロック落としゲーム</title>
	<style>
		#gameBoard {
			display: flex;
			flex-wrap: wrap;
			width: 250px;
			height: 500px;
			background-color: white;
			border: 1px solid black;
		}
		.block {
			width: 50px;
			height: 50px;
			background-color: yellow;
			border: 1px solid black;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30px;
		}
		.block:hover {
			background-color: aquamarine;
			cursor: pointer;
		}
		.score {
			margin-bottom: 20px;
			text-align: center;
			font-size: 24px
		}
	</style>
	<script>
		let gameBoard = document.getElementById("gameBoard");
		let score = document.getElementById("score");
		let blocks = [[]];
		let selectedBlocks = [];
		let point = 0;

function createGameBoard() {
			for (let i = 0; i < 10; i++) {
				blocks[i] = [];
				for (let j = 0; j < 5; j++) {
					let block = document.createElement("div");
					block.classList.add("block");
					block.dataset.x = i;
					block.dataset.y = j;
					block.textContent = "🟫"; //絵文字を使ってブロックを表示
					block.addEventListener("click", selectBlock);
					gameBoard.appendChild(block);
					blocks[i][j] = block;
				}
			}
		}

function selectBlock(event) {
			let blockX = Number(event.target.dataset.x);
			let blockY = Number(event.target.dataset.y);
			if (!blocks[blockX][blockY].classList.contains("selected")) {
				selectedBlocks.push(blocks[blockX][blockY]);
				blocks[blockX][blockY].classList.add("selected");
			} else {
				selectedBlocks.splice(selectedBlocks.indexOf(blocks[blockX][blockY]), 1);
				blocks[blockX][blockY].classList.remove("selected");
			}
			if (selectedBlocks.length == 3) {
				if (selectedBlocks[0].dataset.y == selectedBlocks[1].dataset.y &&
						selectedBlocks[1].dataset.y == selectedBlocks[2].dataset.y) {
					//縦に3つ同じブロックが選択された場合
					removeSelectedBlocks();
				} else if (selectedBlocks[0].dataset.x == selectedBlocks[1].dataset.x &&
						selectedBlocks[1].dataset.x == selectedBlocks[2].dataset.x) {
					//横に3つ同じブロックが選択された場合
					removeSelectedBlocks();
				} else {
					clearSelectedBlocks();
				}
			}
		}

function removeSelectedBlocks() {
			point += 10;
			score.textContent = `Score: ${point}`;
			for (let i = 0; i < selectedBlocks.length; i++) {
				selectedBlocks[i].textContent = "";
				selectedBlocks[i].classList.remove("selected");
				setTimeout(() => gameBoard.removeChild(selectedBlocks[i]), 500);
			}
			selectedBlocks = [];
			setTimeout(() => shiftBlocks(), 500);
		}

function clearSelectedBlocks() {
			point -= 5;
			score.textContent = `Score: ${point}`;
			for (let i = 0; i < selectedBlocks.length; i++) {
				selectedBlocks[i].classList.remove("selected");
			}
			selectedBlocks = [];
		}

function shiftBlocks() {
			for (let i = 0; i < blocks.length; i++) {
				for (let j = blocks[i].length - 1; j > 0; j--) {
					if (blocks[i][j].textContent == "") {
						let k = j - 1;
						while (k >= 0 && blocks[i][k].textContent == "") k--;
						if (k >= 0) {
							blocks[i][j].textContent = blocks[i][k].textContent;
							blocks[i][j].style.color = blocks[i][k].style.color;
							blocks[i][k].textContent = "";
						} else {
							break;
						}
					}
				}
			}
			setTimeout(() => createNewBlocks(), 500);
		}

function createNewBlocks() {
			for (let i = 0; i < blocks.length; i++) {
				for (let j = 0; j < blocks[i].length; j++) {
					if (blocks[i][j].textContent == "") {
						let randomNum = Math.floor(Math.random() * 5) + 1;
						switch (randomNum) {
							case 1:
								blocks[i][j].textContent = "🟥";
								blocks[i][j].style.color = "red";
								break;
							case 2:
								blocks[i][j].textContent = "🟦";
								blocks[i][j].style.color = "blue";
								break;
							case 3:
								blocks[i][j].textContent = "🟩";
								blocks[i][j].style.color = "green";
								break;
							case 4:
								blocks[i][j].textContent = "🟪";
								blocks[i][j].style.color = "purple";
								break;
							case 5:
								blocks[i][j].textContent = "🟨";
								blocks[i][j].style.color = "yellow";
								break;
						}
					}
				}
			}
			checkGameOver();
		}

function checkGameOver() {
			let count = 0;
			for (let i = 0; i < blocks.length; i++) {
				if (blocks[i][0].textContent != "") count++;
			}
			if (count == blocks.length) {
				if (confirm("Game Over! Restart?")) {
					location.reload();
				}
			}
		}

window.onload = function() {
			createGameBoard();
			score.textContent = "Score: 0";
			createNewBlocks();
		};
	</script>
</head>
<body>
	<div class="score"></div>
	<div id="gameBoard"></div>
</body>
</html>