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

No:1303

109

←

Prev Next

→

Stealth game moving with cardboard
Developer User3025｜Date and time 23/6/18 10:23:59
Build time 15.96 sec｜Game capacity 1.513KB｜

Script

ダンボールステルスゲーム

画面をタップしてダンボールを動かそう！

ゲーム概要：プレイヤーはダンボールで敵の目をすり抜け、ゴールまで進むステルスゲームです。画面をタップするとダンボールが右方向に移動します。敵に見つかるとゲームオーバーです。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<title>ダンボールステルスゲーム</title>
	<style>
		body {
			font-size: 2em;
			text-align: center;
			background-color: #ddd;
		}
		#game {
			display: inline-block;
			background-color: white;
			padding: 10px;
			border-radius: 10px;
		}
		.box {
			display: inline-block;
			width: 50px;
			height: 50px;
			background-color: brown;
			border-radius: 5px;
			margin: 10px;
			position: absolute;
			top: 0;
			left: 0;
			transition: all 0.5s ease;
		}
		.box.move {
			background-color: gray;
			transform: translateX(calc(100vw - 60px));
		}
	</style>
	<script>
		document.addEventListener('DOMContentLoaded', function() {
			var box = document.getElementById('box');
			var game = document.getElementById('game');
			var isMoving = false;
			
			game.addEventListener('click', function() {
				if (!isMoving) {
					box.classList.add('move');
					isMoving = true;
				}
			});
		});
	</script>
</head>
<body>
	<h1>ダンボールステルスゲーム</h1>
	<p>画面をタップしてダンボールを動かそう！</p>
	<div id="game">
		<div id="box" class="box"></div>
	</div>
</body>
</html>