canvas7 Canvas을 사용하여 벽돌깨기 게임 만들기4 (Paddle과 키보드 컨트롤) 공을 치기 위한 paddle 정의 공을 치기 위한 paddle을 정의해보자 const paddleHeight = 10 const paddleWidth = 75 const paddleX = (canvas.width - paddleWidth) / 2 paddleX는 paddle의 왼쪽 끝 x좌표를 말한다. paddle을 그리는 drawPaddle()을 추가해준다. function drawPaddle() { ctx.beginPath() ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddHeight) ctx.fillStyle = "#222222" ctx.fill() ctx.closePath() } 유저의 paddle 컨트롤 addEventList.. 2021. 7. 18. 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. 이전 1 2 다음
