Immersive DanceParty

chltndid724ยท2019๋…„ 8์›” 4์ผ
0

immersive

๋ชฉ๋ก ๋ณด๊ธฐ
10/22

๐Ÿ‰ Dance Party

functional์„ ๋จผ์ € ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

  • dancer.js

var makeDancer = (top, left, timeBetweenSteps) => {
  // ๊ฐ๊ฐ์˜ ๋งค์„œ๋“œ๋ฅผ ์ €์žฅ.
  const dancer = {};

  // DOM์œผ๋กœ span ํƒœ๊ทธ๋ฅผ ๋งŒ๋“ฌ.
  const createDancerElement = () => {
    let elDancer = document.createElement('span');
    elDancer.className = 'dancer';
    return elDancer;
  };

  // ๋งŒ๋“ ๊ฒƒ์„ ๋…ธ๋“œ์— ๋‹ด๊ธฐ.
  dancer.$node = createDancerElement();

  // dancer.step์„ ๋ฐ˜๋ณตํ•ด์„œ ์‹คํ–‰ ์‹œํ‚ค๋Š” ๊ณณ
  dancer.step = () => {
    setTimeout(dancer.step, timeBetweenSteps);
  };

  // dancer์˜ ์œ„์น˜ ๊ฐ’์„ ์ •ํ•˜๋Š” ๊ณณ.
  dancer.setPosition = (top, left) => {
    // Use css top and left properties to position our <span> tag
    Object.assign(dancer.$node.style, {
      top: `${top}px`,
      left: `${left}px`
    });
  };

  // dancer๊ฐ€ ๋งŒ๋“ค์–ด ์ง€์ž ๋ง์ž ๋ฐ”๋กœ ์‹คํ–‰์„ ์‹œ์ผœ ์ค๋‹ˆ๋‹ค.
  dancer.step();
  dancer.setPosition(top, left);

  return dancer;
};
	
  • blinkyDancer.js
var makeBlinkyDancer = (top, left, timeBetweenSteps) => {
  
  // blinkyDancer ์—๋‹ค๊ฐ€ makeDancer๋ฅผ ๋‹ค์‹œ ์ •์˜ํ•œ๋‹ค.
  const blinkyDancer = makeDancer(top, left, timeBetweenSteps);

  // ์›๋ž˜ makeDancer์˜ ๊ฐ’๋“ค์„ ์บ์‹ฑ ํ•˜๋Š”๊ณณ.
  let oldStep = blinkyDancer.step;
/*
   ์‹คํ–‰์‹œํ‚ค๋ฉด ์ƒˆ๋กœ์šด step์„ ๋งŒ๋“ค๊ณ ,
      oldStep์„ ๋‹ค์‹œ ๋“ค๊ณ ์™€์„œ ์‹คํ–‰์‹œํ‚ค๊ณ , 
      	style์„ ๋ณ€๊ฒฝ์‹œ์ผœ ์ถ”๊ฐ€ํ•˜๊ณ ,
        	setTimeout์œผ๋กœ ์ธํ•ด ๊นœ๋นก๊ฑฐ๋ฆฝ๋‹ˆ๋‹ค.
  				๋ฎ์–ด์“ฐ๋Š” ๊ฒƒ์ด ์•„๋‹Œ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค. ( ๊ฐ’์„ ์ถ”๊ฐ€ ์‹œํ‚ด => ๊นœ๋นก๊ฑฐ๋ฆฌ๊ฒŒ)
*/
  blinkyDancer.step = () => {
    oldStep();

    let style = blinkyDancer.$node.style;
    style.display = style.display === 'none' ? 'inline-block' : 'none';
  };

  return blinkyDancer;
};

๐Ÿ‡ Class

  • DancerClass.js
// ์ธ์ž๋“ค์„ constructor์— ๋‹ค ๋„ฃ์–ด์ฃผ๋„๋ก ํ•ฉ๋‹ˆ๋‹ค.
class DancerClass {
  constructor(top, left, timeBetweenSteps){
    this.timeBetweenSteps = timeBetweenSteps;
    this.$node = this.createDancerElement();
    this.step();
    this.setPosition(top, left);
  }
  
  // ๋งค๊ฐœ๋ณ€์ˆ˜๋“ค์€ ํด๋ž˜์Šค ์•ˆ์— ์„ค์ •ํ•ด ์ฃผ๋ฉด๋ฉ๋‹ˆ๋‹ค.
  createDancerElement() {
    let elWilly = document.createElement('img');
    elWilly.className = 'willy';
    elWilly.src = 'img/22.jpg';
    elWilly.addEventListener('click',function() {
      elWilly.src = 'img/Fireworks - Imgur.gif';
      elWilly.name = 'findWilly';
    });
    return elWilly;
  }
  
  // setTimeout ์€ ๋น„๋™๊ธฐ๋กœ bind(this)๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.
  step() {
    setTimeout(this.step.bind(this), this.timeBetweenSteps)
  }
  setPosition(top, left) {
    Object.assign(this.$node.style, {
      top: `${top}px`,
      left: `${left}px`
    });
  }
}
  • BlinkyDancerClass.js
// extends๋ฅผ ํ†ตํ•ด์„œ ๋ถ€๋ชจ์˜ ์ธ์Šคํ„ด์Šค๋“ค์„ ๋‹ค ๊ฐ€์ง€๊ณ  ์˜ต๋‹ˆ๋‹ค. ๋ถ€๋ชจ์˜ ๊ฒƒ์„ ๋‹ค ๊ฐ€์ ธ๋‹ค
// ์“ฐ๋ ค๋ฉด constructor์™€ super์„ ์ง€์›Œ๋„ ๋ฉ๋‹ˆ๋‹ค. ๋ถ€๋ชจ์˜
class BlinkyDancerClass extends DancerClass {
  //constructor(top, left, timeBetweenSteps) {
  //  super(top, left, timeBetweenSteps);
  // }
   step() {
     super.step();
     let style = this.$node.style;
     //style.display = style.display === 'none' ? 'inline-block' : 'none';
   }
}
profile
ํž˜๋“ค๋• ๋ธ”๋กœ๊ทธ ํ•˜๋‚˜๋” ์ ์ž!!![ Suyang ]

0๊ฐœ์˜ ๋Œ“๊ธ€