Japanease only.

4.ラケットをキー操作により動かす 


 キーが押されたことを検出?

 ラケットの移動をキー操作により行うことにします。キーが押されたことを検出するには、キーイベント処理を用います(但し、Ver.4.0以前のInternetExplorerでは動作しません)。キーイベント処理では、何かキー入力があった場合に指定の関数を実行させるはたらきがあります。例えば、キーが押された時に、関数bar_move()を実行させるには、
 windows.document.onkeydown=bar_move;
と記述します。

次に押されたキーが何かを判断するために、event.keyCodeによってキーコードの読み出しを行います。まずは、このキーコードをテキストボックスに表示させ、各キーに割り当てられているコードを確認してみましょう。

例7)demo5.htm(ダウンロード可)
<script language="JavaScript"><!--

function kaishi(){

}

function bar_move()
{
  k=event.keyCode;
  document.myform.tensu.value=k;

}

window.document.onkeydown=bar_move;

// --></script>

 上記を実行すると、キーコードがスコア部に表示されます。Jを押した場合は74, Nを押した場合は78であることが判ります。

キーイベント処理
記述 window.document.onkeydown = FunctionName
内容 キーが押されたら、関数FunctionNameを呼び出す。押されたキーを確認するには、event.keyCodeによってコードを読み出し区別を行う。
window.document.onkeydown = bar_move;
k = event.keyCode;
bar_moveは、キーが押された場合に実行される関数。変数kには、押したキーのコードが格納される。

 押されたキーを区別して動作を決定する

 押されたキーが何であるかは、この変数kに格納された値をみれば判ります。次はif文を使ってコードが74(Jキー)であれば-10、コードが78(Nキー)ならば10をラケットのy座標値ryに加算します。但し、ラケットの移動はコートの領域に留めるため、ryが50より小さくならないように、また350より大きくならないように制限します。ifの条件式、(k==74 && ry>50) は、「kが74に等しく、かつryが50より大きければ」という条件を表しており、ラケットのy座標値ryが50より小さければJキーを押しても条件が成立しないためラケットは上がりません。

例8)
<script language="JavaScript"><!--

function kaishi(){
  ry=100;

}

function bar_move()
{
  k=event.keyCode;
  document.myform.tensu.value=k;

  if (k==74 && ry>50) ry=ry-10;
  if (k==78 && ry+50<350) ry=ry+10;

  document.racket.style.top = ry;

}

window.document.onkeydown=bar_move;

// --></script>
<ifの条件が複数存在し、ともに成立する場合に式・命令文を実行させる>
記述 if (条件式1 && 条件式2) {式や命令文}
内容 条件式1と式2がともに成立していれば{式や命令文}を実行する
if (k==0 && g<0) {f=0;}
kが0に等しく、かつgが0より小さければfを0にする。

※ブラウザとしてFireFoxを利用している場合には、以下を変更して下さい。
1) function bar_move を function bar_move(event) とする。
2) フォームタグ(<FORM>)部分に <input type="text" onKeyPress="bar_move(event)" > を追加する。


  

Last up date:2006/12/25