Rotate cube in parallel projection's game

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

No:3038

6356

←

Prev Next

→

Rotate cube in parallel projection
Developer User3636｜Date and time 23/6/23 13:00:21
Build time 16.274 sec｜Game capacity 1.628KB｜

Script

するゲームを作ってみました！

スマホで操作する場合は、スワイプやタップなどのイベントを設定して、立方体を操作することができます。また、絵文字を使用して立方体の描画をすることもできます！😎

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

するゲームを作ってみました！

<!DOCTYPE html>
<html>
<head>
	<title>回転する立方体！</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		canvas {
			border: 1px solid #000;
			width: 100%;
			height: auto;
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>

// キャンバス幅・高さの設定
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;

// 立方体のパラメータの設定
		var cube = {
			x: canvas.width / 2,
			y: canvas.height / 2,
			size: 100,
			angle: 0,
			velocity: 0.05
		};

// 立方体を描く関数
		function drawCube() {
			ctx.save();
			ctx.translate(cube.x, cube.y);
			ctx.rotate(cube.angle);
			ctx.strokeRect(-cube.size / 2, -cube.size / 2, cube.size, cube.size);
			ctx.restore();
		}

// アニメーションの関数
		function animate() {
			// キャンバスをクリア
			ctx.clearRect(0, 0, canvas.width, canvas.height);

// 立方体を回転
			cube.angle += cube.velocity;

// 立方体を描く
			drawCube();

// アニメーションのループ
			requestAnimationFrame(animate);
		}

// ゲーム開始！
		animate();
	</script>
</body>
</html>