我想用jquery 控制一个对象a在一条有背景色的轨迹b上运动当运动到某个长度的时候判断是否依次按下了下面的图标箭头每个箭头都是一个图片每个图片都是一个对象把这些对象放在一个数组里面当a运动到指定的距离时实现ajax提交表单然后获取提交的数组循环判断是否正确感兴趣的一起搞下

jquery实现qq炫舞功能

2 个回答

发布于
2011-08-03

我用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>

yanyaoer

1.7k3812

发布于
2011-08-02

a放到b容器里, b设为相对定位, a绝对定位, 定时器设置a的移动速率加top值上面, 超过b的高度时从文档里移除元素, over

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

jquery实现qq炫舞功能

你尚未登录，登录后可以

怎么获取动态弹出对话框的模拟单击？

像下面这样的jquery是在哪一步实现数据的双向绑定的呢？

多行表格中jquery的选择器为什么会出现无法选中dom的情况？