3Dクリスタル JavaScriptによって線画された正八面体を表示します。なお、正八面体はJavaScriptとcanvasによる3Dグラフィック(3DCG)です。正八面体は十字キーによって回転させることが出来ます。また、正八面体の色は水色で、不透明度は200です。面の色も水色で、不透明度は150です。's game

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

No:5364

3086

←

Prev Next

→

3Dクリスタル JavaScriptによって線画された正八面体を表示します。なお、正八面体はJav..ALL
Developer もちきなこ｜Date and time 23/6/30 0:17:55
Build time 46.315 sec｜Game capacity 3.49KB｜

Script

了解です。以下のコードは、JavaScriptとcanvasを使用して正八面体を描画する簡単なゲームです。スマートフォンでの操作に対応しており、十字キーを使用して正八面体を回転させることができます。色は水色で、不透明度は指定された通りです。

このコードをHTMLファイルとして保存し、ブラウザで開くと３Dクリスタルが表示されます。スマートフォンの場合は、十字キーを操作することで回転させることができます。なお、正八面体は水色で描画されます。ご参考までにご利用ください。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

了解です。以下のコードは、JavaScriptとcanvasを使用して正八面体を描画する簡単なゲームです。 
スマートフォンでの操作に対応しており、十字キーを使用して正八面体を回転させることができます。色は水色で、不透明度は指定された通りです。

```html
<!DOCTYPE html>
<html>
<head>
	<title>3Dクリスタル</title>
	<style>
		canvas {
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="400" height="400"></canvas>

// 正八面体の頂点座標
		const vertexPoints = [
			{x: -50, y: -50, z: -50},
			{x: -50, y: -50, z: 50},
			{x: -50, y:  50, z: -50},
			{x: -50, y:  50, z: 50},
			{x: 50, y: -50, z: -50},
			{x: 50, y: -50, z: 50},
			{x: 50, y:  50, z: -50},
			{x: 50, y:  50, z: 50}
		];

// 正八面体の面を定義
		const faces = [
			[0, 1, 3, 2],
			[1, 5, 7, 3],
			[5, 4, 6, 7],
			[4, 0, 2, 6],
			[0, 4, 5, 1],
			[2, 3, 7, 6]
		];

// 現在の回転角度
		let angleX = 0;
		let angleY = 0;

// ゲームループ
		function gameLoop() {
			clearCanvas();
			drawCube();
			requestAnimationFrame(gameLoop);
		}

// キーイベントのリスナー登録
		function handleKeyDown(event) {
			const key = event.key;
			switch (key) {
				case "ArrowUp":
					angleX -= 0.05;
					break;
				case "ArrowDown":
					angleX += 0.05;
					break;
				case "ArrowLeft":
					angleY -= 0.05;
					break;
				case "ArrowRight":
					angleY += 0.05;
					break;
			}
		}

// canvas をクリアする関数
		function clearCanvas() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
		}

// 正八面体を描画する関数
		function drawCube() {
			ctx.fillStyle = "rgba(0, 255, 255, 0.2)";
			ctx.strokeStyle = "rgba(0, 255, 255, 0.4)";

faces.forEach(face => {
				ctx.beginPath();
				ctx.moveTo(get2DPoint(face[0]).x, get2DPoint(face[0]).y);
				face.forEach(vertexIndex => {
					const point = get2DPoint(vertexIndex);
					ctx.lineTo(point.x, point.y);
				});
				ctx.closePath();
				ctx.stroke();
				ctx.fill();
			});
		}

// 3D座標を2D座標に変換する関数
		function get2DPoint(index) {
			const point = vertexPoints[index];

const radX = angleX;
			const radY = angleY;

const x = (point.x * Math.cos(radY) - point.z * Math.sin(radY)) * Math.cos(radX);
			const y = point.y * Math.cos(radX) + (point.x * Math.sin(radY) + point.z * Math.cos(radY)) * Math.sin(radX);
			const z = (point.x * Math.sin(radY) + point.z * Math.cos(radY)) * Math.cos(radX) - point.y * Math.sin(radX);

const scale = 5;
			const focalLength = 500;
			const offsetX = canvas.width / 2;
			const offsetY = canvas.height / 2;

const p = focalLength / (focalLength + z) * scale;

const result = {
				x: x * p + offsetX,
				y: y * p + offsetY
			};

return result;
		}

// イベントリスナーの追加
		window.addEventListener("keydown", handleKeyDown);

// ゲームループの開始
		gameLoop();
	</script>
</body>
</html>
```

このコードをHTMLファイルとして保存し、ブラウザで開くと３Dクリスタルが表示されます。スマートフォンの場合は、十字キーを操作することで回転させることができます。なお、正八面体は水色で描画されます。

ご参考までにご利用ください。