![[kaneko lab.]](https://www.kkaneko.jp/info/logo_png.png){kind=logo}
Web アプリケーション開発を通じて，以下のスキルを習得する．
オープンソースソフトウェアとは，ソースコードが公開され，使用・改変・再配布が自由なソフトウェアである．多くは無償で提供され，プログラミング学習や開発に役立つ．
オープンソースソフトウェアにも開発者の著作権がある．無断での商用利用や著作者情報の改変など，ライセンス条件に反する行為は避ける．
注意：オープンソースソフトウェアの動作に問題が生じても，開発者への苦情は控える．多くの開発者は善意で公開している．敬意を持って利用する．
現代では，ソフトウェアをインストールせず，Web ブラウザとインターネット接続だけで使える開発ツールが多数ある．環境構築なしで，すぐに学習を開始できる．
本教材では以下の2つのツールを使用する．
Web ブラウザ上で 2D グラフィックスゲームを開発できるフレームワークである．フレームワークとは，ゲーム開発に必要な機能が用意されたソフトウェアの枠組みである．phina.js でグラフィックス描画や物理演算を簡潔なコードで実現できる．
phina.js の GitHub 公式ページ: https://github.com/phi-jp/phina.js/
Web ブラウザ上で動作するオンライン統合開発環境である．統合開発環境（IDE: Integrated Development Environment）とは，プログラムの作成・実行・デバッグを一画面で行えるツールである．JSFiddle で HTML，CSS，JavaScript を記述し，即座に実行結果を確認できる．インストール不要で，すぐに学習を開始できる．
JSFiddle のページ: https://jsfiddle.net/
このセクションでは，JavaScript の基本としてコンソールへの出力を行う．コンソールとは，実行結果やエラーメッセージを表示する画面である．プログラムの動作確認に使用する．
学習目標
下図の画面が表示される．
左下の「JavaScript + No-Library (pure JS)」エリアに以下のコードを記述する．ページ読み込み完了後に 100 × 200 の結果をコンソールに出力する．
window.onload = function() {
console.log(100 * 200);
};
コンソールに 20000 が表示される．
window.onload = function() {
console.log(1 / 2 + 3 / 4);
};
コンソールに 1.25 が表示される．
このセクションでは，phina.js を使ってグラフィックスを表示する Web アプリケーションを開発する．
ゲーム開発では，グラフィックス描画，UI 要素，サウンド，入力制御など多様な機能が必要である．これらをゼロから作成するには労力がかかる．phina.js でこれらを簡潔に実現できる．
学習目標
下図の画面が表示される．
左上の「HTML」エリアに以下のコードを記述する．phina.js ライブラリを読み込む設定である．
<!doctype html>
<html>
<head>
<meta charset='utf-8' />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Hello</title>
<script src='https://cdn.jsdelivr.net/npm/phina.js@0.2.2/build/phina.min.js'></script>
</head>
<body>
</body>
</html>
左下の「JavaScript + No-Library (pure JS)」エリアに以下のコードを記述する．座標 (100, 200) に四角形を描画する．
phina.globalize();
phina.define('MainScene', {
superClass: 'DisplayScene',
init: function() {
this.superInit();
var obj = RectangleShape().addChildTo(this);
obj.setPosition(100, 200);
this.obj = obj;
},
});
phina.main(function() {
var app = GameApp({
startLabel: 'main',
});
app.run();
});
右下に青色の四角形が表示される．
このプログラムは以下の構成要素からなる．
Web アプリケーションは（1）Web ブラウザ，（2）HTML，（3）JavaScript の連携で動作する．HTML がページ構造を定義し，JavaScript が動作を制御する．Web ブラウザがこれらを解釈・表示する．
次に物理シミュレーションを作成する．重力や速度などの物理法則に基づいてオブジェクトを動かす．
左下の「JavaScript + No-Library (pure JS)」エリアに以下のコードを記述する．以下の物理概念を使用する．
phina.globalize();
phina.define('MainScene', {
superClass: 'DisplayScene',
init: function() {
this.superInit();
var x = CircleShape().addChildTo(this);
x.setPosition(80, this.gridY.center());
x.physical.force(8, 0);
x.physical.gravity.set(0, 9.8 / 10);
var floor = RectangleShape({width: this.gridX.width}).addChildTo(this);
floor.setPosition(this.gridX.center(), this.gridY.width);
var w1 = RectangleShape({height: this.gridY.width}).addChildTo(this);
w1.setPosition(0, this.gridY.center());
var w2 = RectangleShape({height: this.gridY.width}).addChildTo(this);
w2.setPosition(this.gridX.width, this.gridY.center());
this.ball = x;
this.floor = floor;
this.w1 = w1;
this.w2 = w2;
},
// 毎フレーム処理
update: function() {
var vx = this.ball.physical.velocity.x;
var vy = this.ball.physical.velocity.y;
if (this.ball.hitTestElement(this.floor)) {
this.ball.physical.force(vx, -vy);
}
if (this.ball.hitTestElement(this.w1)) {
this.ball.physical.force(-vx, vy);
}
if (this.ball.hitTestElement(this.w2)) {
this.ball.physical.force(-vx, vy);
}
},
});
phina.main(function() {
var app = GameApp({
startLabel: 'main',
});
app.run();
});
ボールが物理法則に従って動く．重力で落下し，床や壁で跳ね返る．
