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

No:874

161

←

Prev Next

→

A game to watch the people below from the rooftop ..ALL
Developer こぁ太郎｜Date and time 23/6/17 21:32:49
Build time 45.361 sec｜Game capacity 3.533KB｜

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>
</head>
<body>
	<h1>タワマン屋上から下民を眺めるゲーム</h1>
	
	
	<div id="gameScreen">
		
		<div id="downPeople">
			<span class="people">👦</span>
			<span class="people">👧</span>
			<span class="people">👴</span>
			<span class="people">👵</span>
			<span class="people">💼</span>
			<span class="people">🎒</span>
		</div>
		
		
		<div id="towerMan">
			<span class="towerMan">🕵️‍♂️</span>
		</div>
	</div>
	
	
	<div id="buttons">
		<button id="upButton">上へ移動</button>
		<button id="downButton">下へ移動</button>
		<button id="leftButton">左へ移動</button>
		<button id="rightButton">右へ移動</button>
	</div>
	
	<script>
		// タワマンの初期位置を設定
		var towerManPosition = {
			top: 0,
			left: 0
		};
		
		// タワマンと下民の初期位置を設定
		var downPeoplePositions = [
			{
				top: 100,
				left: 100
			},
			{
				top: 150,
				left: 200
			},
			{
				top: 200,
				left: 50
			},
			{
				top: 250,
				left: 150
			},
			{
				top: 300,
				left: 250
			},
			{
				top: 350,
				left: 100
			},
		];
		
		// タワマンと下民の要素を取得
		var towerMan = document.querySelector('#towerMan');
		var downPeople = document.querySelector('#downPeople');
		var people = downPeople.querySelectorAll('.people');
		
		// タワマンと下民の初期位置を設定
		function setInitialPositions() {
			// タワマンの初期位置を設定
			towerMan.style.top = towerManPosition.top + 'px';
			towerMan.style.left = towerManPosition.left + 'px';
			
			// 下民の初期位置を設定
			for (var i=0; i<people.length; i++) {
				people[i].style.top = downPeoplePositions[i].top + 'px';
				people[i].style.left = downPeoplePositions[i].left + 'px';
			}
		}
		
		// 初期位置を設定
		setInitialPositions();
		
		// タワマンを移動させる関数
		function moveTowerMan(direction) {
			switch (direction) {
				case 'up':
					if (towerManPosition.top > 0) {
						towerManPosition.top -= 50;
					}
					break;
				case 'down':
					if (towerManPosition.top < 350) {
						towerManPosition.top += 50;
					}
					break;
				case 'left':
					if (towerManPosition.left > 0) {
						towerManPosition.left -= 50;
					}
					break;
				case 'right':
					if (towerManPosition.left < 250) {
						towerManPosition.left += 50;
					}
					break;
			}
			
			// タワマンを移動させる
			towerMan.style.top = towerManPosition.top + 'px';
			towerMan.style.left = towerManPosition.left + 'px';
		}
		
		// ボタンをクリックしたらタワマンを移動させる
		document.querySelector('#upButton').addEventListener('click', function() {
			moveTowerMan('up');
		});
		document.querySelector('#downButton').addEventListener('click', function() {
			moveTowerMan('down');
		});
		document.querySelector('#leftButton').addEventListener('click', function() {
			moveTowerMan('left');
		});
		document.querySelector('#rightButton').addEventListener('click', function() {
			moveTowerMan('right');
		});
	</script>
</body>
</html>