背景皆さんは「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 レイヤースタイルを設定する前に、まず以下に示すように一般的な構造を理解する必要があります。 グローバルスタイル設定 *{ マージン: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; フロート: 左; カーソル: ポインタ; } スタイルを設定すると、おおよそのインターフェースは次のようになります。 インターフェースのスタイルが比較的シンプルであることがわかります。私たちのアイデアは、ゲーム開始ボタンをクリックするとブロックが自動的に着地するため、画面は比較的空っぽになります (一時的に)。 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); で、複数のタイマーが開かれるのを防ぎます。 2.3.5 ゲーム開始// 開始ボタンをクリックして移動を開始し、各行の要素を作成します。 function clickStart() { go.addEventListener('click', 関数() { go.style.display = 'なし'; 動く(); }); } クリックスタート(); 一般的な効果は図に示されています。 これは、HbuilderX の組み込みブラウザを使用したインターフェースです。ゲーム終了エフェクトは上図に示されています。 結論この記事では、ネイティブ js を使用して、ホワイトボードを踏まないシンプルなタッチ スクリーン ゲームを作成し、ゲームにいくつかの簡単な変更を加えます。一般的には、まずゲームインターフェースの全体的な構造とスタイルを設定し、次にネイティブ js を使用してブロックの移動とクリックを制御し、最後に適切で完全なインターフェース効果を提示する必要があります。興味のある方は試してみてください。 html+css+js を使用して「ホワイトボードを踏まないでください」ゲームを実装する方法に関するこの記事はこれで終わりです。html+css+js の「ホワイトボードを踏まないでください」ゲームに関するその他の関連コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: CentOS7にNginxを素早くインストールする方法を教えます
以下は、純粋な CSS で記述された画像マウスホバーズーム効果です。実際、基本原理は非常に単純です。...
1. 崩壊度が高いドキュメント フローでは、親要素の高さはデフォルトで子要素によって拡張されます。つ...
スタイル シートは、ドキュメントの表示方法、発音方法、または入力方法を記述します。スタイル シートは...
目次1. 関数バインディング2. パラメータと$eventを使用する3. 1つのイベントに複数の関数...
構文: ROW_NUMBER() OVER(PARTITION BY COLUMN ORDER BY...
Text の height 属性が定義されている場合、Text に入力されたテキストは垂直方向に中央...
この記事では、登録またはログイン時に電子メール アドレスを入力する際のドロップダウン プロンプトのネ...
今日は、ネイティブ JS で実装された画像マーキー効果を紹介します。効果は次のとおりです。 実装され...
1. はじめにVagrant は、仮想マシン (VirtualBox) を構築および管理するためのツ...
前面に書かれたNginx は単なるリバース プロキシおよび負荷分散サーバーではなく、電流制限、キャッ...
1. Canvas画像をCSS背景画像として使用するCSS ペイント API は、Canvas キャ...
Docker SwarmについてDocker Swarm は次の 2 つの部分で構成されます。 D...
1. IEブラウザモードハックロゴ1. CSSハックロゴコードをコピーコードは次のとおりです。 ie...
MySQL データベースを使用する際、何らかの理由で長期間 MySQL にログインしていない場合、ま...
1. はじめにtelnet コマンドは、リモート ホストにログインするために使用されます。これは、T...