JS实现方向键移动物体-水中残月-ChinaUnix博客

个人简介

程序猿啊程序猿

文章分类

文章存档

2016年（28）

2015年（14）

我的朋友

最近访客

推荐博文

JS实现方向键移动物体

分类： JavaScript

2016-01-21 18:02:44

点击(此处)折叠或打开

<!DOCTYPE html>
<html lang="zh-ch">
<head>
<meta charset="UTF-8">
<title>仿赛车游戏</title>
</head>
<body onkeydown="OnKeyUp()">
<script language="JavaScript">
function OnKeyUp() // 释放按键事件处理程序
{
var e = e||window.event; // 为了兼容其他浏览器，|| 运算符等价于？：，e为内置事件对象
if( event.keyCode == 37) // 按下的是否是左键
{
var x=document.getElementById("img").style.left;//取得元素的绝对定位左距离
x=x.replace("px","");//过滤掉“px”；
x=Number(x)-15;//每次按移动键，物体移动15px
document.getElementById("img").style.left=x+"px";//把新左边距赋给该元素
}
if( event.keyCode == 38)
{
var x=document.getElementById("img").style.top;
x=x.replace("px","");
x=Number(x)-15;
document.getElementById("img").style.top=x+"px";
}
if( event.keyCode == 39)
{
var x=document.getElementById("img").style.left;
x=x.replace("px","");
x=Number(x)+15;
document.getElementById("img").style.left=x+"px";
}
if( event.keyCode == 40)
{
var x=document.getElementById("img").style.top;
x=x.replace("px","");
x=Number(x)+15;
document.getElementById("img").style.top=x+"px";
}
}
</script>
<div id="img" style="position:absolute;top:100px;left:100px;height:20px;width: 20px;border:1px solid red;background: #bbb"></div>
</body>
</html>

阅读(1138) | 评论(0) | 转发(0) |

给主人留下些什么吧！~~

感谢所有关心和支持过ChinaUnix的朋友们