じゃんけん（ブラウザゲーム）開発日誌3日目

じゃんけんの無料ブラウザゲームの開発三日目です。

前回の内容はこちらです。

今回の内容はこちらです。

じゃんけんゲーム

結果画面に使用したイラストはこちらです。

勝ち

負け

引き分け

今回の作成にあたり、HTMLコード内でJavaScriptによる画像ファイルパスを変数化して指定するコードを生成させました。

プロンプトはこちらです。

javascriptで、画像のパスの値を変数としてscriptで指定して、HTML側で与えられたJSの変数を受け渡して指定した画像を出力するJSのscriptを含んだHTMLコードを書いてください。
プロンプト

回答はこちらです。

もちろんです。以下に、JavaScriptで画像のパスを変数として指定し、その変数をHTMLで参照して特定の画像を表示するHTMLコードの例を示します。

この例では、JavaScriptでimagePathという変数に画像のパスを設定し、HTMLのタグのsrc属性でこの変数を使用しています。

このコードでは、imagePath変数に画像のパスを設定し、document.getElementByIdを使用してHTMLのタグを取得し、そのsrc属性にimagePath変数の値を設定しています。このようにすることで、指定した画像をウェブページに表示できます。
GPT-4

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>画像表示の例</title>
</head>
<body>
    <!-- 画像を表示するためのタグ -->
    <img id="imageElement" src="" alt="画像がここに表示されます">

    <script>
        // JavaScriptで画像のパスを変数に設定
        var imagePath = 'path_to_your_image.jpg'; // ここに画像のパスを設定

        // HTMLのimgタグに画像のパスを設定
        document.getElementById('imageElement').src = imagePath;
    </script>
</body>
</html>

AIによるコーディングでの生産性向上を実感した貴重な経験でした。

非常に楽しい週末（金曜日）の深夜の過ごし方でした。

次回は、じゃんけんゲームを応用して、囚人のジレンマゲームの実装を行います。