ソースコード解説: ハイ＆ロー

1. どんなプロンプト（指示）で作ったか？

最初のデザイン指定では、カードの立体感をしっかり伝える必要があります。

AIはCSSの `transform-style: preserve-3d` や `rotateY` を用いて、見事にカードがひっくり返るアニメーションを出力してくれました。これをベースに、Javascriptで判定処理とランキング機能をつなぎこみました。

2. HTMLとJavaScriptの全ソースコード

以下は、実際に使われている処理の一部です。CSSアニメーションの仕組みや、JSでの判定ロジックを読み解いてみましょう。

/* トランプの3Dアニメーションの要となるCSS部分 */
.card-display {
    display: flex;
    gap: 20px;
    perspective: 1000px; /* 3D空間の奥行きを設定 */
}

.card {
    width: 120px;
    height: 170px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.4);
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-style: preserve-3d; /* 裏側も3Dに保つ */
}

/* 裏面（隠れている時）の状態 */
.card.hidden {
    background: repeating-linear-gradient(45deg, #b71540, #fff 10px);
    color: transparent;
    transform: rotateY(180deg); /* 180度回転させて裏返しておく */
}

/* ハイ＆ローの判定部分 (Javascript) */
function evaluateGuess(guess) {
    let win = false;
    let tie = false;

    if (currentCard.num === nextCard.num) {
        tie = true;
        win = true; // 同じ数字なら「セーフ（継続）」というルール
    } else if (guess === 'high' && nextCard.num > currentCard.num) {
        win = true; // Highを選んで、当たった
    } else if (guess === 'low' && nextCard.num < currentCard.num) {
        win = true; // Lowを選んで、当たった
    }

    if (win) {
        if (!tie) score++;
        resultMsg.innerText = tie ? 'DRAW (SAFE)' : 'SUCCESS!';
        // 次のターンへ続く...
    } else {
        resultMsg.innerText = 'FAIL...';
        // ゲームオーバー処理へ...
    }
}

3. ここを真似してみよう・改造してみよう

「ハイ＆ロー」はトランプのルールですが、これを応用していろいろなゲームが作れます。

• getRandomCard() の中身をいじって「A〜13」ではなく「1〜100」までの数字がランダムに出るようにする。
• トランプの柄ではなく、別の画像を表示させる（キャラクターの攻撃力など）。
• アニメーションの秒数 0.5s を 0.1s にして、超爆速でめくれるようにする。