Javascript 弹跳拖球
我有一个可拖动的球,当你拖动并释放它时,它会朝着相反的方向移动。我怎样才能使它从墙上反弹?同样,如果它应该以600px的速度运行,并且在200px之后撞到墙,那么它应该以400px的速度运行。Javascript 弹跳拖球,javascript,draggable,bounce,Javascript,Draggable,Bounce,我有一个可拖动的球,当你拖动并释放它时,它会朝着相反的方向移动。我怎样才能使它从墙上反弹?同样,如果它应该以600px的速度运行,并且在200px之后撞到墙,那么它应该以400px的速度运行。 我分叉了你的JSFIDLE并添加了一个简单的弹跳机制: 我稍微改变了球的移动逻辑,以下是一些说明我的方法的指针: 对于简单的动作来说,使用CSS动画是非常好的,但是任何更加动态和复杂的动作最好留给JS来保存大量CSS代码。 在本例中,所有移动都在JS中逐帧处理,在渲染每个帧之前都会进行角度和摩擦力计算,
我分叉了你的JSFIDLE并添加了一个简单的弹跳机制: 我稍微改变了球的移动逻辑,以下是一些说明我的方法的指针: 对于简单的动作来说,使用CSS动画是非常好的,但是任何更加动态和复杂的动作最好留给JS来保存大量CSS代码。 在本例中,所有移动都在JS中逐帧处理,在渲染每个帧之前都会进行角度和摩擦力计算,而不是计算最终位置并设置路径动画。如有必要,每个勾号会计算下一个弹跳位置,然后显示给用户。滴答声之间的延迟为16ms,约为62.5FPS。 我将您的位置变量移动到circle类中的命名属性,以使其比pos1、pos2、pos3更易于阅读。。。都是全局变量。 数学很好学,我用毕达格算出鼠标指针的距离,用三角键算出鼠标指针的角度,然后移动圆圈。反弹角假设入射角等于反射角。反弹也假设完全弹性碰撞,但如果需要,可以降低反弹的速度。 在发布之前,我将轻微的移动改为使用CSS翻译,而不是实际移动元素。 最后一点,如果你想做更多的图形化的东西,我建议你看看HTML5,它是为这样的东西而构建的。
let circle = document.getElementById("circle");
let pos1 = 0;
let pos2 = 0;
let pos3 = 0;
let pos4 = 0;
let mouseDown = false;
let currentCircleTop = 0;
let currentCircleLeft = 0;
circle.addEventListener("mousedown", function(e){
mouseDown = true;
pos3 = e.pageX;
pos4 = e.pageY;
currentCircleTop = circle.offsetTop;
currentCircleLeft = circle.offsetLeft;
this.style.transition = "0.3s all";
})
document.addEventListener("mousemove", function(e){
if(mouseDown){
pos1 = pos3 - e.pageX;
pos2 = pos4 - e.pageY;
pos3 = e.pageX;
pos4 = e.pageY;
circle.style.top = circle.offsetTop - pos2 + "px";
circle.style.left = circle.offsetLeft - pos1 + "px";
}
})
document.addEventListener("mouseup", function(){
if(mouseDown){
mouseDown = false;
circle.style.transition = "0.8s all";
circle.style.top = currentCircleTop + ((currentCircleTop - circle.offsetTop) * 20) + "px";
circle.style.left = currentCircleLeft + ((currentCircleLeft - circle.offsetLeft) * 20) + "px";
}
})
let circle = document.getElementById("circle");
circle.x=300;
circle.y=150;
circle.direction=0; //in radians
circle.velocity=0;
circle.friction=0.05; //0 to 1
let container=document.getElementById("circleContainer");
container.width=parseInt(container.style.width.slice(0,-2)); //Gets width and height as usable integers
container.height=parseInt(container.style.height.slice(0,-2));
let mouse={
x:0,
y:0,
down:false,
};
let dragDisplayMultiplier=0.2; //How much the circle moves while a drag is in progress.
let velocityDampener=5; //How much the velocity is reduced immediately after the circle is released
function displayCircle(){ //Sets the position of the circle
circle.style.top=circle.y+"px";
circle.style.left=circle.x+"px"
}
function step(){ //Uses trig to work out the next positon of the circle
return {
x:circle.x+circle.velocity*Math.cos(circle.direction),
y:circle.y+circle.velocity*Math.sin(circle.direction),
}
}
function tick(){ //Physics function
circle.velocity*=1-circle.friction; //Decrease the circle's velocity with friction
let newLocation=step(); //Determine the next location after the circle has travelled
//If the next location of the circle is outside the container, the direction is changed.
//Angle of incidence equals angle of reflection.
if(newLocation.x<0 || newLocation.x+20>container.width)
circle.direction=Math.PI-(circle.direction);
if(newLocation.y<0 || newLocation.y+20>container.height)
circle.direction*=-1;
//The next location is now inside the container, so the circle's position can be updated
newLocation=step();
circle.x=newLocation.x;
circle.y=newLocation.y;
//Displays the circle's new position to the user
displayCircle();
//If the circle still has reasonable velocity, the simulation is continued after waiting 16ms
if(circle.velocity>1){
setTimeout(tick,16);
}
}
circle.addEventListener("mousedown", function(e){
mouse.down=true;
});
document.addEventListener("mousemove", function(e){
mouse.x=e.pageX;
mouse.y=e.pageY;
if(mouse.down) //Offsets the ball whilst the drag is in progress using CSS translation
circle.style.transform=`translate(${((circle.x+mouse.x)/2-circle.x)*dragDisplayMultiplier}px, ${((circle.y+mouse.y)/2-circle.y)*dragDisplayMultiplier}px)`;
});
document.addEventListener("mouseup", function(){
if(mouse.down){
mouse.down = false;
circle.style.transform="translate(0px, 0px)"; //Resets the CSS translation from the "mousemove" event
circle.velocity=Math.sqrt((circle.x-mouse.x+10)**2 + (circle.y-mouse.y+10)**2); //Sets the velocity to the distance bewteen the circle and mouse pointer
circle.velocity/=velocityDampener; //Reduces the velocity slightly for ease of use
circle.direction=Math.atan2((circle.y-mouse.y+10),(circle.x-mouse.x+10)); //Uses atan2 to find the angle between the circle and the mouse pointer
setTimeout(tick,16); //Starts the physics simulation
}
});
displayCircle(); //Sets the initial circle top and left to match x and y