ショッピングモールの小さいゲームのクローンコード

8024 ワード
テキストリンク
DREAMコードとEllyの講義を一緒に作りましょう!

ショッピングモールのミニゲームのクローンコードを直接試し、エリーの講義を聞いて比較し、修正のメリットを集中的に検討した.
  • html
  • id、class、dataのプロパティは便利です.
  • 画像を挿入する場合は、画像自体に画像の意味がある場合にimgタグを書き込み、背景のみの場合は背景-画像に入れてください.
  • css
  • css変数は色、sizeなどを格納し、使いやすい.
  • jsonファイルを作成し、データを個別に保存します.
  • vsCodeがjsonをきれいにソートした場合、Ctrl+K+Ctrl+F
  • js
  • まずjsファイルに配列[{}]情報を作成し、displayItemsでitemsをパラメータとして使用します.forEach(item=>displayItems(item))はこのように行いますが、後で他の場所で再利用する場合もforEachステップを再実行する必要があるため不便です.授业を闻いた后で、私はどうして意外にも一度に中に入れます.
  • button各ボタンにeventListenerを付けるので、buttonを区別するための配列を作成し、forEachで1つ追加し、講座を聞いた後、event.targetとdatasetを利用するととても*3使いやすくて、とてもきれいです.

    • main

  • loadItems:fetch APIはjsonファイルをインポートし、json形式で応答をグループ化し、items配列をインポートします.
  • items配列はパラメータとしてdisplayItems、setEventListeners関数に渡される
    • loadItems()
  .then(items => {
      displayItems(items);
      setEventListeners(items);
  })
  .catch(console.log);

    branch

  • displayItemsは配列を受け取り、ulにliを作成して表示します.
  • setEventListeners logoをクリックしてdisplayItems関数を実行し、ボタンをクリックしてonButtonClick関数にイベントと配列を渡します.
  • onButtonClickはeventです.target.データセットから必要な情報を取得し、フィルタされた配列をパラメータとしてdisplayItems関数に渡します.(これは全体的な更新であるため、残りの部分を表示せずにフィルタリングして表示する方法もある)

    • img

    var htmlImageElement = new Image(width, height);
const img = document.createElement('img');
  • example <img width="100" height="200" src="picture.jpg"> 
    • var myImage = new Image(100, 200);
myImage.src = 'picture.jpg';
document.body.appendChild(myImage);

    scroll Bar design


    :-webkit-scrollbar:スクロールバー全体
    :-webkit-scrollbar-tumb:スクロールバー
    :-webkit-scrollbar-track:スクロールバー外部
    ul::-webkit-scrollbar {
  width: 10px;
}

ul::-webkit-scrollbar-thumb {
  background-color: black;
  border-radius: 4px;
  background-clip: padding-box;
  border: 2px solid transparent;
}

ul::-webkit-scrollbar-track {
  background-color: gray;
  border-radius: 4px;
}

    🍩fetch API

    const fetchResponsePromise = fetch(resource [, init])
  • resource:アクセスするリソースのURL、Request obj.
  • init(オプション):objは、リクエストに追加するカスタム設定を備えています.method(default:GET)、header、body、modeなどを指定します.
    https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch 
    • function loadItems() {
    return fetch('data/data.json')
    .then(response => response.json())
    .then(json => json.items)
}
    response.text():応答をtext形式に戻します.
    response.json():json形式でグループ化されます.
    response.formData()
    response.blob()
    https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image
    Docker-Composeワンタッチ導入
    Webサイトの再構築-軽量化されたWebサイトアーキテクチャ設計四markdown angular