javaScript 通过键盘移动层（游戏模仿）

最新推荐文章于 2025-10-20 08:12:24 发布

最新推荐文章于 2025-10-20 08:12:24 发布 · 174 阅读

文章标签：

本文介绍了一个使用键盘方向键控制HTML元素移动的示例。通过JavaScript监听键盘事件并更新元素的位置属性，实现元素在页面上的上下左右移动。文章展示了如何设置键盘控制参数及限制元素移动范围。

 

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>键盘控制层的移动</title> 
<style type="text/css"> 
<!-- 
#Div { 
position:absolute; 
width:238px; 
height:135px; 
left:expression((body.clientWidth - this.offsetWidth)/2); 
top:expression((body.clientHeight - this.offsetHeight)/2); 
z-index:1; 
text-align:center; 
background:#AFDBFF; 
border:#006699 1px solid; 
} 
#Txt{ 
font-size:9pt; 
position:absolute; 
width:200px; 
top:expression((Div.offsetHeight - this.offsetHeight)/2); 
left:expression((Div.offsetWidth - this.offsetWidth)/2); 
} 
#Txt p{ 
font-size:9pt; 
margin:8px; 
} 
#Txt font{ 
color:#FF0000; 
font-size:9pt; 
} 
#Layer1 { 
border:#006699 1px solid; 
padding:10px; 
font-size:9pt; 
color:#336699; 
position:absolute; 
top:expression((body.clientHeight - this.offsetHeight)/2); 
left:expression((body.clientWidth - this.offsetWidth)/2 + Div.offsetWidth); 
} 
#Layer1 Input { 
font-size:9pt; 
color:#336699; 
} 
#Int { 
text-align:right; 
} 
--> 
</style> 
</head> 
<body> 
<div id="Div"><span id="Txt">请分别按下 <font>↑</font>、<font>↓</font>、<font>←</font>、<font>→</font>， 
试试看有什么效果？ </span></div> 
<span id="Layer1">控制键设置:
 
向上移动: 
<input name="Up" type="text" value="↑" size="6">
 
向下移动: 
<input name="Down" type="text" value="↓" size="6">
 
向左移动: 
<input name="Left" type="text" value="←" size="6">
 
向右移动: 
<input name="Right" type="text" value="→" size="6">
 
每次移动  <input name="Int" type="text" id="Int" value="5" size="4" maxlength="3"> 
px;</span> 
</body> 
</html> 
<script language="javascript"> 
<!-- 
//alert(txt.style.top); 
var up,down,left,right; 
up = 38; 
down = 40; 
left = 37; 
right = 39; 
function document.onkeydown() 
{ 
// alert(event.keyCode); 
//左：37 上：38 右：39 下：40 
var int; 
int = parseInt(document.getElementById("Int").value); 
if(int == "NaN") 
  int = 5; 
var str = "",press,evet; 
var div = document.getElementById("Div"); 
var txt = document.getElementById("Txt"); 
if(event.srcElement.tagName == "INPUT") 
{ 
  if(event.srcElement == document.getElementById("Int")) 
  { 
  if(event.keyCode == 13) 
    document.body.focus(); 
  if((event.keyCode < 96 || event.keyCode > 105) && event.keyCode != 8 && event.keyCode != 46 && !(event.keyCode >= 37 && event.keyCode <= 40) ) 
    event.returnValue = false; 
    return; 
  } 
  else 
  { 
  switch(event.keyCode) 
  { 
    case 37:{ 
    event.srcElement.value = "←"; 
    break; 
    } 
    case 38:{ 
    event.srcElement.value = "↑"; 
    break; 
    } 
    case 39:{ 
    event.srcElement.value = "→"; 
    break; 
    } 
    case 40:{ 
    event.srcElement.value = "↓"; 
    break; 
    } 
  } 
  switch(event.srcElement) 
  { 
    case document.getElementById("Up"):{ 
    up = event.keyCode; 
    break; 
    } 
    case document.getElementById("Down"):{ 
    down = event.keyCode; 
    break; 
    } 
    case document.getElementById("Left"):{ 
    left = event.keyCode; 
    break; 
    } 
    case document.getElementById("Right"):{ 
    right = event.keyCode; 
    break; 
    } 
  } 
  } 
} 
else 
{ 
  switch(event.keyCode) 
  { 
  case left:{ 
  press = "<font> ← </font>"; 
  evet = "<font>向 <b>左</b> 移动</font>" + " " + int + " px 。"; 
  div.style.left = (parseInt(div.currentStyle.left) - int) + "px"; 
  if(parseInt(div.style.left) <= 0) 
  { 
    evet = "已经到了 <font>最左边</font> ，无法再 <font>向左</font> 移动。"; 
    div.style.left = "0px"; 
    break ; 
  } 
  break; 
  } 
  case up:{ 
  press = "<font> ↑ </font>"; 
  evet = "<font>向 <b>上</b> 移动</font>" + " " + int + " px 。"; 
  div.style.top = (parseInt(div.currentStyle.top) - int) + "px"; 
  if(parseInt(div.style.top) <= 0) 
  { 
    evet = "已经到了 <font>最上边</font> ，无法再 <font>向上</font> 移动。"; 
    div.style.top = "0px"; 
    break ; 
  } 
  break; 
  } 
  case right:{ 
  press = "<font> → </font>"; 
  evet = "<font>向 <b>右</b> 移动</font>" + " " + int + " px 。"; 
  div.style.left = (parseInt(div.currentStyle.left) + int) + "px"; 
  if(parseInt(div.style.left) >= (parseInt(document.body.clientWidth) - parseInt(div.offsetWidth))) 
  { 
    div.style.left = parseInt(document.body.clientWidth) - parseInt(div.offsetWidth); 
    evet = "已经到了 <font>最右边</font> ，无法再 <font>向右</font> 移动。"; 
    break ; 
  } 
  break; 
  } 
  case down:{ 
  press = "<font> ↓ </font>"; 
  evet = "<font>向 <b>下</b> 移动</font>" + " " + int + " px 。"; 
  div.style.top = (parseInt(div.currentStyle.top) + int) + "px"; 
  if(parseInt(div.style.top) >= (parseInt(document.body.clientHeight) - parseInt(div.offsetHeight))) 
  { 
    div.style.top = parseInt(document.body.clientHeight) - parseInt(div.offsetHeight); 
    evet = "已经到了 <font>最下边</font> ，无法再 <font>向下</font> 移动。"; 
    break ; 
  } 
  break; 
  } 
  default: 
  { 
  return; 
  } 
  } 
  str = "您按下了" + press + "键，"; 
  str += "该图层" + evet; 
  txt.innerHTML = str; 
} 
} 
//--> 
</script>