方向键控制对象匀速运动问题

seachers 2011-08-03 08:26:22
<body>
<div id="desktop" style="border:1px solid #000; width:500px; height:500px; margin:0 auto; position:relative;">
<div id="object" style="position:absolute; top:10px; left:10px; width:10px; height:10px; background-color:#F00;"></div>
</div>
<script type="text/javascript">
var timer1,timer2,timer3,timer4;
var direction = null;
function xia(){
if(direction == "xia"){return false; }
document.getElementById("object").style.top = (parseInt(document.getElementById("object").style.top)+ 10) + "px";
if(parseInt(document.getElementById("object").style.top) > 490){
document.getElementById("object").style.top = 490 + "px";
}
clearTimeout(timer2);
clearTimeout(timer3);
clearTimeout(timer4);
timer1 = setTimeout("xia()",5000);
direction = "xia";
}
function shang(){
if(direction == 'shang') return false;
direction = 'shang';
document.getElementById("object").style.top = (parseInt(document.getElementById("object").style.top)- 10) + "px";
if(parseInt(document.getElementById("object").style.top) <0){
document.getElementById("object").style.top = 0 + "px";
}
}
function zuo(){
if(direction == 'zuo') return false;
direction = 'zuo';
document.getElementById("object").style.left = (parseInt(document.getElementById("object").style.left)- 10) + "px";
if(parseInt(document.getElementById("object").style.left) <0){
document.getElementById("object").style.left = 0 + "px";
}
}
function you(){
if(direction == 'you') return false;
direction = 'you';
document.getElementById("object").style.left = (parseInt(document.getElementById("object").style.left)+ 10) + "px";
if(parseInt(document.getElementById("object").style.left) > 490){
document.getElementById("object").style.left = 490 + "px";
}
}
document.onkeydown = function(e){
var tops = document.getElementById("object").style.top;
var e = e || window.event;
switch(e.keyCode){
case 40:
xia();
break;
case 38:
clearInterval(timer1);
clearInterval(timer3);
clearInterval(timer4);
timer2 = setInterval("shang()",500);
break;
case 37:
clearInterval(timer2);
clearInterval(timer1);
clearInterval(timer4);
timer3 = setInterval("zuo()",500);
break;
case 39:
clearInterval(timer2);
clearInterval(timer3);
clearInterval(timer1);
timer4 = setInterval("you()",500);
break;
default:
document.write("I'm looking forward to this weekend!")

}
};
</script>

</body>完整代码如上，请高手指点。怎么样才能实现点键盘上的方向键，小方块匀速远动，连续点击小方块不加速呢？
...全文
113 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
seachers 2011-08-03
  • 打赏
  • 举报
 回复
谢谢你的回答。
hongmei85 2011-08-03
  • 打赏
  • 举报
 回复
这样？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<title> new document </title>
<meta name="keywords" content="">
<meta name="description" content="">
</head>

<body>
<div id="desktop" style="border:1px solid #000; width:500px; height:500px; margin:0 auto; position:relative;">
<div id="object" style="position:absolute; top:10px; left:10px; width:10px; height:10px; background-color:#F00;"></div>
</div>
<script type="text/javascript">
var timer1,timer2,timer3,timer4;
var direction = null;
function xia(){
if(direction != "xia")
direction = "xia";
document.getElementById("object").style.top = (parseInt(document.getElementById("object").style.top)+ 10) + "px";
if(parseInt(document.getElementById("object").style.top) > 490){
document.getElementById("object").style.top = 490 + "px";
}


}
function shang(){
if(direction != 'shang')
direction = 'shang';
document.getElementById("object").style.top = (parseInt(document.getElementById("object").style.top)- 10) + "px";
if(parseInt(document.getElementById("object").style.top) <0){
document.getElementById("object").style.top = 0 + "px";
}
}
function zuo(){
if(direction != 'zuo')
direction = 'zuo';
document.getElementById("object").style.left = (parseInt(document.getElementById("object").style.left)- 10) + "px";
if(parseInt(document.getElementById("object").style.left) <0){
document.getElementById("object").style.left = 0 + "px";
}
}
function you(){
if(direction != 'you')
direction = 'you';
document.getElementById("object").style.left = (parseInt(document.getElementById("object").style.left)+ 10) + "px";
if(parseInt(document.getElementById("object").style.left) > 490){
document.getElementById("object").style.left = 490 + "px";
}
}
document.onkeydown = function(e){
var tops = document.getElementById("object").style.top;
var e = e || window.event;
switch(e.keyCode){
case 40:
clearInterval(timer1);
clearInterval(timer2);
clearInterval(timer3);
clearInterval(timer4);
timer1 = setInterval("xia()",500);
break;
case 38:
clearInterval(timer1);
clearInterval(timer2);
clearInterval(timer3);
clearInterval(timer4);
timer2 = setInterval("shang()",500);
break;
case 37:
clearInterval(timer1);
clearInterval(timer2);
clearInterval(timer3);
clearInterval(timer4);
timer3 = setInterval("zuo()",500);
break;
case 39:
clearInterval(timer1);
clearInterval(timer2);
clearInterval(timer3);
clearInterval(timer4);
timer4 = setInterval("you()",500);
break;
default:
document.write("I'm looking forward to this weekend!")

}
};
</script>

</body>
</html>
愚者只看星不看答案 2011-08-03
  • 打赏
  • 举报
 回复 




<div id="container" style="top:0;left:0;position:absolute;background-color:#eee;width:100px;height:100px;"></div>



<script type="text/javascript">



    //<![CDATA[



    var EventUtility = {



        addHandler: function (element, eventName, handler) {

            if (typeof element.addEventListener === "function")

                element.addEventListener(eventName, handler, false);

            else if (typeof element.attachEvent === "object")

                element.attachEvent("on" + eventName, handler);

            else

                element["on" + eventName] = handler;

        }

       

    };



    function handler(event) {

        var rate = 20;

        var keyCode = event.keyCode;

        var container = document.getElementById("container");

        switch (keyCode) {

            case 37: container.style.left = (parseInt(container.style.left, 10) - rate) + "px"; break;

            case 39: container.style.left = (parseInt(container.style.left, 10) + rate) + "px"; break;

            case 38: container.style.top = (parseInt(container.style.top, 10) - rate) + "px"; break;

            case 40: container.style.top = (parseInt(container.style.top, 10) + rate) + "px"; break;

            default: break;

        }

    }



    EventUtility.addHandler(document.documentElement,"keydown",handler);



    //]]>



</script>
没事眯一会 2011-08-03
  • 打赏
  • 举报
 回复
我也想知道，帮顶~
flash中物体运动基础之一---------匀速运动
本文介绍了一个简单的AS3程序，用于控制舞台上Ball类实例的移动。Ball类继承自MovieClip，通过键盘事件监听实现方向控制，并保持匀速运动。
视频教程-javascript零入门实战系列-JavaScript
本课程由7年PHP开发经验的讲师吴华授课，适合零基础学员。通过大量案例讲解JavaScript在网站中的应用，涵盖逻辑训练、网站特效、轮播、手风琴、键盘控制物体运动等，帮助学员快速掌握并应用JavaScript。
基于 HTML5 的 2D 射击游戏开发与实现 —— 以《雷霆战机》为例
本文围绕基于 HTML5 开发 2D 射击游戏《雷霆战机》展开，介绍开发环境与技术选型，阐述游戏架构、功能设计及关键技术实现，如 Canvas 绘图优化、碰撞检测算法等，还给出代码示例，最后对游戏功能扩展提出展望。
从2D到3D：CVAT标注工具升级指南，如何高效完成你的第一个3D物体检测任务
本文详解CVAT平台从2D向3D标注升级的核心要点，涵盖数据结构差异、三维工作区布局、九自由度立方体标注逻辑及快捷键扩展；介绍点云预处理、六步立方体标注法、多帧跟踪技巧；强调点云渲染优化、多模态对齐、复杂场景处理等高级实践，并说明3D标注质量验收标准与模型训练数据导出流程。
基于视频分析与大语言模型的Scratch编程作品自动化评估系统设计
在编程教育领域，如何高效、客观地评估学生的作品是一个核心挑战。传统的人工评估方法效率低下且难以规模化。自动化评估技术通过分析程序运行时的表现，结合预设的评估规则，能够提供一致、高效的反馈。其技术原理通常涉及对程序输出（如屏幕画面）的感知与理解。视频分析技术作为关键的感知层，能够从程序运行录像中提取结构化的语义事件，例如精灵的位置、运动轨迹和状态变化。大语言模型则扮演认知与推理的角色，它能理解用自然语言描述的复杂评估规则，并将观察到的事件序列与规则进行逻辑比对，从而判断功能目标的实现情况。这种“感知+认知”的
JavaScript

87,989

社区成员

224,684

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章