ブラウザで動く経営シミュレーションゲームの作り方 🎮
こんにちは、@YushiYamamotoです！今回は「ブラウザで動作する経営シミュレーションゲーム」の作り方について、初心者の方にも分かりやすく解説していきます。JavaScriptを使って、シンプルながらも奥深いゲーム開発の世界に飛び込んでみましょう！
See the Pen ラク子のWEB制作会社 by Yushi Yamamoto (@yamamotoyushi) on CodePen.
🌟 なぜ経営シミュレーションゲーム？
経営シミュレーションゲームは、プレイヤーが経営者となって会社やお店を運営するゲームです。資金管理、スタッフ雇用、設備投資など、現実の経営要素を取り入れつつ、ゲームとして楽しめる要素が満載です。
また、技術的な観点からも：
- オブジェクト指向プログラミングの練習に最適
- 状態管理の仕組みを学べる
- UIとロジックの分離を実践できる
📋 開発の流れ
ゲーム開発の基本的な流れは以下のようになります：
今回は、「WEB制作会社経営シミュレーション」というテーマで進めていきます。プレイヤーはWEB制作会社の社長となり、クライアントから依頼を受けてWebサイトを制作し、会社を成長させていくゲームです。
💻 開発環境の準備
ブラウザゲーム開発に必要なものは非常にシンプルです：
- テキストエディタ（VSCode推奨）
- Webブラウザ（Chrome推奨）
- 基本的なHTML/CSS/JavaScript知識
特別なゲームエンジンは使わず、純粋なJavaScriptで実装していきます。これにより、基本的なプログラミングの概念を深く理解できます。
🏗️ ゲームの基本設計
まずは、ゲームの基本構造を考えましょう。経営シミュレーションゲームの核となる要素は以下の通りです：
- 会社の状態管理：資金、評判、所有設備など
- 時間の経過：日付進行システム
- プロジェクト管理：依頼の受注、進行、完了
- スタッフ管理：雇用、スキル成長、給与支払い
- 設備投資：機材購入、オフィス拡張
これらの要素をクラス図で表すと次のようになります：
+------------------+ +------------------+
| Game | | Project |
+------------------+ +------------------+
| - company || - id |
| - gameTime | | - name |
| - advanceDay() | | - budget |
| - saveGame() | | - deadline |
+------------------+ | - assignedStaff |
| +------------------+
|
v
+------------------+ +------------------+
| Company || Staff |
+------------------+ +------------------+
| - name | | - id |
| - funds | | - name |
| - reputation | | - skills |
| - staff | | - salary |
| - projects | | - motivation |
| - equipment | +------------------+
+------------------+
🚀 基本システムの実装
それでは、実際にコードを書いていきましょう。まずは、ゲームの基本クラスを作成します。
JS
// ゲームのメインクラス
class WebDevTycoon {
constructor() {
// 会社の初期状態
this.company = {
name: "マイWEB制作会社",
funds: 500000, // 初期資金：50万円
reputation: 50, // 評判：0-100
staff: [], // スタッフリスト
projects: [], // プロジェクトリスト
equipment: [], // 所有機材リスト
office: {size: "small", rent: 50000} // オフィス情報
};
// ゲーム内時間
this.gameTime = {
day: 1,
month: 4,
year: 2025
};
// 初期スタッフ（プレイヤー自身）を追加
this.company.staff.push({
id: 1,
name: "あなた",
role: "社長",
salary: 0, // 社長なので給料なし
skills: {
design: 50,
coding: 50,
management: 50,
communication: 60
},
motivation: 100
});
}
// 日付を進める
advanceDay() {
this.gameTime.day++;
// 月末処理
if (this.gameTime.day > 30) {
this.gameTime.day = 1;
this.gameTime.month++;
this.payMonthlyExpenses(); // 月次経費支払い
}
// 年末処理
if (this.gameTime.month > 12) {
this.gameTime.month = 1;
this.gameTime.year++;
this.annualReport(); // 年次レポート
}
// プロジェクトの進行
this.updateProjects();
// ランダムイベント発生
this.generateRandomEvents();
}
// 月次経費の支払い
payMonthlyExpenses() {
// オフィス賃料
this.company.funds -= this.company.office.rent;
// スタッフの給料
for (const staff of this.company.staff) {
if (staff.salary > 0) { // プレイヤー以外のスタッフ
this.company.funds -= staff.salary;
}
}
// 設備維持費
const equipmentMaintenance = this.company.equipment.length * 5000;
this.company.funds -= equipmentMaintenance;
return {
rent: this.company.office.rent,
salaries: this.company.staff.reduce((sum, staff) => sum + staff.salary, 0),
maintenance: equipmentMaintenance
};
}
// プロジェクトの更新
updateProjects() {
for (const project of this.company.projects) {
if (!project.completed) {
project.daysLeft--;
// プロジェクトが期限切れになった場合
if (project.daysLeft p.id === projectId);
if (!project) return { success: false, message: "プロジェクトが見つかりません。" };
// 品質計算
const quality = this.calculateProjectQuality(project);
// 報酬と評判の更新
this.company.funds += project.remainingPayment;
// 品質に応じた評判変動
let reputationChange = 0;
if (quality > 80) {
reputationChange = 5;
} else if (quality > 50) {
reputationChange = 2;
} else {
reputationChange = -3;
}
this.company.reputation = Math.max(0, Math.min(100, this.company.reputation + reputationChange));
// プロジェクト完了フラグを立てる
project.completed = true;
// スタッフのスキルアップ
for (const staffId of project.assignedStaff) {
const staff = this.company.staff.find(s => s.id === staffId);
if (staff) {
// プロジェクトの種類に応じたスキルアップ
for (const skill of project.requiredSkills) {
if (staff.skills[skill]) {
staff.skills[skill] = Math.min(100, staff.skills[skill] + 1);
}
}
}
}
return {
success: true,
message: `${project.name}が完了しました！品質: ${quality}点、報酬: ${project.remainingPayment.toLocaleString()}円`,
quality: quality,
payment: project.remainingPayment,
reputationChange: reputationChange
};
}
// プロジェクトの品質を計算
calculateProjectQuality(project) {
// 基本品質
let quality = 50;
// スタッフのスキル影響
const assignedStaff = project.assignedStaff || [];
for (const staffId of assignedStaff) {
const staff = this.company.staff.find(s => s.id === staffId);
if (staff) {
// プロジェクトに必要なスキルの平均値を計算
let skillSum = 0;
let skillCount = 0;
for (const skill of project.requiredSkills) {
if (staff.skills[skill]) {
skillSum += staff.skills[skill];
skillCount++;
}
}
if (skillCount > 0) {
const avgSkill = skillSum / skillCount;
quality += avgSkill / assignedStaff.length;
}
// モチベーションの影響
quality += (staff.motivation - 50) / 10;
}
}
// 納期影響
if (project.daysLeft > 5) {
quality += 10; // 余裕があると品質アップ
} else if (project.daysLeft
HTML
HTML
<div class="game-container">
<div class="game-header">
<div class="company-info">
<h1 class="company-name" id="company-name">ラク子のWEB制作会社</h1>
<div class="company-stats">
<div class="stat-item">
<span class="stat-label">資金</span>
<span class="stat-value" id="funds">500,000円</span>
</div>
<div class="stat-item">
<span class="stat-label">評判</span>
<span class="stat-value" id="reputation">50</span>
</div>
</div>
</div>
<div class="game-date" id="date">2025年4月1日</div>
</div>
<div class="rakuko-area">
<img src="https://rakuraku-site.prodouga.com/img/RakuRaku.avif" alt="ラク子" class="rakuko-image normal" id="rakuko-image">
<div class="rakuko-message" id="rakuko-message">今日も頑張りましょう！</div>
<button class="next-day-button" id="next-day-button">次の日へ</button>
</div>
<div class="game-main">
<div class="action-buttons">
<button class="action-button" id="hire-staff-button">スタッフを雇用</button>
<button class="action-button" id="buy-equipment-button">機材を購入</button>
<button class="action-button" id="upgrade-office-button">オフィスをアップグレード</button>
</div>
<div class="game-content">
<div class="content-section projects-section">
<h2 class="section-title">プロジェクト</h2>
<ul class="projects-list" id="projects-list">
<li class="empty-list">現在進行中のプロジェクトはありません</li>
</ul>
</div>
<div class="content-section staff-section">
<h2 class="section-title">スタッフ</h2>
<ul class="staff-list" id="staff-list"></ul>
</div>
<div class="content-section equipment-section">
<h2 class="section-title">機材</h2>
<ul class="equipment-list" id="equipment-list"></ul>
</div>
</div>
<div class="message-log" id="message-log"></div>
</div>
</div>
CSS
CSS
/* ゲーム全体のスタイル */
body {
font-family: 'Hiragino Kaku Gothic Pro', 'メイリオ', sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
color: #333;
}
.game-container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
display: grid;
grid-template-columns: 300px 1fr;
grid-template-rows: auto 1fr;
gap: 20px;
height: 100vh;
}
/* ヘッダー部分 */
.game-header {
grid-column: 1 / 3;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #fff;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.company-info {
display: flex;
flex-direction: column;
}
.company-name {
font-size: 24px;
font-weight: bold;
margin: 0;
}
.company-stats {
display: flex;
gap: 20px;
}
.stat-item {
display: flex;
flex-direction: column;
align-items: center;
}
.stat-label {
font-size: 12px;
color: #666;
}
.stat-value {
font-size: 18px;
font-weight: bold;
}
.game-date {
padding: 5px 10px;
background-color: #f0f0f0;
border-radius: 4px;
font-size: 14px;
}
/* ラク子エリア */
.rakuko-area {
grid-column: 1;
background-color: #fff;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
align-items: center;
}
.rakuko-image {
width: 200px;
height: 200px;
object-fit: cover;
border-radius: 50%;
margin-bottom: 15px;
transition: all 0.3s ease;
}
.rakuko-image.happy {
border: 5px solid #4CAF50;
}
.rakuko-image.normal {
border: 5px solid #FFC107;
}
.rakuko-image.sad {
border: 5px solid #F44336;
}
.rakuko-message {
font-size: 16px;
text-align: center;
margin-bottom: 20px;
min-height: 48px;
}
.next-day-button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
}
.next-day-button:hover {
background-color: #45a049;
}
/* ゲームメインエリア */
.game-main {
grid-column: 2;
display: grid;
grid-template-rows: auto 1fr;
gap: 20px;
}
.action-buttons {
display: flex;
gap: 10px;
}
.action-button {
padding: 10px 15px;
background-color: #2196F3;
color: white;
border: none;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
transition: background-color 0.3s;
}
.action-button:hover {
background-color: #0b7dda;
}
.game-content {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 20px;
}
.content-section {
background-color: #fff;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
overflow-y: auto;
}
.section-title {
font-size: 18px;
font-weight: bold;
margin-top: 0;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
/* プロジェクトリスト */
.projects-section {
grid-column: 1 / 3;
grid-row: 1;
}
.projects-list {
list-style: none;
padding: 0;
margin: 0;
}
.project-item {
margin-bottom: 15px;
border: 1px solid #eee;
border-radius: 4px;
overflow: hidden;
}
.project-header {
padding: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
.project-header.normal {
background-color: #E3F2FD;
}
.project-header.urgent {
background-color: #FFF3E0;
}
.project-header.overdue {
background-color: #FFEBEE;
}
.project-header.completed {
background-color: #E8F5E9;
}
.project-header h3 {
margin: 0;
font-size: 16px;
}
.project-client {
font-size: 12px;
color: #666;
}
.project-details {
padding: 10px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.project-details p {
margin: 0;
font-size: 14px;
}
.project-actions {
padding: 10px;
display: flex;
justify-content: flex-end;
gap: 10px;
background-color: #f9f9f9;
}
.project-actions button {
padding: 5px 10px;
background-color: #2196F3;
color: white;
border: none;
border-radius: 4px;
font-size: 12px;
cursor: pointer;
}
.project-actions button:hover {
background-color: #0b7dda;
}
.status-badge {
padding: 5px 10px;
border-radius: 4px;
font-size: 12px;
}
.status-badge.completed {
background-color: #4CAF50;
color: white;
}
.empty-list {
padding: 20px;
text-align: center;
color: #999;
}
/* スタッフリスト */
.staff-section {
grid-column: 1;
grid-row: 2;
}
.staff-list {
list-style: none;
padding: 0;
margin: 0;
}
.staff-item {
margin-bottom: 15px;
border: 1px solid #eee;
border-radius: 4px;
overflow: hidden;
}
.staff-header {
padding: 10px;
background-color: #E8EAF6;
display: flex;
justify-content: space-between;
align-items: center;
}
.staff-header h3 {
margin: 0;
font-size: 16px;
}
.staff-role {
font-size: 12px;
color: #666;
}
.staff-details {
padding: 10px;
}
.staff-details p {
margin: 5px 0;
font-size: 14px;
}
.staff-skills {
margin: 10px 0;
}
.skill-bar {
display: flex;
align-items: center;
margin-bottom: 5px;
}
.skill-name {
width: 100px;
font-size: 12px;
}
.skill-value-bar {
flex-grow: 1;
height: 8px;
background-color: #eee;
border-radius: 4px;
overflow: hidden;
margin: 0 10px;
}
.skill-value {
height: 100%;
background-color: #2196F3;
}
.skill-value-text {
font-size: 12px;
width: 30px;
text-align: right;
}
.motivation {
font-weight: bold;
}
.motivation-high {
color: #4CAF50;
}
.motivation-medium {
color: #FFC107;
}
.motivation-low {
color: #F44336;
}
.staff-actions {
padding: 10px;
display: flex;
justify-content: flex-end;
gap: 10px;
background-color: #f9f9f9;
}
.staff-actions button {
padding: 5px 10px;
background-color: #673AB7;
color: white;
border: none;
border-radius: 4px;
font-size: 12px;
cursor: pointer;
}
.staff-actions button:hover {
background-color: #5e35b1;
}
/* 機材リスト */
.equipment-section {
grid-column: 2;
grid-row: 2;
}
.equipment-list {
list-style: none;
padding: 0;
margin: 0;
}
.equipment-item {
margin-bottom: 15px;
border: 1px solid #eee;
border-radius: 4px;
overflow: hidden;
}
.equipment-header {
padding: 10px;
background-color: #E0F7FA;
display: flex;
justify-content: space-between;
align-items: center;
}
.equipment-header h3 {
margin: 0;
font-size: 16px;
}
.equipment-details {
padding: 10px;
}
.equipment-details p {
margin: 5px 0;
font-size: 14px;
}
.condition {
font-weight: bold;
}
.condition-good {
color: #4CAF50;
}
.condition-fair {
color: #FFC107;
}
.condition-poor {
color: #F44336;
}
.equipment-actions {
padding: 10px;
display: flex;
justify-content: flex-end;
gap: 10px;
background-color: #f9f9f9;
}
.equipment-actions button {
padding: 5px 10px;
background-color: #00BCD4;
color: white;
border: none;
border-radius: 4px;
font-size: 12px;
cursor: pointer;
}
.equipment-actions button:hover {
background-color: #00acc1;
}
/* メッセージログ */
.message-log {
grid-column: 1 / 3;
background-color: #fff;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
max-height: 200px;
overflow-y: auto;
}
.message {
padding: 5px 10px;
margin-bottom: 5px;
border-radius: 4px;
font-size: 14px;
}
.message.info {
background-color: #E3F2FD;
}
.message.warning {
background-color: #FFF3E0;
}
.message.error {
background-color: #FFEBEE;
}
/* ダイアログ */
.dialog {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.dialog-content {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
max-width: 80%;
max-height: 80%;
overflow-y: auto;
}
.dialog-content h2 {
margin-top: 0;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
.dialog-staff-list,
.dialog-skill-list,
.dialog-hire-list,
.dialog-equipment-list,
.dialog-office-list {
list-style: none;
padding: 0;
margin: 0;
}
.dialog-staff-item,
.dialog-skill-item,
.dialog-hire-item,
.dialog-equipment-item,
.dialog-office-item {
margin-bottom: 15px;
padding: 10px;
border: 1px solid #eee;
border-radius: 4px;
display: flex;
justify-content: space-between;
align-items: center;
}
.dialog-staff-item.assigned {
background-color: #E8F5E9;
}
.dialog-office-item.current {
background-color: #E8F5E9;
}
.dialog-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 20px;
}
.dialog-actions button {
padding: 10px 20px;
background-color: #2196F3;
color: white;
border: none;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
}
.dialog-actions button:hover {
background-color: #0b7dda;
}
.close-dialog-button {
background-color: #9E9E9E !important;
}
.close-dialog-button:hover {
background-color: #757575 !important;
}
/* レスポンシブデザイン */
@media (max-width: 1024px) {
.game-container {
grid-template-columns: 1fr;
}
.game-header {
grid-column: 1;
}
.rakuko-area {
grid-column: 1;
}
.game-main {
grid-column: 1;
}
.game-content {
grid-template-columns: 1fr;
}
.projects-section {
grid-column: 1;
}
.staff-section,
.equipment-section {
grid-column: 1;
}
}
🔄 ゲームループの実装
ゲームの動作を制御するために、HTMLとJavaScriptを連携させます。以下は、UIの更新とゲームの進行を管理するコードです。
// HTMLとの連携用コード
document.addEventListener('DOMContentLoaded', function() {
// ゲームインスタンスの作成
const game = new WebDevTycoon();
// UI要素の取得
const companyNameElement = document.getElementById('company-name');
const fundsElement = document.getElementById('funds');
const reputationElement = document.getElementById('reputation');
const dateElement = document.getElementById('date');
const characterMessageElement = document.getElementById('character-message');
const projectsListElement = document.getElementById('projects-list');
const staffListElement = document.getElementById('staff-list');
const equipmentListElement = document.getElementById('equipment-list');
const nextDayButton = document.getElementById('next-day-button');
const messageLogElement = document.getElementById('message-log');
// ゲーム状態の更新
function updateUI() {
// 基本情報の更新
companyNameElement.textContent = game.company.name;
fundsElement.textContent = game.company.funds.toLocaleString() + '円';
reputationElement.textContent = game.company.reputation;
dateElement.textContent = `${game.gameTime.year}年${game.gameTime.month}月${game.gameTime.day}日`;
// プロジェクトリストの更新
updateProjectsList(game.company.projects);
// スタッフリストの更新
updateStaffList(game.company.staff);
// 機材リストの更新
updateEquipmentList(game.company.equipment);
}
// 次の日へボタンのイベントリスナー
nextDayButton.addEventListener('click', function() {
const result = game.advanceDay();
addMessageToLog(`${game.gameTime.year}年${game.gameTime.month}月${game.gameTime.day}日になりました。`);
// ランダムイベントの処理
const event = game.generateRandomEvents();
if (event) {
addMessageToLog(event.message);
if (event.type === 'inquiry') {
showNewProjectDialog(event.project);
}
}
updateUI();
});
// 初期UI更新
updateUI();
// 初期メッセージ
addMessageToLog('ゲームを開始しました。WEB制作会社経営へようこそ！');
});
🧩 主要機能の実装
ここからは、ゲームの主要機能を一つずつ実装していきます。
1. プロジェクト管理システム
プロジェクト管理は経営シミュレーションの核となる部分です。プロジェクトの受注から完了までの流れを実装します。
// プロジェクトリストの更新
function updateProjectsList(projects) {
projectsListElement.innerHTML = '';
if (projects.length === 0) {
projectsListElement.innerHTML = '現在進行中のプロジェクトはありません';
return;
}
for (const project of projects) {
const projectElement = document.createElement('li');
projectElement.className = 'project-item';
const statusClass = project.completed ? 'completed' :
(project.daysLeft
${project.name}
${project.client}
予算: ${project.budget.toLocaleString()}円
残り日数: ${project.daysLeft}日
難易度: ${getDifficultyText(project.difficulty)}
担当者: ${getAssignedStaffNames(project.assignedStaff)}
${project.completed ?
'完了' :
`スタッフ割当
納品する`
}
`;
projectsListElement.appendChild(projectElement);
}
// イベントリスナーの追加
document.querySelectorAll('.assign-staff-button').forEach(button => {
button.addEventListener('click', function() {
const projectId = parseInt(this.getAttribute('data-project-id'));
showAssignStaffDialog(projectId);
});
});
}
2. スタッフ管理システム
会社の成長には優秀なスタッフが欠かせません。スタッフの雇用、育成、管理機能を実装します。
// スタッフを雇用
function hireStaff(staffType) {
const staffTypes = {
"デザイナー": {
baseSalary: 250000,
skills: { design: 70, coding: 20, management: 30, communication: 50 },
hireCost: 100000
},
"エンジニア": {
baseSalary: 300000,
skills: { design: 30, coding: 80, management: 40, communication: 40 },
hireCost: 150000
},
"ディレクター": {
baseSalary: 350000,
skills: { design: 40, coding: 30, management: 70, communication: 60 },
hireCost: 200000
}
};
const template = staffTypes[staffType];
if (!template) return { success: false, message: "指定されたスタッフタイプが見つかりません。" };
if (game.company.funds s.id === staffId);
if (staff) {
// プロジェクトに必要なスキルの平均値を計算
let skillSum = 0;
let skillCount = 0;
for (const skill of project.requiredSkills) {
if (staff.skills[skill]) {
skillSum += staff.skills[skill];
skillCount++;
}
}
if (skillCount > 0) {
const avgSkill = skillSum / skillCount;
// スタッフのスキルの影響を大きくする
quality += (avgSkill / assignedStaff.length) * 1.5;
}
// モチベーションの影響も大きくする
quality += (staff.motivation - 50) / 5;
}
}
// 設備の影響（新たに追加）
const relevantEquipment = game.company.equipment.filter(eq =>
eq.name.includes("PC") ||
(project.requiredSkills.includes("design") && eq.name.includes("タブレット"))
);
if (relevantEquipment.length > 0) {
const avgEquipmentPerformance = relevantEquipment.reduce((sum, eq) => sum + eq.performance, 0) / relevantEquipment.length;
quality += (avgEquipmentPerformance - 50) / 4;
} else {
// 必要な機材がない場合はペナルティ
quality -= 10;
}
// 納期影響（調整）
if (project.daysLeft > project.duration * 0.3) {
quality += 15; // 余裕があると品質アップ（より大きく）
} else if (project.daysLeft < 0) {
quality -= 25; // 納期遅れは大幅減点（より厳しく）
}
// 最終調整
return Math.max(0, Math.min(100, Math.floor(quality)));
}
🎮 ゲームの完成と拡張
基本的なゲームシステムが完成したら、以下のような拡張機能を追加して、ゲームをより面白くすることができます：
- セーブ＆ロード機能：LocalStorageを使ってゲーム状態を保存
- 実績システム：特定の条件を達成すると解除される実績
- ランダムイベント：予期せぬ出来事が発生するシステム
- 競合他社：AIが操作する競合会社との競争
- 特殊プロジェクト：稀に出現する高難度・高報酬のプロジェクト
例えば、セーブ＆ロード機能は以下のように実装できます：
// ゲームの状態を保存
function saveGame() {
const saveData = {
company: game.company,
gameTime: game.gameTime,
version: "1.0.0" // バージョン管理用
};
localStorage.setItem('webDevTycoonSave', JSON.stringify(saveData));
return { success: true, message: "ゲームを保存しました。" };
}
// ゲームの状態を読み込み
function loadGame() {
const saveData = localStorage.getItem('webDevTycoonSave');
if (!saveData) return { success: false, message: "セーブデータが見つかりません。" };
try {
const parsedData = JSON.parse(saveData);
// バージョンチェック（将来的な互換性のため）
if (parsedData.version !== "1.0.0") {
return { success: false, message: "互換性のないセーブデータです。" };
}
// データの復元
game.company = parsedData.company;
game.gameTime = parsedData.gameTime;
updateUI();
return { success: true, message: "ゲームを読み込みました。" };
} catch (error) {
return { success: false, message: "セーブデータの読み込みに失敗しました。" };
}
}
📱 レスポンシブデザインの実装
現代のWebアプリケーションには、レスポンシブデザインが不可欠です。様々な画面サイズに対応するためのCSSを追加しましょう。
/* レスポンシブデザイン */
@media (max-width: 1024px) {
.game-container {
grid-template-columns: 1fr;
}
.game-header {
grid-column: 1;
}
.side-panel {
grid-column: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.character-area {
display: flex;
align-items: center;
}
.character-image {
width: 80px;
height: 80px;
margin-right: 15px;
}
.game-main {
grid-column: 1;
}
.game-content {
grid-template-columns: 1fr;
}
.projects-section,
.staff-section,
.equipment-section {
grid-column: 1;
}
}
@media (max-width: 600px) {
.game-header {
flex-direction: column;
align-items: flex-start;
}
.company-stats {
margin-top: 10px;
}
.game-date {
margin-top: 10px;
align-self: flex-end;
}
.action-buttons {
flex-direction: column;
gap: 5px;
}
.project-details,
.staff-details {
grid-template-columns: 1fr;
}
}
🔍 デバッグとテスト
ゲーム開発では、デバッグとテストが非常に重要です。以下のようなテスト関数を作成して、ゲームの各機能をテストしましょう。
// テスト用関数
function runGameTests() {
console.log("=== ゲームテスト開始 ===");
// 1. 日付進行テスト
console.log("1. 日付進行テスト");
const initialDate = { ...game.gameTime };
game.advanceDay();
console.assert(
game.gameTime.day === initialDate.day + 1 ||
(initialDate.day === 30 && game.gameTime.day === 1),
"日付進行に問題があります"
);
// 2. プロジェクト生成テスト
console.log("2. プロジェクト生成テスト");
const newProject = game.generateNewProject();
console.assert(
newProject && newProject.name && newProject.budget > 0,
"プロジェクト生成に問題があります"
);
// 3. プロジェクト受注テスト
console.log("3. プロジェクト受注テスト");
const initialFunds = game.company.funds;
const initialProjectCount = game.company.projects.length;
const acceptResult = game.acceptProject(newProject);
console.assert(
acceptResult.success &&
game.company.funds === initialFunds + newProject.advancePayment &&
game.company.projects.length === initialProjectCount + 1,
"プロジェクト受注に問題があります"
);
// 4. スタッフ割り当てテスト
console.log("4. スタッフ割り当てテスト");
const projectId = game.company.projects.id;
const staffId = game.company.staff.id;
const assignResult = game.assignStaffToProject(projectId, staffId);
console.assert(
assignResult.success &&
game.company.projects.assignedStaff.includes(staffId),
"スタッフ割り当てに問題があります"
);
// 5. プロジェクト完了テスト
console.log("5. プロジェクト完了テスト");
const projectToComplete = game.company.projects;
projectToComplete.daysLeft = 0; // 強制的に納期を到来させる
const completeResult = game.completeProject(projectToComplete.id);
console.assert(
completeResult.success &&
projectToComplete.completed,
"プロジェクト完了に問題があります"
);
console.log("=== テスト完了 ===");
}
🚀 パフォーマンス最適化
ブラウザゲームでは、パフォーマンスも重要な要素です。特に、UIの更新処理は効率的に行う必要があります。
// パフォーマンス最適化版のUI更新
function optimizedUpdateUI() {
// 変更があった部分だけを更新する
// 1. 基本情報の更新（変更があった場合のみ）
if (companyNameElement.textContent !== game.company.name) {
companyNameElement.textContent = game.company.name;
}
const formattedFunds = game.company.funds.toLocaleString() + '円';
if (fundsElement.textContent !== formattedFunds) {
fundsElement.textContent = formattedFunds;
}
if (reputationElement.textContent != game.company.reputation) {
reputationElement.textContent = game.company.reputation;
}
const formattedDate = `${game.gameTime.year}年${game.gameTime.month}月${game.gameTime.day}日`;
if (dateElement.textContent !== formattedDate) {
dateElement.textContent = formattedDate;
}
// 2. リストの更新（差分だけ更新）
updateProjectsListOptimized(game.company.projects);
updateStaffListOptimized(game.company.staff);
updateEquipmentListOptimized(game.company.equipment);
}
// プロジェクトリストの最適化更新
function updateProjectsListOptimized(projects) {
// 既存のプロジェクト要素を取得
const existingProjects = Array.from(projectsListElement.children).filter(
el => el.classList.contains('project-item')
);
// 空リストの表示/非表示を切り替え
const emptyListElement = projectsListElement.querySelector('.empty-list');
if (projects.length === 0) {
if (!emptyListElement) {
const emptyEl = document.createElement('li');
emptyEl.className = 'empty-list';
emptyEl.textContent = '現在進行中のプロジェクトはありません';
projectsListElement.appendChild(emptyEl);
}
// 既存のプロジェクト要素をすべて削除
existingProjects.forEach(el => el.remove());
return;
} else if (emptyListElement) {
emptyListElement.remove();
}
// 既存のプロジェクトIDを取得
const existingProjectIds = existingProjects.map(
el => parseInt(el.querySelector('button')?.getAttribute('data-project-id') || '0')
);
// 新しいプロジェクトを追加
for (const project of projects) {
const existingIndex = existingProjectIds.indexOf(project.id);
if (existingIndex === -1) {
// 新規プロジェクトの場合、要素を作成して追加
const projectElement = createProjectElement(project);
projectsListElement.appendChild(projectElement);
} else {
// 既存プロジェクトの場合、内容を更新
updateExistingProjectElement(existingProjects[existingIndex], project);
}
}
// 削除されたプロジェクトの要素を削除
const currentProjectIds = projects.map(p => p.id);
existingProjects.forEach((el, index) => {
const projectId = existingProjectIds[index];
if (!currentProjectIds.includes(projectId)) {
el.remove();
}
});
}
🎯 実践的なゲーム開発のポイント
最後に、ブラウザゲーム開発で重要なポイントをいくつか紹介します：
1. 状態管理の設計
ゲームの状態管理は非常に重要です。今回は単純なオブジェクトで管理しましたが、規模が大きくなる場合は以下の方法も検討してください：
- Reduxパターン：状態の一元管理と予測可能な更新
- イミュータブルデータ構造：状態の変更を追跡しやすくする
- オブザーバーパターン：状態変更を監視して自動的にUIを更新
2. モジュール化と再利用性
コードの再利用性を高めるために、機能ごとにモジュール化することが重要です：
// モジュール化の例
const GameTimeModule = {
advanceDay(gameTime, callbacks) {
gameTime.day++;
if (gameTime.day > 30) {
gameTime.day = 1;
gameTime.month++;
if (callbacks.onMonthEnd) {
callbacks.onMonthEnd();
}
}
if (gameTime.month > 12) {
gameTime.month = 1;
gameTime.year++;
if (callbacks.onYearEnd) {
callbacks.onYearEnd();
}
}
return gameTime;
}
};
const ProjectModule = {
generateNewProject(companyReputation, templates) {
// プロジェクト生成ロジック
},
calculateQuality(project, assignedStaff, equipment) {
// 品質計算ロジック
}
};
3. ローカライゼーション対応
国際的なユーザーに対応するために、ローカライゼーション（多言語対応）を考慮することも重要です：
// 言語ファイルの例
const translations = {
ja: {
next_day: "次の日へ",
hire_staff: "スタッフを雇用",
buy_equipment: "機材を購入",
upgrade_office: "オフィスをアップグレード",
// ...
},
en: {
next_day: "Next Day",
hire_staff: "Hire Staff",
buy_equipment: "Buy Equipment",
upgrade_office: "Upgrade Office",
// ...
}
};
// 言語切り替え関数
function setLanguage(lang) {
const texts = translations[lang] || translations.en;
// UI要素のテキストを更新
document.getElementById('next-day-button').textContent = texts.next_day;
document.getElementById('hire-staff-button').textContent = texts.hire_staff;
document.getElementById('buy-equipment-button').textContent = texts.buy_equipment;
document.getElementById('upgrade-office-button').textContent = texts.upgrade_office;
// ...
}
📝 まとめ
今回は、JavaScriptを使ったブラウザゲーム開発の基本を解説しました。経営シミュレーションゲームは、オブジェクト指向プログラミングの練習に最適であり、状態管理やUI設計など、Webアプリケーション開発の多くの要素を学ぶことができます。
このゲームはシンプルな構造ですが、拡張性が高いため、様々な機能を追加してより複雑で面白いゲームに発展させることができます。例えば、マーケティング要素の追加、スタッフ間の相性システム、技術ツリーの実装など、アイデア次第で無限に拡張可能です。
ぜひ、このコードをベースに自分だけのオリジナルゲームを作ってみてください！プログラミングの楽しさを実感できるはずです。
次回は、このゲームにアニメーションやサウンドを追加して、よりリッチな体験を提供する方法について解説する予定です。お楽しみに！
🔗 参考リソース
この記事が気に入ったら、ぜひコメントやシェアをお願いします！また、質問や感想も大歓迎です。一緒にゲーム開発の世界を楽しみましょう！
最後に：業務委託のご相談を承ります
私は、業務委託エンジニアとしてWEB制作やシステム開発を請け負っています。最新技術を活用し、レスポンシブなWebサイトやインタラクティブなアプリケーション、API連携など、幅広いニーズに対応可能です。
「課題解決に向けた即戦力が欲しい」「高品質なWeb制作を依頼したい」という方は、ぜひお気軽にご相談ください。一緒にビジネスの成長を目指しましょう！
👉 ポートフォリオ
🌳 らくらくサイト