虹色カラフル * 背景(画面)は、動的に色調が変化します。 * 背景のすぐ上の層には『カラフル』書かれた文字が表示されています。 * 文字は、ランダムな色に高速で点滅しながら、ランダムな方向へ動きます。 * 文字は画面上に10個以上存在しており、タップすることで、さらに数を増やすことができます。's game

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

No:4373

6206

←

Prev Next

→

虹色カラフル * 背景(画面)は、動的に色調が変化します。 * 背景のすぐ上の層には『カラフル』..ALL
Developer もちきなこ｜Date and time 23/6/27 20:52:00
Build time 38.419 sec｜Game capacity 2.806KB｜

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 {
			margin: 0;
			padding: 0;
		}
		canvas {
			display: block;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
		#title {
			position: fixed;
			top: 20px;
			left: 50%;
			transform: translateX(-50%);
			font-size: 50px;
			font-weight: bold;
			color: #FFF;
			text-shadow: 5px 5px 0 #F00, -5px -5px 0 #0F0, 5px -5px 0 #00F, -5px 5px 0 #FF0;
			animation: blink 0.2s infinite;
			user-select: none;
		}
		@keyframes blink {
			0%, 100% {
				opacity: 1;
			}
			50% {
				opacity: 0;
			}
		}
	</style>
</head>
<body>
	<canvas id="background"></canvas>
	<div id="title">カラフル</div>
	<script>
		const canvas = document.getElementById('background');
		const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;

const colors = ['#FF0000', '#FF7F00', '#FFFF00', '#00FF00', '#0000FF', '#4B0082', '#9400D3'];
		const circles = [];
		let counter = 10;

function init() {
			for (let i = 0; i < counter; i++) {
				let x = Math.random() * canvas.width;
				let y = Math.random() * canvas.height;
				let r = Math.random() * 50 + 50;
				let color = colors[Math.floor(Math.random() * colors.length)];
				circles.push(new Circle(x, y, r, color));
			}
			draw();
		}

function draw() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			circles.forEach(circle => circle.draw());
			timer = setTimeout(draw, 100);
		}

window.addEventListener('resize', function() {
			canvas.width = window.innerWidth;
			canvas.height = window.innerHeight;
			circles.splice(0, circles.length);
			counter = 10;
			init();
		});

window.addEventListener('touchstart', function(event) {
			let x = event.touches[event.touches.length - 1].clientX;
			let y = event.touches[event.touches.length - 1].clientY;
			let r = Math.random() * 50 + 50;
			let color = colors[Math.floor(Math.random() * colors.length)];
			circles.push(new Circle(x, y, r, color));
			counter++;
		});

init();
	</script>
</body>
</html>