연말까지 매일 웹사이트를 꾸준히 제작하는 대학생~ 36일째 키다운의 문자입력 게임(1)~

6698 단어 MDNJavaScript

개시하다


안녕하세요@70days_js
나는 타자 게임을 하고 싶어서 오늘 키다운으로 타자를 쳤다.
오늘은 36일째다.(2019/11/23)
잘 부탁드립니다.

사이트 축소판 그림


해본 일


나는 요 며칠 타자 게임을 잘 하고 싶다. 오늘은 이벤트 대상의 키다운으로 터치 게임을 했다.↓
<body>
    <p>あの時、どう思ったのか。</p>
    <div id="keyDownWrapper">
        <div id="keyDown"></div>
    </div>
</body>
id="keyDown"의 div에 문자를 입력합니다.
javascript↓
document.addEventListener('keydown', logKey);
let keyDown = document.getElementById('keyDown');
let count = 0;

function logKey(e) {
    let myKeyCode = e.keyCode;
    console.log(myKeyCode);
    if (myKeyCode == 190) {
        keyDown.innerHTML += '.<br>';
        count++;
    } else if (myKeyCode == 32) {
        keyDown.innerHTML += ' ';
        count++;
    } else if (myKeyCode == 13) {
        keyDown.innerHTML += '<br>';
        count++;
    } else if (myKeyCode < 65 || myKeyCode > 91) {
        return false;
    } else {
        let myCharCode = String.fromCharCode(myKeyCode);
        let myCharCodeLower = myCharCode.toLowerCase();
        keyDown.innerHTML += myCharCodeLower;
        count++;
    }

    if (count > 25) {
        keyDown.innerHTML += '<br>';
        count = 0;
    }
}
이벤트 듣는 사람 중 키다운 후logkey 함수를 호출하도록 설정합니다.
문서에서 부르기 때문에 열쇠를 누르면 불려납니다.
let myKeyCode = e.keyCode;
키코드 번호를 제거하려면 키코드 속성을 참조하십시오.
190 예.네.눌리면및 줄 바꿈 설정
32는 공간이다.
13은 줄 바꿈 문자입니다.
65~91은 a~z를 덮어씁니다.기타 숫자가 가짜로 되돌아오다.(0~9 덮어쓰지 않음)
count 변수는 25자를 초과하면 자동으로 줄을 바꿉니다.

감상


많은 것을 조사해 보니 타자 게임에는 브라우저의 호환성과 번거로운 문제가 있는 것 같다.그럼 어떻게 극복할 것인가.
끝까지 읽어주셔서 감사합니다.내일도 투고할 테니 잘 부탁드립니다.

참고 자료


4
  • 키 코드 일람(4.56915.)
  • String.fromCharCode() - JavaScript | MDN ( http://faq.creasus.net/04/0131/CharCode.html )
  • 참고하라고 했어요.감사합니다!

    좋은 웹페이지 즐겨찾기