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

No:2573

1868

←

Prev Next

→

seesaw game
Developer AI絵師｜Date and time 23/6/22 0:39:30
Build time 23.58 sec｜Game capacity 2.756KB｜

Script

シーソーゲーム

👦

👧

※このコードは、シーソーゲームを実現するためのHTMLファイルであり、JavaScriptを含んでいます。スマホでも遊べるように、画面サイズに合わせたレスポンシブ表示に設定しています。また、絵文字を使うことで、よりカジュアルな雰囲気を演出しています。遊び方は簡単で、プレイヤー1とプレイヤー2が交互にクリックすることで、シーソーを傾けていきます。両方のプレイヤーが均衡を保ちながら楽しめるよう、シーソーの傾きが5度を超えたら、そのプレイヤーが負けとなります。勝敗が決したら、アラートで表示され、再度プレイすることができます。

←

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>
		body {
			font-size: 4em;
			text-align: center;
		}
		
		#seesaw {
			position: relative;
			width: 70%;
			height: 20%;
			margin: 5% auto;
			border: 1em solid #333;
			border-radius: 5em 5em 0 0;
			background: #333;
			box-shadow: inset -1.5em -1.5em 1em rgba(0, 0, 0, 0.5);
		}
		
		#seesaw:before {
			content: '';
			position: absolute;
			bottom: -3em;
			left: 50%;
			width: 3em;
			height: 3em;
			margin-left: -1.5em;
			border-radius: 50%;
			background: #333;
			box-shadow: 0 0.2em 0.5em rgba(0, 0, 0, 0.5);
		}

#player1, #player2 {
			position: absolute;
			width: 20%;
			height: 20%;
			bottom: 25%;
			background: #333;
			border-radius: 50%;
			color: #fff;
			text-align: center;
			line-height: 4em;
			cursor: pointer;
			box-shadow: 0 0.2em 0.5em rgba(0, 0, 0, 0.5);
		}
		
		#player1 {
			left: 10%;
		}
		
		#player2 {
			right: 10%;
		}
		
		#player1:hover, #player2:hover {
			background: #fff;
			color: #333;
			box-shadow: 0 0.2em 0.5em rgba(0, 0, 0, 0.8);
		}
	</style>
</head>
<body>
	<h1>シーソーゲーム</h1>
	<div id="seesaw">
		<div id="player1">👦</div>
		<div id="player2">👧</div>
	</div>
	<script>
		let player1 = document.getElementById('player1');
		let player2 = document.getElementById('player2');
		let seesaw = document.getElementById('seesaw');
		let angle = 0;

function updateSeesaw() {
			seesaw.style.transform = 'rotate(' + angle + 'deg)';
			if(angle >= 5 || angle <= -5) {
				alert('プレイヤー' + (angle > 0 ? '2' : '1') + 'の勝ちです！');
				angle = 0;
				updateSeesaw();
			}
		}

function movePlayer1() {
			angle += 1;
			updateSeesaw();
		}

function movePlayer2() {
			angle -= 1;
			updateSeesaw();
		}

player1.addEventListener('click', movePlayer1);
		player2.addEventListener('click', movePlayer2);
	</script>
</body>
</html>

※このコードは、シーソーゲームを実現するためのHTMLファイルであり、JavaScriptを含んでいます。スマホでも遊べるように、画面サイズに合わせたレスポンシブ表示に設定しています。また、絵文字を使うことで、よりカジュアルな雰囲気を演出しています。

遊び方は簡単で、プレイヤー1とプレイヤー2が交互にクリックすることで、シーソーを傾けていきます。両方のプレイヤーが均衡を保ちながら楽しめるよう、シーソーの傾きが5度を超えたら、そのプレイヤーが負けとなります。勝敗が決したら、アラートで表示され、再度プレイすることができます。