ホワイトボードを踏まないようにするゲームを実装するための HTML+CSS+JS

ホワイトボードを踏まないようにするゲームを実装するための HTML+CSS+JS

背景

皆さんは「Don't Step on the Whiteboard」というゲームをプレイしたことがあると思います。これは HTML5 をベースに構築されたシンプルなゲームです。PC とモバイル端末の両方で実行でき、複数のプラットフォームに適応できます。今日はネイティブ JS と JQuery を使用して、このゲーム「Don't Step on the Whiteboard」を構築します。

1. 思考分析

ページ全体は、縦横比が約 3:2 の大きな長方形です。ゲームが始まると、白いボードが次々と落ちてきます。すると、黒いボードが 1 つ、白いボードが 3 つ、合計 4 つのボードが並びます。ボードのクリック イベントがバインドされ、次に色が決定されます。白の場合はゲーム終了 (ゲームオーバー)、それ以外の場合はプレイヤーのポイントが 1 増加します。

2. ページ構成

2.1 HTML レイヤー

<div class="wrapper">
        <div id="go">
            <a href="javaScript:void(0)" id="go">ゲーム開始</a>
        </div>
        <div id="メイン">
</div></div>

2.2 CSS レイヤー

スタイルを設定する前に、まず以下に示すように一般的な構造を理解する必要があります。

HTML5 ベースのホワイトボードを踏まないようにするゲーム_yyds Dry Goods Inventory_02

グローバルスタイル設定

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

ラッパースタイル設定

.ラッパー{
    マージン:150px 自動;
    幅:400ピクセル;
    高さ:600px;
    境界線:1px実線 #ccc;
    位置: 相対的;
    オーバーフロー: 非表示;
}

ラッパーの下のGo設定

#行く{
    幅:100%;
    位置: 絶対;
    トップ:0;
    テキスト配置: 中央;
    zインデックス:99;
}

ゲーム開始ボタンスタイル

#行く{
    表示:ブロック;
    高さ:100px;
    幅:400ピクセル;
    色:シアン;
    背景色: #000000;
    テキスト装飾: なし;
    border-bottom:3px 破線 #eee;
    フォントサイズ:60px;
    フォントの太さ:600;
}

メイン(ブロック)スタイル

#主要{
    幅:400ピクセル;
    高さ:600px;
    位置: 相対的;
    上:-150px;
    /* 境界線:1px 黒一色; */
}

作成されたブロックの各行のスタイルを設定します

。行{
    幅:400ピクセル;
    高さ:150px;
}

4つの小さな正方形を一列に並べたスタイル

.行div{
   幅:99px;
   高さ:149px;
   左境界線:1px 実線 #222;
   ボーダー下部:1px 実線 #222;
   フロート: 左;
   カーソル: ポインタ;
}

スタイルを設定すると、おおよそのインターフェースは次のようになります。

「ホワイトボードを踏まないでください」という HTML5 ベースの小さなゲーム

インターフェースのスタイルが比較的シンプルであることがわかります。私たちのアイデアは、ゲーム開始ボタンをクリックするとブロックが自動的に着地するため、画面は比較的空っぽになります (一時的に)。

2.3 JSレイヤー

js レイヤーは主に、ブロックの生成やブロックの移動などの動的な効果を生み出すためにページを制御するために使用されます。

2.3.1 要素を取得する

var main = document.getElementById('main'); // DOM 要素を取得します。 var go = document.getElementById('go'); 
var speed = 5, num = 0, timer, flag = true; // 初期変数を設定します var colors = ['red', 'green', 'black', 'blue']; // 色を格納する配列を設定します

ここで色を格納する配列は白である必要はありません。初期化された各ブロックは背景色を設定せず、デフォルトで白になります。

2.3.2 div要素の各行を作成する

前に述べたように、行は 4 つのブロックで構成され、比率は大きなブロックと同じです (3:2)。長さと幅は次のとおりです: {width: 100px; height: 150px};

関数cDiv() {
    var oDiv = document.createElement('div'); // 乱数を取得し、各行のランダムな div を見つけてその色を設定します。 var index = Math.floor(Math.random() * 4);
    
    oDiv.setAttribute('class', 'row'); // 行クラス名を設定します for (var j = 0; j < 4; j++) { // for ループは 4 つの div の行を生成します
        var iDiv = document.createElement('div');
        oDiv.appendChild(iDiv); //各行に小さなdivを挿入します}
    
    if (main.childNodes.length == 0) { // 親に子要素があるかどうかに基づいて、新しく生成された行を挿入します main.appendChild(oDiv); // 親が空の場合は、直接挿入します } else {
        main.insertBefore(oDiv, main.childNodes[0]); // 親に要素がある場合は、新しく生成された行を既存の行数の先頭に挿入します} 
    var clickDiv = main.childNodes[0].childNodes[index]; // 乱数に従って行に色付きのdivを設定します
    clickDiv.setAttribute('class', 'i'); // この要素のクラス名をクリックするマークとして設定します clickDiv.style.backgroundColor = colors[index]; // 同時に背景色も設定します}

2.3.3 クリックイベント関数のカプセル化

関数bindEvent() {
    main.addEventListener('click', function (event) { // main にクリック イベントを追加しますif (flag) { // フラグ値に基づいてクリック可能かどうかを判断しますvar tar = event.target; // クリックのソース イベントを取得しますif (tar.className == 'i') { // クリックされたブロックが色付きかどうかを判断しますtar.style.backgroundColor = '#bbb'; // 背景色を変更しますtar.classList.remove('i'); // クラス名を削除しますnum++; // Count++
            } それ以外 {                
                alert('ゲームオーバー、スコア: ' + num); // 白いブロックをクリックすると、ゲームオーバーになります clearInterval(timer);
                フラグ = false;
            }            
            if (num % 10 == 0) { // 現在のスコアが10の倍数の場合、speed++
                スピード++;
            }
        }
    })
}

2.3.4 ブロック移動関数のカプセル化

関数move() {
    タイマーの間隔をクリアします。 
    timer = setInterval(function () { // タイマーを設定します var step = parseInt(main.offsetTop) + speed; // 上の値を使用してメイン領域を移動します main.style.top = step + 'px';
        if (parseInt(main.offsetTop) >= 0) { // メイン領域が表示領域に移動した場合は、要素の新しい行を作成します cDiv();
            main.style.top = '-150px'; // メイン領域も表示領域の上に移動}
        var len = main.childNodes.length; // メイン領域の行数を取得します。if (len == 6) { // メイン領域の行数が 6 の場合、表示領域の 4 行の上下に新しい行が生成されます。for (var i = 0; i < 4; i++) { // 最後の行の各 div をトラバースします。
                
                if (main.childNodes[len - 1].children[i].classList.contains('i')) { // クリックされていないゲームオーバーを含むものがある場合 alert('ゲームオーバー、スコア: ' + num);
                    タイマーの間隔をクリアします。
                    flag = false; // ゲーム終了後は再度クリックできません}
            }
            
            main.removeChild(main.childNodes[len - 1]); // 表示後に各行を削除します}
    }, 20)
    bindEvent(); // クリックイベント}

関数の最初の文は clearInterval(timer); で、複数のタイマーが開かれるのを防ぎます。

HTML5 ベースのホワイトボードを踏まないようにするゲーム_yyds Dry Goods Inventory_04

2.3.5 ゲーム開始

// 開始ボタンをクリックして移動を開始し、各行の要素を作成します。 function clickStart() {
    go.addEventListener('click', 関数() {
        go.style.display = 'なし';
        動く();
    });
}
クリックスタート();

一般的な効果は図に示されています。

HTML5_native js_05 をベースにしたホワイトボードを踏まないようにするゲーム

これは、HbuilderX の組み込みブラウザを使用したインターフェースです。ゲーム終了エフェクトは上図に示されています。

結論

この記事では、ネイティブ js を使用して、ホワイトボードを踏まないシンプルなタッチ スクリーン ゲームを作成し、ゲームにいくつかの簡単な変更を加えます。一般的には、まずゲームインターフェースの全体的な構造とスタイルを設定し、次にネイティブ js を使用してブロックの移動とクリックを制御し、最後に適切で完全なインターフェース効果を提示する必要があります。興味のある方は試してみてください。

html+css+js を使用して「ホワイトボードを踏まないでください」ゲームを実装する方法に関するこの記事はこれで終わりです。html+css+js の「ホワイトボードを踏まないでください」ゲームに関するその他の関連コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • js html5 css テトリス ゲームの再登場
  • ブロック崩しゲームを実現する JavaScript HTML5 キャンバス

<<:  CentOS7にNginxを素早くインストールする方法を教えます

>>:  iframe なしの div ネスト HTML

推薦する

MySQL のロック待機とデッドロック問題の分析

目次序文: 1. ロック待機とデッドロックを理解する2. 現象の再発と治療要約:序文: MySQL ...

MySQLアラームの詳細な分析と処理

最近、あるサービスにアラームが発生し、耐えられなくなっています。アラーム情報は次のとおりです。メトリ...

MySQL 8.0 で列を素早く追加する方法

序文: MySQL 8.0 では高速な列追加がサポートされ、数秒で大きなテーブルにフィールドを追加で...

CenterOS7 インストールおよび構成環境 jdk1.8 チュートリアル

1. まずcenterosに付属のJDKをアンインストールします rpm-qa|grepopenjd...

JavaScript オブジェクトを比較する 4 つの方法

目次序文参考比較手動比較浅い比較徹底比較要約する序文JavaScript でプリミティブ値を比較する...

Dockerでイメージ情報を表示する方法

この記事では、Dockerでイメージ情報を表示する方法を学ぶ必要があります。 1. imagesコマ...

CSS3は赤い封筒を振る効果を実現します

赤い封筒の揺れ効果を実現するには要件があります。これまでやったことがないので、記録しておきます。ヘヘ...

ウェブデザインには目的、アイデア、思考、そして粘り強さがなければならない

<br />はじめに:このアイデアは、数日前に上級ウェブデザインの次の記事を考えていると...

MySQL における冗長インデックスと重複インデックスの違い

MySQL では、1 つの列に複数のインデックスを作成できます。意図的であるかどうかにかかわらず、M...

MySQL 8.0.15 バージョンのインストールチュートリアル Navicat.list への接続

落とし穴1. ネット上の多くのチュートリアルでは環境変数を設定するファイル名はmy.iniと書いてあ...

ボタンのタイプが送信として指定されていません。ボタンをクリックしても、指定された URL にジャンプしません。

現在、プロジェクトの要件により、フォームの送信を制御し、送信前にデータを検証および処理するために j...

js のプロトタイプ、プロトタイプ オブジェクト、プロトタイプ チェーンの包括的な分析

目次プロトタイプを理解するプロトタイプオブジェクトを理解するインスタンスプロパティとプロトタイププロ...

Vueのアイデアを使ってストレージをカプセル化する方法

目次背景関数目的アイデアの源成し遂げるセット得るプロパティの削除拡張機能を禁止するもっている要約する...

JavaScript の for ループと二重 for ループの詳細な説明

forループfor ループは配列の要素をループします。文法: for (初期化変数; 条件式; 繰り...