ゲームのレベルと進行システムの仕組み

経験とレベルの基本的な仕組み

どのような進行システムも、プレイヤーがアクションを実行し、経験を積み、十分な経験を積んだときに新しいレベルに移行するという単純なアイデアに基づいています。最も単純なJavaScriptのバージョンから始めましょう。

class Player {
  constructor() {
    this.level = 1;
    this.experience = 0;
    this.experienceToNextLevel = 100;
  }

  gainExperience(amount) {
    this.experience += amount;
    
    while (this.experience >= this.experienceToNextLevel) {
      this.levelUp();
    }
  }

  levelUp() {
    this.experience -= this.experienceToNextLevel;
    this.level++;
    this.experienceToNextLevel = Math.floor(this.experienceToNextLevel * 1.5);
    
    console.log(`Congratulations! You have reached ${this.level} level!`);
  }
}

const player = new Player();
player.gainExperience(150); // 経験を積み、レベルを上げる

次のレベルの経験値計算式に注意してください。現在の値に 1.5 を掛けると、指数関数的な成長曲線が作成されます。これは重要なポイントです。各レベルに同じ量の経験が必要な場合、ゲームはすぐに退屈になります。

さまざまな進行曲線

必要な経験を計算するための一般的なアプローチがいくつかあります。各レベルが固定数の経験を必要とする線形進行は、短いゲームに適しています。上記の例のように、指数曲線は徐々に複雑になる感覚を生み出します。対数曲線は、最初のレベルを速くし、次のレベルを遅くします。

さまざまな数式の例を次に示します。

class ProgressionSystem {
  // 線形進歩： 100、200、300、400...
  static linear(level, baseXP = 100) {
    return baseXP * level;
  }

  // 指数関数：100、150、225、337.5...
  static exponential(level, baseXP = 100, multiplier = 1.5) {
    return Math.floor(baseXP * Math.pow(multiplier, level - 1));
  }

  // 多項式：100、400、900、1600...
  static polynomial(level, baseXP = 100) {
    return baseXP * Math.pow(level, 2);
  }

  // ハイブリッド式（ポケモンのように）
  static hybrid(level) {
    return Math.floor(1.2 * Math.pow(level, 3));
  }
}

// 経験の要件がどのように増加するかを見てみましょう
for (let level = 1; level <= 5; level++) {
  console.log(`Level ${level}:`);
  console.log(`  Linear: ${ProgressionSystem.linear(level)}`);
  console.log(`  Exponential: ${ProgressionSystem.exponential(level)}`);
  console.log(`  Polynomial: ${ProgressionSystem.polynomial(level)}`);
}

どの式を選択しますか？

それはゲームによって異なります。モバイルのカジュアルゲームでは、プレイヤーを惹きつけるために最初に急速な進行を使用し、その後ペースを落とすことがよくあります。ハードコア RPG では、進行は最初から遅く、要求が厳しい場合があります。

レベルごとの報酬を追加します

報酬なしでレベルアップするのは、チャンスを逃すことになります。プレイヤーは、自分の進歩が何かを意味すると感じる必要があります。報酬システムを追加しましょう。

class Player {
  constructor() {
    this.level = 1;
    this.experience = 0;
    this.health = 100;
    this.attack = 10;
    this.defense = 5;
    this.skillPoints = 0;
  }

  levelUp() {
    this.level++;
    
    // 基本的な特性を向上させます
    this.health += 20;
    this.attack += 3;
    this.defense += 2;
    this.skillPoints += 5;
    
    // 5 レベルごとに特別な報酬が与えられます
    if (this.level % 5 === 0) {
      this.unlockNewAbility();
    }
    
    // レベルアップで体力を回復
    this.currentHealth = this.health;
    
    console.log(`
      🎉 Level ${this.level}!
      Health: ${this.health}
      Attack: ${this.attack}
      Defense: ${this.defense}
      Skill points: ${this.skillPoints}
    `);
  }

  unlockNewAbility() {
    const abilities = [
      'Fireball',
      'Ice Arrow',
      'Shield of Power',
      'Lightning strike'
    ];
    const abilityIndex = Math.floor(this.level / 5) - 1;
    if (abilityIndex < abilities.length) {
      console.log(`✨ Ability unlocked: ${abilities[abilityIndex]}`);
    }
  }
}

進捗状況の可視化

数字を保存するだけでは不十分です。プレイヤーは自分の進捗状況を見る必要があります。簡単なプログレスバーを作成してみましょう。

class ProgressBar {
  static draw(current, required, width = 20) {
    const percentage = current / required;
    const filledWidth = Math.floor(percentage * width);
    const emptyWidth = width - filledWidth;
    
    const filled = '█'.repeat(filledWidth);
    const empty = '░'.repeat(emptyWidth);
    const percentText = Math.floor(percentage * 100);
    
    return `[${filled}${empty}] ${percentText}% (${current}/${required})`;
  }
}

const player = new Player();
console.log('Experience:', ProgressBar.draw(player.experience, player.experienceToNextLevel));

player.gainExperience(75);
console.log('Experience:', ProgressBar.draw(player.experience, player.experienceToNextLevel));

ウェブゲームでは、HTMLとCSSを使用してより美しいプログレスバーを作成できます。簡単な例を次に示します。

class UIManager {
  static updateExpBar(player) {
    const percentage = (player.experience / player.experienceToNextLevel) * 100;
    
    const expBar = document.getElementById('exp-bar');
    const expText = document.getElementById('exp-text');
    
    expBar.style.width = `${percentage}%`;
    expText.textContent = `${player.experience} / ${player.experienceToNextLevel} XP`;
  }

  static showLevelUp(player) {
    const notification = document.createElement('div');
    notification.className = 'level-up-notification';
    notification.textContent = `Level ${player.level}!`;
    document.body.appendChild(notification);
    
    // アニメーションの表示と非表示
    setTimeout(() => notification.classList.add('show'), 10);
    setTimeout(() => {
      notification.classList.remove('show');
      setTimeout(() => notification.remove(), 300);
    }, 2000);
  }
}

名声と転生のシステム

多くの現代のゲームでは、プレステージシステムが使用されています。プレーヤーが最大レベルに達すると、ボーナスを受け取って最初からやり直すことができます。これにより、リプレイ性が向上します。

class PrestigeSystem {
  constructor() {
    this.prestigeLevel = 0;
    this.prestigePoints = 0;
  }

  canPrestige(player) {
    return player.level >= 100;
  }

  prestige(player) {
    if (!this.canPrestige(player)) {
      console.log('Insufficient level for prestige!');
      return false;
    }

    this.prestigeLevel++;
    this.prestigePoints += Math.floor(player.level / 10);
    
    // プレイヤーをリセットしますが、ボーナスは保持します
    const expBonus = 1 + (this.prestigeLevel * 0.1); // 各プレステージにつき+10%の経験
    const statBonus = this.prestigeLevel * 5; // 開始時のパラメータが+5
    
    player.reset(expBonus, statBonus);
    
    console.log(`
      🌟 Prestige ${this.prestigeLevel}!
      Experience bonus: +${(expBonus - 1) * 100}%
      Bonus to characteristics: +${statBonus}
      Prestige points: ${this.prestigePoints}
    `);
    
    return true;
  }

  // 名声ポイントによる継続的な改善
  buyPermanentUpgrade(upgrade) {
    const upgrades = {
      'double_xp': { cost: 10, effect: 'Double experience' },
      'start_level_10': { cost: 15, effect: 'Start from level 10' },
      'bonus_gold': { cost: 20, effect: '+50% gold' }
    };

    const selected = upgrades[upgrade];
    if (!selected) return false;
    
    if (this.prestigePoints >= selected.cost) {
      this.prestigePoints -= selected.cost;
      console.log(`Purchased: ${selected.effect}`);
      return true;
    }
    
    return false;
  }
}

進行のバランス調整

最も難しいのは、システムのバランスを正しく取ることです。プレイヤーは進行を感じる必要がありますが、あまり速く感じる必要はありません。いくつかのヒント：最初の5つのレベルは、プレイヤーをキャプチャしてメカニズムを示すために、迅速に通過する必要があります。中間レベルはメインコンテンツであり、ここではペースを快適にする必要があります。後半のレベルでは、達成感を生み出すために、かなりの労力を要する場合があります。

実際のプレイヤーでテストすることが重要です。開発者にとってバランスが取れているように見えるものでも、一般的なプレイヤーにとっては速すぎたり遅すぎたりする可能性があります。アナリティクスを使用して、プレイヤーがゲームを停止または中止するレベルを追跡します。

分析のための簡単なログシステムは次のとおりです。

class Analytics {
  static logLevelUp(player, timeSpent) {
    const data = {
      level: player.level,
      timeSpent: timeSpent,
      timestamp: new Date().toISOString()
    };
    
    // 実際のゲームではサーバーに送信します
    console.log('Analytics:', data);
    
    // 分析のためにローカルに保存します
    const history = JSON.parse(localStorage.getItem('levelHistory') || '[]');
    history.push(data);
    localStorage.setItem('levelHistory', JSON.stringify(history));
  }

  static getAverageLevelTime() {
    const history = JSON.parse(localStorage.getItem('levelHistory') || '[]');
    if (history.length === 0) return 0;
    
    const total = history.reduce((sum, entry) => sum + entry.timeSpent, 0);
    return total / history.length;
  }
}

高度なテクニック

現代のゲームでは、複数の並列進行システムが使用されることがよくあります。たとえば、キャラクター レベル、スキル レベル、戦闘レーティング、シーズンの進行状況などです。各システムはプレイヤーに何か新しいものを与え、ゲームのさまざまな段階で関与を維持します。また、デイリー目標やウィークリー目標も人気があり、追加の経験値や報酬を与え、プレイヤーが定期的にゲームに戻るように促します。

フィードバックを忘れないでください。プレイヤーの各アクションは、レベルアップに伴う経験値、アニメーション、効果音、視覚効果などの進捗状況を示す必要があります。これらすべてが満足感を生み出し、プレイを続けるモチベーションを高めます。

結論： レベルと進行のシステムは、プログラミング、ゲームデザイン、プレイヤーの心理を組み合わせた科学全体です。適切に実装されたシステムは、プレイヤーを何時間も夢中にさせ、「もう一つのレベル」という効果を生み出します。数式を試し、実際のプレイヤーでテストし、リリース後にバランスを変更することを恐れないでください。

🎓 学習を続けましょう！

このトピックをより深く研究し、ゲーム、Webアプリケーションなどの開発を習得することができます。 コディケ — 初心者向けのコースを提供する当社の教育プラットフォーム。

そして、私たちは素晴らしい テレグラムチャンネル 開発者がコードについて話し合い、経験を共有し、お互いの成長を助け合うフレンドリーなコミュニティ。