ホワイトボードを踏まないようにするゲームを実装するための 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

推薦する

CSS3 マウスホバー遷移ズーム効果

以下は、純粋な CSS で記述された画像マウスホバーズーム効果です。実際、基本原理は非常に単純です。...

CSS の高さの崩壊問題の解決

1. 崩壊度が高いドキュメント フローでは、親要素の高さはデフォルトで子要素によって拡張されます。つ...

W3C チュートリアル (6): W3C CSS アクティビティ

スタイル シートは、ドキュメントの表示方法、発音方法、または入力方法を記述します。スタイル シートは...

VUE 入門 イベント処理の学習

目次1. 関数バインディング2. パラメータと$eventを使用する3. 1つのイベントに複数の関数...

SQLはROW_NUMBER() OVER関数を使用してシーケンス番号を生成します。

構文: ROW_NUMBER() OVER(PARTITION BY COLUMN ORDER BY...

CSSを使用してHTMLテキストボックス内のテキストの垂直方向の中央を制御する

Text の height 属性が定義されている場合、Text に入力されたテキストは垂直方向に中央...

ログインボックスのメールプロンプトを実装するネイティブJS

この記事では、登録またはログイン時に電子メール アドレスを入力する際のドロップダウン プロンプトのネ...

画像マーキー効果を実現するネイティブJS

今日は、ネイティブ JS で実装された画像マーキー効果を紹介します。効果は次のとおりです。 実装され...

vagrant+virtualBoxで仮想マシンを構築する方法

1. はじめにVagrant は、仮想マシン (VirtualBox) を構築および管理するためのツ...

Nginx で IP と IP 範囲をブロックする方法

前面に書かれたNginx は単なるリバース プロキシおよび負荷分散サーバーではなく、電流制限、キャッ...

CSS ペイント API: CSS のような描画ボード

1. Canvas画像をCSS背景画像として使用するCSS ペイント API は、Canvas キャ...

デプロイから基本操作までDocker Swarm

Docker SwarmについてDocker Swarm は次の 2 つの部分で構成されます。 D...

CSS でよく発生する問題の整理 (ロゴのハッキング/コンテナの固定/画像の垂直方向の中央揃え)

1. IEブラウザモードハックロゴ1. CSSハックロゴコードをコピーコードは次のとおりです。 ie...

Linux MySQL ルートパスワードを忘れた場合の解決方法

MySQL データベースを使用する際、何らかの理由で長期間 MySQL にログインしていない場合、ま...

Linux telnetコマンドの使用

1. はじめにtelnet コマンドは、リモート ホストにログインするために使用されます。これは、T...