note

vuejs slotmachine 만들기. (슬롯에 사용한 이미지대신 텍스트로만 기록하겠다.) 3가지 라인이 있는 슬롯머신인데, 가운데는 그대로있고 첫번째와 세번째만 회전하는 슬롯머신을 구현하게 되었다. 첫번째 슬롯에는 1,2,3이 들어간다. 두번째는 0값으로 고정. 세번째는 각 나라별 화폐단위가 위치한다. ex) 첫번째슬롯이 2, 세번째 슬롯이 jpy가 오게되면 20 jpy가 된다. 먼저 머신 div 객체에 해당하는 ref객체를 만들고, 관련 배열을 생성한다. // 슬롯머신 진행중 여부 const isSpining = ref(false); // 슬롯머신 라인 div 접근 객체 ref const slotNumberRef = ref(); // 첫번째 라인 const slotUnitRef = ref(); //..

반응형 코딩시 %계산만 사용해오다 vw를 사용하는식으로 최근에 작업을 했는데 괜찮은듯하여 기록한다. 모바일 디자인만 있고(최대 840px) 이하로 줄어들면 비율대로 줄어야하는 case 였다. $mobile-size: 840; /* vw 변환 function */ @function vw($target) { @if type-of($target) == number { @return calc(($target * 100) / $mobile-size) * 1vw; } @else if type-of($target) == list { $vw: (); @each $value in $target { @if type-of($value) == number { $vw: append($vw, calc(($value * 100) ..

룰렛을 적용시킬 원판이미지와 배열을 준비한다. 이미지는 테스트로 첨부하니 테스트를 원하면 사용하도록. /** * # 스크립트 준비 */ // 룰렛결과 배열 const itemList = [ {value: 0, label: "샌드위치"}, {value: 1, label: "핫도그"}, {value: 2, label: "도너츠"}, {value: 3, label: "마카롱"}, {value: 4, label: "아이스크림"}, {value: 5, label: "에그타르트"}, {value: 6, label: "크로와상"}, {value: 7, label: "케이크"}, {value: 8, label: "면세점 상품권"}, {value: 9, label: "우주패스"}, {value: 10, label: "영..