我用DIV实现的 很简陋 Chrome下可以用 其实这个可以用第三方类库来写 这样效果更流畅
http://raphaeljs.com/ Raphaël
感觉这个跟服务端交流的话 不仅不靠谱 还容易增大服务器流量 事实上这个用(new Date()).getTime() 来获取的话也是不靠谱的 因为js对于时间无法控制到很精确 特别是毫秒级的 你比如设置移动时间为500ms 结果物体走到那用了600ms 就容易造成误判
这个可以用闭包保护变量 但是数值初始化又是一个问题 如果这个想做真正的公平的游戏那是不可能的 毕竟你源代码就在那 用户看一下就知道了 所以本地判断提交到服务端 服务端初始化数据是最好的选择 当然也可以完全本地端
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>测试</title>
<script type="text/javascript">
keyMap = {
'37' : '左',
'38' : '上',
'39' : '右',
'40' : '下'
};
window.shunxu = 1;
window.action = [0,37,40,37,39];
window.fengshu = [0,0,0,0,0];
window.onload = function(){
(function move(){
var b = document.getElementById('ball');
var l = document.getElementById('line');
posX = b.style.left == ""?0:parseInt(b.style.left,10);
b.style.left = (posX + 1) + 'px';
if(posX <= 979){
setTimeout(move,1);
}else{
alert('你的分数为'+window.fengshu);
}
})();
window.addEventListener('keydown',addKey,true);
}
function addKey(){
var e = window.event || arguments[0];
if(window.shunxu <= 4){
window.fengshu[window.shunxu] = (window.action[window.shunxu] === (e.keyCode) && (Math.abs(document.getElementById('ball').offsetLeft - document.getElementById('ball_'+window.shunxu).offsetLeft) <= 10))?10-Math.abs(document.getElementById('ball').offsetLeft - document.getElementById('ball_'+window.shunxu).offsetLeft):0;//判断分数 第一是按键正确 第二是距离元素像素范围-10 - 10之间 0为正中心
console.log(document.getElementById('ball').offsetLeft - document.getElementById('ball_'+window.shunxu).offsetLeft);
window.shunxu++;
}else{
console.log('俺关了');
}
}
</script>
<style type="text/css">
#line{width:1000px; height:20px; border:1px solid #eee;}
#ball{height:20px; width:20px; background:#333; position:relative; top:0px; left:0px; z-index:1000;}
#ball_1{height:20px; width:20px; background:#fefefe; position:relative; top:-20px; left:200px;z-index:1; text-align:center; line-height:20px;}
#ball_2{height:20px; width:20px; background:#fefefe; position:relative; top:-40px; left:400px;z-index:2; text-align:center; line-height:20px;}
#ball_3{height:20px; width:20px; background:#fefefe; position:relative; top:-60px; left:600px;z-index:3; text-align:center; line-height:20px;}
#ball_4{height:20px; width:20px; background:#fefefe; position:relative; top:-80px; left:800px;z-index:4; text-align:center; line-height:20px;}
</style>
</head>
<body>
<div id="line">
<div id="ball"></div>
<div id="ball_1">←</div>
<div id="ball_2">↓</div>
<div id="ball_3">←</div>
<div id="ball_4">→</div>
</div>
</body>
</html>
