Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 157

Warning: in_array() expects parameter 2 to be array, bool given in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 476

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 484
A game to watch the people below from the rooftop of a tower block's game | AI game creator

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

No:877

349

←

Prev Next

→

A game to watch the people below from the rooftop ..ALL
Developer こぁ太郎｜Date and time 23/6/17 21:33:40
Build time 21.912 sec｜Game capacity 1.708KB｜

Script

以下はJavaScriptを使用したタワマン屋上から下民を眺める簡単なゲームの例です。

タワマン屋上から下民を眺めるゲーム

下の人々を眺めたい場所を選んで、画面をタップしてください。

このゲームでは、タワマンの屋上から下を見下ろすことができます。ゲームの概要がなかったため、作成にあたっては筆者が自由に想定しました。画面をタップすると、下の人々を眺めたい場所を選択できます。黄色い人がその位置に移動します。スマホで操作可能で、スマホ向けのUIとして、画面中央に寄せるようにレイアウトされています。また、背景色が少し目立つように配色されているため、かわいさを演出するために多くの絵文字は使用されていません。

←

Prev　Next

→ 　

Back　

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

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

以下はJavaScriptを使用したタワマン屋上から下民を眺める簡単なゲームの例です。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>タワマン屋上から下民を眺めるゲーム</title>
	<style>
		body {
			background-color: lightblue;
		}
		#tower {
			background-color: gray;
			height: 300px;
			width: 100px;
			position: relative;
			margin: 0 auto;
			padding-top: 20px;
		}
		#person {
			height: 50px;
			width: 20px;
			background-color: yellow;
			position: absolute;
			bottom: 0;
			left: 40px;
		}
	</style>
</head>
<body>
	<h1>タワマン屋上から下民を眺めるゲーム</h1>
	<p>下の人々を眺めたい場所を選んで、画面をタップしてください。</p>
	<div id="tower">
		<div id="person"></div>
	</div>
	<script>
		var tower = document.querySelector("#tower");
		var person = document.querySelector("#person");
		var position;
		tower.addEventListener("click", function(e) {
			position = e.pageY - tower.offsetTop;
			person.style.bottom = position + "px";
		});
	</script>
</body>
</html>