JavaScriptの場合は、function記述でクラスとなる。
クラスの作り方と使い方を勉強するためにカラーボールクラスを作った。
[box class=”box6″]
この記事の内容は、古い内容となります。
JavaScriptでのクラス宣言は現在classによる記述方法がとれるようになりました。
新しい情報は以下を参考にどうぞ。
[/box]
ボールを10個作って動かしてみた。（ちょっと、スーパーボールみたいになったかな？）
Ball.js
/*
* Ballクラス ボールが落ちてくる（はねて自然な感じで止まる）
*/
var Ball = function(){
// 円の半径を設定
var r = Math.floor(Math.random() *10) + 10;
// 初期位置
var x = 100 + r;
var y = Math.floor(Math.random() * SCREEN_HEIGHT) / 2;
// xy方向の加速度を設定
var vx = Math.floor(Math.random() * 5) + 1;
var dx = 1; // xの方向 1: 右 -1: 左
var vy = Math.floor(Math.random() * 5) + 1;
// 円の色をランダムで設定
var color = {r:0, g:0, b:0}; // RGB 0～255の値で設定
for(var i in color){
color[i] = Math.floor(Math.random() * 256);
}
var myColor = "rgb(" + color.r + ", " + color.g + ", " + color.b + ")";
console.log(myColor);
// 描画メソッド
this.draw = function(){
// 塗りつぶし円を描画
g.fillStyle = myColor;
g.beginPath();
g.arc(x, y, r, 0, Math.PI*2, false);
g.fill();
}
// 動作停止メソッド
this.stop = function(){
this.draw();
}
// 移動処理メソッド
this.move = function(){
// x方向
vx = vx - 0.005; // 適当に減らしている
if(vx < 0) vx = 0;
x += (vx*dx);
if(x < 0+r || x > SCREEN_WIDTH - r){ // 壁に当たると方向転換
dx = -dx;
}
// y方向
vy += 5.2;
y += vy;
if(y > SCREEN_HEIGHT - r){ // 地面に当たると方向転換
y = SCREEN_HEIGHT - r;
vy = -vy;
}
// ボールの停止条件
// y座標が地面について、x方向の加速度が0で、y方向の加速度が3未満のとき...適当です
if(y == SCREEN_HEIGHT - r && vx == 0 && Math.abs(vy) < 3.0){
this.update = this.stop;
console.log("Stop!");
}
this.draw();
return true;
};
// 更新処理
this.update = function(){
};
// インスタンス生成時の処理
this.update = this.move;
}
クラスの中には、変数と関数（メソッド）が定義できる。
Ballクラスでは、
r, x, y, vx, dx, vy, color, myColorが変数となる。
メソッドは、
draw(), stop(), move(), update()となっている。
ここでポイントは、update()メソッド！
空のメソッドなのだが、最後に
this.update = this.move;
という記述がある。
このクラスを生成したときにupdate()メソッドの内容をmove()メソッドにしておくよ、という意味だ。JavaScriptでは、関数に関数が代入できる。これはゲームなどを作る場合に、便利だ。外部からはupdate()メソッドを呼ぶだけにしておき、内部では、状況に応じて処理を変えることができる。
Ballクラスを実際に生成してつかってみる。
main.js
// -------------------------------------------------------------------------
// main.js クラスを使う
//
// created at 2014-06-30 on torisky.com
// -------------------------------------------------------------------------
/*
* グローバル変数
*/
var canvas = null; // キャンバス
var g = null; // コンテキスト
var $id = function(id){ return document.getElementById(id); };
var objects = []; // オブジェクト配列
var frame = 0;
/*
* 定数
*/
var SCREEN_WIDTH = 320;
var SCREEN_HEIGHT = 480;
var TICK = 1000/30; // 描画間隔
/*
* メイン処理
*/
var mainLoop = function(){
// 画面クリア
g.clearRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
// 生成したオブジェクトを動かす
for(var i in objects){
objects[i].update();
}
// フレームカウント
frame++;
// ループして描画更新
setTimeout(mainLoop, TICK);
};
/*
* 起動処理
*/
window.onload = function(){
// キャンバス情報取得
canvas = $id("canvas");
g = canvas.getContext("2d");
// 円を一つ生成
var arc = new Arc();
objects.push(arc);
// ボールを一つ生成
var ball = new Ball();
objects.push(ball);
// メインループ実行
mainLoop();
};
生成は、window.onloadでしている。
// ボールを一つ生成 var ball = new Ball(); objects.push(ball);
の部分だ。
newした後に、objectsという配列に生成したインスタンス変数ballを追加している。
これで、objects配列の名前で外部からはアクセスできる。
別のクラスArcも生成してからobjects配列に追加している。
実際に生成したクラスをゲームのキャラクタとして動かす場合には、update()メソッドを呼び出すだけで可能だ。
// 生成したオブジェクトを動かす
for(var i in objects){
objects[i].update();
}
どのクラスにも、update()メソッドを定義しておけば、同じ記述で別のクラスオブジェクトにアクセスできる。
コメント