ドリームコードショッピングモールミニゲームクローン

今日はミニゲームって言ってたけど...
ミニネットショップゲームを作りながら、追加で知ったことを整理します.
一部の人にとっては何でもない情報かもしれませんが、
私にとって、このような小さな属性はすべて巨大な新しい世界です!
忘れないように、単独で整理することにしました.
第1編はhtml、cssを主とする.
その後の第2編ではjavascript部分を単独でアップロードしたいだけです.
JAvascript部分は自分で最大限に作成しようとしましたが、これまで100%単独で実現していなかったので、後から2編目に追加してアップロードします.
まず、私が欲しい画像は、上部のボタンをクリックすると
これは、対応する要因に合わせて、ディレクトリを表示できるようにするためです.
例えば、Tシャツを押すとTシャツリストのみが表示され、ズボンはズボンのみが表示され、スカートはスカートのみが表示され、青いボタンは青い服のみが表示されます.

<完成本😎>

作成時に新しく知ったcssプロパティを整理する

1.cursorプロパティ

要素上にマウスカーソルを置いたときに表示するシェイプを指定します.
適用されるプロパティ=>cursor:pointer
pointerは上のダイナミックグラフのようにクリック可能なカーソルを選択するようにヒントを与える
私は今でもcursorの機能が分からないので、わざわざaタグ付きカーソルのタグを追加し、ポインタカーソルを作成する必要はありません.そのため、カーソルと物の空間が別々に遊んだり離れたりすることが多い.
ポインタのほかにも多くの属性があり、ダイナミックマップで持ってきました.
これらは普段ネットサーフィンでよく見かけるカーソルです.

その他の注意事項)MDN

2.属性の変換

要素に回転、スケール、傾斜、移動の効果を与える属性

このアトリビュートを知る前に、手動で1つずつサイズを変更しました.
上の小さなゲームでは、マウスのサスペンション効果をあげたいです.
選択者のpx値とサスペンション時のpx値を受動的に与えた.ははは….
=>transform:scale(1.1、1.1)の値を使用
マウスのサスペンション拡大の効果を簡単に与えることができます.
scaleの値は1がデフォルトで、値は(横、縦)です.
このほかtransformには次の属性があります.

matrix
=transformの値translate、斜体、rotate、scaleを行列(1、0、0、1、0、0、0)または行列として表し、パースビュー以外のすべての要素を一括して適用することができ、便利だが使いにくい.

scale(拡大):拡大/縮小

translate(移動):移動位置

rotate(回転):回転物

斜体(傾斜):傾斜変形

perspection:3 d効果にパース効果を追加

値段をあげるために、知っておくべきことがあるので、整理します.
まず、3 dを構成する最も基本的な軸はx,y,z軸である
図から見ると、要素を観察すると、x軸は横線状で、y軸は縦線状で、z軸はz-indexのように重なる軸である赤い矢印の方向を思い浮かべる.
z-indexのように、-1値は最も下で、0は-1値の上に上書きされます.

他の要因を統合した値はマトリクスですが、概念を把握するには時間がかかる場合があります.
詳細はリンクを掛けます.

3. transition

エレメントのアトリビュート値は、所定の時間内にスムーズに変更できます.
指定された属性値は次のとおりです.

transition:すべてのtransitionプロパティを使用して1行にスタイルを設定

transition-property:要素に追加する遷移効果を設定

transition-dioduration:変換効果の持続時間を設定

transion-timen-function:変換効果の1時間あたりの速度を設定

transition-timer:切替が有効になるまで遅延時間を設定

上では、変換を使用してサイズに影響します.
これを利用してフラグに変換する時間が悪く、効果がありました.

4. overflow

要素の内容が大きすぎて要素のブロックフォーマットの脈絡に一致しない場合の処理方法を指定します.

=>リスト部分が多すぎると、overflow-y:スクロールプロパティを付与してリスト内のスクロールを作成するために、Webページ全体をスクロールする必要があるという不便が発生します.

透過値

また、常に同じ背景色を保つために、同じ色に設定したように、プロジェクトと背景色を手動で調整しました.これにより、透明なプロパティ値を使用して背景の透明性を簡単に解消できます.
感じているか、私が必要としている改善)

:根をよりきれいに使う習慣を養う

コードを書く前に、考えずにコードを書くのではなく、計画と構成を効率的に行う方法を考えてからコードを書く

コメント部の情報

など、画像ラベル上のアルファベット情報または複数のラベル上のその他の情報を入力する

改善（1）21.1.21

以前よりJavaScriptに少し(?)もっと馴染みやすくなって、これまで出来なかったミニゲームを思い出したので、急遽エンディングをやり直しました.
もうすぐ5ヶ月が経ちました...😭
復号化されたコード解釈プールから見ると、現在も理解しにくいコードであり、基本的なclassListおよびquerySelector、addEventListenerによって作成されている.JavaScriptが大きく異なることを後で知ったら、もう一度修正すべきです.
完成本は以下の映像です.

和弦は耻ずかしいけど...以下のとおりです.
変数名がちょっと面倒なので、簡単に起きました.(コードが地獄に落ちて、、)

const bluePant = document.querySelector(".blue-pants");
const blueSkirt = document.querySelector(".blue-skirts");
const blueShirt = document.querySelector(".blue-t");
const pinkPant = document.querySelector(".pink-pants");
const pinkSkirt = document.querySelector(".pink-skirts");
const pinkShirt = document.querySelector(".pink-t");
const yellowPant = document.querySelector(".yellow-pants");
const yellowSkirt = document.querySelector(".yellow-skirts");
const yellowShirt = document.querySelector(".yellow-t");

const shirtsButton = document.querySelector(".shirts-button");
const pantsButton = document.querySelector(".pants-button");
const skirtsButton = document.querySelector(".skirts-button");
const blueButton = document.querySelector(".blue-button");
const yellowButton = document.querySelector(".yellow-button");
const pinkButton = document.querySelector(".pink-button");

shirtsButton.addEventListener("click", function () {
  bluePant.classList.add("hide");
  blueSkirt.classList.add("hide");
  pinkPant.classList.add("hide");
  pinkSkirt.classList.add("hide");
  yellowPant.classList.add("hide");
  yellowSkirt.classList.add("hide");

  blueShirt.classList.remove("hide");
  pinkShirt.classList.remove("hide");
  yellowShirt.classList.remove("hide");
});

pantsButton.addEventListener("click", function () {
  blueShirt.classList.add("hide");
  blueSkirt.classList.add("hide");
  pinkShirt.classList.add("hide");
  pinkSkirt.classList.add("hide");
  yellowShirt.classList.add("hide");
  yellowSkirt.classList.add("hide");

  bluePant.classList.remove("hide");
  pinkPant.classList.remove("hide");
  yellowPant.classList.remove("hide");
});

skirtsButton.addEventListener("click", function () {
  blueShirt.classList.add("hide");
  bluePant.classList.add("hide");
  pinkShirt.classList.add("hide");
  pinkPant.classList.add("hide");
  yellowShirt.classList.add("hide");
  yellowPant.classList.add("hide");

  blueSkirt.classList.remove("hide");
  pinkSkirt.classList.remove("hide");
  yellowSkirt.classList.remove("hide");
});

blueButton.addEventListener("click", function () {
  pinkPant.classList.add("hide");
  pinkSkirt.classList.add("hide");
  pinkShirt.classList.add("hide");
  yellowSkirt.classList.add("hide");
  yellowShirt.classList.add("hide");
  yellowPant.classList.add("hide");

  blueSkirt.classList.remove("hide");
  blueShirt.classList.remove("hide");
  bluePant.classList.remove("hide");
});

yellowButton.addEventListener("click", function () {
  pinkPant.classList.add("hide");
  pinkSkirt.classList.add("hide");
  pinkShirt.classList.add("hide");
  blueSkirt.classList.add("hide");
  blueShirt.classList.add("hide");
  bluePant.classList.add("hide");

  yellowSkirt.classList.remove("hide");
  yellowShirt.classList.remove("hide");
  yellowPant.classList.remove("hide");
});

pinkButton.addEventListener("click", function () {
  yellowSkirt.classList.add("hide");
  yellowShirt.classList.add("hide");
  yellowPant.classList.add("hide");
  blueSkirt.classList.add("hide");
  blueShirt.classList.add("hide");
  bluePant.classList.add("hide");

  pinkPant.classList.remove("hide");
  pinkSkirt.classList.remove("hide");
  pinkShirt.classList.remove("hide");
});

後で、JSONとJavaScriptについて詳しく説明し、より簡単に変更できます.