ブロックがランダムに無限に落ちてくる。地面に付くとゲームオーバー。ブロックはタップすると消せる。右上にタップしたブロックの数がカウント表示される。's game

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

No:36487

←

Prev Next

→

ブロックがランダムに無限に落ちてくる。地面に付くとゲームオーバー。ブロックはタップすると消せる。右上..ALL
Developer User16795｜Date and time 24/1/17 20:24:00
Build time 7.973 sec｜Game capacity 1.616KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>ブロックゲーム</title>
	<style>
		#gameArea {
			position: relative;
			width: 320px;
			height: 640px;
			margin: 0 auto;
			background-color: #f2f2f2;
		}

#score {
			position: absolute;
			top: 10px;
			right: 10px;
			font-size: 24px;
			font-weight: bold;
		}

.block {
			position: absolute;
			width: 50px;
			height: 50px;
			background-color: #ff9999;
			font-size: 36px;
			text-align: center;
			line-height: 50px;
			border-radius: 5px;
		}
	</style>
</head>
<body>
	<div id="gameArea">
		<div id="score">0</div>
	</div>

function createBlock() {
				const block = document.createElement('div');
				block.classList.add('block');
				block.style.left = Math.random() * (gameArea.offsetWidth - block.offsetWidth) + 'px';
				gameArea.appendChild(block);

block.addEventListener('click', function () {
					block.remove();
					score++;
					scoreElement.textContent = score;
				});

const fallingInterval = setInterval(function () {
					const top = block.offsetTop;
					block.style.top = top + 1 + 'px';

if (top + block.offsetHeight >= gameArea.offsetHeight) {
						clearInterval(fallingInterval);
						block.remove();
						alert('ゲームオーバー\nスコア: ' + score);
						score = 0;
						scoreElement.textContent = score;
					}
				}, 10);
			}

setInterval(createBlock, 1000);
		});
	</script>
</body>
</html>