초간단 키보드 방향키를 누르면 움직이는 요소 구현하기 - 자바스크립트(Java Script)

달리기는 건강에 좋다!

 

키보드를 이용해 간단한 게임을 만들어보고 싶다는 생각이 들었다.

그전에 `KeyboardEvent.key`를 활용해 간단한 예제를 구현해 봤다.

---

코드 실행

 

See the Pen Untitled by Wi daehyeon (@widaehyeon) on CodePen.

 

 

---

HTML 코드

<div class="container">
    <div class="box" id="box">
        <div class="emoji" id="emoji">🧍‍♂️</div>
        <div class="direction" id="direction">방향키를 입력해보세요!</div>
    </div>
</div>

---

CSS 코드

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

.container {
    text-align: center;
}

.box {
    width: 300px;
    height: 300px;
    background-color: white;
    border: 2px solid #333;
    position: relative;
    overflow: hidden;
}

.emoji {
    position: absolute;
    font-size: 3rem;
    transition: top 0.1s ease, left 0.1s ease;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

.direction {
    margin: 20px;
    font-size: 1.2rem;
    font-weight: bold;
    color: white;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 10px;
    border-radius: 10px;
}

---

Java Script 코드

document.addEventListener('DOMContentLoaded', function() {
    const emoji = document.getElementById('emoji');
    const box = document.getElementById('box');
    const directionDisplay = document.getElementById('direction');
    const boxRect = box.getBoundingClientRect();

    let emojiX = boxRect.width / 2;
    let emojiY = boxRect.height / 2;
    let direction = 'left'; // 초기 방향 상태 변수

    document.addEventListener('keydown', function(event) {
        switch (event.key) {
            case 'ArrowUp':
                emojiY -= 10;
                if (emojiY < 0) emojiY = 0;
                directionDisplay.textContent = '입력 방향키: ↑';
                break;
            case 'ArrowDown':
                emojiY += 10;
                if (emojiY > boxRect.height) emojiY = boxRect.height;
                directionDisplay.textContent = '입력 방향키: ↓';
                break;
            case 'ArrowLeft':
                emojiX -= 10;
                if (emojiX < 0) emojiX = 0;
                direction = 'left'; // 방향 상태 변수 업데이트
                directionDisplay.textContent = '입력 방향키: ←';
                break;
            case 'ArrowRight':
                emojiX += 10;
                if (emojiX > boxRect.width) emojiX = boxRect.width;
                direction = 'right'; // 방향 상태 변수 업데이트
                directionDisplay.textContent = '입력 방향키: →';
                break;
        }

        emoji.style.left = `${emojiX}px`;
        emoji.style.top = `${emojiY}px`;

        // 방향 상태 변수에 따라 이모지 설정
        if (direction === 'left') {
            emoji.textContent = '🏃‍♂️';
        } else if (direction === 'right') {
            emoji.textContent = '🏃‍♂️‍➡️';
        }
    });
});

 

1) document.addEventListener('keydown', function(event){}

사용자가 키보드를 누르면 그것을 감지하는 이벤트이다.

웹개발 할 때는 보통 검색창에서 엔터를 누르면 검색이 되게 한다거나 할때 사용한다.

`console.log(event)`로 이벤트를 콘솔에 출력해 봤다.

event객체 콘솔 출력 예시

이 객체는 상당히 많은 정보를 가지고 있는데, `key` 혹은 `keyCode`를 활용하면 키보드를 활용한 다양한 기능을 구현할 수 있다.

2) event.key

event.key 콘솔 출력 예시

`key`값을 콘솔에 찍어봤다.

key값은 상당히 직관적이기 때문에 필요한 키보드 값을 콘솔에 직접 찍어보고 이해가 바로 될 것이다.

필요한 키는 직접 콘솔에 찍어보고 활용하면 되겠다.

콘솔만 잘 찍어봐도 정말 엄청나게 많은 정보를 얻을 수 있다!

 

3) switch(event.key)

`switch문`을 활용해서 사용자가 키보드 방향키를 누르는 상황에 이벤트가 발생하도록 구현했다.

방향키의 방향에 따라 이모지가 움직일 위치값을 지정해 준다.

요소 밖으로 이모지가 빠져나갈 수 없도록 제한을 줬다.

그리고 사용자가 무슨 방향키를 눌렀는지 확인하기 위해 `textContent property`를 수정해서 화면 상단에 떠 있는 안내문구를 수정해 줬다.

 

---

느낀점

일할 때는 검색창에 검색어를 입력한 뒤 엔터를 칠 때 검색이 되게 해 주세요 라는 요구사항 말고는 이 기능을 활용해 본 적은 아직 없다.

상당히 자주 쓰는 기능이지만 활용도가 높지는 않았던 것 같아 아쉽다.

 

하지만 키보드를 활용해 뭔가를 할 수 있다는 점에서 상당히 흥미롭게 느껴진다.

그래서 이 기능으로 뭘 할 수 있을까 생각해 봤는데, 간단한 게임을 만들어보면 좋을 것 같다는 생각이 들었다.

어렸을 때 했던 똥 피하기 같은 게임이나 벽돌 깨기 정도를 구현할 때 사용할 수 있지 않을까 싶다.