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

No:3869

214

Lets make a plastic model!
Developer User3589｜Date and time 23/6/26 20:31:26
Build time 41.188 sec｜Game capacity 3.549KB｜

了解しました。以下は、スマホで遊べるシンプルなHTML5ゲーム例です。プラモデルを作りたいというテーマに合わせて、ゲーム内の操作や表示素材にプラモデルに関連した要素を取り入れています。

プラモ作り

このゲームは、ランダムに配置されたプラモデルの部品をタップすることで回転させるというものです。部品の移動や描画は`Part`クラスで管理しています。`game.parts`配列に部品オブジェクトを追加することで、自由に部品の数や配置を調整できます。また、画面サイズに応じてキャンバスのサイズを調整するようにしています。タッチ操作に対応するため、`window.addEventListener("mousedown")`で`mousedown`イベントを受け取るようにしています。タップした座標から、部品を特定して`Part`オブジェクトの`speedX`と`speedY`を反転させることで回転を実現しています。以上が、シンプルなHTML5プラモデル作成ゲームの例です。より複雑なゲームを作りたい場合は、HTML5ゲームライブラリを利用することで開発効率の向上が見込めます。

→ 　

1　

1　

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

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

(C)2023 HisashiApp

了解しました。以下は、スマホで遊べるシンプルなHTML5ゲーム例です。プラモデルを作りたいというテーマに合わせて、ゲーム内の操作や表示素材にプラモデルに関連した要素を取り入れています。

```
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>プラモデルを作ろう！</title>
	<style>
		canvas {
			border: 2px solid black;
		}
	</style>
</head>
<body>
	<h1>プラモ作り</h1>
	<canvas id="canvas" width="320" height="480"></canvas>
	<script>
		// ゲーム開始
		window.onload = function() {
			game.start();
		};

var game = {
			// ゲーム画面
			canvas : document.getElementById("canvas"),
			start : function() {
				// キャンバス設定
				this.canvas.width = window.innerWidth - 20;
				this.canvas.height = window.innerHeight - 50;
				this.context = this.canvas.getContext("2d");
				document.body.insertBefore(this.canvas, document.body.childNodes[0]);

// オブジェクト生成
				this.parts = [];
				this.parts.push(new Part(50, 50, "🤖"));
				this.parts.push(new Part(200, 200, "🤖"));
				this.parts.push(new Part(100, 350, "🚀"));
				this.parts.push(new Part(250, 100, "🚀"));

// ゲームループ開始
				this.interval = setInterval(updateGameArea, 20);
			},
			clear : function() {
				this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
			}
		};

// 部品オブジェクト
		function Part(x, y, symbol) {
			this.x = x;
			this.y = y;
			this.symbol = symbol;
			this.speedX = Math.floor(Math.random() * 5) - 2;
			this.speedY = Math.floor(Math.random() * 5) - 2;
			this.update = function() {
				game.context.font = "48px serif";
				game.context.fillText(this.symbol, this.x, this.y);
			};
			this.newPos = function() {
				this.x += this.speedX;
				this.y += this.speedY;
			};
		}

// ゲームループ
		function updateGameArea() {
			game.clear();
			for (var i = 0; i < game.parts.length; i++) {
				game.parts[i].newPos();
				game.parts[i].update();
			}
		}

// タップ操作
		window.addEventListener("touchstart", function(event) {
			// タップ座標
			var x = event.changedTouches[0].clientX;
			var y = event.changedTouches[0].clientY;

// クリックした部品を探す
			for (var i = 0; i < game.parts.length; i++) {
				var part = game.parts[i];
				if (x > part.x && x < part.x + 48 && y > part.y && y < part.y + 48) {
					// 部品を回転
					part.speedX = -part.speedX;
					part.speedY = -part.speedY;
				}
			}
		});
	</script>
</body>
</html>
```

このゲームは、ランダムに配置されたプラモデルの部品をタップすることで回転させるというものです。部品の移動や描画は`Part`クラスで管理しています。`game.parts`配列に部品オブジェクトを追加することで、自由に部品の数や配置を調整できます。また、画面サイズに応じてキャンバスのサイズを調整するようにしています。

タッチ操作に対応するため、`window.addEventListener("touchstart")`で`touchstart`イベントを受け取るようにしています。タップした座標から、部品を特定して`Part`オブジェクトの`speedX`と`speedY`を反転させることで回転を実現しています。

以上が、シンプルなHTML5プラモデル作成ゲームの例です。より複雑なゲームを作りたい場合は、HTML5ゲームライブラリを利用することで開発効率の向上が見込めます。