サクラスクールシミュレーター2

サクラスクールの代表、サクラ先生です。

あなたは今日からサクラスクールの講師として働くことになりました。

生徒たちは全員サクラ先生に憧れています。あなたもその一人でしょうか。

このアプリは、サクラスクールの講師となり、生徒たちにHTML、CSS、JavaScriptについて教えるゲームです。スマホでも操作でき、絵文字を多めに使っています。授業のテーマを選択することで、サクラ先生の画像が変わり、対応する言語の授業を行うことができます。授業を終えると、次の授業を始めることができます。

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

にあたる「サクラスクールシミュレーター2」を作成しました。

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>サクラスクールシミュレーター2</title>
	<style>
		body {
			background-color: #c2c2d6;
			font-family: sans-serif;
		}
		h1 {
			text-align: center;
			font-size: 2em;
			margin-top: 1em;
			color: #7f7f7f;
		}
		h2 {
			font-size: 1.5em;
			color: #7f7f7f;
			margin-top: 2em;
		}
		p {
			font-size: 1.2em;
			color: #ffffff;
			margin: 0.5em;
		}
		button {
			background-color: #4d4dff;
			color: #ffffff;
			border: none;
			padding: 0.5em 1em;
			font-size: 1.2em;
			border-radius: 0.5em;
			margin-top: 0.5em;
			cursor: pointer;
		}
		button:hover {
			background-color: #3333ff;
		}
		#game-screen {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 2em;
		}
		#sakura-image {
			width: 50%;
			margin-bottom: 1em;
		}
	</style>
</head>

<body>
	<h1>サクラスクールシミュレーター2</h1>

<div id="game-screen">
		<img id="sakura-image" src="https://i.imgur.com/8T4pDRa.png" alt="Sakura">
		<p>サクラスクールの代表、サクラ先生です。</p>
		<p>あなたは今日からサクラスクールの講師として働くことになりました。</p>
		<p>生徒たちは全員サクラ先生に憧れています。あなたもその一人でしょうか。</p>
		<button onclick="startClass()">授業を始める</button>
	</div>

function endClass() {
			document.getElementById("sakura-image").src = "https://i.imgur.com/8T4pDRa.png";
			document.getElementById("game-screen").innerHTML += `
				<h2>授業終了</h2>
				<p>お疲れ様でした！</p>
				<p>次回もがんばりましょう！</p>
				<button onclick="startClass()">次の授業を始める</button>
			`;
		}
	</script>
</body>
</html>