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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: Nginx サーバーで URL リンクを設定する方法
この記事の例では、リストのシームレスなスクロールを実現するためのvueの具体的なコードを参考までに共...
インストール手順1. 仮想マシンを作成する 2. [カスタム(詳細)]を選択し、[次へ]をクリックし...
vue と vue-router の紹介 <script src="https://...
序文昨日、h5 WeChat認証の実装が必要なプロジェクトがありました。したがって、この機能を完了す...
今日、PHP を学習する場合、当然ながら、まず実行環境をインストールする必要があります。Phpstu...
1. 要件の説明特定の要素については、背景background-imageを半透明にしたいが、テキス...
目次序文Vue CLI での設定基本コードVueルーターの登場ネストされたルートの設定要約する序文V...
Docker ネットワークの作成に –subnet を追加した後、docker network ls...
目次1. はじめに2. ユーザーテーブルを準備する2.1 グループ化ルール2.2 グループの使用2....
目次1. はじめに1. 基本レイアウト2. 写真を自動的に切り替える3. コンテンツを追加する4. ...
Linux では、cat、more、less の各コマンドを使用してファイルの内容を表示できます。c...
Docker が今日非常に人気がある理由は、主にその軽量性、迅速な展開、およびリソースの利用にありま...
1. nginx.conf の http{} に次のコードを追加します。 limit_conn_zo...
今日、プログラムが間違った時刻を挿入し、フィールドがデフォルト値 CURRENT_TIMESTAMP...
この記事の例では、双方向データバインディングを実現するためのjsの具体的なコードを参考までに共有して...