A game to test whether a beautiful picture can be displayed or not.'s game

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

No:8369

1493

←

Prev Next

→

A game to test whether a beautiful picture can be ..ALL
Developer yuki｜Date and time 23/7/15 14:54:46
Build time 16.858 sec｜Game capacity 1.609KB｜

Script

了解しました。以下にプログラム例を示します。

このプログラムでは、ウェブページ上に表示されるキャンバス（canvas）に綺麗な絵を描くゲームを実装しています。ページが読み込まれると、キャンバスが表示され、その上でクリックするとランダムな線が描かれます。このように、JavaScript の canvas 要素を利用して絵を描くことができます。描画する絵やゲームの内容は自由にカスタマイズできるので、綺麗な絵を表示させたり、他のゲームを作ることも可能です。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

了解しました。以下にプログラム例を示します。

```html
<!DOCTYPE html>
<html>
<head>
	<title>綺麗な絵テストゲーム</title>
	<style>
		canvas {
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="400" height="400"></canvas>
	<script>
		window.onload = function() {
			var canvas = document.getElementById("canvas");
			var context = canvas.getContext("2d");

var drawRandomImage = function() {
				// 綺麗な絵のデザイン例（ここではランダムな線を描く）
				context.clearRect(0, 0, canvas.width, canvas.height);

var x1 = Math.random() * canvas.width;
				var y1 = Math.random() * canvas.height;
				var x2 = Math.random() * canvas.width;
				var y2 = Math.random() * canvas.height;

context.beginPath();
				context.moveTo(x1, y1);
				context.lineTo(x2, y2);
				context.strokeStyle = "#000";
				context.lineWidth = 3;
				context.stroke();
			};

canvas.addEventListener("click", drawRandomImage, false);
		};
	</script>
</body>
</html>
```

このプログラムでは、ウェブページ上に表示されるキャンバス（canvas）に綺麗な絵を描くゲームを実装しています。ページが読み込まれると、キャンバスが表示され、その上でクリックするとランダムな線が描かれます。

このように、JavaScript の canvas 要素を利用して絵を描くことができます。描画する絵やゲームの内容は自由にカスタマイズできるので、綺麗な絵を表示させたり、他のゲームを作ることも可能です。