연말까지 매일 웹사이트를 꾸준히 제작하는 대학생~ 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
Reference
이 문제에 관하여(연말까지 매일 웹사이트를 꾸준히 제작하는 대학생~ 36일째 키다운의 문자입력 게임(1)~), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/70days_js/items/79826e4703f52317d0f3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)