HTML3 Canvas을 사용하여 벽돌깨기 게임 만들기6 (벽돌 만들기) 벽돌에 대한 변수 설정하기 이제 벽돌을 만들어 보자. 벽돌은 2차원 배열로 제공이 될 것이며 벽돌에 대한 정보를 저장할 것이다. let brickRowCount = 3 let brickColumnCount = 5 let brickWidth = 75 let brickHeight = 20 let brickPadding = 10 let brickOffsetTop = 30 let brickOffsetLeft = 30 brickRowCount는 열 수, brickColumnCount는 횡 수, brickWidth는 벽돌 너비, brickHeight는 벽돌 높이, brickPadding은 벽돌 사이의 간격, brickOffsetTop과 brickOffsetLeft는 캔버스의 모서리에 닿지 않게 할 변수이다. 각 벽.. 2021. 7. 18. Canvas을 사용하여 벽돌깨기 게임 만들기1 (캔버스 생성과 그리기) 순수 자바스크립트를 이용하여 2D 벽돌깨기 게임을 만들자. 주의! 이 글은 MDN의 Tutorial인 순수한 자바스크립트를 이용한 2D 벽돌깨기 게임을 보고 공부한 것이다. 좀 더 정확한 내용을 원한다면 링크를 따라가자. 그리고 내 코드와 MDN의 코드가 다를 수 있지만 이론은 같으니 문제되는 부분이 있다면 수정해야지 ㅎㅎ 1. 캔버스 생성과 그리기 먼저 html파일을 만들고 canvas element를 만들어야한다. id가 canvas인 canvas element를 만들고 canvas.js파일과 style.css파일을 만들어 줬다. 기본적인 style을 맞춰주자. * { padding: 0; margin: 0; } canvas { background: #eee; display: block; margin.. 2021. 7. 17. addEventListener("submit", function) 주의!!!! 이 글은 공부하면서 쓴 글이기 때문에 잘못된 정보가 있을 수 있습니다. 레퍼런스 보는게 제일 맘 편합니다! EventTarget.addEventListener()에서 addEventListener는EventTarget에서 지정된 이벤트가 발생될 때 호출할 함수를 설정하는 메서드이다. 자세한 내용은 https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener EventTarget.addEventListener() - Web API | MDN EventTarget의 addEventListener() 메서드는 지정한 이벤트가 대상에 전달될 때마다 호출할 함수를 설정합니다. developer.mozilla.org 에서 확인하.. 2021. 7. 11. 이전 1 다음
