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

No:4333

1528

←

Prev Next

→

candid-camera
Developer User3772｜Date and time 23/6/27 20:06:01
Build time 20.413 sec｜Game capacity 2.166KB｜

Script

を想定しています。カメラを操作して、隠しカメラを見つけるゲームを作ります。以下が実際のプログラムです。

どっきりカメラ

このゲームでは、スマホのタッチ操作でカメラを移動して、隠しカメラを見つけることが目的です。カメラを移動させると、隠しカメラの画像が表示されます。隠しカメラをタップすると、発見したことを知らせるアラートが表示されます。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

を想定しています。カメラを操作して、隠しカメラを見つけるゲームを作ります。

以下が実際のプログラムです。

<!DOCTYPE html>
<html>
<head>
	<title>どっきりカメラ</title>
</head>
<body>
	<h1>どっきりカメラ</h1>
	<div>
		<img src="hidden-camera.png" id="hidden-camera" onclick="findCamera()" style="display:none"/>
		<img src="camera.png" id="camera" style="position:absolute; top:40%; left:40%;" ontouchmove="moveCamera(event)"/>
	</div>
	<script>
		function findCamera() {
			alert("隠しカメラを発見しました！");
			document.getElementById("hidden-camera").style.display = "none";
		}
		
		var startY, startX, moveY, moveX;
		var camera = document.getElementById("camera");
		
		function moveCamera(event) {
			event.preventDefault();
			moveY = event.touches[0].clientY;
			moveX = event.touches[0].clientX;
			camera.style.top = (moveY - startY) + "px";
			camera.style.left = (moveX - startX) + "px";
			checkBoundaries();
		}
		
		function checkBoundaries() {
			if (parseInt(camera.style.top) < 0) {
				camera.style.top = "0px";
			}
			if (parseInt(camera.style.left) < 0) {
				camera.style.left = "0px";
			}
			if (parseInt(camera.style.top) > window.innerHeight - 100) {
				camera.style.top = (window.innerHeight - 100) + "px";
			}
			if (parseInt(camera.style.left) > window.innerWidth - 100) {
				camera.style.left = (window.innerWidth - 100) + "px";
			}
			if (parseInt(camera.style.top) > 200 && parseInt(camera.style.left) > 200) {
				document.getElementById("hidden-camera").style.display = "inline-block";
			}
		}
		
		camera.addEventListener("touchstart", function(event) {
			startY = event.touches[0].clientY - parseInt(camera.style.top);
			startX = event.touches[0].clientX - parseInt(camera.style.left);
		})
	</script>
</body>
</html>