JavaScript でグレイウルフのポットビーティングゲームを実装

JavaScript でグレイウルフのポットビーティングゲームを実装

1. プロジェクト文書

ここに画像の説明を挿入

2. ページレイアウトにHTMLとCSSを使用する

HTML部分

<div class="コンテナ">
        <h1 class="スコア">0</h1>
        <div class="progress"></div>
        <div id="開始">
            <h2>ポットはビッグ・バッド・ウルフの手に</h2>
            <button class="start">ゲームを開始する</button></div>
        <div class="rules">ゲームルール</div>
        <div class="rule">
            <p>ゲームのルール:</p>
            <p>1. ゲーム時間: 60 秒</p>
            <p>2. ハンドスピードで競い、グレイウルフに+10ポイント勝つ</p>
            <p>3. シャオ・フイフイを倒す - 10 ポイント</p>
            <a href="#" rel="external nofollow" class="close">[閉じる]</a>
        </div>
        <div class="mask">
            <h1>ゲームオーバー</h1>
            <button class="reStart">再起動</button>
            <button class="finish">ゲームを終了する</button>
        </div>
        <div id="終了">
            <h2>ポットはビッグ・バッド・ウルフの手に</h2>
            <h3>スコア: <span class="scoreEnd"></span> </h3>
        </div>
    </div>

CSS部分

* {
    マージン: 0;
    パディング: 0;
}

。容器 {
    幅: 320ピクセル;
    高さ: 480ピクセル;
    背景: url("./images/game_bg.jpg") 繰り返しなし 0 0;
    マージン: 50px 自動;
    位置: 相対的;
}

.コンテナ>h1 {
    左マージン: 60px;
}

.コンテナ>.進行状況{
    幅: 180ピクセル;
    高さ: 16px;
    背景: url("./images/progress.png") 繰り返しなし 0 0;
    位置: 絶対;
    上: 66px;
    左: 63px;
}

.コンテナ>#start>h2 {
    上マージン: 180px;
    色: 白;
    テキスト配置: 中央;
}

.コンテナ>#start>.start {
    幅: 150ピクセル;
    行の高さ: 35px;
    テキスト配置: 中央;
    色: 白;
    背景: 線形グラデーション(#E55C3D, #C50000);
    境界線の半径: 20px;
    境界線: なし;
    フォントサイズ: 20px;
    位置: 絶対;
    上: 320px;
    左: 50%;
    左マージン: -75px;
}

.コンテナ>.ルール{
    幅: 100%;
    高さ: 20px;
    背景: #ccc;
    位置: 絶対;
    左: 0;
    下部: 0;
    テキスト配置: 中央;
}

.コンテナ>.ルール{
    幅: 100%;
    高さ: 100%;
    背景: rgba(0, 0, 0, 0.5);
    位置: 絶対;
    左: 0;
    上: 0;
    パディング上部: 100px;
    ボックスのサイズ: 境界線ボックス;
    テキスト配置: 中央;
    表示: なし;
}

.rule>p {
    行の高さ: 50px;
    色: 白;
}

.rule>a {
    色: 赤;
}

.コンテナ>.マスク{
    幅: 100%;
    高さ: 100%;
    背景: rgba(0, 0, 0, 0.5);
    位置: 絶対;
    左: 0;
    上: 0;
    パディング上部: 200px;
    ボックスのサイズ: 境界線ボックス;
    テキスト配置: 中央;
    表示: なし;
}

.mask>h1 {
    色: #ff4500;
    テキストシャドウ: 3px 3px 0 #fff;
    フォントサイズ: 40px;
}

.mask>ボタン{
    幅: 100ピクセル;
    行の高さ: 35px;
    テキスト配置: 中央;
    色: 白;
    背景: 線形グラデーション(#74ACCF, #007DDC);
    境界線の半径: 20px;
    境界線: なし;
    フォントサイズ: 20px;
    位置: 絶対;
    上: 320px;
    残り: 30%
}

.mask>.reStart {
    左マージン: -50px;
}

.mask>.finish {
    左マージン: 80px;
    フロート: 右;
}

#仕上げる {
    色: 白;
    テキスト配置: 中央;
    表示: なし;
    上マージン: 100px;
}

#終了 h2 {
    パディング: 25px;
}

3. JavaScriptを使用して効果を実現する

var begin = document.querySelector('#start');
var h = begin.querySelector('h2');
var start.queryselector( '。start'); .Close '); .QuerySelector('。ScoreEnd ');
    // コンソール.log(123);
    // ボタンを非表示にする Finish.style.display = 'none';
    var fadIndex = this.parentNode;
    fadIndex.style.display = 'なし';
    // プログレスバーの長さを設定します。var progressWidth = 180;
    progressHandler(進行幅);
    var タイマー;
    startAnimation(); // アニメーションが開始されます };
// ルール // console.log(rules);
ルール.onclick = 関数() {
    console.log('ゲームルールをクリックしてください');
    ルール.スタイル.表示 = 'ブロック';
};
// 閉じる close.onclick = function() {
    コンソールログ('閉じる');
    ルール.スタイル.表示 = 'なし';
};
// ゲームを再開する reStart.onclick = function() {
    スコア.innerHTML = 0;
    マスクスタイル表示 = 'なし';
    // コンソールログ(スコア.innerHTML);
    var 進行幅 = 180;
    progress.style.width = '180px';
    progressHandler(進行幅);
    アニメーションを開始します。
};
// ゲーム終了ボタンfinishBtn.onclick = function() {
        マスクスタイル表示 = 'なし';
        終了.スタイル.表示 = 'ブロック';
        scoreEnd.innerHTML += score.innerHTML;
        begin.style.display = 'ブロック';
        h.style.display = 'なし';
        progress.style.width = 180 + 'px';
    }
    //プログレスバー関数 progressHandler(index) {
    // タイマーを設定する var setProgress = setInterval(function() {
        索引 - ;
        progress.style.width = インデックス + "px";
        (インデックス<= 0)の場合{
            clearInterval(setProgress); //タイマーをクリア mask.style.display = 'block';
            stopAnimation(); //アニメーションを停止}
    }, 100);
}
//アニメーションを開始する関数 startAnimation() {
    //画像を保存するための2つの配列を定義します var imgArr = ['./images/h0.png', './images/h1.png', './images/h2.png',
        './images/h3.png'、'./images/h4.png'、'./images/h5.png'、'./images/h6.png'、
        './images/h7.png'、'./images/h8.png'、'./images/h9.png'
    ];
    var imgArr2 = ['./images/x0.png', './images/x1.png', './images/x2.png',
        './images/x3.png'、'./images/x4.png'、'./images/x5.png'、'./images/x6.png'、
        './images/x7.png'、'./images/x8.png'、'./images/x9.png'
    ];
    // すべての可能な位置を保存する配列を定義します var arrPos = [{
        左: "98px",
        上: "115px"
    }, {
        左: "17px",
        上: "160px"
    }, {
        左: "15px",
        上: "220px"
    }, {
        左: "30px",
        上: "293px"
    }, {
        左: "122px",
        上: "273px"
    }, {
        左: "207px",
        上: "295px"
    }, {
        左:「200px」、
        上: "211px"
    }, {
        左: "187px",
        上: "141px"
    }, {
        左:「100px」、
        上: "185px"
    }];
    // 画像を作成します var imgs = document.createElement('img');
    imgs.setAttribute('class', 'wolfImages');
    //画像のランダムな位置 var posIndex = Math.round(Math.random() * 8);
    //画像の表示位置を設定します。imgs.style.position = 'absolute';
    imgs.style.left = arrPos[posIndex].left;
    imgs.style.top = arrPos[posIndex].top;
    // コンソールログ(img.style.left);
    // 配列型をランダムに取得します var imgType = Math.round(Math.random()) == 0 ? imgArr : imgArr2;
    // 画像の内容を 0 番目から 5 番目までに制限するように設定します。window.index = 0;
    ウィンドウのインデックス終了 = 5;
    タイマー = setInterval(() => {
        if (インデックス > インデックス終了) {
            画像を削除します。
            タイマーの間隔をクリアします。
            アニメーションを開始します。
        }
        imgs.setAttribute('src', imgType[index]);
        インデックス++;
    }, 400);
    //画像を追加しますcontainer.appendChild(imgs);
    //スコアscoreEverySum(imgs);

}
// スコア統計関数 scoreEverySum(e) {
    e.onclick = 関数() {
        // 画像の内容を 5 番目から 9 番目までに制限するように設定します。window.index = 5;
        ウィンドウのインデックス終了 = 9;
        // 現在クリックされている画像のパスを取得します。 var src = this.getAttribute('src');
        // 画像のアドレスに基づいて判断します // クリックされた画像の種類に基づいてスコアを増減します if (src.indexOf("h") >= 0) {
            スコア.innerHTML = parseInt(スコア.innerHTML) + 10;
        } それ以外 {
            スコア.innerHTML = parseInt(スコア.innerHTML) - 10;
        }
        e.onclick = null
    }
}
//アニメーションを停止する関数 stopAnimation() {
    var img = document.querySelector('.wolfImages');
    コンソールにログ出力します。
    画像を削除します。
    タイマーの間隔をクリアします。
}

4. レンダリング

スタート画面

ここに画像の説明を挿入

終了インターフェース

ここに画像の説明を挿入

これで、JavaScript でポットビーティング グレイ ウルフ ゲームを実装する記事は終了です。より関連性の高い js ポットビーティング グレイ ウルフ コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • ブロック崩しゲームを実装するための JavaScript (完全なソースコード付き)
  • 航空機戦争ゲームを実現するためのjs
  • ジャンプゲームを実現するためのjs
  • フリップカードゲームを実現するjs
  • スネークゲームを実現する js (壁を追加)
  • スネークゲームを実装するためのJavaScript

<<:  MySQLのストレージエンジンの詳細な説明

>>:  Nginx サーバーで URL リンクを設定する方法

推薦する

Vueはリストのシームレスなスクロールを実装します

この記事の例では、リストのシームレスなスクロールを実現するためのvueの具体的なコードを参考までに共...

VMware 仮想マシン ubuntu18.04 インストール チュートリアル

インストール手順1. 仮想マシンを作成する 2. [カスタム(詳細)]を選択し、[次へ]をクリックし...

HTML で vue-router を使用するサンプル コード

vue と vue-router の紹介 <script src="https://...

H5 WeChatパブリックアカウント認証を実装するための簡単な手順

序文昨日、h5 WeChat認証の実装が必要なプロジェクトがありました。したがって、この機能を完了す...

CSS クロスフェード() を使用して半透明の背景画像効果を実現するサンプルコード

1. 要件の説明特定の要素については、背景background-imageを半透明にしたいが、テキス...

vue.js ルーターのネストされたルートの実例

目次序文Vue CLI での設定基本コードVueルーターの登場ネストされたルートの設定要約する序文V...

Dockerネットワーク作成に--subnetを追加した後の問題を解決する

Docker ネットワークの作成に –subnet を追加した後、docker network ls...

MySQL の group by に関する簡単な説明

目次1. はじめに2. ユーザーテーブルを準備する2.1 グループ化ルール2.2 グループの使用2....

JavaScript を使用して動的な QQ 登録ページを作成する

目次1. はじめに1. 基本レイアウト2. 写真を自動的に切り替える3. コンテンツを追加する4. ...

Linuxでmore、less、catコマンドを使用してファイルの内容を表示します

Linux では、cat、more、less の各コマンドを使用してファイルの内容を表示できます。c...

Dockerイメージの圧縮と最適化操作

Docker が今日非常に人気がある理由は、主にその軽量性、迅速な展開、およびリソースの利用にありま...

同じ IP のアクセス頻度を制限するように nginx を設定する方法

1. nginx.conf の http{} に次のコードを追加します。 limit_conn_zo...

MySQL でタイムゾーンを表示および変更する方法

今日、プログラムが間違った時刻を挿入し、フィールドがデフォルト値 CURRENT_TIMESTAMP...

jsは双方向データバインディング(アクセサ監視)を実現します

この記事の例では、双方向データバインディングを実現するためのjsの具体的なコードを参考までに共有して...