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

No:968

319

←

Prev Next

→

A game in which letters appear one after another a..ALL
Developer User3198｜Date and time 23/6/17 23:19:59
Build time 33.82 sec｜Game capacity 2.732KB｜

Script

文字が飛びまわるゲーム

画面内をマウスで追いかけて、表示される文字をクリックして消してね！

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>文字が飛びまわるゲーム</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
	<style>
		body {
			background-color: black;
			color: white;
			font-size: 30px;
		}

#text {
			position: absolute;
			top: 0;
			left: 0;
		}

</style>

<h1>文字が飛びまわるゲーム</h1>
	<p>画面内をマウスで追いかけて、表示される文字をクリックして消してね！</p>

// ランダムに文字を生成する関数
		function generateText() {
			var characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890🙂🐿️🕷️👻🍓🦀🍔🚀";
			var randomCharacter = characters.charAt(Math.floor(Math.random() * characters.length));
			var randomX = Math.floor(Math.random() * screenWidth);
			var randomY = Math.floor(Math.random() * screenHeight);
			var randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16); // ランダムな16進数カラーコード
			var textElement = document.createElement("span"); // span要素を作成
			textElement.innerHTML = randomCharacter; // span要素にランダムな文字をセット
			textElement.style.color = randomColor; // span要素にランダムなカラーをセット
			textElement.style.position = "absolute"; // 生成された文字を画面内にランダム配置するため、positionプロパティをabsoluteに設定
			textElement.style.top = randomY; // 画面内のランダムなy座標をセット
			textElement.style.left = randomX; // 画面内のランダムなx座標をセット
			textElement.addEventListener("click", () => { // span要素がクリックされたときのイベントを設定
				textElement.remove(); // クリックされたspan要素を画面から削除
			});
			document.getElementById("text").appendChild(textElement); // 生成したspan要素をdivに追加
		}

// 一定間隔で文字を生成する処理
		setInterval(() => {
			generateText();
		}, 500);

// マウスを動かしたときに画面内の文字を追いかけて移動する処理
		document.addEventListener("mousemove", (event) => {
			document.querySelectorAll("span").forEach((textElement) => {
				textElement.style.top = event.clientY + Math.floor(Math.random() * 20) + "px"; // マウスのy座標 + ランダムな値(0~20)を加算してセット
				textElement.style.left = event.clientX + Math.floor(Math.random() * 20) + "px"; // マウスのx座標 + ランダムな値(0~20)を加算してセット
			});
		});
	</script>

</body>
</html>