韓国語タイピングゲームを作りたい

前提・実現したいこと

JavaScriptでタイピングゲームを作っています。
英語でのタイピングゲームは簡易的ではありますが、ある程度完成しました。

発生している問題・エラーメッセージ

きちんとタイピングできていれば色が変わるようにしたのですが、韓国語や日本語に変えると反応しなくなります。
コンソールを見てみると一応韓国語として認識はされているようなのですが、表示された文章一文字ずつとキーコードを対応させる方法がわかりません。

該当のソースコード

const timeElement = document.getElementById('time');
const start = document.getElementById('start');
const stop = document.getElementById('stop');
const reset = document.getElementById('reset');

var p = document.getElementById('text');
var textLists = [
  'hello',
  'typing',
  'korean',
  'game'
];

var checkTexts = [];

createText();

function createText() {
  var rnd = Math.floor(Math.random() * textLists.length);

  p.textContent = '';
  checkTexts = textLists[rnd].split('').map(function(value) {
    var span = document.createElement('span');
    span.textContent = value;
    p.appendChild(span);

    return span;
  });
}

function updateTime() {
  const ms = elapsed % 1000;
  const s = Math.floor(elapsed / 1000) % 60;
  const m = Math.floor(elapsed / (1000*60)) % 60;
  const h = Math.floor(elapsed / (1000*60*60));

  const msStr = ms.toString().padStart(3, '0');
  const sStr = s.toString().padStart(2, '0');
  const mStr = m.toString().padStart(2, '0');
  const hStr = h.toString().padStart(2, '0');

  timeElement.innerHTML = `${hStr}:${mStr}:${sStr}.${msStr}`;
}


function gameStart() {
  let pre = new Date();
  intervalId = setInterval(function() {
    const now = new Date();
    elapsed += now - pre;
    pre = now;
    updateTime();
  }, 10);
  
}


document.addEventListener('keydown', keyDown);

function keyDown(e) {
  if(e.key === checkTexts[0].textContent) {
    checkTexts[0].className = 'add-blue';

    checkTexts.shift();

    if(!checkTexts.length) createText();
  }
}

let elapsed = 0;

let intervalId = null;


start.addEventListener('click', function(e) {
  if (intervalId !== null) {return;}

  gameStart();
});

stop.addEventListener('click', function(e) {
  clearInterval(intervalId);
  intervalId = null;
});

reset.addEventListener('click', function(e) {
  elapsed = 0;
  updateTime();
  createText();
});

function KeyEvent(evt){
  if(!evt) {
  var key_num = event.keyCode; 
  }else{
  var key_num = evt.charCode;
  }
  console.log(evt);
  }
  document.onkeypress = KeyEvent;
  self.focus();

試したこと

プログラミングの勉強を始めたばかりのため、まだきちんとした調べ方もわからず、これ以上自力ではできなさそうです。最終的には韓国語のタイピングゲームを作りたいので韓国語の文章をタイピングしてあっていれば色が変わる仕様にしたいです。
もしかしたら初歩的なことを聞いているかもしれないですが、教えてくだされば嬉しいです。

m.ts10806

2021/06/09 21:59

「反応しない」とは、エラー等出てないのでしょうか（コンソールを確認）

hoshi-takanori

2021/06/09 23:46

keydown は押したキーそのものに反応するので、キーと文字が一対一対応している英語とかはいいのですが、例えば日本語では漢字などに変換する必要があり、入力方法も複数 (かな or ローマ字) あるので keydown では無理でしょうね。(入力方法をローマ字に限定するなら、例えば「漢字」と表示して kanji と入力されたかチェックする、という方法はありそうです。kannji とか kanzi と入力したい人もいるかもしれませんが…。) 韓国語は詳しくありませんが、例えば「안녕」なら「ㅇ」「ㅏ」「ㄴ」「ㄴ」「ㅕ」「ㅇ」と打つようなので、それをチェックすればいいのかも？