2011年6月21日火曜日

HTML5 - Canvas 自然なジャンプをする四角形

地球には重力がありますので、飛んでもしまいには落ちます。飛ぶときは初速度がありますが、この速度は毎秒9.8m/s2重力によって減速します。当然落下中は毎秒9.8m/s2速度が増します。この9.8m/s2を重力加速度といいます。9.8m/s2というのは大体の数値で、場所や色々な条件によってこの速度は微妙に変わります。この自然界の掟をプログラムのジャンプに反映させると、いかにも自然なジャンプに見えるのであります。


やはりブログトップページからは絵が見られませんので、単一ページで見てください。



<canvas id="jump1" width="400" height="400"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("jump1");
var ctx = canvas.getContext("2d");
ctx.fillStyle = 'green';

var x = 0;
var y = 370;
var vy = 5;
var g = 0.08;

tm = setInterval(jump,10);

function jump(){
 //画面のクリア
 ctx.clearRect(0,0,400,400);
 ctx.fillRect(x,y,30,30);
 //jumpすると重力によって、-9.8m/s2速度が下がる
 vy = vy - g;
 y = y - vy;
 if(y>370){
  vy = 5;
  y = 370;
 } 
}
</script>

0 件のコメント:

コメントを投稿