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

No:667

166

←

Prev Next

→

Games to become a game creator
Developer User3065｜Date and time 23/6/17 4:33:52
Build time 44.789 sec｜Game capacity 3.054KB｜

Script

ゲームクリエイターになるゲーム

このゲームは、あなたがゲームクリエイターになるための物語です。あなたは、新しいゲームを作成するために、創造力と決断力を必要とします。

あなたがゲームを作成するために必要なのは、どの要素でしょうか？

←

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 {
			background-color: #f1f1f1;
			font-family: Arial, sans-serif;
			text-align: center;
		}

h1 {
			color: #008CBA;
			font-size: 40px;
			margin-top: 50px;
		}

p {
			color: #555;
			font-size: 20px;
		}

#btn-start {
			background-color: #4CAF50;
			border: none;
			border-radius: 5px;
			color: white;
			font-size: 20px;
			font-weight: bold;
			padding: 20px;
			text-align: center;
			text-decoration: none;
			display: inline-block;
			margin-top: 50px;
			cursor: pointer;
		}

#btn-start:hover {
			background-color: #3e8e41;
		}

#game-container {
			display: none;
			margin-top: 50px;
		}

#game-result {
			color: #008CBA;
			font-size: 30px;
			font-weight: bold;
			margin-top: 50px;
		}

#game-buttons {
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			margin-top: 50px;
		}

.btn-game {
			background-color: #008CBA;
			border: none;
			border-radius: 5px;
			color: white;
			font-size: 20px;
			font-weight: bold;
			padding: 20px;
			text-align: center;
			text-decoration: none;
			display: inline-block;
			margin: 10px;
			cursor: pointer;
			transition: background-color 0.3s;
		}

.btn-game:hover {
			background-color: #005871;
		}

</style>
</head>
<body>
	<h1>ゲームクリエイターになるゲーム</h1>
	<p>このゲームは、あなたがゲームクリエイターになるための物語です。あなたは、新しいゲームを作成するために、創造力と決断力を必要とします。</p>
	<button id="btn-start">ゲームをスタートする！</button>
	<div id="game-container">
		<p>あなたがゲームを作成するために必要なのは、どの要素でしょうか？</p>
		<div id="game-buttons">
			<button class="btn-game" id="btn-story">ストーリー</button>
			<button class="btn-game" id="btn-characters">キャラクター</button>
			<button class="btn-game" id="btn-environment">環境</button>
		</div>
	</div>
	<div id="game-result"></div>
	<script>
		const btnStart = document.getElementById("btn-start");
		const gameContainer = document.getElementById("game-container");
		const btnStory = document.getElementById("btn-story");
		const btnCharacters = document.getElementById("btn-characters");
		const btnEnvironment = document.getElementById("btn-environment");
		const gameResult = document.getElementById("game-result");

btnStart.addEventListener("click", () => {
			btnStart.style.display = "none";
			gameContainer.style.display = "block";
			gameResult.innerHTML = "";
		});

btnStory.addEventListener("click", () => {
			gameResult.innerHTML = "ストーリー！";
		});

btnCharacters.addEventListener("click", () => {
			gameResult.innerHTML = "キャラクター！";
		});

btnEnvironment.addEventListener("click", () => {
			gameResult.innerHTML = "環境！";
		});

</script>

</body>
</html>