このコードは、簡単なじゃんけんゲームを作るためのものだよ！じゃんけんゲームは、「グー、チョキ、パー」のどれを出すかで勝負する遊びだよ。

最初に、ホームページを作っているんだ。ホームページには、グー、チョキ、パーの３つのボタン（それぞれの絵）があるよ。君が好きなボタンをクリックすると、コンピュータもランダムでグー、チョキ、パーを出すよ。

選んだ結果、ユーザーとコンピュータのどちらが勝ったかを教えてくれるよ！同じ手を出すと引き分けで、違う手を出すと勝ち負けが決まるんだ。

このコードでは、ユーザーが選んだ手とコンピュータが選んだ手を比べて、勝敗を決めているんだ。楽しんで遊んでね！

初めに

HTML CSS JavaScriptでつくる簡単なゲームを作成してみました。

Visual Studi Codeなどに貼り付けてから保存してお使いください。

画像も、rock.png、paper.png、scissors.pngとして保存してください。

それぞれの絵をクリックすると、コンピューターが選んだ絵と比べてじゃんけんの結果を示します。

解説

HTML
CSS
JavaScript
仕組み

HTML

<!DOCTYPE html>: HTML5の文書型宣言を指定しています。
<html lang="en">: HTML文書の言語を指定しています。
<head>: ページのメタ情報やスタイルの定義が含まれます。
<style>: ページのスタイルを指定しています。
<title>: ページのタイトルを指定しています。
<body>: ページの実際のコンテンツが含まれます。

CSS

body: フォントとテキストの配置を指定しています。
#resultおよび#choices img: 結果と画像の表示スタイルを指定しています。

JavaScript

userChoice関数: 画像がクリックされたときに呼び出され、ユーザーの選択とコンピュータのランダムな選択に基づいて結果を計算し、表示します。
ユーザーが選んだものとコンピュータが選んだものを比較して、勝者を判定しています。

仕組み

ユーザーは画像（rock、paper、scissors）をクリックして選択します。
userChoice関数が呼び出され、コンピュータがランダムに選んだものと比較して勝敗を判定します。
判定結果が#result要素に表示されます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: 'Arial', sans-serif;
            text-align: center;
        }

        #result {
            font-size: 24px;
            margin-top: 20px;
        }

        #choices img {
            width: 100px;
            margin: 10px;
            cursor: pointer;
        }
    </style>
    <title>Rock Paper Scissors Game</title>
</head>
<body>

    <h1>Rock Paper Scissors</h1>

    <div id="choices">
        <img src="rock.png" alt="Rock" onclick="userChoice('rock')">
        <img src="paper.png" alt="Paper" onclick="userChoice('paper')">
        <img src="scissors.png" alt="Scissors" onclick="userChoice('scissors')">
    </div>

    <div id="result">Choose your move!</div>

    <script>
        function userChoice(choice) {
            var choices = ['rock', 'paper', 'scissors'];
            var computerChoice = choices[Math.floor(Math.random() * 3)];

            document.getElementById('result').innerText = "You chose: " + choice + ", Computer chose: " + computerChoice;

            if (choice === computerChoice) {
                document.getElementById('result').innerText += "\nIt's a tie!";
            } else if (
                (choice === 'rock' && computerChoice === 'scissors') ||
                (choice === 'paper' && computerChoice === 'rock') ||
                (choice === 'scissors' && computerChoice === 'paper')
            ) {
                document.getElementById('result').innerText += "\nYou win!";
            } else {
                document.getElementById('result').innerText += "\nYou lose!";
            }
        }
    </script>

</body>
</html>