7.1.1_物体的下落
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>物体的下落</title>
<style>
body{
background: #fff;
}
#canvas{
background: #eee;
}
#controls{
position: absolute;
left: 25px;
top: 25px;
}
</style>
</head>
<body>
<div id="controls">
<input id="clickBtn" type="button" value="start" />
</div>
<canvas id="canvas" width="500" height="600"></canvas>
</body>
<script>
var Sprite = function(name,painter,behaviors){
if(name !== undefined){ this.name = name; }
if(painter !== undefined){ this.painter = painter; }
this.top = 0;
this.left = 0;
this.width = 10;
this.height = 10;
this.velocityX = 0;
this.velocityY = 0;
this.visible = true;
this.animating = false;
this.behaviors = behaviors || [];
}
Sprite.prototype = {
paint:function(context){
if(this.painter !== undefined && this.visible){
this.painter.paint(this,context);
}
},
update:function(context,time){
for(var i=0;i<this.behaviors.length;i++){
this.behaviors[i].execute(this,context,time);
}
}
}
</script>
<script>
StopWatch = function(){};
StopWatch.prototype = {
startTime: 0,
running: false,
elapsed: undefined,
start:function(){
this.startTime = +new Date();
this.elapsed = undefined;
this.running = true;
},
stop:function(){
this.elapsed = (+new Date()) - this.startTime;
this.running = false;
},
getElapsedTime:function(){
if(this.running){
return (+new Date()) - this.startTime;
}else{
return this.elapsed;
}
},
isRunning:function(){
return this.running;
},
reset:function(){
this.elapsed = 0;
}
}
AnimationTimer = function(duration){
this.duration = duration;
}
AnimationTimer.prototype ={
duration:undefined,
stopwatch:new StopWatch(),
start:function(){
this.stopwatch.start();
},
stop:function(){
this.stopwatch.stop();
},
getElapsedTime:function(){
var elapsedTime = this.stopwatch.getElapsedTime();
return elapsedTime;
},
isRunning:function(){
return this.stopwatch.isRunning();
},
isOver:function(){
return this.stopwatch.getElapsedTime()>this.duration;
}
}
</script>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var clickBtn = document.getElementById('clickBtn');
var ledge_top = 100;
var gravity_force = 9.81;
var platform_height_in_meters = 8;
var pixelsPerMeter = (canvas.height - ledge_top)/platform_height_in_meters;
var lastTime = 0;
var moveBall = {
execute:function(sprite,context,time){
if(fallingAnimationTimer.isRunning()){
sprite.top +=sprite.velocityY*(time -lastTime)/1000;
lastTime = time;
sprite.velocityY = gravity_force*(fallingAnimationTimer.getElapsedTime()/1000)*pixelsPerMeter;
console.log(sprite.velocityY);
if(sprite.top>canvas.height){
stopFalling();
}
}
}
};
var fallingAnimationTimer = new AnimationTimer();
var ball = new Sprite('ball',
{paint:function(sprite,context){
var radius = sprite.width/2;
var x = sprite.left +radius;
var y = sprite.top +radius;
var width = sprite.width;
var height = sprite.height;
context.save();
context.beginPath();
context.arc(x,y,radius,0,Math.PI*2,false);
context.fillStyle ='rgb(218,165,32)';
context.fill();
context.restore();
}},
[moveBall]);
ball.left = 300;
ball.top = 50;
ball.width = 50;
ball.height = 50;
ball.paint(context);
clickBtn.onclick = function(){
startFalling();
}
function startFalling(){
clickBtn.disabled = true;
fallingAnimationTimer.start();
window.requestAnimationFrame(animate);
};
function stopFalling(){
clickBtn.disabled = false;
fallingAnimationTimer.stop();
ball.left = 300;
ball.top = 50;
ball.velocityY =0;
context.clearRect(0,0,canvas.width,canvas.height);
ball.paint(context);
window.cancelAnimationFrame(animate);
};
function animate(time){
context.clearRect(0,0,canvas.width,canvas.height);
ball.update(context,time);
ball.paint(context);
window.requestAnimationFrame(animate);
}
function drawPlate(){
context.save();
context.beginPath();
context.fillStyle = 'darkslategray';
context.fillRect(325,100,100,15);
context.restore();
};
</script>
</html>