HTML5 Canvas と JavaScript を使って作る追尾サンプル 02 – Circle class を定義, 生成, 更新, 描画
今回は Circle class の定義を行います. このサンプルの根幹部分になります.
SAMPLE
今回制作するサンプルはこちら.
VIDEO
チュートリアルムービー
CODE
今回制作したサンプルの script 部分です.
// 定数 var FPS = 60; var SCREEN_WIDTH = 640; var SCREEN_HEIGHT = 480; var CIRCLE_RADIUS = 30; var CIRCLE_MAX_NUM = 10; // グローバル var global = {}; global.context = null; global.circleList = []; window.onload = function() { init(); run(); }; var init = function() { var canvas = $id("c"); global.context = canvas.getContext("2d"); for (var i=0; i<CIRCLE_MAX_NUM; ++i) { global.circleList.push(new Circle( 100*i+10, 100, "white" )); } }; var run = function() { var _run = function() { update(); draw(); setTimeout(_run, 1000.0/FPS); }; setTimeout(_run, 1000.0/FPS); }; var update = function() { for (var i=0,len=global.circleList.length; i<len; ++i) { global.circleList[i].update(); } }; var draw = function() { var ctx = global.context; ctx.fillStyle = "black"; ctx.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT); // 円を描画 for (var i=0,len=global.circleList.length; i<len; ++i) { global.circleList[i].draw(ctx); } }; /** * Circle クラス */ var Circle = function(x, y, color) { this.x = x || 0; this.y = y || 0; this.color = color || "white"; }; Circle.prototype = { x: null, y: null, color: null, update: function() { ++this.x; ++this.y; }, draw: function(ctx) { ctx.fillStyle = this.color; ctx.beginPath(); ctx.arc(this.x, this.y, CIRCLE_RADIUS, 0, Math.PI*2, false); ctx.fill(); ctx.closePath(); } }; [/code]</pre> </section> <section> <h2>TIPS</h2> <section> <h3>クラスを定義</h3> <p> クラス定義の方法については以前<a href="http://tmlife.net/programming/javascript/javascript-define-class-definition.html">こちら</a>で詳しく説明しています. 今回は C++ と比較しながら解説してみます. </p> <p> JavaScript のクラス定義の方法は少し変わっています. 正確には JavaScript には class という概念はなく prototype チェーンを使って class のような挙動を実現する形になります. </p> <h4>JavaScript クラス定義</h4> <p> 今回のサンプルでは下記のコードで Circle class を定義しています. </p> <pre class="prettyprint">[code] /** * Circle クラス */ var Circle = function(x, y, color) { this.x = x || 0; this.y = y || 0; this.color = color || "white"; }; Circle.prototype = { x: null, y: null, color: null, update: function() { // TODO: 更新 }, draw: function(ctx) { // TODO: 描画 } };
C++ クラス定義
C++ で同じようなクラスを定義すると下記のような形になります.
class Circle { public : Circle(int x=0, int y=0) : _x(x), _y(y) {} void update() { // TODO: 更新 } void draw() { // TODO: 描画 } private: int _x; int _y; };
C/C++ や Java を学んだことのある方は上記のコードで照らしあわせていただければなんとなく JavaScript での クラス定義の方法が分かるかと思います.
変数にデフォルト値を設定
JavaScript のちょっとした小技です.
this.x = x || 0;
と書くと x に数値が入っていた場合は x が, undefined だった場合 0 が this.x に入ります.
JavaScript ではよく使うので覚えておいて下さい.
次回は Circle が追尾するプログラムを実装します.
[…] 02 – Circle class を定義, 生成, 更新, 描画 […]