HTML, JavaScript プログラミングの体験（JSFiddle を使用）

大学で使用した自作の資料等を，手直しの上公開している．クリエイティブ・コモンズ BY NC SA．

JSFiddle を用いて HTML, JavaScript プログラミングを学ぶ

Web アプリの作成により，次のことを学ぶ．

無料ソフトウェアの活用
ソフトウェア開発ツール JSFiddle
Webブラウザのゲームライブラリ phina.js
Webアプリ

無料ソフトウェアの活用

無料ソフトウェアとは，インターネットなどで，無料で提供されているソフトウェアのこと．「フリーソフト」とも言う．パソコンの学習や活用に大いに役立つ．

無料ソフトウェアも，製作者に著作権がある．作者が自分であるかのように嘘をついたり，無料ソフトウェアを自分の名前で販売したりなどの違反をしてはいけない． * 無料ソフトウェアを使うとき，もし，うまく動かなったとする．そのとき，製作者に苦情を言うのはマナー違反である．製作者が「いろんな人に使ってほしい」と善意を持っている場合など，製作者を尊重すること．

Webブラウザで動くソフトウェア

自分のパソコンにインストールしなくても，インターネットとWebブラウザさえあればすぐに使えるソフトウェアも多数ある．

このページでは，次の２つのソフトウェアを体験する．

pinta.js
これは，簡単にWebブラウザで動くゲーム（２次元のグラフィックス）が制作できるソフトウェア．
phina.js の GitHub 公式ページ: https://github.com/phinajs/phina.js/
JSFiddle
ソフトウェア開発のために使う．
【関連する外部ページ】
JSFiddle のページ: https://jsfiddle.net/

ここまでのまとめ

無料ソフトウェアは便利である．製作者に苦情を言うのはマナー違反である．
この資料では phina.js, JSFiddle を使う．

無料のソフトウェア開発ツール JSFiddle

コンピュータはソフトウェアで動く．

ソフトウェアを，コンピュータを使って作るとき，ソフトウェアを制作するためのソフトウェア（ソフトウェア開発ツール）を使う．ソフトウェア開発ツールにはいろいろな種類がある．ここでは，JSFiddle を使ってみる．

メッセージの表示のプログラム実行

Web ブラウザで，次を開く．
https://jsfiddle.net/
次のように表示されるので確認する．
メッセージ表示は，コンソールに行う．
コンソールの画面を開くために，右下の「Console (beta)」の画面をクリック．
コンソールの画面が開くので確認する．
メッセージ表示のプログラムを書く．
左下の「JavaScript + No-Library (pure JS)」の画面で，プログラムを書く．次のように書く．
```
window.onload = function() {
  console.log(100 * 200);
};
```
プログラム実行したいので，「Run」をクリック．
実行結果の確認
コンソールの画面に，100かける200の計算結果として，20000が表示されるので確認する
左下の「 JavaScript + No-Library (pure JS)」の画面で，「100 * 200」のところを書き換える．
```
window.onload = function() {
  console.log(1 / 2 + 3 / 4);
};
```
プログラム実行したいので，「Run」をクリック．
実行結果の確認
コンソールの画面に，「1 / 2 + 3 / 4」の計算結果として，1.25が表示されるので確認する
ここまでのまとめ
- ソフトウェア開発ツールを使って，ソフトウェアを作り，実行できる
- ソフトウェアの中には，計算させたい式などを書き下すことができる．

Web アプリ（HTML, JavaScript, phina.js を使用）

ゲームのソフトウェアを作るとき， 画像，ボタン，ゲージ，サウンド，キーボード などを扱うことになる．これらを簡単に扱えるようにするためのソフトウェアをゲームライブラリやゲームエンジンなどとと言ったりする．

このページでは，Web ブラウザで動くゲームに便利なゲームライブラリ phina.js を使う．

Web ブラウザで，次を開く．
https://jsfiddle.net/
次のように表示されるので確認する．

HTML を書く

左上の「HTML」の画面に，次のように書く．

<!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)」の画面で，プログラムを書く．次のように書く．

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();
});

プログラム実行したいので，「Run」をクリック．
実行結果の確認
右下の画面（実行結果が表示される画面）に青い四角が表示される．
ここまでのまとめ
- ゲームエンジンには，青い四角を描くなど，ゲームを作るのに必要な機能がそろっている．
  画像，ボタン，ゲージ，サウンド，キーボードなどの機能がある．
Web アプリの仕組み
いま体験してもらった「グラフィックスの表示」のプログラムは，次のようになっている．

Webアプリは，上の図で書いたように，（１）Webブラウザ，（２）HTML，（３）JavaScript 言語で書かれたプログラムが共同して動くという仕組みになっている．
先ほどのプログラムでは，Webアプリの土台がすでに完成している．
JavaScript 言語で書かれたプログラムを書き換えて，ボールの動きのシミュレーションを行うようにします．

ボールの動きのシミュレーションのプログラムを書く．

左下の「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();
});

プログラム実行したいので，「Run」をクリック．
実行結果の確認．
ボールの動きのシミュレーションが，アニメーションで表示される．

まとめ

使用したプログラミング言語：　JavaScript
枠組み： Webブラウザ + HTML + JavaScript のプログラム
行ったこと：　四角形の描画，ボールの動きのシミュレーション