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 を応援していただければ幸いです。

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