[Javascript Basic] 03. 공튕기기 게임(3)
24141 단어 JavaScriptJavaScript
학습 목표
- eventListner, eventHandler를 통해 keydown시 bar이동시키기
- bar 와 ball 충돌시 튕겨내기
먼저 eventListner, eventHandler를 이용해보자.
// bar 방향설정
let barMoveDirX = 10;
let barSpeed = 3;
document.addEventListener('keydown', keyDownEeventHandler); // (1) 특정한 이벤트에서 일어날 동작을 정의하고
// bar 움직이기
function keyDownEeventHandler(e) { // (2) 이벤트가 발생했을때 그처리를 담당하는 함수를 호출
if(e.key == 'ArrowRight' && barPosX + barWidth < canvas.width ) {
// 바를 오른쪽으로 이동
//console.log(alert("오른쪽 된다!"))
barPosX += barMoveDirX;
} else if (e.key == 'ArrowLeft' && barPosX > 0) {
//console.log(alert("왼쪽 된다!"))
barPosX -= barMoveDirX;
}
}
- addEventListener를 통해 특정한 이벤트에서 일어날 동작을 정의하고 , EeventHandler를 통해 이벤트가 발생했을때 그처리를 담당하는 함수를 호출했다.
- barMoveDirX 변수를 새로 만들고 조건에 맞게 barPosX를 증감
이제 마지막으로 ball과 bar의 충돌을 일으켜보자. 우선, ball과 bar가 만나지 않는 경우를 명시해 주어야 한다.
// ball과 bar가 만나지 않는 경우
function isCollisionRectToRect(rectA, rectB)
{
// a의 왼쪽과 b의 오른쪽
// a의 오른과 b의 왼쪽
// a의 아래쪽과 b의 위쪽
// a의 위쪽과 b의 아래쪽
if(rectA.left > rectB.right ||
rectA.right < rectB.left ||
rectA.top > rectB.bottom ||
rectA.bottom < rectB.top)
{
return false
}
return true;
}
다음으로 ball과 paddle이라는 임의의 객체를 만들고 ball과 bar가 작동하는 함수 안에 코드를 추가하자. 마지막으로 isCollisionRectToRect 작동 코드를 넣자.
아래는 최종코드
const canvas = document.getElementById('myCanvas'); // 이 아이디를 가지고 특정 탭에 접근을 한다
const context = canvas.getContext('2d'); // context라는 존재를 통해 그리기를 한다
document.addEventListener('keydown', keyDownEeventHandler);
let arcPosX = canvas.width / 2
let arcPosY = canvas.height / 2
let barWidth = 100;
let barHeight = 40
let rectPosX = canvas.width / 2 - barWidth / 2
let rectPosY = canvas.height - barHeight / 2
let rectMoveDirX = 10;
let barSpeed = 3;
const arcRaius = 20;
//방향에 대한 변수 설정
let arcMoveDirX = 1;
let arcMoveDirY = -1;
let arcSpeed = 1;
let ball = {
left : 0,
right : 0,
top : 0,
bottom : 0
}
let paddle = {
left : 0,
right : 0,
top : 0,
bottom : 0
}
function keyDownEeventHandler(e) {
if(e.key == 'ArrowRight') {
// 바를 오른쪽으로 이동
//console.log(alert("오른쪽 된다!"))
if (rectPosX + barWidth < canvas.width) {
rectPosX += rectMoveDirX;
}
}
if(e.key == 'ArrowLeft') {
//console.log(alert("왼쪽 된다!"))
if (rectPosX > 0){
rectPosX -= rectMoveDirX;
}
}
paddle.left = rectPosX;
paddle.right = rectPosX + barWidth;
paddle.top = rectPosY;
paddle.bottom = rectPosY + barHeight;
}
// ball과 bar가 만나지 않는 경우
function isCollisionRectToRect(rectA, rectB)
{
// a의 왼쪽과 b의 오른쪽
// a의 오른과 b의 왼쪽
// a의 아래쪽과 b의 위쪽
// a의 위쪽과 b의 아래쪽
if(rectA.left > rectB.right ||
rectA.right < rectB.left ||
rectA.top > rectB.bottom ||
rectA.bottom < rectB.top)
{
return false
}
return true;
}
function update() {
if(arcPosX - arcRaius < 0 ) {
arcMoveDirX = 1;
} else if(arcPosX + arcRaius > canvas.width){
arcMoveDirX = -1;
}
if(arcPosY - arcRaius < 0) {
arcMoveDirY = -1;
} else if(arcPosY + arcRaius > canvas.height) {
arcMoveDirY = +1;
}
//arcSpeed+=0.01;
arcPosX += arcMoveDirX * arcSpeed;
arcPosY -= arcMoveDirY * arcSpeed;
ball.left = arcPosX - arcRaius ;
ball.right = arcPosX + arcRaius
ball.top = arcPosY - arcRaius
ball.bottom = arcPosY + arcRaius
// 충돌확인
if(isCollisionRectToRect(ball, paddle)){
arcMoveDirY = 1;
//arcMoveDirX = -1;
arcPosY = paddle.top - arcRaius;
}
}
function draw() {
// 화면 클리어
context.clearRect(0, 0, canvas.width, canvas.height);
// 다른 도형 그리기
drawRect();
drawArc();
}
function drawArc() {
// context.clearRect(0, 0, canvas.width, canvas.height);
// arcPosX++;
context.beginPath(); // 그리기를 시작하겠다
//context.arc(canvas.width / 2 , canvas.height / 2 , 50, 0, 2 * Math.PI);
context.arc(arcPosX , arcPosY , arcRaius, 0, 2 * Math.PI);
context.fillStyle = 'blue';
context.fill();
context.closePath(); // 그리기를 끝내겠다
}
// 컴파일 순간에 메모리에 정해지고 밑에서 호출되면 그때 실행.
function drawRect(){
//context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath(); // 그리기를 시작하겠다
context.rect( rectPosX, rectPosY, barWidth, barHeight);
context.fillStyle = 'red';
context.fill();
context.closePath(); // 그리기를 끝내겠다
}
setInterval(update, 10);
setInterval(draw, 10);
Author And Source
이 문제에 관하여([Javascript Basic] 03. 공튕기기 게임(3)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@chou60400/Javascript-Basic-03.-공튕기기-게임3저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)