流れ星画面をタップすると、タップした位置に流れ星がJavaScriptによって線画され、画面を斜めに落ちます。流れ星は大小様々な形をしており、ランダムな色が選ばれます。流れ星がながら落ちる際は、キラキラしたエフェクトを放っています。色んな場所をタップして、自分だけの星空を作りましょう！'s game

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

No:2352

6441

←

Prev Next

→

流れ星画面をタップすると、タップした位置に流れ星がJavaScriptによって線画され、画面を斜..ALL
Developer anonymous｜Date and time 23/8/14 16:22:41
Build time 1549 sec｜Game capacity 1.549KB｜

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 charset="UTF-8">
	<style>
		body {
			margin: 0;
			padding: 0;
			background: black;
		}
		canvas {
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<script>
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");

canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
		window.addEventListener("resize", function() {
			canvas.width = window.innerWidth;
			canvas.height = window.innerHeight;
		});

canvas.addEventListener("click", function(event) {
			var x = event.clientX;
			var y = event.clientY;
			var size = Math.floor(Math.random() * 30) + 10;
			var color = "hsl(" + Math.floor(Math.random() * 360) + ", 100%, 50%)";

drawStar(x, y, size, color);
		});

function drawStar(x, y, size, color) {
			ctx.beginPath();
			ctx.strokeStyle = color;
			ctx.lineWidth = size / 10;
			ctx.lineCap = "round";
			ctx.moveTo(x, y);
			var length = size * (2 + Math.random() * 2);
			var angle = Math.PI / 4 + Math.random() * Math.PI / 4;
			var endX = x + length * Math.cos(angle);
			var endY = y + length * Math.sin(angle);
			ctx.lineTo(endX, endY);
			ctx.stroke();

for (var i = 0; i < 5 + Math.floor(Math.random() * 10); i++) {
				var starSize = Math.random() * 3;
				ctx.fillStyle = "white";
				ctx.fillRect(endX - starSize / 2, endY - starSize / 2, starSize, starSize);
			}
		}
	</script>
</body>
</html>