大学で使用した自作の資料等を,手直しの上公開している. クリエイティブ・コモンズ BY NC SA.
JSFiddle を用いて HTML, JavaScript プログラミングを学ぶ
Web アプリの作成により,次のことを学ぶ.
無料ソフトウェアとは,インターネットなどで,無料で提供されているソフトウェアのこと.「フリーソフト」とも言う.パソコンの学習や活用に大いに役立つ.
無料ソフトウェアも,製作者に著作権がある.作者が自分であるかのように嘘をついたり,無料ソフトウェアを自分の名前で販売したりなどの違反をしてはいけない. ※ 無料ソフトウェアを使うとき,もし,うまく動かなったとする.そのとき,製作者に苦情を言うのはマナー違反である.製作者が「いろんな人に使ってほしい」と善意を持っている場合など,製作者を尊重すること.
自分のパソコンにインストールしなくても,インターネットとWebブラウザさえあればすぐに使えるソフトウェアも多数ある.
このページでは,次の2つのソフトウェアを体験する.
これは,簡単にWebブラウザで動くゲーム(2次元のグラフィックス)が制作できるソフトウェア.
phina.js の GitHub 公式ページ: https://github.com/phinajs/phina.js/
ソフトウェア開発のために使う.
JSFiddle は,次のWebページ.
ここまでのまとめ
コンピュータはソフトウェアで動く.
ソフトウェアを,コンピュータを使って作るとき,ソフトウェアを制作するためのソフトウェア(ソフトウェア開発ツール)を使う.ソフトウェア開発ツールにはいろいろな種類がある.ここでは,JSFiddle を使ってみる.
次のように表示されるので確認する.
コンソールの画面を開くために,右下の「Console (beta)」の画面をクリック.
左下の「JavaScript + No-Library (pure JS)」の画面で, プログラムを書く. 次のように書く.
window.onload = function() { console.log(100 * 200); };
コンソールの画面に,100かける200の計算結果として,20000が表示されるので確認する
window.onload = function() { console.log(1 / 2 + 3 / 4); };
コンソールの画面に, 「1 / 2 + 3 / 4」の計算結果として,1.25が表示されるので確認する
ここまでのまとめ
ゲームのソフトウェアを作るとき, 画像,ボタン,ゲージ,サウンド,キーボード などを扱うことになる.これらを簡単に扱えるようにするためのソフトウェアをゲームライブラリやゲームエンジンなどとと言ったりする.
このページでは,Web ブラウザで動くゲームに便利なゲームライブラリ phina.js を使う.
次のように表示されるので確認する.
左上の「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(); });
右下の画面(実行結果が表示される画面)に青い四角が表示される.
ここまでのまとめ
画像,ボタン,ゲージ,サウンド,キーボードなどの機能がある.
Web アプリの仕組み
いま体験してもらった「グラフィックスの表示」のプログラムは,次のようになっている.
Webアプリは,上の図で書いたように,(1)Webブラウザ,(2)HTML,(3)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(); });
ボールの動きのシミュレーションが,アニメーションで表示される.
まとめ