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

No:3660

1300

←

Prev Next

→

hologram
Developer User3707｜Date and time 23/6/26 1:40:10
Build time 46.249 sec｜Game capacity 4.593KB｜

Script

ホログラムのゲームを作成しました。以下がプログラムです。

ホログラムゲーム

目的: すべてのピースをホログラムに当てはめる

このゲームのルールは以下の通りです。 - ゲーム画面には4つのピースがあります。 - ピースをクリックすると、ピースをドラッグして画面内を動かすことができます。 - ドラッグ中に画面外に出ると、ピースがリセットされます。 - ピースを回転させることはできません。 - すべてのピースをホログラムに当てはめると、ゲームクリアとなります。このゲームはスマホでも遊ぶことができます。また、ピースには絵文字を使用しており、見た目も楽しめます。

←

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>

<p>目的: すべてのピースをホログラムに当てはめる</p>

function pieceClicked(event) {
			var x = event.clientX;
			var y = event.clientY;

for (var piece in pieces) {
				if (pieces[piece] == false) {
					var elem = document.getElementById(piece);
					var rect = elem.getBoundingClientRect();

if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
						elem.style.top = (event.clientY - 25) + "px";
						elem.style.left = (event.clientX - 25) + "px";
					}
				}
			}

checkCompleted();
		}

function checkCompleted() {
			if (pieces.piece1 == false && getRotationAngle(document.getElementById("piece1")) == 0) {
				pieces.piece1 = true;
			}

if (pieces.piece2 == false && getRotationAngle(document.getElementById("piece2")) == 90) {
				pieces.piece2 = true;
			}

if (pieces.piece3 == false && getRotationAngle(document.getElementById("piece3")) == 135) {
				pieces.piece3 = true;
			}

if (pieces.piece4 == false && getRotationAngle(document.getElementById("piece4")) == 180) {
				pieces.piece4 = true;
			}

var completed = true;

for (var piece in pieces) {
				if (pieces[piece] == false) {
					completed = false;
					break;
				}
			}

if (completed) {
				alert("おめでとうございます！ゲームクリア！");
			}
		}

function reset() {
			for (var piece in pieces) {
				pieces[piece] = false;
			}

document.getElementById("piece1").style.top = "100px";
			document.getElementById("piece1").style.left = "100px";
			document.getElementById("piece1").style.transform = "rotate(45deg)";

document.getElementById("piece2").style.top = "250px";
			document.getElementById("piece2").style.left = "150px";
			document.getElementById("piece2").style.transform = "rotate(90deg)";

document.getElementById("piece3").style.top = "50px";
			document.getElementById("piece3").style.left = "200px";
			document.getElementById("piece3").style.transform = "rotate(135deg)";

document.getElementById("piece4").style.top = "200px";
			document.getElementById("piece4").style.left = "50px";
			document.getElementById("piece4").style.transform = "rotate(180deg)";
		}

function getRotationAngle(img) {
			var style = window.getComputedStyle(img);
			var matrix = new WebKitCSSMatrix(style.webkitTransform);
			var angle = Math.round(Math.atan2(matrix.m12, matrix.m11) * (180/Math.PI));

if (angle < 0) {
				angle += 360;
			}

return angle;
		}
	</script>

</body>
</html>

このゲームのルールは以下の通りです。

- ゲーム画面には4つのピースがあります。
- ピースをクリックすると、ピースをドラッグして画面内を動かすことができます。
- ドラッグ中に画面外に出ると、ピースがリセットされます。
- ピースを回転させることはできません。
- すべてのピースをホログラムに当てはめると、ゲームクリアとなります。

このゲームはスマホでも遊ぶことができます。また、ピースには絵文字を使用しており、見た目も楽しめます。