TOP サイトマップ タイピングゲームを作る講座 ゲーム DIABLO
チャット BBS リンク集 顔文字 逆アクセスランキング

JavaScriptでタイピングゲームを作ろう講座
〜ネットスケープに対応させる〜

前回までの講座でタイピングソフトは完成してましたが、前回までのスクリプトだと ブラウザでIEしか対応しておらずNetscapeは対応していませんでした。 他のブラウザは動作確認ができませんのでわかりません。 またIEとNetscapeもバージョンによってはタイピングソフトがうまくいかない 可能性があります。

4-1.前回のスクリプトの変更点

さて、Netscapeで動作しない原因はキーコードを取得していたevent.keyCodeが Netscapeで対応していないのが原因でした。

そこでスクリプト上でブラウザが何であるかを調べ、そのブラウザによって スクリプトをわけるように変更します。

まずはじめにスクリプトの上部の方に

if(navigator.appName=="Netscape"){
 burauza="Net";
}else{
 burauza="IE";
}

と追加します。ここでnavigator.appNameというのでブラウザの種類を取得できます。 その返される値がNetscapeだったらburauza変数にNetという文字列を入れます。 それ以外の時はIEとします。(Netscape以外はすべてIEとして取り扱ってます)

次にcheckword()関数内を下記のように変更します。

function checkword(e){
 if(burauza=="IE"){
  if(restart==0 && event.keyCode==13){
   restart=1;
   startset();
  }else if(restart==0 && event.keyCode!=13){
  }else{
   if(String.fromCharCode(event.keyCode)==ro_ma.charAt(ichi)){
    seikai();
   }else if(event.keyCode==189 && ro_ma.charAt(ichi)=='-'){ //伸ばし棒を正解にする為の処理
    seikai();
   }else{
    machigai();
   }
  }
 }else{
  if(restart==0 && e.which==13){
   restart=1;
   startset();
  }else if(restart==0 && e.which!=13){
  }else{
   if(String.fromCharCode(e.which)==ro_ma.charAt(ichi)){
    seikai();
   }else if(e.which==109 && ro_ma.charAt(ichi)=='-'){
    seikai();
   }else{
    machigai();
   }
  }
 }
}

変更点としては、まずcheckword()関数が仮引数を取るようにしてます。 これはNetscapeの場合にキーが押されたときのイベントを受け取る時に使用します。 IEの場合は今まで通りのスクリプトでそれ以外の時はevent.keyCodeで取っていた キーコードをすべてe.whichで取るようにします。 Netscapeの場合はイベントを引数としてとりそのイベント.whichとすると キーコードが得られるようです。

あとは文字コードがブラウザによって違うので-(伸ばし棒)を正解にする処理の部分を Netscapeの場合は109に変更します。 実際にこの文字はコードがいくつなのか知りたい場合はdocument.write(event.keyCode) などとして文字ではなくコードをそのまま書き出してみるとわかります。

以上の変更でNetscapeでも動きました。 確認したのはNetscape7.1のみですけど・・・。 このバージョンのブラウザだと動かないなどがありましたら質問掲示板の方へ お書きください。

タイピングソフトの完成 講座のTOPへ戻る