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

2209

←

Prev Next

→

Shooting star When you tap the screen, a "shooting..ALL
Developer anonymous｜Date and time 70/1/1 9:33:47
Build time unknown 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>