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

No:1385

156

←

Prev Next

→

Games to improve the birthrate
Developer User3494｜Date and time 23/6/18 13:01:29
Build time 74.811 sec｜Game capacity 6.273KB｜

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 {
			margin: 0;
			padding: 0;
			background-color: #FFF8DC;
			font-family: Arial, sans-serif;
		}

h1 {
			text-align: center;
			font-size: 2.5em;
			margin-top: 1em;
			color: #8B4513;
		}

h2, h3 {
			text-align: center;
			color: #8B4513;
		}

p {
			font-size: 1.2em;
			margin: 0 0 1em;
		}

#startButton {
			display: block;
			margin: auto;
			padding: 1em;
			font-size: 1.2em;
			background-color: #FFDAB9;
			color: #8B4513;
			border: none;
			border-radius: 10px;
			cursor: pointer;
			transition: background-color 0.3s ease;
		}

#startButton:hover {
			background-color: #FFA07A;
		}

#gameScreen {
			display: none;
		}

#parent {
			float: left;
			width: 50%;
			height: calc(100vh - 75px);
			padding: 1em;
			box-sizing: border-box;
			overflow: scroll;
			background-color: #F5DEB3;
			color: #8B4513;
			font-size: 1.2em;
		}

#baby {
			float: left;
			width: 50%;
			height: calc(100vh - 75px);
			padding: 1em;
			box-sizing: border-box;
			overflow: scroll;
			background-color: #FAFAD2;
			color: #8B4513;
			font-size: 1.2em;
		}

#baby > p {
			margin-top: 0;
		}

#actions {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			padding: 1em;
			background-color: #FFDAB9;
		}

.actionButton {
			margin: 0.5em;
			padding: 0.5em;
			font-size: 1.2em;
			background-color: #FFA07A;
			color: #8B4513;
			border: none;
			border-radius: 10px;
			cursor: pointer;
			transition: background-color 0.3s ease;
		}

.actionButton:hover {
			background-color: #FF7F50;
		}

@media (max-width: 768px) {
			#parent, #baby {
				width: 100%;
				height: calc(50vh - 75px);
			}
		}
	</style>
</head>
<body>
	<h1>子育てママ！</h1>
	<div id="startScreen">
		<p>子育ては大変ですが、子供たちが育っていく過程はとても充実したものです。</p>
		<p>このゲームでは、あなたがママ役を果たし、子育てをしながら少子化を改善することが目的です。</p>
		<button id="startButton">ゲームを始める</button>
	</div>
	<div id="gameScreen">
		<h2 id="parentName"></h2>
		<div id="parent">ママ</div>
		<div id="baby">赤ちゃん👶</div>
		<h3>アクションを選んでください</h3>
		<div id="actions">
			<button class="actionButton" id="feedButton">🍼 食べさせる</button>
			<button class="actionButton" id="sleepButton">💤 寝かしつける</button>
			<button class="actionButton" id="playButton">🎮 遊ばせる</button>
			<button class="actionButton" id="changeButton">🚼 おむつを替える</button>
			<button class="actionButton" id="workButton">💼 仕事をする</button>
			<button class="actionButton" id="quitButton">ゲームをやめる</button>
		</div>
	</div>
	<script>
		const parentNames = ["あいこ", "えつこ", "かえで", "さとみ", "まりこ", "ようこ"];
		const babyNames = ["あかり", "あゆみ", "いずみ", "かなで", "さら", "ゆき", "りお"];

let parentName;
		let babyName;
		let money;
		let fatigue;
		let hunger;
		let sleepiness;
		let diaper;
		let gameInterval;

const startButton = document.querySelector("#startButton");
		const startScreen = document.querySelector("#startScreen");
		const gameScreen = document.querySelector("#gameScreen");
		const parentNameDisplay = document.querySelector("#parentName");
		const parentDisplay = document.querySelector("#parent");
		const babyDisplay = document.querySelector("#baby");
		const feedButton = document.querySelector("#feedButton");
		const sleepButton = document.querySelector("#sleepButton");
		const playButton = document.querySelector("#playButton");
		const changeButton = document.querySelector("#changeButton");
		const workButton = document.querySelector("#workButton");
		const quitButton = document.querySelector("#quitButton");

startButton.addEventListener("click", startGame);
		feedButton.addEventListener("click", feedBaby);
		sleepButton.addEventListener("click", putBabyToSleep);
		playButton.addEventListener("click", playWithBaby);
		changeButton.addEventListener("click", changeDiaper);
		workButton.addEventListener("click", goToWork);
		quitButton.addEventListener("click", quitGame);

function startGame() {
			// 初期値設定
			parentName = parentNames[Math.floor(Math.random() * parentNames.length)];
			babyName = babyNames[Math.floor(Math.random() * babyNames.length)];
			money = 50;
			fatigue = 0;
			hunger = 50;
			sleepiness = 50;
			diaper = 50;

// 表示
			parentNameDisplay.textContent = `${parentName}の家族`;
			parentDisplay.textContent = `ママ\nお金：${money}円\n疲れ具合：${fatigue}\n`;
			babyDisplay.innerHTML = `${babyName}が産まれました！\n赤ちゃんポイント\nお腹：${hunger}\n睡眠：${sleepiness}\nおむつ：${diaper}`;

// ボタン表示
			startScreen.style.display = "none";
			gameScreen.style.display = "block";

// ゲーム開始
			gameInterval = setInterval(gameLoop, 5000);
		}

function gameLoop() {
			// 時間経過
			fatigue += 10;
			hunger -= 10;
			sleepiness -= 10;
			diaper -= 10;

// 判定
			if (hunger <= 0 || sleepiness <= 0 || diaper <= 0) {
				alert("あなたの子育てスキルが足りませんでした…\nゲームオーバー！");
				clearInterval(gameInterval);
				location.reload();
			}
			else {
				// 表示更新
				parentDisplay.textContent = `ママ\nお金：${money}円\n疲れ具合：${fatigue}\n`;
				babyDisplay.innerHTML = `赤ちゃん👶\n\n${babyName}の状態\nお腹：${hunger}\n睡眠：${sleepiness}\nおむつ：${diaper}`;
			}
		}

function feedBaby() {
			hunger += 20;
			money -= 10;
		}

function putBabyToSleep() {
			sleepiness += 20;
			fatigue += 20;
		}

function playWithBaby() {
			hunger -= 10;
			sleepiness -= 10;
			fatigue += 10;
		}

function changeDiaper() {
			diaper += 20;
			money -= 10;
		}

function goToWork() {
			fatigue += 30;
			money += 50;
		}

function quitGame() {
			alert("ゲームを終了します。");
			clearInterval(gameInterval);
			location.reload();
		}
	</script>
</body>
</html>