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

No:3156

2517

←

Prev Next

→

図形いっぱい！！！！ JavaScriptによって線画された図形を表示します。図形は関数によっ..ALL
Developer もちきなこ｜Date and time 23/6/24 0:21:28
Build time 30.716 sec｜Game capacity 2.288KB｜

Script

以下が、1枚のHTMLファイルで実装されたゲームアプリになります。 HTMLコードは、以下のようになります。

図形いっぱいゲーム

クリックすると図形が変化します！

このアプリは、canvasタグを利用して、JavaScriptによって線画された図形を表示します。図形の色はランダムに変化するため、毎回変化する図形を楽しむことができます。また、スマートフォンでも操作が可能であり、図形をタップすると、新しい図形に切り替わりますので、手軽に遊ぶことができます。このアプリは、図形いっぱいに色をつけて、とても楽しい雰囲気が出ています。図形いっぱいゲームを楽しんでください！

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

以下が、1枚のHTMLファイルで実装されたゲームアプリになります。

HTMLコードは、以下のようになります。

```
<!DOCTYPE html>
<html>
<head>
	<title>図形いっぱいゲーム</title>
	<style type="text/css">
		canvas {
			border: 2px solid black;
		}
	</style>
</head>
<body>

<h1>図形いっぱいゲーム</h1>

<p>クリックすると図形が変化します！</p>

// 色の配列
		const colors = ["red", "orange", "yellow", "green", "blue", "purple"];

// 図形の関数
		function drawCircle(x, y) {
			ctx.beginPath();
			ctx.arc(x, y, 50, 0, 2*Math.PI);
			ctx.fillStyle = colors[Math.floor(Math.random() * colors.length)];
			ctx.fill();
		}

function drawTriangle(x, y) {
			ctx.beginPath();
			ctx.moveTo(x, y);
			ctx.lineTo(x+50, y+100);
			ctx.lineTo(x-50, y+100);
			ctx.fillStyle = colors[Math.floor(Math.random() * colors.length)];
			ctx.fill();
		}

function drawSquare(x, y) {
			ctx.fillStyle = colors[Math.floor(Math.random() * colors.length)];
			ctx.fillRect(x-50, y-50, 100, 100);
		}

// クリックした時の処理
		canvas.addEventListener("click", function(event) {
			ctx.clearRect(0, 0, canvas.width, canvas.height);

let x = event.clientX - canvas.offsetLeft;
			let y = event.clientY - canvas.offsetTop;

// 図形をランダムに選択
			let shapes = [drawCircle, drawTriangle, drawSquare];
			let randomShape = shapes[Math.floor(Math.random() * shapes.length)];

// 図形を描画
			randomShape(x, y);
		});
	</script>

</body>
</html>
```

このアプリは、canvasタグを利用して、JavaScriptによって線画された図形を表示します。図形の色はランダムに変化するため、毎回変化する図形を楽しむことができます。

また、スマートフォンでも操作が可能であり、図形をタップすると、新しい図形に切り替わりますので、手軽に遊ぶことができます。

このアプリは、図形いっぱいに色をつけて、とても楽しい雰囲気が出ています。図形いっぱいゲームを楽しんでください！