Shooting star When you tap the screen, a "shooting star" is drawn by JavaScript at the tapped position and falls diagonally on the screen. The shooting star is a star-based design and comes in a variety of sizes, large and small. Also, shooting stars are randomly chosen. When the shooting star falls down, it gives off a glittering effect. In addition, the line drawing of falling to the lower right is slowly drawn (it does not fall instantly). Tap various places and create your own starry sky!'s game

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

No:2359

2672

←

Prev Next

→

Shooting star When you tap the screen, a "shooting..ALL
Developer もちきなこ｜Date and time 23/6/21 1:52:57
Build time 25.822 sec｜Game capacity 2.027KB｜

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.0">
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: black;
		}

canvas {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>

// 初期設定
		init();

function init() {
			canvas.addEventListener('click', createStar);
			setInterval(update, 30);
		}

// 流れ星を作成
		function createStar(e) {
			// クリックした場所の座標
			var x = e.clientX;
			var y = e.clientY;

// 流れ星のデータ
			var star = {
				x: x,
				y: y,
				size: Math.floor(Math.random() * 3) + 1,
				color: '#' + Math.floor(Math.random() * 16777215).toString(16),
				speed: Math.floor(Math.random() * 5) + 5,
				angle: Math.PI / 4
			};

stars.push(star);
		}

// スターを更新
		function update() {
			// キャンバスをクリア
			ctx.clearRect(0, 0, canvas.width, canvas.height);

// スターを更新
			for (var i = 0; i < stars.length; i++) {
				var star = stars[i];

// エフェクトを描画
				drawEffect(star);

// スターを描画
				ctx.strokeStyle = star.color;
				ctx.lineWidth = star.size;
				ctx.beginPath();
				ctx.moveTo(star.x, star.y);
				ctx.lineTo(star.x + star.speed * Math.cos(star.angle), star.y + star.speed * Math.sin(star.angle));
				ctx.stroke();

// スターの位置を更新
				star.x += star.speed * Math.cos(star.angle);
				star.y += star.speed * Math.sin(star.angle);

// スターの角度を更新
				star.angle += Math.PI / 100;
			}
		}

// エフェクトを描画
		function drawEffect(star) {
			ctx.beginPath();
			ctx.arc(star.x, star.y, star.size * 10, 0, 2 * Math.PI);
			ctx.fillStyle = star.color;
			ctx.fill();
		}
	</script>
</body>
</html>