前回はChatGPTとCanvasアニメーションで遊ぼうについて紹介しました。
今回はChatGPTと挑戦するJavaScript宝探しゲームについて紹介していきます。
 |
1冊ですべて身につくJavaScript入門講座 [ Mana ] 価格:2794円 |
コードで謎解き！ChatGPTと挑戦するJavaScript宝探しゲーム
導入
レトロなサイバー世界で繰り広げられる暗号解読パズルに挑戦してみませんか？本記事では、JavaScriptの基本文法を知っている初心者の方を対象に、ChatGPTと一緒にゲーム感覚でハッカーの謎を解き明かす方法を解説します。ChatGPTがAIアシスタントとして各ステージでヒントを提供し、コードを書きながら謎を解決していきます。
今回は「ハッカーの謎」と題した宝探し風ゲームに挑戦します。舞台は緑色の文字がスクリーンに浮かぶレトロなコンピュータ端末。あなたは巧妙な暗号とパズルを次々と解き、最終的な宝（秘密のコード）を手に入れることが目的です。
ゲームは全4ステージ構成で、各ステージごとに異なるプログラミングパズルが待ち受けています。それぞれのステージでは以下のような課題にチャレンジします。
- シーザー暗号のデコード（文字をずらして秘密のメッセージを復号）
- 配列シャッフルされたヒント文字列の復元（順番を入れ替えて正しい文字列に）
- フィルタ処理で正しいパスワード候補を抽出（リストから条件に合う要素を絞り込み）
- 総当たり攻撃（brute force）で鍵を探索（考えられる組み合わせをすべて試す）
各ステージではコード例とその実行結果を示し、ChatGPTからの解説やヒントを交えながら進めていきます。JavaScriptを使った謎解きの楽しさを味わいながら、文字列操作や配列操作、ループ処理などプログラミングの基礎テクニックも学べる内容になっています。それでは早速、ステージ1からゲームスタートです！
ステージ1: シーザー暗号を解読せよ
暗号化されたメッセージを発見しました。画面には不気味な文字列が表示されています。
UHYHUVH WKH RUGHU突然、頼れる相棒AIのChatGPTがあなたに話しかけます。
ChatGPT: 「この文字列はどうやら簡単な換字式の暗号みたいです。アルファベットがずれて読めなくなっていますね。これはシーザー暗号と呼ばれるものかもしれません。シーザー暗号では文字を一定数シフト（ずらす）させて暗号化します。有名な例ではアルファベットを3文字分ずらす方法が使われます。試しに各文字を3文字ずつ逆方向に戻してみましょう！」
シーザー暗号は古典的な暗号方式で、例えば”A”を3文字シフトすると”D”になります。復号するには逆に戻せばよいわけです。JavaScriptでこの復号を行うには、文字の文字コードを利用すると便利です。各文字をUnicodeの数値に変換し、シフト分だけ数値を増減させてから文字に戻します。英大文字”A”〜”Z”はコード値65〜90の範囲に対応しているので、この範囲内の文字ならシフトを適用し、それ以外（スペースなど）はそのままにします。
では、実際に暗号文を復号するコードを書いてみましょう。シフト数は3と仮定します（アルファベット3文字分ずらす）。
// シーザー暗号を復号する関数
function decodeCaesar(text, shift) {
let result = "";
for (let char of text) {
const code = char.charCodeAt(0);
// A〜Zの場合のみシフトを戻す
if (code >= 65 && code <= 90) {
const newCode = ((code - 65 - shift) % 26 + 26) % 26 + 65;
result += String.fromCharCode(newCode);
} else {
// スペースなどはそのまま
result += char;
}
}
return result;
}
// 暗号文の復号
const cipherText = "UHYHUVH WKH RUGHU";
const decodedMessage = decodeCaesar(cipherText, 3);
console.log("Decoded message: " + decodedMessage);
実行すると次のような結果が得られます。
Decoded message: REVERSE THE ORDER見事に意味のある英文が表示されました！暗号文「UHYHUVH WKH RUGHU」は「REVERSE THE ORDER（順序を逆にせよ）」というメッセージだったのです。
ChatGPT: 「“REVERSE THE ORDER”…『順序を逆にせよ』という意味ですね。どうやら次のヒントの並び順が逆転されているのかもしれません。この指示に従ってみましょう！」
これでステージ1をクリアしました。ハッカーからのメッセージを正しく読み解いたことで、次の手がかりを得ることに成功です。次のステージへ進みましょう！
ステージ2: シャッフルされた配列を元に戻せ
ステージ1で得たメッセージ「REVERSE THE ORDER」を手がかりに、ハッカーの残したデータを調べると文字のリスト（配列）を発見。どうやら文字の順番が入れ替わっていて意味不明になっているようです。
['Y', 'E', 'K']「YEK」という並びだけでは何を意味しているのか分かりません。ところが先ほどの暗号にあった「順序を逆にせよ」の指示を思い出してみると…これは配列を逆順にすれば正しい単語になるかもしれません。
ChatGPT: 「暗号メッセージ通り、この文字配列を逆から読むと正しい順序になるはずです。JavaScriptには配列をその場で反転するreverse()メソッドがあります。実行してみましょう！」
`Array.prototype.reverse()`を使えば配列の要素の順序が手軽に反転できます。また、文字配列を文字列にまとめるには`join()`メソッドが便利です。
// 逆順に並び替え
let hintArray = ['Y', 'E', 'K'];
hintArray.reverse();
const hintWord = hintArray.join(''); // "KEY"
console.log("Hint word: " + hintWord);
実行結果は、
Hint word: KEY「KEY（鍵）」という単語が得られました！次のステージでも、この「KEY」という単語が大きな役割を果たすに違いありません。
ChatGPT: 「『KEY』と出ましたね。ハッカーはこの単語を次のステージのヒントとして仕込んでいたようです。おそらくパスワードにこの単語が関係しているかもしれません。次へ進みましょう！」
これでステージ2クリア。配列操作を使って文字列を正しい順序に戻せました。次の謎へ進みます。
ステージ3: フィルタ処理でパスワード候補を抽出せよ
ハッカーの端末にはいくつかのパスワード候補が保存されており、本物を探し出す必要があるようです。ここでさっき手に入れたヒント「KEY」が役に立つはず。パスワードリストのうち、「key」という文字列を含むものだけを探してみましょう。
候補となるパスワード一覧がこちらです：
["money", "monkey", "honey", "donut", "dragon"]JavaScriptのfilterメソッドと、文字列に特定の部分が含まれているか調べる`includes()`メソッドを使えば、効率よく判別できます。
ChatGPT: 「複数のパスワード候補から、本物をフィルタリングしましょう。’includes’を使えば文字列の一部に’key’が含まれるかどうかを簡単に判定できますよ。」
// パスワード候補リスト
const candidates = ["money", "monkey", "honey", "donut", "dragon"];
const clue = "key";
const filtered = candidates.filter(password => password.includes(clue));
console.log("Possible passwords: " + filtered);
このコードを実行すると、
Possible passwords: monkey「key」を含んでいるのはmonkeyだけでした。つまりこれこそが本物のパスワードというわけです！さっそくログインに使用してみましょう。
ChatGPT: 「候補の中で’key’を含む’monkey’が見つかりました。どうやらこれが正解のパスワードみたいですね。次はいよいよログインして宝物に近づけるはずです。」
フィルタ処理を活用することで、リストから必要な項目を素早く絞り込めました。これにてステージ3クリア。さあ、最後のステージが待っています。
ステージ4: 総当たり攻撃で鍵を探し出せ
正しいパスワード「monkey」を入力して、ハッカーのシステムの最深部に到達しました。そこには宝物が入った金庫があり、開錠には2桁の数字コードが必要と表示されています。ヒントはもう残っていません。しかし、2桁の数字（00〜99）の全パターンなら総当たり攻撃（brute force）が現実的です！
ChatGPT: 「仕方ありませんね…力技でいきましょう。0から99までを全て試す総当たり攻撃です。現実のセキュリティシステムなら回数制限など対策がされていますが、ゲームの世界なので気にせずいきましょう。」
では、JavaScriptのループを使って0〜99の全通りを順番に試し、もし正解にヒットしたらそこで停止するコードを組んでみます。
const correctCode = 42; // 正解のコード(実際は不明)
let foundCode = null;
for (let i = 0; i < 100; i++) {
if (i === correctCode) {
foundCode = i;
console.log("Found the code: " + i);
console.log("Safe unlocked! Treasure found!");
break; // 見つかったらループ終了
}
// 必要なら試行過程を表示してもOK
// console.log("Trying code: " + i);
}
if (foundCode === null) {
console.log("Code not found...");
}
実行すると、42に到達した時点で「Found the code: 42」「Safe unlocked! Treasure found!」と表示され、金庫が開錠されます。これで無事に宝物を入手できました！
ChatGPT: 「0〜99までの総当たり攻撃で42を見事に当てましたね。おめでとうございます！これで全ての謎を解き、宝を手に入れました！」
まとめ：ChatGPTと学ぶコード謎解きの楽しさ
お疲れさまでした！以上で全4ステージをクリアし、ハッカーの謎解き宝探しゲームは無事に完結です。ゲームを通じて以下のテクニックを体験しました：
- シーザー暗号の解読（文字コード変換とループ処理）
- 配列の
reverse()メソッドで順序を入れ替え、join()で文字列に変換 filter()＋includes()でリストから条件に合うパスワードを抽出- ループと
breakを使った総当たり（brute force）での鍵探し
これらは全てJavaScriptの基礎機能ですが、実際に暗号やパズルを解く形で使うと、遊びながら自然とスキルが身に付くのではないでしょうか。ChatGPTにアイデアやコードのヒントをもらいながら進められるので、初心者でも安心して挑戦できます。
今回の宝探しは基礎的な内容ですが、応用すればさらに面白い謎解きを作ることができます。例えば多段階の暗号方式や複雑なパズル、時間制限を設けたリアルなハッキングシナリオなど、アイデア次第で無限に広がります。ぜひ自分なりのコードパズルを作り、周りの人に挑戦してもらってみてください。困った時はまたChatGPTを頼れば、きっと突破の糸口を示してくれるでしょう。
それではHappy Coding & 謎解きライフを楽しんでください。最後までご覧いただき、ありがとうございました！
以上が今回は、ChatGPTを使用して挑戦する。JavaScript宝探しゲームでした。
次回は初心に戻って、Javascrptの関数について紹介します。
