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

No:108

466

←

Prev Next

→

Four kinds of rock-paper-scissors
Developer User2198｜Date and time 23/5/19 2:35:06
Build time 93.534 sec｜Game capacity 3.051KB｜

Script

をするゲームを作成しました。以下がプログラムの実装です。

じゃんけんゲーム

以下のボタンから自分が出す手を選んでね！

このプログラムを実行すると、じゃんけんのGUIが表示されます。プレイヤーは、4つのボタンのうちいずれかをクリックして自分が出す手を選びます。その後、プログラムがCPUの手をランダムで生成し、勝ち負けを判定し、結果を表示します。ボタンには絵文字が使用され、スマートフォンでも操作しやすいように、ボタンのサイズや配置にも一工夫しました。また、リセットボタンを押すことで、自分が出した手と結果をリセットすることができます。以上が、4種類のじゃんけんをするゲームのプログラム実装方法です。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

をするゲームを作成しました。

以下がプログラムの実装です。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>じゃんけんゲーム</title>
	<style>
		body {
			font-size: 2em;
			text-align: center;
			margin-top: 10%;
		}

button {
			background-color: #4CAF50;
			color: white;
			border: none;
			padding: 30px 50px;
			text-align: center;
			font-size: 16px;
			margin: 10px 2px;
			cursor: pointer;
			border-radius: 50%;
			box-shadow: 5px 5px 8px #888888;
			transition: all 0.3s ease-in-out;
			outline: none;
		}

button:hover {
			opacity: 0.8;
		}
	</style>
</head>
<body>
	<h1>じゃんけんゲーム</h1>
	<p>以下のボタンから自分が出す手を選んでね！</p>
	<div>
		<button id="rock">✊</button>
		<button id="scissors">✌️</button>
		<button id="paper">✋</button>
		<button id="reset">🔄</button>
	</div>
	<p id="result"></p>
	<script>
		const rockButton = document.getElementById('rock');
		const scissorsButton = document.getElementById('scissors');
		const paperButton = document.getElementById('paper');
		const resetButton = document.getElementById('reset');
		const resultField = document.getElementById('result');
		let myHand = '';

rockButton.addEventListener('click', () => {
			play('rock');
		});

scissorsButton.addEventListener('click', () => {
			play('scissors');
		});

paperButton.addEventListener('click', () => {
			play('paper');
		});

resetButton.addEventListener('click', () => {
			reset();
		});

function play(hand) {
			myHand = hand;
			const cpuHand = getCPUHand();
			const result = judge(myHand, cpuHand);
			showResult(result);
		}

function getCPUHand() {
			const hands = ['rock', 'scissors', 'paper'];
			const index = Math.floor(Math.random() * 3);
			return hands[index];
		}

function showResult(result) {
			resultField.textContent = result;
		}

function reset() {
			myHand = '';
			resultField.textContent = '';
		}
	</script>
</body>
</html>
```

このプログラムを実行すると、じゃんけんのGUIが表示されます。プレイヤーは、4つのボタンのうちいずれかをクリックして自分が出す手を選びます。その後、プログラムがCPUの手をランダムで生成し、勝ち負けを判定し、結果を表示します。

ボタンには絵文字が使用され、スマートフォンでも操作しやすいように、ボタンのサイズや配置にも一工夫しました。また、リセットボタンを押すことで、自分が出した手と結果をリセットすることができます。

以上が、4種類のじゃんけんをするゲームのプログラム実装方法です。