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

No:3362

1021

←

Prev Next

→

Pythagorean theorem
Developer User3662｜Date and time 23/6/24 16:44:01
Build time 22.164 sec｜Game capacity 1.821KB｜

Script

ピタゴラスの定理遊び方

このアプリは、ランダムに2つの数字（aとb）を選び、ピタゴラスの定理を使って3つ目の数字（c）を求め、三角形を描画します。ユーザーは、3つ目の数字（c）をクリックして答えを見ることができます。スマホでも遊べます！内容に合えば、このアプリは三角形の絵文字を使用しています。楽しんで！

←

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">
	<style>
		body {
			background-color: #f8f8f8;
			font-family: Arial, sans-serif;
			text-align: center;
			padding-top: 50px;
		}
		h1 {
			font-size: 48px;
			margin-bottom: 32px;
			color: #333;
		}
		#triangle {
			width: 300px;
			margin: 0 auto;
			position: relative;
			height: 0;
			padding-bottom: 60%;
		}
		#triangle .side {
			position: absolute;
			background-color: #9b4dca;
			height: 10px;
			width: 100px;
			top: 20%;
			transform: rotate(-45deg);
		}
		#triangle .a {
			left: 0;
		}
		#triangle .b {
			right: 0;
			transform: rotate(45deg);
		}
		#result {
			font-size: 36px;
			color: #9b4dca;
			margin-top: 32px;
		}
	</style>
</head>
<body>
	<h1>ピタゴラスの定理 遊び方</h1>
	<div id="triangle">
		<div class="side a"></div>
		<div class="side b"></div>
	</div>
	<div id="result"></div>
	<script>
		var a = Math.floor(Math.random() * (30 - 10 + 1)) + 10;
		var b = Math.floor(Math.random() * (30 - 10 + 1)) + 10;
		var c = Math.sqrt(a*a + b*b);
		document.querySelector('.a').style.width = a + 'px';
		document.querySelector('.b').style.width = b + 'px';
		document.querySelector('#result').innerHTML = 'c = ' + c.toFixed(2);
		document.querySelector('#triangle').onclick = function() {
			alert('正解は c = ' + c.toFixed(2) + ' でした！');
		}
	</script>
</body>
</html>

このアプリは、ランダムに2つの数字（aとb）を選び、ピタゴラスの定理を使って3つ目の数字（c）を求め、三角形を描画します。ユーザーは、3つ目の数字（c）をクリックして答えを見ることができます。スマホでも遊べます！ 内容に合えば、このアプリは三角形の絵文字を使用しています。楽しんで！

ピタゴラスの定理 遊び方

ピタゴラスの定理遊び方