投掷物体,用鼠标选中一个物体,拖拽着它向某个方向移动,松开鼠标后物体沿着拖拽的方向继续移动。
在投掷物体时,必须在拖拽物体的过程中计算物体的速度向量,并在释放物体时将这个速度向量赋给物体。例如以每帧10个像素的速度向右拖拽物体,那么在释放物体时,他的速度向量应该是 vx = 10。
在拖拽物体时,它会在每一帧拥有一个新的位置。用当前帧的位置减去上一帧的位置,就可以计算出在这一帧所移动的距离。这就是每帧移动像素的速度向量值。
速度向量 = 新的位置 - 旧的位置
1、在 mousedown 时,用 oldX 和 oldY 变量保存小球旧的 x、y 坐标位置
oldX = ball.x;
oldY = ball.y;
2、在drawFrame中,用物体当前的 x、y 轴坐标分别减去 oldX 与 oldY,从而获得当前的速度向量,最后将 oldX 和 oldY 变量更新为物体当前的位置:
vx = ball.x - oldX;
vy = ball.y - oldY;
oldX = ball.x;
oldY = ball.y;
代码实现如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,width=device-width">
<title></title>
<style>
*{margin: 0;padding: 0}
body {
background-color: #eee
}
canvas {
background-color: #fff
}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="400">
Your browser does not support HTML5 Canvas.
</canvas>
<script>
(function(){
window.addEventListener("load", eventWindowLoaded, false);
function eventWindowLoaded(){
canvasApp();
}
function canvasSupport(e){
return !!e.getContext;
}
function canvasApp(){
let canvas = document.getElementById("canvas");
if(!canvasSupport(canvas)){
return ;
}
// start
let context = canvas.getContext("2d");
drawScreen(canvas, context);
}
// write your codes
function drawScreen(canvas, context){
let mouse = captureMouse(canvas);
let ball = new Ball();
let vx = Math.random() * 10 - 5;
let vy = -10;
let bounce = -0.7;
let gravity = 0.2;
let isMouseDown = false;
let oldX, oldY;
let left = 0,
right = canvas.width,
top = 0,
bottom = canvas.height;
ball.x = canvas.width / 2;
ball.y = canvas.height / 2;
canvas.addEventListener("mousedown", function() {
if (containsPoint(ball.getBounds(), mouse.x, mouse.y)) {
isMouseDown = true;
oldX = ball.x;
oldY = ball.y;
canvas.addEventListener("mouseup", onMouseUp, false);
canvas.addEventListener("mousemove", onMouseMove, false);
}
}, false);
function onMouseUp() {
isMouseDown = false;
canvas.removeEventListener("mouseup", onMouseUp, false);
canvas.removeEventListener("mousemove", onMouseMove, false);
}
function onMouseMove(event) {
ball.x = mouse.x;
ball.y = mouse.y;
}
function trackVelocity() {
vx = ball.x - oldX;
vy = ball.y - oldY;
oldX = ball.x;
oldY = ball.y;
}
function checkBoundaries() {
vy += gravity;
ball.x += vx;
ball.y += vy;
if (ball.x + ball.radius > right) {
ball.x = right - ball.radius;
vx *= bounce;
} else if (ball.x - ball.radius < left) {
ball.x = left + ball.radius;
vx *= bounce;
}
if (ball.y + ball.radius > bottom) {
ball.y = bottom - ball.radius;
vy *= bounce;
} else if (ball.y - ball.radius < top) {
ball.y = top + ball.radius;
vy *= bounce;
}
}
(function drawFrame() {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
if (isMouseDown) {
trackVelocity();
} else {
checkBoundaries();
}
ball.draw(context);
} ())
}
})();
</script>
<script>
function containsPoint(rect, x, y) {
return !(x < rect.x || x > rect.x + rect.width || y < rect.y || y > rect.y + rect.height);
}
function captureMouse(element) {
var mouse = {x: 0, y: 0, event: null},
body_scrollLeft = document.body.scrollLeft,
body_scrollTop = document.body.scrollTop,
element_scrollLeft = document.documentElement.scrollLeft,
element_scrollTop = document.documentElement.scrollTop,
offsetLeft = element.offsetLeft,
offsetTop = element.offsetTop;
element.addEventListener("mousemove", function(){
var x, y;
if(event.pageX || event.pageY){
x = event.pageX;
y = event.pageY;
}else{
x = event.clientX + body_scrollLeft + element_scrollLeft;
y = event.clientY + body_scrollTop + element_scrollTop;
}
x -= offsetLeft;
y -= offsetTop;
mouse.x = x;
mouse.y = y;
mouse.event = event;
}, false);
return mouse;
}
</script>
<script>
function Ball(radius, color) {
if (radius === undefined) {
radius = 40;
}
if (color === undefined) {
color = "#ff0000";
}
this.x = 0;
this.y = 0;
this.color = color;
this.radius = radius;
}
Ball.prototype.draw = function(context) {
context.save();
context.translate(this.x, this.y);
context.fillStyle = this.color;
context.beginPath();
context.arc(0, 0, this.radius, 0, 360 * Math.PI / 180, false);
context.closePath();
context.fill();
context.restore();
}
Ball.prototype.getBounds = function() {
return {
x: this.x - this.radius,
y: this.y - this.radius,
width: this.radius * 2,
height: this.radius * 2
};
}
</script>
</body>
</html>