こんにちは。
JavaScript のクラスがいまいちピンときてない ひろゆき です。
今回は、ひよこちゃんにジャンプと首振りさせることに挑戦してみます。
ただし、クラス内にメソッド作って、それで動かしてみたいと思います。
その前に、JavaScriptのクラスってどういうものなのか、参考資料を見ていきます。
「FN1212004 – EaselJSのPointクラスの実装を見る – HTML5 : テクニカルノート」
「JavaScriptにおけるクラス定義 | kudox.jp」
「Actionscript3erが覚えるJavascriptでのクラス開発まとめ | 宇都宮ウエブ制作所」
CreateJS の Point クラスで、クラスの構造を見て行きましょう。
[sourcecode language=”js”]//名前空間
this.createjs = this.createjs||{};
(function() {
//コンストラクタ
var Point = function(x, y) {
this.initialize(x, y);
}
var p = Point.prototype;
//プロパティ(public)
p.x = 0;
p.y = 0;
//メソッド(public)
p.initialize = function(x, y) {
this.x = (x == null ? 0 : x);
this.y = (y == null ? 0 : y);
}
p.clone = function() {
return new Point(this.x, this.y);
}
p.toString = function() {
return "[Point (x="+this.x+" y="+this.y+")]";
}
createjs.Point = Point;
}());[/sourcecode]
なんとなく分かったような分からないような。
HTMLソースコード
[sourcecode language=”js”]<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Piyo [class] | CreateJS</title>
<link rel="stylesheet" type="text/css" href="css/index.css" media="all">
<script src="js/easeljs-0.7.0.min.js"></script>
<script src="js/tweenjs-0.5.0.min.js"></script>
<script src="js/movieclip-0.7.0.min.js"></script>
<script src="js/preloadjs-0.4.0.min.js"></script>
<script src="js/soundjs-0.5.0.min.js"></script>
<script src="js/Piyo.js"></script>
<script src="js/stats.min.js"></script>
<script>
var canvas, stage, piyo, stats;
function init() {
stats = new Stats();
stats.setMode(0);
stats.domElement.style.position = "fixed";
stats.domElement.style.right = "0px";
stats.domElement.style.top = "0px";
document.body.appendChild(stats.domElement);
canvas = document.getElementById("canvas");
stage = new createjs.Stage(canvas);
var sky = new createjs.Shape();
stage.addChild(sky);
sky.graphics.beginLinearGradientFill(["#0069A0", "#00AAE4"], [0, 1], 0, 0, 0, 150);
sky.graphics.drawRect(0, 0, 600, 150);
var ground = new createjs.Shape();
stage.addChild(ground);
ground.graphics.beginLinearGradientFill(["#99CC33", "#7EB133"], [0, 1], 0, 150, 0, 200);
ground.graphics.drawRect(0, 150, 600, 50);
var title = new createjs.Text("CreateJS", "24px Myriad Pro", "#FFFFFF");
stage.addChild(title);
title.textAlign = "center";
title.textBaseline = "bottom";
title.x = canvas.width/2;
title.y = 65;
title.alpha = 0.6;
var version = new createjs.Text("[0.6.0]", "14px Myriad Pro", "#FFFFFF");
stage.addChild(version);
version.textAlign = "center";
version.textBaseline = "bottom";
version.x = canvas.width/2;
version.y = 80;
version.alpha = 0.6;
var subtitle = new createjs.Text("class", "20px Myriad Pro", "#FFFFFF");
stage.addChild(subtitle);
subtitle.textAlign = "center";
subtitle.textBaseline = "bottom";
subtitle.x = canvas.width/2;
subtitle.y = 120;
subtitle.alpha = 0.6;
var publish = new createjs.Text("authoring: Sublime Text + Flash CS6 [CreateJS]", "14px Myriad Pro", "#FFFFFF");
stage.addChild(publish);
publish.textAlign = "right";
publish.textBaseline = "bottom";
publish.x = canvas.width – 10;
publish.y = 20;
publish.alpha = 0.6;
piyo = new lib.Piyo();
stage.addChild(piyo);
piyo.x = canvas.width/2;
piyo.y = 170;
stage.enableMouseOver(10);
var loader = new createjs.LoadQueue(false);
loader.installPlugin(createjs.Sound);
loader.addEventListener("complete", loaded);
loader.loadFile({id: "bound", src: "assets/bound.mp3"});
loader.loadFile({id: "se", src: "assets/piyo.mp3"});
stage.update();
createjs.Ticker.setFPS(30);
//createjs.Ticker.useRAF = true;
createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;
//createjs.Ticker.addListener(this);
}
function loaded(event) {
//createjs.Ticker.addListener(this);
createjs.Ticker.addEventListener("tick", tick);
}
function tick() {
piyo.update();
stage.update();
stats.update();
}
function playSound(id, volume) {
var sound = createjs.Sound.play(id);
sound.volume = volume;
}
</script>
</head>
<body onload="init();" style="background-color:#D4D4D4">
<canvas id="canvas" width="600" height="200" style="background-color:#FFFFFF"></canvas>
</body>
</html>[/sourcecode]
Piyo.js
[sourcecode language=”js”](function (lib, img, cjs) {
var p; // shortcut to reference prototypes
// stage content:
(lib.Piyo = function() {
this.initialize();
// container
this.container = new lib.piyo();
this.container.setTransform(0,0,1,1);
this.addChild(this.container);
// mouse event
this.addEventListener("click", this.click);
this.addEventListener("mouseover", this.rollOver);
}).prototype = p = new cjs.Container();
p.nominalBounds = new cjs.Rectangle(5,4,50,64);
// jump
p.jumping = false;
p.click = function(event) {
var t = event.currentTarget;
if (!t.jumping) {
playSound("bound", 0.1);
t.jumping = true;
}
};
// swing
p.swinging = false;
p.rollOver = function(event) {
var t = event.currentTarget;
if (!t.swinging) {
playSound("se", 0.1);
t.swinging = true;
}
};
// update
p.update = function() {
if (this.jumping) this.jump();
if (this.swinging) this.swingHead();
};
p.jumpHeight = 0;
p.acceleration = 0;
//p.speed = initSpeed;
p.speed = 30;
p.jump = function() {
var startPos = 0;
var initSpeed = 30;
var gravity = 4;
var bounce = 0.8;
var limit = 18;
var shadeHeight = 100;
this.acceleration += gravity;
this.jumpHeight += this.speed – this.acceleration;
if (this.jumpHeight <= 0) {
playSound("bound", 0.1);
this.jumpHeight = 0;
this.acceleration = 0;
this.speed *= bounce;
}
if (this.speed < limit) {
this.jumping = false;
this.jumpHeight = 0;
this.acceleration = 0;
this.speed = initSpeed;
}
this.container.base.y = startPos – this.jumpHeight;
this.container.shade.alpha = 1 – this.jumpHeight/shadeHeight;
};
//p.angle = initAngle;
p.angle = -15;
p.swing = false;
p.swingHead = function() {
var friction = -0.8;
var initAngle = -15;
if (Math.abs(this.angle) > 1) {
if (this.swing) {
this.container.base.head.rotation = this.angle;
this.angle *= friction;
} else {
this.container.base.head.rotation = 0;
}
this.swing = !this.swing;
} else {
this.swinging = false;
this.container.base.head.rotation = 0;
this.angle = initAngle;
}
};
(以下略)[/sourcecode]
this だらけ！ これでいいのか、一抹の不安。
[追記] (2013.05.29.)
SoundJS の 0.4.1 へのバージョンアップに伴い、スクリプトを一部修正しました。
[追記] (2013.06.30.)
Ticker.addListener() は非推奨になっているようなので、書き換えました。
[追記] (2013.10.30.)
CreateJS を 0.7.0 にバージョンアップ。
Ticker.useRAF は非推奨になっているようなので、書き換えました。
Piyo.jsも、書き換えました。
1 Comment
[…] JS初心者が始めるCreateJS 第10回 […]