<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
<title>follow?me</title>
<style>
#border{
width:300px;
height:500px;
border:1px?red?solid;
margin:50px?auto;
position:relative;
}
#kuai{
height:20px;
width:20px;
border-radius:10px;
border:1px?red?solid;
background:green;
position:absolute;
}
</style>
</head>
<body>
<div?id="border">
????<div?id='kuai'>
????</div>
</div>
</body>
<script>
var?border=document.getElementById('border');
var?div=document.getElementById('kuai');
//跟隨鼠標(biāo)移動(dòng)
/*document.onmousemove=function?(ev){
var?Event=ev||event;
div.style.left=Event.clientX+'px';
div.style.top=Event.clientY+'px';
}*/
//方向鍵控制
var?w,a,s,d;
var?timer=null;
timer=setInterval(function?(){
if(s){
div.style.top=div.offsetTop-10+'px';
if(div.offsetTop<=0){
//alert('');
div.style.top=0;
}
}
if(w){
div.style.top=div.offsetTop+10+'px';
}
if(a){
div.style.left=div.offsetLeft-10+'px';
if(div.offsetLeft<=0){
//alert('');
div.style.left=0;
}
}
if(d){
div.style.left=div.offsetLeft+10+'px';
}
},40)
document.onkeydown=function(ev){
var?Event=ev||event;
switch(Event.keyCode){
case?37:
a=true;
break;
case?38:
s=true;
break;
case?39:
d=true;
break;
case?40:
w=true;
break;
}
}
document.onkeyup=function(ev){
var?Event=ev||event;
switch(Event.keyCode){
case?37:
a=false;
break;
case?38:
s=false;
break;
case?39:
d=false;
break;
case?40:
w=false;
break;
}
}
</script>
</html>
用上下左右控制游動(dòng)，不超過(guò)邊界，左邊上邊實(shí)現(xiàn)了，下邊右邊怎么解決
秋高水長(zhǎng)
2016-04-11 08:48:02
