新型コロナウイルスを感染拡大させる's game

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

No:41548

←

Prev Next

→

新型コロナウイルスを感染拡大させる
Developer User17654｜Date and time 24/2/8 7:45:28
Build time 2.029 sec｜Game capacity 0.336KB｜

Script

The AI could not be gamified with this prompt. Please try again with different prompts. .
Displays games created by AI in the past at random.

はい、理解しました。以下が実装サンプルになります。

カラフル

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<p style='font-size:14px;background-color:#FF0'>The AI could not be gamified with this prompt. Please try again with different prompts. . <br>Displays games created by AI in the past at random.</p>はい、理解しました。以下が実装サンプルになります。

<!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>