**<span style="color:red">あか</span>**'s game

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

No:51099

←

Prev Next

→

**<span style="color:red">あか</span>**
Developer User18209｜Date and time 24/3/10 14:13:03
Build time 3.341 sec｜Game capacity 0.041KB｜

Script

The AI could not be gamified with this prompt. Please try again with different prompts. .
Displays games created by AI in the past at random.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<p style='font-size:14px;background-color:#FF0'>The AI could not be gamified with this prompt. Please try again with different prompts. . <br>Displays games created by AI in the past at random.</p><!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>3D Cube Game</title>
	<style>
		canvas {
			display: block;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	
	<script>
		const canvas = document.getElementById('canvas');
		const context = canvas.getContext('2d');
		
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
		
		const rotation = {
			x: 0,
			y: 0,
			z: 0
		};
		
		const cube = {
			vertices: [
				[-50, -50, -50],
				[-50, 50, -50],
				[50, 50, -50],
				[50, -50, -50],
				[-50, -50, 50],
				[-50, 50, 50],
				[50, 50, 50],
				[50, -50, 50]
			],
			edges: [
				[0, 1],
				[1, 2],
				[2, 3],
				[3, 0],
				[4, 5],
				[5, 6],
				[6, 7],
				[7, 4],
				[0, 4],
				[1, 5],
				[2, 6],
				[3, 7]
			]
		};
		
		function renderCube() {
			context.clearRect(0, 0, canvas.width, canvas.height);
			
			const projectedVertices = [];
			
			for (let i = 0; i < cube.vertices.length; i++) {
				const vertex = cube.vertices[i];
				
				const rotatedX = vertex[0] * Math.cos(rotation.x) + vertex[2] * Math.sin(rotation.x);
				const rotatedY = vertex[1] * Math.cos(rotation.y) + vertex[2] * Math.sin(rotation.y);
				const rotatedZ = vertex[2] * Math.cos(rotation.z) - vertex[0] * Math.sin(rotation.z);
				
				const distance = 500;
				const fov = (canvas.width + canvas.height) / 2;
				const scale = fov / (fov + rotatedZ + distance);
				
				const x = canvas.width / 2 + rotatedX * scale;
				const y = canvas.height / 2 + rotatedY * scale;
				
				projectedVertices.push([x, y]);
			}
			
			for (let i = 0; i < cube.edges.length; i++) {
				const edge = cube.edges[i];
				const startPoint = projectedVertices[edge[0]];
				const endPoint = projectedVertices[edge[1]];
				
				context.beginPath();
				context.moveTo(startPoint[0], startPoint[1]);
				context.lineTo(endPoint[0], endPoint[1]);
				context.stroke();
			}
		}
		
		document.addEventListener('keydown', function(event) {
			switch(event.keyCode) {
				case 37: // left arrow
					rotation.x -= 0.05;
					break;
				case 38: // up arrow
					rotation.y += 0.05;
					break;
				case 39: // right arrow
					rotation.x += 0.05;
					break;
				case 40: // down arrow
					rotation.y -= 0.05;
					break;
			}
			
			renderCube();
		});
		
		renderCube();
	</script>
	
</body>
</html>