TECH.C 体験授業

講師:大森田不可止



ウェブ技術におけるJavaScript





spaceshift + space での操作が快適です。

ウェブの仕組み

Webサーバ

  • サーバソフト … Apche, IIS, Node.js, ...
  • データベース … MySQL, PostgreSQL, ...
  • サーバ言語 … PHP, Java, Ruby, Python, Perl, ...


ブラウザ

IE, Edge, FireFox, Chrome, Safari, ...

  • HTML … コンテンツの骨組みと内容
  • CSS … 見た目を決める
  • JavaScript … 動作を制御するプログラム言語

HTML (Hyper Text Markup Language)

  • <div> </div> の様なタグという識別子で囲んで意味付けされた、ツリー構造 DOM (Document Object Model) で管理される表示内容のこと。
  • 
            <!doctype html>
            <html lang="jp">
              <head>
                <meta charset="UTF-8"/>
                <title>Document</title>
              </head>
              <body>
                (表示内容)
              </body>
            </html>
                  
  • HTML だけではなく、ブラウザが扱うデータは全てがツリー構造で管理されている。大元のオブジェクトは window で、表示内容に関するデータは window.document オブジェクトの下で管理される。
  • Chrome では、F12 で、開発者ツール (DevTools) が起動して、その中の Elements タブで DOM を観ることが出来る。

タグの意味

<a>Anchor リンク<br>Break 改行
<col>Column テーブル幅<dd>Definition Description (定義の説明)
<dt>Definition Term(定義語)<dl>Definition List(定義リスト)
<div>divided <h1>~<h6>Heading(見出し)
<hr>Horizontal Rule(水平方向の罫線)<i>Italic(斜体文字)
<img>Image(画像)<li>List Item(リストの要素)
<ol>Ordered List(順序のあるリスト)<p>Paragraph(段落)
<pre>PREformatted text(整形済みテキスト) <sub>SUBscript(下付きの)
<sup>SUPerscript(上付きの)<td>Table Data
<th>Table Header<tr>Table Row
<ul>Unordered List(順序の無いリスト)<u>Under-line(下線)

css (Cascading Style Sheets)

  • css は、ウェブページの見た目を指定する。最近は高機能化して、簡単なアニメーション機能など様々な要素が追加されている。
  • css は一般的にはデザイナーの仕事だが、デザイナーが居なくても、それなりのウェブページが作成できるように、様々な「cssフレームワーク」も提供されている。代表的なのは、Bootstrap である。

JavaScript

JavaScript の勉強法

  • ウェブ上には、JavaScript に関する簡単な学習サイトや、断片的な知識はあるので、最初はそのあたりで概要を把握します。
  • 後は実際に、作ってみたいサイトを作りながら、更に覚えていくのが効率的です。
  • その場合は、便利なライブラリが様々提供されているので、それらを活用して、手軽にリッチなページを作ってみるのが良いと思います。
  • ある程度使えるようになったら、定評のある専門書で勉強しましょう。奥深い言語なので、きっとワクワクしながら学習できると思います。4千円くらいするので、いきなりでも大丈夫ですが、挫折した場合のダメージが大きいので、購入は慎重に!
  • JavaScript の開発環境は変化が激しいので、情報を日々アップデートすること。このサイトはオススメです。 HTML5/CSS3の情報をクリップ! :: dotHTML5

様々なJavaScriptライブラリ

jsbin.com の使い方

  • 灰色のライン部分がメニューエリアになります。
    [HTML|CSS|JavaScript|Console|Output]
    から、下に表示するペインの ON/OFF を制御できます。
  • [Output] は、プログラムを書くと直ちに反映してくれるので面白いのですが、落ち着かないので 右上の をクリックして、別画面で実行するようにします。プログラムを書き換えてたら、別画面でリロードすれば、書き換えたプログラムを実行させることができます。
  • GitHub という、プログラム共有サイトの無料アカウントを持っていると、ログインでき 行番号表示などの追加機能が使えるようになります。全機能を使うためには有料登録が必要です。

オンラインの開発環境

同じIPから多数のアクセスがあると、DDOS攻撃と誤認されて遮断される場合があるため、人数の多い授業では使えない場合がある。しかし、手軽に試せるのでどれかに馴染んておくことをおすすめします。それぞれに違いがあります。ユーザー登録が必要だったり。

Xampp の利用

  • Xampp コントローラを起動して、Apache を起動
  • c:\xampp\htdocs\ (ドキュメントルート) に、フォルダ(例: shooting)を作成する。
  • enchant.min.js をそのフォルダにコピーする。
  • ship.png をそのフォルダにコピーする。
  • エディタを起動して、c:\xampp\htdocs\shooting\index.html を開く。エンコードはUTF-8
  • c:\xampp\htdocs\shooting\index.html のURLは、http://localhost/shooting/index.html でアクセスできる。

enchant.js

  • 今回はJavaScript のゲーム向けライブラリ enchant.js を使って作成します。ゲームを作るのに適した様々な機能を提供してくれます。
  • また、プログラムはサーバを意識しなくても作れる jsbin.com というサイト上で作成します。
  • このサイト http://jsbin.com/jeruvon/edit?html,js を開いて、プログラムを始めてみましょう。

グラフィック素材

  • 60x60 のサイズの、噴射のアニメーション2パターンがある、宇宙船4タイプ、計8パターン。
  • 60x60 の爆発アニメ4パターン。
  • 15x15 の MyShipが撃つ弾と、Enemyが撃つ弾。

index.html

  • index.html は、ウェブページを表示する骨格にあたります。enchant.js を、ここで読み込むように指示しています。背景を濃紺( #000066) に指定して、何も表示しない状態です。

            <!DOCTYPE html>
            <html lang="jp">
            <head>
            <meta charset="utf-8" />
            <title>Shooting</title>
            <script src="(http://techc.omorita.com/js/)enchant.min.js"></script>
            <style>
            body {
              background: #000066;
              padding: 0;
              margin: 0;
            }
            </style>
            </head>
            <body>

            </body>
            </html>
          

JavaScript プログラムのひな形


enchant();

window.onload = function() {
  var width =480, height = 640;
  var core = new Core( width, height );
  core.rootScene.backgroundColor = "#000000";
  core.fps = 30;
  core.preload( 'http://techc.omorita.com/img/ship.png' );
  core.keybind(0x20, 'a');  // space

  class ExSprite extends Sprite {
    constructor(size, px, py, fr, rot, vel){
      super(size, size);
      this.size = size;
      this.x = px;
      this.y = py;
      this.rotation = rot;
      this.image = core.assets['http://techc.omorita.com/img/ship.png'];
      this.frame = fr;
      this.velocity = vel;
      this.wait = 0;
      core.rootScene.addChild( this );
    }
    checkOut(){
      if( this.x <= -this.size || this.x >= width ) return true;
      if( this.y <= -this.size || this.y >= height) return true;
      return false;
    }
    move(){
      this.x += this.velocity * Math.sin(this.rotation);
      this.y -= this.velocity * Math.cos(this.rotation);
    }
  };

  // メイン処理.
  core.onload = function() {
    // ここに初期化処理を書いていく.

    core.addEventListener('enterframe', function() {
      // ループ処理

    });
  };

  // ゲームをスタート.
  core.start();
};

Class

  • 2015年策定の ES6 (ECMAScript6) で、Class 構文が使えるようになっている。現在ブラウザの対応が進められている状況だが、IE を除いては対応済みです。
  • Can I use... Support tables for HTML5, CSS3, etc … このサイトはブラウザの対応状況を調べるには定番サイトです。
  • Sprite は、enchant.js の機能で、以前のクラスをJavaScriptで実現する手法で書かれてますが、ES6 のクラスは実装方法で、そのクラスと互換性があります。従って、Sprite クラスを継承して、機能を追加したサブクラス ExSprite を作ることができます。

MyShipの表示

core.onload = function() { の行の直後に以下を追加。


  // メイン処理.
  core.onload = function() {
    // ここに初期化処理を書いていく.

    // MyShip
    var myship = new ExSprite(60, 210, 560, [6,7], 0, 8);

敵の表示

myship表示プログラムの直後に以下を追加。


    // Enemy
    var enemy = new ExSprite(60, 420*Math.random(), -60, [0,1], 180, 5);
        

MyShipを矢印キーで左右に動かす

core.addEventListener('enterframe', function() { の行の直後に以下を追加。ここに書いたプログラムは毎秒30回呼び出される。


    core.addEventListener('enterframe', function() {
      // ループ処理

      // MyShip
      if( myship.wait === 0){
        if (core.input.right) {
          myship.x += myship.velocity;
          if( myship.x > width - 60 ) {
            myship.x = width - 60;
          }
        }
        if (core.input.left) {
          myship.x -= myship.velocity;
          if(myship.x < 0) {
            myship.x = 0;
          }
        }
      }
        

敵を動かす

myshipを動かすプログラムの直後に以下を追加。


    // move Enemy
    if(enemy.wait > 0){

    } else {
      enemy.y += 8;
      if( enemy.y >= 640 ){
        enemy.y = -60;
        enemy.x = Math.floor(Math.random() * 420);
      }
    }
          

jsbin: ここまでのプログラム

Bulletの表示

enemy表示プログラムの直後に以下を追加。


    // bullet
    var bullet = new ExSprite(15, 0, -15, 12*16, 0, 18);
        

Bulletの発射

enemyの動きプログラムの直後に以下を追加。


      // move bullet & fire
      if( bullet.y <= -15 ){
        if (core.input.a) {  // Fire
          bullet.y = myship.y;
          bullet.x = myship.x+22;
        }
      } else {
        bullet.y -= 12;
      }
        

衝突判定

bulletの動きプログラムの直後に以下を追加。


      // 衝突判定 enemy & bullet
      if( bullet.y > -15 && enemy.wait === 0 ){
        if( bullet.within( enemy, 37 )){
          enemy.frame = [8,9,10,11,13,null];
          enemy.wait = 6;
          bullet.y = -15;
        }
      }
        

Enemy の動きプログラムの修正

enemy のstatusを見て動作を変える。


      // move Enemy
      if(enemy.wait > 0){
        if(--enemy.count === 0){
          enemy.frame = [0,1];
          enemy.y = 640;
        }
      } else {
        

少し手を加えたサンプル

シューティングゲームの骨組みだけ

  • スコアを付ける
  • グラフィックを加える
  • 連射出来るようにする
  • 効果音を付ける
  • 敵機のパターンを増やす
  • 背景をスクロールさせる
  • 自機を複数繋げる
  • 難易度の波を付ける

参考リンク