<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 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;
}
/********** キーボードのイベント（NS） **********/
function keydown_ns(event) // 押されたキーのフラグを １ にする
{
if(event.which == 37) //left key
{
left = 1;
}
if(event.which == 38) //up key
{
up = 1;
}
if(event.which == 39) //right key
{
right = 1;
}
if(event.which == 40) //down key
{
down = 1;
}
disp() ;
}
function keyup_ns(event) // 離されたキーのフラグを ０ にする
{
if(event.which == 37) //left key
{
left = 0;
}
if(event.which == 38) //up key
{
up = 0;
}
if(event.which == 39) //right key
{
right = 0;
}
if(event.which == 40) //down key
{
down = 0;
}
}
/********** キーボードのイベント（IE） **********/
function keydown_ie() // 押されたキーのフラグを １ にする
{
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 keyup_ie() // 離されたキーのフラグを ０ にする
{
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;
}
}
/********** 使用できる関数の把握 **********/
function start()
{
if(document.all)
{
document.onkeydown = keydown_ie ; // イベント検出
document.onkeyup = keyup_ie ; // イベント検出
}
else if(document.getElementById)
{
document.onkeydown = keydown_ns ; // イベント検出
document.onkeyup = keyup_ns ; // イベント検出
}
}
</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">
start() ;
</script>
</body>
</html>
|