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

No:1784

1333

←

Prev Next

→

spot the difference (puzzle)
Developer User3404｜Date and time 23/6/19 1:07:46
Build time 27.361 sec｜Game capacity 1.979KB｜

Script

間違い探しゲーム

- 間違い探しゲームのアプリである。 - JavaScriptを含んでいる。 - スマホで遊ぶことを前提に開発した。 - 背景には絵文字を使用している。 - 3つのアイテムがあり、それをクリックして正解を探すゲームである。

←

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: #FCEADE;
			font-size: 1.2em;
			text-align: center;
		}
		h1 {
			color: #FF8F7A;
		}
		#game-board {
			margin: 50px auto;
			width: 70%;
			padding: 30px;
			background-color: #FFF3B8;
			border: 5px solid #F9C784;
			border-radius: 20px;
		}
		.item {
			position: absolute;
			cursor: pointer;
			font-size: 2em;
		}
		#item1, #item2, #item3 {
			font-size: 3em;
		}
	</style>
</head>
<body>
	<h1>間違い探しゲーム</h1>
	<div id="game-board">
		<img src="background.jpg" alt="背景画像">
		<img id="item1" src="item1.jpg" alt="アイテム1">
		<img id="item2" src="item2.jpg" alt="アイテム2">
		<img id="item3" src="item3.jpg" alt="アイテム3">
	</div>
	<script>
		// アイテムの位置をランダムに設定する関数
		function setRandomPosition(element) {
			const boardWidth = document.getElementById('game-board').offsetWidth;
			const boardHeight = document.getElementById('game-board').offsetHeight;
			const itemSize = element.offsetWidth;
			const randomLeft = Math.floor(Math.random() * (boardWidth - itemSize));
			const randomTop = Math.floor(Math.random() * (boardHeight - itemSize));
			element.style.left = randomLeft + 'px';
			element.style.top = randomTop + 'px';
		}

// 全てのアイテムの位置をランダムに設定する
		const items = document.getElementsByClassName('item');
		for (let i = 0; i < items.length; i++) {
			setRandomPosition(items[i]);
			items[i].addEventListener('click', function() {
				this.style.display = 'none';
				alert('正解！');
			});
		}
	</script>
</body>
</html>

- 間違い探しゲームのアプリである。
- JavaScriptを含んでいる。
- スマホで遊ぶことを前提に開発した。
- 背景には絵文字を使用している。
- 3つのアイテムがあり、それをクリックして正解を探すゲームである。