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

No:942

118

←

Prev Next

→

AI absolutely loses rock-paper-scissors after the ..ALL
Developer User3198｜Date and time 23/6/17 22:54:30
Build time 39.209 sec｜Game capacity 3.224KB｜

Script

じゃんけんゲーム

※画像ファイルは同じディレクトリに「rock.png」「paper.png」「scissors.png」の3つを用意する必要があります。このアプリは、スマホでも操作しやすいように、画面の中央にじゃんけんの手の画像を並べ、クリックすることで遊べるようになっています。また、勝敗の結果は絵文字を多めに使用して分かりやすく表現しました。ゲームのルールとして、AIがランダムにじゃんけんの手を出し、あなたがクリックした手と比較して勝敗を判定します。もし同じ手を出した場合は「あいこ」と表示されます。また、もう一回ボタンをクリックすることで、結果をリセットして再度遊ぶことができます。

←

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>
	<style>
		body{
			text-align: center;
			margin-top: 30px;
		}
		h1{
			font-size: 50px;
			color: #0080c0;
			margin-bottom: 50px;
		}
		img{
			width: 150px;
			height: 150px;
			margin: 20px;
			cursor: pointer;
		}
		#vs{
			font-size: 50px;
			color: #e600ac;
			margin: 50px;
		}
		#result{
			font-size: 40px;
			color: #0080c0;
			margin-bottom: 50px;
		}
		button{
			font-size: 30px;
			color: #fff;
			background-color: #0080c0;
			border-radius: 10px;
			padding: 10px 30px;
			cursor: pointer;
			border: none;
			margin-bottom: 30px;
		}
	</style>
</head>
<body>
	<h1>じゃんけんゲーム</h1>
	<img src="rock.png" id="rock">
	<img src="paper.png" id="paper">
	<img src="scissors.png" id="scissors">
	<div id="vs">VS</div>
	<div id="result"></div>
	<button id="restart">もう一回</button>
	<script>
	    //AIが出す手をランダムに選ぶ関数
		function aiChoice(){
			var choices = ['rock', 'paper', 'scissors'];
			return choices[Math.floor(Math.random()*3)];
		}
		
		//じゃんけんの勝敗判定関数
		function judge(playerChoice, aiChoice){
			if(playerChoice == aiChoice){
				return 'あいこ';
			}else if((playerChoice == 'rock' && aiChoice == 'scissors') || 
					(playerChoice == 'paper' && aiChoice == 'rock') ||
					(playerChoice == 'scissors' && aiChoice == 'paper')){
						return 'あなたの勝ち';
					}else{
						return 'AIの勝ち';
					}
		}
		
		//じゃんけんの開始
		function startGame(playerChoice){
			var ai = aiChoice();
			var result = judge(playerChoice, ai);
			document.getElementById('vs').innerHTML = 'VS ' + ai;
			document.getElementById('result').innerHTML = result;
		}
		
		//じゃんけん画像をクリックした時の処理
		document.getElementById('rock').addEventListener('click', function(){
			startGame('rock');
		});
		document.getElementById('paper').addEventListener('click', function(){
			startGame('paper');
		});
		document.getElementById('scissors').addEventListener('click', function(){
			startGame('scissors');
		});
		
		//もう一回ボタンをクリックした時、結果をリセットする
		document.getElementById('restart').addEventListener('click', function(){
			document.getElementById('vs').innerHTML = 'VS';
			document.getElementById('result').innerHTML = '';
		});
	</script>
</body>
</html>

※画像ファイルは同じディレクトリに「rock.png」「paper.png」「scissors.png」の3つを用意する必要があります。

このアプリは、スマホでも操作しやすいように、画面の中央にじゃんけんの手の画像を並べ、クリックすることで遊べるようになっています。また、勝敗の結果は絵文字を多めに使用して分かりやすく表現しました。

ゲームのルールとして、AIがランダムにじゃんけんの手を出し、あなたがクリックした手と比較して勝敗を判定します。もし同じ手を出した場合は「あいこ」と表示されます。また、もう一回ボタンをクリックすることで、結果をリセットして再度遊ぶことができます。