キーボードによる画像の移動

実行をクリックして、開いた画面で矢印キーで蝶蝶を移動させてください。

 
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=x-sjis">
<title>キーボードによる画像の移動</title>
<script language="javascript">
// 画像の表示座標・移動量
var x  = 450 ; // 表示する座標
var y  = 250 ; // 表示する座標
var pv =   5 ; // 1回の移動量

// キーボードのフラグ (1 : 押されている / 0 : 離されている)
var left  = 0 ;
var up    = 0 ;
var right = 0 ;
var down  = 0 ;
var space = 0 ;

/********** キーボードのイベント(押された) **********/

function keydown(event) // 押されたキーのフラグを 1 にする
{
  if(event.keyCode == 37) //left key
  {
    left = 1;
  }
  if(event.keyCode == 38) //up key
  {
    up = 1;
  }
  if(event.keyCode == 39) //right key
  {
    right = 1;
  }
  if(event.keyCode == 40) //down key
  {
    down = 1;
  }
  disp() ;
}

function disp() // キーボード入力を反映して表示座標を更新
{
  if(left==1)   x = x - pv;
  if(right==1)  x = x + pv;
  if(up==1)     y = y - pv;
  if(down==1)   y = y + pv;

  document.getElementById("chou").style.left = x;
  document.getElementById("chou").style.top  = y;
}

/********** キーボードのイベント(離された) **********/

function keyup(event) // 離されたキーのフラグを 0 にする
{
  if(event.keyCode == 37) //left key
  {
    left = 0;
  }
  if(event.keyCode == 38) //up key
  {
    up = 0;
  }
  if(event.keyCode == 39) //right key
  {
    right = 0;
  }
  if(event.keyCode == 40) //down key
  {
    down = 0;
  }
}
</script>
</head>
<body background="back.gif">
<div id="chou" style="POSITION:absolute;Z-INDEX:1;VISIBILITY:visible;TOP:250px;LEFT:450px;">
<img src="chou.gif">
</div>
<script language="javascript">
document.onkeydown = keydown ; // イベント検出
document.onkeyup   = keyup ; // イベント検出
</script>
</body>
</html>