JavaScript でじゃんけんゲームを書く

この記事では、JavaScriptでじゃんけんゲームを書くための具体的なコードを参考までに紹介します。具体的な内容は以下のとおりです。

HTMLコード:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>JS</title>
 
    <script rel="script" src="js1.js"></script>
 
    <スタイル>
        #Div {
            幅: 1000ピクセル;
            高さ: 700ピクセル;
            位置: 相対的;
            境界線スタイル: 溝;
            境界線の幅: 2px;
        }
        /*推測ゲームエリア*/
        ＃エリア {
            幅: 300ピクセル;
            高さ: 200px;
            背景色: #011bfd;
            位置: 絶対;
            上位: 20%
            左: 50%;
            変換: translate(-50%, -50%);
        }
        /*表示領域*/
        ＃結果 {
            幅: 400ピクセル;
            高さ: 50px;
            背景色: #f7f8fd;
            テキスト配置:中央;
            フォントサイズ:30px;
            位置: 絶対;
            上位: 50%;
            左: 50%;
            変換: translate(-50%, -50%);
        }
        /*カードストーン*/
        ＃石
            幅: 100ピクセル;
            高さ: 150px;
            背景色: #011bfd;
            位置: 絶対;
            上位: 80%
            残り: 30%
            変換: translate(-50%, -50%);
        }
        /*カードはさみ*/
        #はさみ {
            幅: 100ピクセル;
            高さ: 150px;
            背景色: #011bfd;
            位置: 絶対;
            上位: 80%
            左: 50%;
            変換: translate(-50%, -50%);
        }
        /*カードクロス*/
        #布 {
            幅: 100ピクセル;
            高さ: 150px;
            背景色: #011bfd;
            位置: 絶対;
            上位: 80%
            左: 70%;
            変換: translate(-50%, -50%);
        }
    </スタイル>
 
</head>
<本文>
 
<div id="Div">
    <div id="エリア"></div>
 
    <div id="結果"></div>
 
    <div id="stone" draggable="true"></div>
    <div id="はさみ" draggable="true"></div>
    <div id="布" ドラッグ可能="true"></div>
 
</div>
 
<script rel="script">
    見せる（）;
</スクリプト>
 
</本文>
</html>

JavaScript コード:

/***
 面積 面積 石 = 石 > グー < 紙 はさみ はさみ < グー = はさみ > 布 > グー < 紙 はさみ = 布 ***/
 
/***
 ビューのデータ型: Object.prototype.toString.call(variable)
 部分を更新: window.location.reload('#area');
 ***/
 
 
関数Init(){
    // HTML ID を取得してバインドし、HTML 形式 (HTMLDivElement) を返します。
    定数 area = document.querySelector("#area");
    const 結果 = document.querySelector("#results");
    const stone = document.querySelector("#stone");
    const はさみ = document.querySelector("#はさみ");
    const 布 = document.querySelector("#布");
 
    //ドラッグされたカードを定義するlet ondragstart_ID = null
    //じゃんけん型は配列として記述されます const random_Action = ['stone', 'scissors', 'cloth'];
    //配列内の配列のキーをランダムに取得します。const random_Digital = Math.round(Math.random() * (random_Action.length - 1) + 1);
    // 配列内のキー値を取得します。たとえば、random_Action 配列 (random_Action[0]) 内の 'stone' などです。
    定数 random_Value = random_Action[random_Digital-1];
 
    //じゃんけん型メソッド関数属性（パラメータ）を記述する{
        //マウスが動くと（じゃんけんカードが大きくなる）
        パラメータ.onmouseover = 関数() {
            this.style.height = '200px';
            this.style.width = '150px';
        }
        //マウスが外に出ると（じゃんけんカードは初期状態に戻ります）
        パラメータ.onmouseleave = 関数() {
            this.style.height = '150px';
            this.style.width = '100px';
        }
        //要素がドラッグを開始すると（じゃんけんカードが透明になります）
        パラメータ.ondragstart = 関数() {
            this.style.opacity = '0.3';
            ondragstart_ID = パラメータID
        }
    }
    //じゃんけん型のオブジェクトを作成し、じゃんけんオブジェクトの属性に値を割り当てます this.show_attribute = function () {
        属性(石)
        属性(はさみ)
        属性(布)
    }
    //カードドラッグイベントを記述する this.overout = function () {
        //カードがエリア（じゃんけんエリア）にドラッグされたとき area.ondragenter = function () {
            // 乱数 random_Digital を判断します。これは null と等しくなることはありません
           ランダムデジタルの場合 !== null) {
               // ドラッグされたカードを決定する if (ondragstart_ID === 'stone') {
                   //どの乱数がswitch(random_Value)に等しいかを判断する{
                       ケースストーン.id:
                           results.innerHTML = 'stone = stone、draw! ';
                           壊す;
                       ケースはさみ.id:
                           results.innerHTML = '石 > はさみ、あなたの勝ちです! ';
                           壊す;
                       ケースクロス.id:
                           results.innerHTML = '石 < 布、負けです! ';
                           壊す;
                       デフォルト：
                           //更新 window.location.reload();
                   }
                   //要素のドラッグが終了（じゃんけんカードが初期状態に戻る）
                   stone.ondragend = 関数 () {
                       this.style.opacity = '1';
                   }
                   //1秒後に更新する setTimeout(function (){
                       ウィンドウの位置を再読み込みします。
                   }, 1000);
                   //ドラッグされたカードを決定する}else if (ondragstart_ID === 'scissors') {
                   //どの乱数がswitch(random_Value)に等しいかを判断する{
                       ケースストーン.id:
                           results.innerHTML = 'ハサミ < 石、負けです! ';
                           壊す;
                       ケースはさみ.id:
                           results.innerHTML = 'はさみ = はさみ、描いてください! ';
                           壊す;
                       ケースクロス.id:
                           results.innerHTML = 'ハサミ > 布、あなたの勝ちです! ';
                           壊す;
                       デフォルト：
                           //更新 window.location.reload();
                   }
                   //要素のドラッグが終了（じゃんけんカードが初期状態に戻る）
                   はさみ.ondragend = 関数 () {
                       this.style.opacity = '1';
                   }
                   //1秒後に更新する setTimeout(function (){
                       ウィンドウの位置を再読み込みします。
                   }, 1000);
                   //ドラッグされたカードを判断する}else if (ondragstart_ID === 'cloth') {
                   //どの乱数がswitch(random_Value)に等しいかを判断する{
                       ケースストーン.id:
                           results.innerHTML = '布 > 石、あなたの勝ちです! ';
                           壊す;
                       ケースはさみ.id:
                           results.innerHTML = '布 < はさみ、負けです! ';
                           壊す;
                       ケースクロス.id:
                           results.innerHTML = 'cloth = 布、描画します! ';
                           壊す;
                       デフォルト：
                           //更新 window.location.reload();
                   }
                   //要素のドラッグが終了（じゃんけんカードが初期状態に戻る）
                   布.ondragend = 関数 () {
                       this.style.opacity = '1';
                   }
                   //1秒後に更新する setTimeout(function (){
                       ウィンドウの位置を再読み込みします。
                   }, 1000);
               }
           }
        }
    }
}
 
//関数を呼び出す function show() {
    show_html を新しい Init() に追加します。
    show_html.show_attribute()
    show_html.overout()
}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: