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

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 157

Warning: in_array() expects parameter 2 to be array, bool given in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 476

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 484
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 | AI game creator

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

No:2359

2389

←

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]現在の売れ筋Kindle本ランキング

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>