Javascriptでじゃんけんゲームを作る | タナビボ~田中太郎の備忘録~

はじめに
じゃんけんゲームを作る
動作確認
まとめ

はじめに

Javascriptを使って簡素なじゃんけんゲームを作ります。

じゃんけんゲームを作る

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>じゃんけんしよう</title>
</head>
<body>
    <div id="my_select"><br></div>

    <div id="status">じゃん・けん・・</div>

    <div>
        <input type="submit" value="ぐー" onclick="btnclick(0)">
        <input type="submit" value="ちょき" onclick="btnclick(1)">
        <input type="submit" value="ぱー" onclick="btnclick(2)">
    </div>

    <div>
        <input type="submit" value="りせっと" onclick="rst()">
    </div>

    <script src="work.js" charset="Shift_JIS"></script>
  </body>
</html>

work.js

const status_id = document.getElementById("status");
const my_select_id = document.getElementById("my_select");

function btnclick(your_select){
    var random = Math.floor(Math.random()*3);
    if (random == 0) {
        status_id.innerText = judge(random, your_select);
        my_select_id.innerText = "ぐー";
    } else if (random == 1) {
        status_id.innerText = judge(random, your_select);
        my_select_id.innerText = "ちょき";
    } else {
        status_id.innerText = judge(random, your_select);
        my_select_id.innerText = "ぱー";
    }
}

function judge(my_select, your_select){
    if (my_select == your_select) {
        return "あいこ"
    } else if (my_select == 0 && your_select == 1) {
        return "まけ"
    } else if (my_select == 1 && your_select == 2) {
        return "まけ"
    } else if (my_select == 2 && your_select == 0) {
        return "まけ"
    } else {
        return "かち"
    }
}

function rst(){
    status_id.innerText = "じゃん・けん・・"
    my_select_id.innerText = "\n";
}

動作確認

じゃん・けん・・

まとめ

Javascriptで簡素なじゃんけんゲームを作成しました。