javascript16 Canvas을 사용하여 벽돌깨기 게임 만들기2 (공 움직이기) 드로잉 루프를 정의하기 아래의 코드를 제외한 코드를 지우자. const canvas = document.querySelector("#canvas") const ctx = canvas.getContext("2d") 타이밍 함수인 setInterval()를 사용해보자. function draw() { } setInterval(draw, 10) setInterval()의 첫번째 인자에는 실행시킬 함수, 두번째 인자에는 얼마의 시간 단위로 실행시킬지이다. 시간 단위는 ms이다. 따라서 매 순간 원을 그리기를 반복해보자. let x = canvas.width / 2 let y = canvas.height - 20 const dx = 1 const dy = -1 function draw() { ctx.beginPa.. 2021. 7. 17. 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. JavaScript 공부 사이트 벨로퍼트와 함께하는 모던 자바스크립트 : https://learnjs.vlpt.us/ 2021. 7. 13. 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 2 3 4 다음
