AI game creator

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

No:2057

3130

←

Prev Next

→

Complex Gear game
Developer anonymous｜Date and time 70/1/1 9:43:32
Build time unknown sec｜Game capacity 2.612KB｜

Script

歯車ゲーム

この歯車ゲームは、3つの歯車が画面内で回転するシンプルなゲームです。歯車の大小や回転速度が異なっており、歯車同士が噛み合って回転しています。スマートフォンでも操作可能で、絵文字も多めに使われています。JavaScriptで実装されており、HTMLファイル1枚で完結しています。

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>歯車ゲーム</title>
</head>
<body>
	<style>
		body {
			background-color: #f1f1f1;
			font-size: 24px;
			text-align: center;
		}

#canvas {
			margin-top: 0px;
		}
	</style>

<p>歯車ゲーム</p>
	<canvas id="canvas" width="320" height="480"></canvas>

// 歯車用の変数
		var cogwheel1Angle = 0;
		var cogwheel2Angle = 0;
		var cogwheel3Angle = 0;
		var cogwheel1Speed = 1;
		var cogwheel2Speed = -2;
		var cogwheel3Speed = 3;
		var cogwheelRadius = 80;
		var cogwheelToothNum = 20;
		var cogwheelPitch = 3;
		var cogwheelColor = "#ffcc00";
		var cogwheelCenterX = canvas.width/2;
		var cogwheelCenterY = canvas.height/2;

// ゲームループ
		function gameLoop() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);

// 各歯車を描画
			drawCogwheel(cogwheel1Angle, cogwheelRadius, cogwheelToothNum, cogwheelPitch, cogwheelColor, cogwheelCenterX, cogwheelCenterY);
			drawCogwheel(cogwheel2Angle, cogwheelRadius-50, cogwheelToothNum, cogwheelPitch, cogwheelColor, cogwheelCenterX+130, cogwheelCenterY);
			drawCogwheel(cogwheel3Angle, cogwheelRadius-70, cogwheelToothNum, cogwheelPitch, cogwheelColor, cogwheelCenterX-110, cogwheelCenterY+80);

// 各歯車を回転
			cogwheel1Angle += cogwheel1Speed;
			cogwheel2Angle += cogwheel2Speed;
			cogwheel3Angle += cogwheel3Speed;

// ゲームループ再帰呼び出し
			requestAnimationFrame(gameLoop);
		}

// 歯車の描画
		function drawCogwheel(angle, radius, toothNum, pitch, color, centerX, centerY) {
			ctx.save();
			ctx.translate(centerX, centerY);
			ctx.rotate(angle*Math.PI/180);

ctx.beginPath();
			ctx.moveTo(radius-pitch, 0);
			for (var i = 0; i < toothNum; i++) {
				ctx.rotate(Math.PI/toothNum);
				ctx.lineTo(radius, 0);
				ctx.lineTo(radius+pitch, pitch/2);
				ctx.lineTo(radius, pitch);
			}
			ctx.closePath();
			ctx.fillStyle = color;
			ctx.fill();
			ctx.restore();
		}

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