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

No:4259

5015

←

Prev Next

→

虹色ゲーム * 背景色は、動的に色調を変化させます。 * 画面には『虹色』書かれた文字が表示され..ALL
Developer もちきなこ｜Date and time 23/6/27 16:07:34
Build time 30.732 sec｜Game capacity 2.921KB｜

Script

タップするたびに、新しいランダムな色と方向の虹色が追加されます。画面上に表示されている文字の数が多くなるほど、虹色が華やかになります。スマホタップで遊べるオシャレな虹色ゲームです。以下が実装例です。

虹色

←

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: #000;
		}
		h1 {
			font-size: 5rem;
			font-weight: bold;
			font-family: sans-serif;
			color: #FFF;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}
	</style>
</head>
<body>
	<h1>虹色</h1>
	<script>
		function getRandomColor() {
			var letters = '0123456789ABCDEF';
			var color = '#';
			for (var i = 0; i < 6; i++) {
				color += letters[Math.floor(Math.random() * 16)];
			}
			return color;
		}

function getRandomDirection() {
			var directions = ['up', 'right', 'down', 'left'];
			return directions[Math.floor(Math.random() * 4)];
		}

function createRainbow() {
			var rainbow = document.createElement("span");
			rainbow.innerHTML = "虹色";
			rainbow.style.color = getRandomColor();
			rainbow.style.position = "absolute";
			rainbow.style.top = Math.floor(Math.random() * window.innerHeight) + "px";
			rainbow.style.left = Math.floor(Math.random() * window.innerWidth) + "px";
			rainbow.setAttribute("data-direction", getRandomDirection());
			document.body.appendChild(rainbow);
		}

setInterval(function() {
			var rainbows = document.getElementsByTagName("span");
			for (var i = 0; i < rainbows.length; i++) {
				var rainbow = rainbows[i];
				var direction = rainbow.getAttribute("data-direction");
				switch (direction) {
					case "up":
						rainbow.style.top = (parseInt(rainbow.style.top) - 5) + "px";
						if (parseInt(rainbow.style.top) < 0) {
							rainbow.setAttribute("data-direction", "down");
						}
						break;
					case "right":
						rainbow.style.left = (parseInt(rainbow.style.left) + 5) + "px";
						if (parseInt(rainbow.style.left) > window.innerWidth) {
							rainbow.setAttribute("data-direction", "left");
						}
						break;
					case "down":
						rainbow.style.top = (parseInt(rainbow.style.top) + 5) + "px";
						if (parseInt(rainbow.style.top) > window.innerHeight) {
							rainbow.setAttribute("data-direction", "up");
						}
						break;
					case "left":
						rainbow.style.left = (parseInt(rainbow.style.left) - 5) + "px";
						if (parseInt(rainbow.style.left) < 0) {
							rainbow.setAttribute("data-direction", "right");
						}
						break;
				}
				rainbow.style.color = getRandomColor();
			}
		}, 50);

var taps = 0;
		document.body.addEventListener("touchstart", function(event) {
			event.preventDefault();
			createRainbow();
			taps++;
			if (taps >= 10) {
				document.body.removeEventListener("touchstart", arguments.callee);
			}
		});
	</script>
</body>
</html>