팝업 나오고서 내부에 여러 아코디언 목차가 있는형태. 추가 및 보완 해야 할 사항은 ...1. 현 팝업 종요 후 다시 팝업 클릭시 아코디언 정보 리셋2. 팝업 내 클릭된 아코디언이 아닌 다른 아코디언 클릭시 축소 (1개의 아코디언만 동작하게-)methods: { popupScript: function () { document.addEventListener('DOMContentLoaded', function () { var openButtons = document.querySelectorAll('.open_button'); var closeButtons = document.querySelectorAll('.close_button'); ..

🌱 Vue.js 기본 문법 정리 기초 설명 인스턴스 : 뷰로 화면을 개발하기 위한 생성 단위 인스턴스 생성 방법 = new Vue(); 인스턴스 속성 new Vue({ el: , template: , data: , methods: , created: , watch: , }); // el : 인스턴스가 그려지는 화면의 시작점(특정 Html 태그) // template : 화면에 표시할 요소 ( HTML, CSS 등) // data : 뷰의 반응성(Reactivity)이 반영된 데이터 속성 // method : 화면의 동작과 이벤트 로직을 제어하는 메서드 // created : 뷰의 라이프 사이틀과 관련된 속성 // watch : data에서 정의한 속성이 변화했을 때 추가 동작을 수행할 수 있게 정의하는 ..

01 ~ 10 까지 단계열로 되어있는 파일.. 간단한 JS 공부에 도움 되시길.. 원본 : https://developer.mozilla.org/ko/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript

플레이어에게 생명을 부여하기 [ lesson10 단계의 설명 ] 생명을 구현하는 방법은 아주 간단하다. 먼저 변수를 선언했던 곳과 같은 장소에서 변수를 추가하여 생명 수를 저장하게 한다. var lives = 3; //남은 생명 수 남은 생명 수를 표시하는 방법은 점수 카운터가 그려지는 것과 같은 형태. drawScore()함수 아래에 다음 기능을 추가. function drawLives() { ctx.font = "16px Arial"; ctx.fillStyle = "#0095DD"; ctx.fillText("Lives: "+lives, canvas.width-65, 20); } 지금까지 바닥에 닿으면 바로 게임을 끝내는 형식이었고 이제는 더 이상 게임을 이용할 수 없게 될 때까지 남은 생명 수를 줄여..

마우스 이동 감지하기 [ lesson09 단계의 설명 ] 마우스 움직임을 감지하는 것은 키 누름을 감지하는 것보다 더욱 쉽다. 필요한 것은 mousemove (en-US) 이벤트에 대한 리스너이니, 이 keyup event 바로 아래에 이 행을 추가 document.addEventListener("mousemove", mouseMoveHandler, false); 마우스 움직임에 따라 패들 이동하기 포인터 좌표에 따라 패들 위치를 업데이트할 수 있다. 다음의 핸들러 함수가 이것을 해주는것이고, 추가한 이전 줄 아래에 다음 함수를 추가해준다. function mouseMoveHandler(e) { var relativeX = e.clientX - canvas.offsetLeft; if(relativeX >..

점수 계산하기 [ lesson08 단계의 설명 ] 점수를 받기위한 변수 선언 및 초기화 var score = 0; 점수 화면을 만들고, 업데이트를 하기 위해서 drawScore() 함수가 필요 아래 코드를 collisionDetection() 함수 아래에 추가 function drawScore() { ctx.font = "16px Arial"; ctx.fillStyle = "#0095DD"; ctx.fillText("Score: "+score, 8, 20); } 텍스트를 캔버스 안에 그리는 것은 도형을 그리는 작업과 비슷하다. 폰트를 정의하는 것은 CSS에서의 작업과 같으며. — font() (en-US) 함수에서 크기와 타입을 설정할 수 있습니다. 그런 다음 fillStyle() (en-US) 함수를 ..