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

No:3447

5118

←

Prev Next

→

Ferris wheel
Developer User3708｜Date and time 23/6/25 5:18:03
Build time 26.028 sec｜Game capacity 2.468KB｜

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 name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			background-color: #F8F8F8;
			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		}

h1 {
			text-align: center;
			color: #555;
			margin-top: 50px;
		}

#canvas {
			display: block;
			margin: 0 auto;
			background-color: #FFF;
			box-shadow: 0px 5px 15px gray;
			border-radius: 10px;
		}

button {
			display: block;
			margin: 0 auto;
			padding: 10px 20px;
			background-color: #4CAF50;
			color: white;
			border: none;
			border-radius: 5px;
			font-size: 18px;
			cursor: pointer;
		}

button:hover {
			background-color: #3E8E41;
		}
	</style>
</head>
<body>
	<h1>観覧車ゲーム</h1>
	<canvas id="canvas" width="400" height="600"></canvas>
	<button id="startBtn">スタート</button>
	<script>
		// 変数
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");
		var ballX = 200;
		var ballY = 50;
		var ballRadius = 20;
		var wheelX = 200;
		var wheelY = 500;
		var wheelRadius = 120;
		var angle = 0;
		var speed = 1;

// 初期状態
		drawBall();
		drawWheel();

// ボールを描く
		function drawBall() {
			ctx.beginPath();
			ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
			ctx.fillStyle = "#2196F3";
			ctx.fill();
			ctx.closePath();
		}

// 観覧車を描く
		function drawWheel() {
			for (var i = 0; i < 8; i++) {
				ctx.beginPath();
				ctx.moveTo(wheelX, wheelY);
				ctx.lineTo(wheelX + wheelRadius * Math.sin(angle + i * Math.PI / 4), wheelY - wheelRadius * Math.cos(angle + i * Math.PI / 4));
				ctx.lineTo(wheelX + wheelRadius * Math.sin(angle + (i + 1) * Math.PI / 4), wheelY - wheelRadius * Math.cos(angle + (i + 1) * Math.PI / 4));
				ctx.fillStyle = randomColor();
				ctx.fill();
				ctx.closePath();
			}
			angle += speed * Math.PI / 180;
		}

// ランダムな色を返す
		function randomColor() {
			var letters = "0123456789ABCDEF";
			var color = "#";
			for (var i = 0; i < 6; i++) {
				color += letters[Math.floor(Math.random() * 16)];
			}
			return color;
		}

// スタートボタンをクリックしたときの処理
		document.getElementById("startBtn").addEventListener("click", function() {
			// 観覧車を回す
			setInterval(function() {
				ctx.clearRect(0, 0, canvas.width, canvas.height);
				drawBall();
				drawWheel();
			}, 10);
		});
	</script>
</body>
</html>