<!-- This program provide implementation for gravitational forces using Javascript OOP style -->
<h1>Gravitational Forces</h1>
<canvas id="canvas">Not Supported</canvas>
<canvas id="canvas">Not Supported</canvas>
<script>
function GF(id){
this.x = 30;
this.y = 0;
this.width = 50;
this.height = 30;
this.screen_width = 500;
this.screen_height = 2000;
this.vo = 0;
this.vt = 0;
this.ho = 0;
this.ht = 0;
this.canvas = document.getElementById(id);
this.ctx = this.canvas.getContext('2d');
this.canvas.height = this.screen_height;
this.canvas.width = this.screen_width;
this.g = 10;
this.t = 0;
}
GF.prototype.drawLine = function(){
for(var i=0;i<100;i++){
this.ctx.fillStyle = '#444';
this.ctx.fillText(i,1,i*30);
}
}
GF.prototype.down = function(){
this.ht = this.ho + 0.5 * this.g * this.t * this.t;
this.vt = this.vo + this.g * this.t;
this.t = this.t + 0.1;
this.ctx.clearRect(20, 0, this.screen_width, this.screen_height);
this.ctx.fillRect(this.x, this.ht, this.width, this.height);
this.ctx.fillStyle = '#10f';
this.ctx.fillText('v: '+Math.round(this.vt),this.x+5,this.ht+10);
this.ctx.fillText('h: '+Math.round(this.ht),this.x+5,this.ht+20);
this.ctx.fillStyle = '#af0';
var d = this;
setTimeout(function(){d.down();},100);
}
this.x = 30;
this.y = 0;
this.width = 50;
this.height = 30;
this.screen_width = 500;
this.screen_height = 2000;
this.vo = 0;
this.vt = 0;
this.ho = 0;
this.ht = 0;
this.canvas = document.getElementById(id);
this.ctx = this.canvas.getContext('2d');
this.canvas.height = this.screen_height;
this.canvas.width = this.screen_width;
this.g = 10;
this.t = 0;
}
GF.prototype.drawLine = function(){
for(var i=0;i<100;i++){
this.ctx.fillStyle = '#444';
this.ctx.fillText(i,1,i*30);
}
}
GF.prototype.down = function(){
this.ht = this.ho + 0.5 * this.g * this.t * this.t;
this.vt = this.vo + this.g * this.t;
this.t = this.t + 0.1;
this.ctx.clearRect(20, 0, this.screen_width, this.screen_height);
this.ctx.fillRect(this.x, this.ht, this.width, this.height);
this.ctx.fillStyle = '#10f';
this.ctx.fillText('v: '+Math.round(this.vt),this.x+5,this.ht+10);
this.ctx.fillText('h: '+Math.round(this.ht),this.x+5,this.ht+20);
this.ctx.fillStyle = '#af0';
var d = this;
setTimeout(function(){d.down();},100);
}
var gf = new GF('canvas');
gf.down();
gf.drawLine();
</script>
No comments:
Post a Comment