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

No:705

242

←

Prev Next

→

A game of guessing what the ranking is by giving t..ALL
Developer User3095｜Date and time 23/6/17 14:08:25
Build time 48.835 sec｜Game capacity 4.052KB｜

Script

ランキング当てゲーム

このゲームは、ランキングを5つ選択するゲームです。ランダムに生成された5つのランキングから正しいものを選択していきます。選択した回数が5回になったら判定され、正しいランキングの数に応じてランクが与えられます。ランキング当てゲームのランキング1位から5位です。

←

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{
			margin: 0;
			padding: 0;
			background-color: #72C3DC;
		}
		.container{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 100vh;
		}
		h1{
			font-size: 3em;
			margin: 0;
			margin-bottom: 20px;
		}
		button{
			cursor: pointer;
			font-size: 1.2em;
			padding: 10px 30px;
			background-color: white;
			color: #72C3DC;
			border: none;
			border-radius: 10px;
			margin-bottom: 20px;
			box-shadow: 3px 3px rgba(0,0,0,0.3);
		}
	</style>
</head>
<body>
	<div class="container">
		<h1>ランキング当てゲーム</h1>
		<button onclick="startGame()">ゲームスタート</button>
	</div>
	<script>
	//ランダムなランキングを生成する関数
	function generateRanking(){
		let ranking = [];
		for(let i = 0; i < 5; i++){
			ranking.push(Math.floor(Math.random() * 100) + 1);
		}
		return ranking;
	}

//ランキング当てゲーム
	function startGame(){
		//ランダムなランキングを生成
		let targetRanking = generateRanking();
		//プレイヤーが選択したランキングの配列
		let playerRanking = [];
		//選択した答えの数
		let count = 0;

//ランキングの選択肢を表示する関数
		function showChoices(){
			//選択肢を表示する要素を取得
			let choicesElem = document.getElementById("choices");
			//選択肢を初期化
			choicesElem.innerHTML = "";
			//選択肢を表示
			for(let i = 0; i < 10; i++){
				//ランダムなランキングを生成
				let ranking = Math.floor(Math.random() * 100) + 1;
				//選択肢の要素を作成
				let choiceElem = document.createElement("button");
				//テキストを設定
				choiceElem.innerText = ranking + "位";
				//クリックイベントを追加
				choiceElem.onclick = function(){
					//プレイヤーが選択したランキングを追加
					playerRanking.push(ranking);
					//選択した答えを増やす
					count++;
					//選択した回数が5回になったら判定
					if(count == 5){
						checkAnswer();
					}
					//選択肢を再表示
					showChoices();
				}
				//選択肢を要素に追加
				choicesElem.appendChild(choiceElem);
			}
		}

//回答の判定をする関数
		function checkAnswer(){
			//スコアを計算
			let score = 0;
			for(let i = 0; i < targetRanking.length; i++){
				if(targetRanking[i] == playerRanking[i]){
					score++;
				}
			}
			//結果画面に遷移
			showResult(score);
		}

//結果画面を表示する関数
		function showResult(score){
			//結果画面を作成
			let resultElem = document.createElement("div");
			resultElem.innerHTML = "<h2>結果発表！</h2><p>あなたの正解数は <span>" + score + "</span> / 5 でした。</p>";
			//ランクを設定
			let rank = "";
			if(score == 5){
				rank = "S";
			}else if(score >= 4){
				rank = "A";
			}else if(score >= 3){
				rank = "B";
			}else if(score >= 2){
				rank = "C";
			}else if(score >= 1){
				rank = "D";
			}else{
				rank = "E";
			}
			resultElem.innerHTML += "<p>あなたのランクは <span>" + rank + "</span> です。</p>";
			//トップページに戻るボタンを作成
			let topButton = document.createElement("button");
			topButton.innerText = "トップに戻る";
			topButton.onclick = function(){
				startGame();
				document.body.removeChild(resultElem);
			}
			resultElem.appendChild(topButton);
			document.body.appendChild(resultElem);
		}

//選択肢を表示
		showChoices();
	}
	</script>
	<div id="choices" style="display:none;"></div>
</body>
</html>