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