技術力を上げるための追加機能 5選

基本的な機能が完成したら、以下の実用的な技術を組み込んでみましょう。

1. 勝敗履歴の「永続化」(LocalStorage)

リロードしても勝敗データが消えないようにします。

// 保存
localStorage.setItem('gameLog', JSON.stringify(logs));
// 取得
const savedLogs = JSON.parse(localStorage.getItem('gameLog'));

2.「溜め」の演出 (非同期処理)

ボタンを押してから結果が出るまでの時間差を作ります。

setTimeout(() => {
    // 結果を表示
}, 1000);

3. CPUに「性格」を持たせる (アルゴリズム)

完全にランダムではなく、特定の傾向を持つCPUを作成します。

• 真似っこCPU: プレイヤーが前回出した手を出す
• 裏読みCPU: プレイヤーが前回出した手に勝つ手を出す

4. 勝率と傾向のリアルタイム分析 (配列操作)

配列メソッドを活用してデータを分析します。

const winCount = logs.filter(log => log === 'win').length;
const winRate = (winCount / logs.length) * 100;

5. コードの「クラス化」 (オブジェクト指向)

class 構文を使い、データと処理をまとめます。

class JankenGame {
    constructor() { this.scores = { win: 0, lose: 0 }; }
    play(playerHand) { /* 判定ロジック */ }
}