物理运动学基础1
一开始当然得有一个运动的物体的和舞台，So......定义小球和舞台：
var ball = {
x:0,
y:100,
r:10,
draw:function(context){
context.strokeStyle = "#9b9b9b";
context.fillStyle = "#ffffff";
context.beginPath();
context.arc(this.x,this.y,this.r,0,Math.PI/180*360,true);
context.closePath();
context.stroke();
context.fill();
}
};
var context;
window.onload = function(){
context = document.getElementById("stage").getContext("2d");
ball.draw(context);
};
二维的世界里面物体的运动通常只有两个方向，也就是 x轴和y轴的运动，我们通过添加一些向量来让物体在x轴上面动起来！
var ball = {
x:0,
y:100,
vx:1,//x轴向量
r:10,
draw:function(context){
context.strokeStyle = "#9b9b9b";
context.fillStyle = "#ffffff";
context.beginPath();
context.arc(this.x,this.y,this.r,0,Math.PI/180*360,true);
context.closePath();
context.stroke();
context.fill();
}
};
var context;
window.onload = function(){
context = document.getElementById("stage").getContext("2d");
window.setInterval(update, 1000/30);
};
function update(){
context.clearRect(0,0,500,500);
ball.x +=ball.vx;
ball.draw(context);
};
Y轴你懂的！
现在，小球呢是动起来了，可是问题是他会跑一会就不见了！我们就添加一个边界出力顺便使用我们的要说的弹力！那我们就先添加一个边界处理吧！
var ball = {
x:100,
y:100,
vx:2,
vy:2,
r:10,
draw:function(context){
context.strokeStyle = "#9b9b9b";
context.fillStyle = "#ffffff";
context.beginPath();
context.arc(this.x,this.y,this.r,0,Math.PI/180*360,true);
context.closePath();
context.stroke();
context.fill();
}
};
var context;
const canvasWidth = canvasHeight = 500;
window.onload = function(){
context = document.getElementById("stage").getContext("2d");
window.setInterval(update, 1000/30);
};
function update(){
context.clearRect(0,0,500,500);
ball.x +=ball.vx;
ball.y +=ball.vy;
checkBorder();
ball.draw(context);
};
function checkBorder(){
if(ball.y-ball.r<0)//up
ball.vy*=-1;
if(ball.y+ball.r>canvasHeight)//buttom
ball.vy*=-1;
if(ball.x-ball.r<0)//left
ball.vx*=-1;
if(ball.x+ball.r>canvasWidth)//right
ball.vx*=-1;
};
上面的代码可以看出来，边界计算很简单，但是有一个问题我们的边界只处理了小球有更多的呢！那样checkBorder就臃肿不堪！
呵呵淡然还是小球对象自己在draw之前自己计算比较好！另外checkBorder也可以优化！如下：
var ball = {
x : 50,
y : 100,
vx : 2,
vy : 2,
r : 10,
draw : function(context) {
this.checkBorder();
context.strokeStyle = "#9b9b9b";
context.fillStyle = "#ffffff";
context.beginPath();
context.arc(this.x, this.y, this.r, 0, Math.PI / 180 * 360, true);
context.closePath();
context.stroke();
context.fill();
},
checkBorder : function() {
if (ball.y - ball.r < 0 || ball.y + ball.r > canvasHeight)//up buttom
ball.vy *= -1;
if (ball.x - ball.r < 0 || ball.x + ball.r > canvasWidth)//left right
ball.vx *= -1;
}
};
var context;
const canvasWidth = canvasHeight = 500;
window.onload = function() {
context = document.getElementById("stage").getContext("2d");
window.setInterval(update, 1000 / 30);
};
function update() {
context.clearRect(0, 0, 500, 500);
ball.x += ball.vx;
ball.y += ball.vy;
ball.draw(context);
};
上面我们默认给的是100%的回弹力！当然现实都会有损耗！可以增加摩擦系数(如：0.9)来逐渐减少弹力的大小如
ball.vx *= （-1*ball.friction）
ball.vy *= （-1*ball.friction）
那现在呢很容易我们就可以模仿出重力，添加重力。。。。g重力加速度：
var ball = {
x : 50,
y : 100,
vx : 2,
vy : 2,
r : 10,
g:0.98,
draw : function(context) {
this.checkBorder();
context.strokeStyle = "#9b9b9b";
context.fillStyle = "#ffffff";
context.beginPath();
context.arc(this.x, this.y, this.r, 0, Math.PI / 180 * 360, true);
context.closePath();
context.stroke();
context.fill();
},
checkBorder : function() {
if (ball.y - ball.r < 0 || ball.y + ball.r > canvasHeight)//up buttom
ball.vy *= -1;
if (ball.x - ball.r < 0 || ball.x + ball.r > canvasWidth)//left right
ball.vx *= -1;
if(ball.y+ball.r>canvasHeight)//防止重力加速度穿透
ball.y = canvasHeight - ball.r;
}
};
var context;
const canvasWidth = canvasHeight = 500;
window.onload = function() {
context = document.getElementById("stage").getContext("2d");
window.setInterval(update, 1000 / 30);
};
function update() {
context.clearRect(0, 0, 500, 500);
ball.vy += ball.g;
ball.y += ball.vy;
ball.x += ball.vx;
ball.draw(context);
};
当然我们也得修改边界的下方判断以防止重力加速度穿透问题！
显然v轴上面的加速东又岂止重力一个，x轴也因此得到了扩展所以x轴的加速度(ax)也可以用ball.x +=ball.vx;而ball.vx +=ball.ax,也就是牛顿的匀加速运动；所以重力其实就是y轴上的一个加速度！呵呵！其实人家名字起的很到位·····
另外也可以增加摩擦系数来给物体增加摩擦力在X轴或y轴上！
以上就是关于重力、弹力、加速度、及摩擦力的介绍！饿死了·····
