Salangdung_i의 기록

자바스크립트를 이용한 미니 게임 만들기 프로젝트 본문

WEB FRONT END/JavaScript

자바스크립트를 이용한 미니 게임 만들기 프로젝트

Salangdung_i 2021. 10. 29. 13:51
728x90

유튜브에서 드림코딩 엘리의 강의를 보고 온라인쇼핑몰미니게임을 만들어보았다.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>은지 Online Shopping</title>
  <link rel="stylesheet" href="style.css" />
  <script src="src/main.js" defer></script>
</head>
<body>
  <!-- Logo -->
  <img src="img/logo.png" alt="Logo" class="logo">
  <!-- Buttons -->
  <section class="buttons">
    <button class="btn">
      <img 
      src="img/blue_t.png" 
      alt="tshirt" 
      class="imgBtn" 
      data-key="type" 
      data-value="tshirt" 
      />
    </button>
    <button class="btn">
      <img 
      src="img/blue_p.png" 
      alt="pants" 
      class="imgBtn" 
      data-key="type" 
      data-value="pants"
      />
    </button>
    <button class="btn">
      <img 
      src="img/blue_s.png" 
      alt="skirt" 
      class="imgBtn" 
      data-key="type" 
      data-value="skirt"
      />
    </button>
    <button class="btn colorBtn blue" data-key="color" data-value="blue">Blue</button>
    <button class="btn colorBtn yellow" data-key="color" data-value="yellow">Yellow</button>
    <button class="btn colorBtn pink" data-key="color" data-value="pink">Pink</button>  
  </section>
  <!-- Items -->
  <ul class="items"></ul>
</body>
</html>

data-*

사용자 정의 데이터 속성이라고 하는 속성 클래스를 형성하여 스크립트에서 사용할 수 있는 HTML 과 DOM 표현 간에 독점 정보를 교환 할 수 있습니다. 이러한 모든 사용자 정의 데이터는 HTMLElement속성이 설정된 요소의 인터페이스를 통해 사용할 수 있습니다 . HTMLElement.dataset속성은 그들에 액세스 할 수 있습니다.

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#attr-dataset

 

Global attributes - HTML: HyperText Markup Language | MDN

Global attributes are attributes common to all HTML elements; they can be used on all elements, though they may have no effect on some elements.

developer.mozilla.org

 

main.js 은 function별로 하나씩 주석을 달며 파악하자!

Fetch the items from ths JSON file

function loadItems() {
     return fetch('data/data.json')
     .then(response => response.json()) //json으로 변환
     .then(json => json.items); //json 안의 items를 return
}

 

loadItems 라는 함수는 fetch를 이용해서 데이터를 받아온 다음 받아온 데이터가 성공적이면 Json으로 변환하고 json 안의 items 를 리턴한다. 간략하게 말하면 loadItems 'data.json'의 리소스를 가져와 json으로 변환한후 json에 담긴 items를 리턴하는 것이다.

fetch는 가져오기API, 네트워크에서 비동기적으로 리소스를 가져오는 방법을 제공한다. 아래는 기본 가져오기 요청 설정 예시이다. 

  fetch('http://example.com/movies.json')
    .then(response => response.json())
    .then(data => console.log(data));

참고 : https://developer.mozilla.org/ko/docs/Web/API/Fetch_API

 

Fetch API - Web API | MDN

Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스가 정의되어 있습니다.  XMLHttpRequest와 같은 비슷한 API가 존재합니다만, 새로운 Fetch API는 좀더 강력하고 유연한 조작이 가능

developer.mozilla.org

 

Update the list with the given items

function displayItems(items) {
    const container = document.querySelector('.items');
    container.innerHTML = items.map(item => createHTMLStirng(item)).join('');     
}

querySelector로 itmes 클래스에 접근

querySelector : Returns all element descendants of node that match selectors. 선택자와 일치하는 노드의 모든 요소 하위 항목을 반환합니다.

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다. 

 

Create HTML list item from the given data item

주어진 데이터 항목에서 HTML 목록 항목 만들기

function createHTMLStirng(item) {
    return `
    <li class="item">
      <img src="${item.image}" alt="${item.type}" class="item__thumbnail" />
      <span class="item__description">${item.gender}, ${item.size}</span>
    </li>
    `;
}

json.items 을 전달받아 아래 작업을 수행

 

Handle button click

function onButtonClick(event, items) {
    const dataset = event.target.dataset;
    const key = dataset.key;
    const value = dataset.value;

    if(key == null || value == null) {
        return;
    }

	const filtered = items.filter(item => item[key] == value);
     console.log(filtered);
     displayItems(filtered);
}

만약 key: color, value: blue 라면 item 에서 item.color == blue 인것만 filter된다.

event는 Event인터페이스는 DOM에서 일어나는 이벤트를 나타낸다. event자체에는 모든 이벤트에 공통적인 속성과 메서드가 포함되어 있다.

event.target은  이벤트가 전달되는 객체(대상)를 반환한다.

https://developer.mozilla.org/ko/docs/Web/API/EventListener

https://developer.mozilla.org/en-US/docs/Web/API/Event

 

Event - Web APIs | MDN

The Event interface represents an event which takes place in the DOM.

developer.mozilla.org

https://developer.mozilla.org/en-US/docs/Web/API/Event/target

 

Event.target - Web APIs | MDN

The read-only target property of the Event interface is a reference to the object onto which the event was dispatched. It is different from Event.currentTarget when the event handler is called during the bubbling or capturing phase of the event.

developer.mozilla.org

 

EventListener - Web API | MDN

EventListener 인터페이스는 EventTarget 객체로부터 발생한 이벤트를  처리하기 위한 오브젝트를 말합니다.

developer.mozilla.org

 

function setEventListeners(items) {
    const logo = document.querySelector('.logo');
    const buttons = document.querySelector('.buttons');
    logo.addEventListener('click', () => displayItems(items));
    buttons.addEventListener('click', () => onButtonClick(event, item));
}

addEventListener() 메서드는 지정한 이벤트가 대상에 전달될 떄마다 호출함수를 설정한다. logo에 클릭시 displayItems를 실행

addEventListener<K extends keyof ElementEventMap>(type: K, listener: (this: Element, ev: ElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;

addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;

loadItems()
    .then(items => {
        displayItems(items);
        setEventListeners(items)
})
.catch(console.log)

loadItems를 실행하고 items를 반환한다. 이후 displayItems, setEventListeners 를 실행시킨다.

main.js

// Fetch the items from ths JSON file
function loadItems() {
     return fetch('data/data.json')
     .then(response => response.json()) //json으로 변환
     .then(json => json.items); //json 안의 items를 return
}

// Update the list with the given items
function displayItems(items) {
    const container = document.querySelector('.items');
    container.innerHTML = items.map(item => createHTMLStirng(item)).join('');     
}

// Create HTML list item from the given data item
function createHTMLStirng(item) {
    return `
    <li class="item">
      <img src="${item.image}" alt="${item.type}" class="item__thumbnail" />
      <span class="item__description">${item.gender}, ${item.size}</span>
    </li>
    `;
}

// Handle button click
function onButtonClick(event, items) {
    const key = dataset.key;
    const value = dataset.value;

    if(key == null || value == null) {
        return;
    }
     const filtered = items.filter(item => item[key] == value);
     console.log(filtered);
}

function setEventListeners(items) {
    const logo = document.querySelector('.logo');
    const buttons = document.querySelector('.buttons');
    logo.addEventListener('click', () => displayItems(items));
    buttons.addEventListener('click', () => onButtonClick(event, item));
}

loadItems()
    .then(items => {
        displayItems(items);
        setEventListeners(items)
})
.catch(console.log)

 

https://github.com/salangdung-i/shopping-game

 

GitHub - salangdung-i/shopping-game: HTML, CSS, JAVASCRIPT를 이용한 미니 쇼핑 게임

HTML, CSS, JAVASCRIPT를 이용한 미니 쇼핑 게임. Contribute to salangdung-i/shopping-game development by creating an account on GitHub.

github.com

https://www.youtube.com/watch?v=We2Kv1HMGvc 

 

728x90

'WEB FRONT END > JavaScript' 카테고리의 다른 글

브라우저의 랜더링(async/defer)  (0) 2022.03.18
[JS] 클로저  (0) 2022.03.04
'WEB FRONT END/JavaScript' Related Articles more