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

No:2402

150

←

Prev Next

→

Game to build a log house
Developer User3559｜Date and time 23/6/21 10:26:48
Build time 49.835 sec｜Game capacity 2.849KB｜

Script

ログハウスをつくるゲーム

ログハウスをつくるために必要な8本のログを集めよう！

合計ログ数： 0/8

このゲームは、ログハウスをつくるために必要な8本のログを集めるというシンプルなものです。ログを追加するボタンをクリックすると、ログが追加されます。合計ログ数が8本になると、火が起こります。スマホでも簡単に操作できるよう、ボタンやログの大きさを大きくしています。また、絵文字を多く使うことで、視覚的な面白さを追求しています。

←

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>
	<style>
		body {
			background-color: #adebad;
			font-size: 1.5em;
			text-align: center;
			padding-top: 50px;
		}
		.container {
			background-color: #fff;
			padding: 30px;
			border-radius: 10px;
			display: inline-block;
			text-align: left;
		}
		.button {
			background-color: #006600;
			color: #fff;
			font-size: 1em;
			border-radius: 5px;
			padding: 10px 20px;
			cursor: pointer;
			border: none;
			margin-top: 20px;
		}
		.loghouse {
			margin-top: 50px;
			font-size: 3em;
			position: relative;
		}
		.log {
			display: inline-block;
			background-color: #8B4513;
			width: 50px;
			height: 20px;
			position: absolute;
		}
		.log:nth-child(1) {
			top: 150px;
			left: 250px;
		}
		.log:nth-child(2) {
			top: 130px;
			left: 300px;
		}
		.log:nth-child(3) {
			top: 80px;
			left: 280px;
		}
		.log:nth-child(4) {
			top: 90px;
			left: 220px;
		}
		.log:nth-child(5) {
			top: 120px;
			left: 200px;
		}
		.log:nth-child(6) {
			top: 220px;
			left: 230px;
		}
		.log:nth-child(7) {
			top: 180px;
			left: 270px;
		}
		.log:nth-child(8) {
			top: 200px;
			left: 320px;
		}
		.fire {
			position: absolute;
			top: 250px;
			left: 30%;
			font-size: 5em;
		}
	</style>
	<script>
		// ログハウスのログを保存する変数
		let logs = 0;

// ログを追加する関数
		function addLog() {
			// ログの合計が8本未満の場合のみログを追加する
			if (logs < 8) {
				logs++;
				document.getElementById('logs').innerHTML += '<div class="log"></div>';
			}
			
			// ログの合計が8本になったら火を起こす
			if (logs === 8) {
				document.getElementById('fire').innerHTML = '🔥';
			}
		}
	</script>
</head>
<body>
	<div class="container">
		<h1>ログハウスをつくるゲーム</h1>
		<p>ログハウスをつくるために必要な8本のログを集めよう！</p>
		<div class="loghouse">
			<div class="log"></div>
			<div class="log"></div>
			<div class="log"></div>
			<div class="log"></div>
			<div class="log"></div>
			<div class="log"></div>
			<div class="log"></div>
			<div class="log"></div>
		</div>
		<div id="fire"></div>
		<button class="button" onclick="addLog()">ログを追加する</button>
		<p>合計ログ数： <span id="logs">0</span>/8</p>
	</div>
</body>
</html>