ラインアート Windowsのスクリーンセーバーの『ラインアート』のような、自動的に線画され続けるランダムなラインアートを表示します。ラインアートはJavaScriptによって線画されます。ゆっくりと、新しく線を引くように線画され続けます。線の色は徐々に変化します。最初は赤色から始まります。's game

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

No:3126

7184

←

Prev Next

→

ラインアート Windowsのスクリーンセーバーの『ラインアート』のような、自動的に線画され続ける..ALL
Developer もちきなこ｜Date and time 23/6/23 22:22:24
Build time 18.903 sec｜Game capacity 1.646KB｜

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 type="text/css">
		body {
			margin: 0;
			padding: 0;
			background-color: black;
			overflow: hidden;
		}

canvas {
			display: block;
			position: absolute;
			top: 0;
			left: 0;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>

canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;

var color = [255, 0, 0];

function drawLine(x1, y1, x2, y2) {
			ctx.strokeStyle = "rgb(" + color.join() + ")";
			ctx.beginPath();
			ctx.moveTo(x1, y1);
			ctx.lineTo(x2, y2);
			ctx.stroke();
		}

function init() {
			var startX = Math.random() * canvas.width;
			var startY = Math.random() * canvas.height;
			var endX = Math.random() * canvas.width;
			var endY = Math.random() * canvas.height;

drawLine(startX, startY, endX, endY);

color[0] -= 1;
			color[1] += 1;

setTimeout(init, 50);
		}

init();
	</script>
</body>
</html>

このアプリは、画面に自動的に線を描き続けるランダムなラインアートを表示します。線は、ゆっくりと新しい部分を追加しながら描かれ、色は徐々に変化していきます。最初は赤色から始まり、青色に変わっていきます。

ゲームとして遊ぶことはできませんが、楽しんでいただければ幸いです。