開発日誌

jQueryではじめるJavaScript : ボールを動かしてみる

今回はjQueryの第4回目、今までのプログラムを使って"ボールを動かしてみる"サンプルプログラムを作ってみます。

今までのものはわりと地味なサンプルでしたが、今回のサンプルは「おぉ!プログラムだ」と実感できると思います。
今回作ったものはこちらからダウンロードできます。sample4.zip

  <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
  <title>ボールバウンド</title>
  <style type="text/css">
	div#box {
		width:400px;
		height:300px;
		border:1px #999 solid;
		position:relative;
	}
	div.ball {
		left:0px;
		top:0px;
		position:absolute;
	}
  </style>
  <script type="text/javascript" src="jquery.min.js"></script>
  <script type="text/javascript">
	var velocity = {x:4, y:7};

	$(function(){
		redraw();
	});
	function redraw()
	{
		// 外枠のサイズを取得
		var boxWidth = parseFloat($('#box').css('width'));
		var boxHeight = parseFloat($('#box').css('height'));

		// ボールの位置を取得
		var posLeft = parseFloat($('#ball').css('left'));
		var posTop = parseFloat($('#ball').css('top'));

		// ボールを移動
		posLeft += velocity.x;
		posTop += velocity.y;

		// 外枠から出ないように調整
		if(posLeft < 0 || posLeft > boxWidth){
			velocity.x *= -1;
		}
		if(posTop < 0 || posTop > boxHeight){
			velocity.y *= -1;
		}

		// 移動したボールの位置のCSSをセット
		$('#ball').css({left:posLeft, top:posTop});

		setTimeout(redraw, 50);
	}
  </script>

  <div id="box">
    <div id="ball" class="ball">●</div>
  </div>


[ブラウザ表示]
※ ブラウザおよびJavaScriptの設定によっては動かないことがあります。

こんな感じに動きます。
それではプログラムの解説していきます

[プログラム序盤部分]
	var velocity = {x:4, y:7};

	$(function(){
		redraw();
	});

velocity はボールの初期速度です。
この数値を変更すればボールを速くしたり遅くしたりできます。

$(function(){ の箇所がちょっと混乱するかと思います。第1回で $(...) は「セレクター」だといっていましたが、中に関数が入っている場合はまったく違った動作になり、"HTMLがすべて読み込まれて準備ができたら関数を実行"します。
「まあ、そういうもんだ」と覚えておいてください。

[プログラム中盤部分]
		// 外枠のサイズを取得
		var boxWidth = parseFloat($('#box').css('width'));
		var boxHeight = parseFloat($('#box').css('height'));

		// ボールの位置を取得
		var posLeft = parseFloat($('#ball').css('left'));
		var posTop = parseFloat($('#ball').css('top'));
前回勉強したCSSの値を取ってきています。ただし、width や left の値は"○○px"のように余計な"px"という文字が入ってしまうので、parseFloat() をつかって数値だけにしています。

[プログラム終盤部分]
		setTimeout(redraw, 50);
setTimeout() は一定時間後に関数を実行してくれる処理です。ここでは0.05秒後に関数redraw() を実行します。そこで実行される redraw() もまた0.05秒後に redraw() を実行するので、結局、0.05秒間隔で redraw() が実行されます。


"ボールを移動"の箇所を変更すれば、万有引力のリンゴのようにボールが自由落下する動作もつくれるので余裕があれば作ってみてください。

(teruhisa)

Webシステムのツボとは

オープンソースの紹介や、プログラミング講座、フリーソフトのレビューなど、Webエンジニアが送る、つれづれ日記。
【隔週金曜日更新】

運営会社:株式会社ジーピーオンライン

RSSを購読する

Monthly Archive