日別アーカイブ: 2015-09-15

WebProg3

サンプルプログラムコード2でも、システムが持つ再読み込み機能を指定すれば、再開処理を実行できましたが、確定・再開ボタンを設けることによって処理をスピードアップすることができます。

ボタンは当初、確定を待つ状態にありクリックされると再開を待つ状態に切り替わります。クリックされるたびに状態が反転します。

サンプルプログラムコード3


    

<!DOCTYPE html>   <!-- 運試し3 -->
<html>            <!-- Fortune-03 -->
  <head>
    <script type="text/javascript">
    var img0 = new Image();
    img0.src = "https://aidesign.lolipop.jp/wp-content/uploads/2015/07/hit0.png"; //はずれ画像
    var img1 = new Image();
    img1.src = "https://aidesign.lolipop.jp/wp-content/uploads/2015/07/hit1.png"; //当たり画像
    var ctx;
    var chr;      //数字
    var i = -1;   // Count
    var x = 250;  // x-position
    var y = 100;  // y-position
    var txt ="0123456789";
    var timerid = setInterval('draw()', 50);
    var len = txt.length;
    function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          ctx = canvas.getContext('2d');
          ctx.font = "96px Arial";      //フォントにSerif,96pxを指定
          ++i;
          if (i >= len) i = 0;          //繰り返し条件
            chr = txt.charAt(i);
            ctx.clearRect(x,y-96, x+96,y);//前描画文字を消す
            ctx.fillStyle = 'violet';   //塗り潰し色を緑に
            ctx.fillText(chr, x, y);    //テキストを塗り潰しで描画
        }
    }
    function StopStart(target){         //timeridが1以上で確定処理
      //alert("saveValue="+timerid);
      if(timerid){                        //確定処理
        var stepVal = document.getElementById(target).value;
        var img7 = img0;
        //alert("stepVal="+stepVal+" i="+i);
        if(stepVal == i){//当たり、ファンファーレを鳴らす
          ctx.fillStyle = 'red';          //塗り潰し色を赤に
          chr = "atari";                  //当たり音声
          img7 = img1;
        }
        else{            //はずれ
          ctx.fillStyle = 'green';        //塗り潰し色を緑に
          chr = "hazure";                 //はずれ音声
        }
        ctx.drawImage (img7 , 150, 120);  //当たり、はずれ画像を描画
        ring(chr);
        clearInterval(timerid);
        timerid = 0;
      }
      else{                               //再開処理
        ctx.clearRect(150,120, 415,311);  //当たり、はずれ画像を消す,211=20+191
        i = 0;    // Count
        timerid = setInterval('draw()', 50);
      }
    }
    function ring(tune){
      document.getElementById(tune).play();
    }
    </script>
    <style type="text/css">
      canvas { border: 1px solid #999; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="560" height="330"></canvas>
    <br><input type="number" id="stepper1" name="stepper1" min="0" max="9" value="7"/>
    &nbsp;&nbsp;&nbsp;&nbsp;<input type="button" onClick="StopStart('stepper1')" value="Stop(確定) Start(再開)" />
  </body>
  <div><audio id="atari" preload="auto">
    <source src="https://aidesign.lolipop.jp/wp-content/uploads/2015/02/ji_023.mp3"/> </audio>
  </div>
  <div><audio id="hazure" preload="auto">
    <source src="https://aidesign.lolipop.jp/wp-content/uploads/2015/07/se6.mp3"/> </audio>
  </div>
</html>
関連ページ

➊Webプログラミング書法
➋あみだくじ作成法

WebProg2

chusenkai

クリックして出る目は10種類あり選択した目が出る確率は10%です。10回に1回の大当たりは実際のところ、もっと低い確率に感じられます。


  

サンプルプログラムコード2

<!DOCTYPE html>   <!-- 運試し2 -->
<html>            <!-- Fortune-02 -->
  <head>
    <script type="text/javascript">
    var ctx;
    var chr;
    var i = -1;   // Count
    var x = 10;   // x-position
    var y = 100;  // y-position
    var txt ="0123456789";
    var timerid = setInterval('draw()', 50);
    var len = txt.length;
    function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          ctx = canvas.getContext('2d');
          ctx.font = "96px Arial";      //フォントにSerif,96pxを指定
          ++i;
          if (i >= len) i = 0;          //繰り返し条件
            ctx.clearRect(x,y-96, x+96,y);//前描画文字を消す
            chr = txt.charAt(i);
            ctx.fillStyle = 'violet';   //塗り潰し色を緑に
            ctx.fillText(chr, x, y);    //テキストを塗り潰しで描画
        }
    }
    function saveValue(target){         //確定、timeridが1以上で有効
      var stepVal = document.getElementById(target).value;
      ctx.fillStyle = 'red';            //塗り潰し色を緑に
      var pre = "当たり";
      if(stepVal == i){//当たり、ファンファーレを鳴らす
        chr = "atari";
      }
      else{            //はずれ
        chr = "hazure";
        pre = "はずれ";
      }
      ctx.fillText(pre, x, 250);        //前描画文字を消す
      ring(chr);
      //document.write("Value="+stepVal+" i="+i);
      clearInterval(timerid);
    }
    function ring(tune){
      document.getElementById(tune).play();
    }
    </script>
    <style type="text/css">
      canvas { border: 1px solid #999; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="560" height="330"></canvas>
    <BR><input type="number" id="stepper1" name="stepper1" min="0" max="9" value="7"/>&nbsp;&nbsp;<input type="button" onClick="saveValue('stepper1')" value="確定" />
  </body>
  <div><audio id="atari" preload="auto">
    <source src="https://aidesign.lolipop.jp/wp-content/uploads/2015/02/ji_023.mp3"/> </audio>
  </div>
  <div><audio id="hazure" preload="auto">
    <source src="https://aidesign.lolipop.jp/wp-content/uploads/2015/07/se6.mp3"/> </audio>
  </div>
</html>
関連ページ

➊Webプログラミング書法
➋あみだくじ作成法

WebProg1

幕開けに運試しのプログラミングに挑戦します。0から9までの数字が連続表示されます。たとえば、’7’を出すことを念じ、ころあいを見計らって’確定’ボタンをクリックします。’7’が出たら今日はついていると考え、そうでなければ、そこそこの一日と思って業務に励みましょう。

number10【性格診断】「0~9」数字を選ぶだけであなたにぴったりの結婚相手が分かるでは選んだ数字で結婚運を占っています。興味のある方は挑戦してください。

それでは運試しをどうぞ!

確定をクリックして好みの数字を表示させることができます。

次のコードをコピー&ペーストし、Fortune-01.htmlファイルを作成します。IE8、FIREFOX、OPERA12、SAFARI6、CHROMEなどの新しいブラウザが動作状態ならば、保存したFortune-01.htmlファイルにカーソルを当てクリックすれば実行に移ります。

<!DOCTYPE html>   <!-- 運試し1 -->
<html>            <!-- Fortune-01 -->
  <head>
    <script type="text/javascript">// <![CDATA[
    var i = 0;    // Count
    var x = 10;   // x-position
    var y = 100;  // y-position
    var txt ="0123456789";
    var timerid = setInterval('draw()', 50);
    var len = txt.length;
    function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
          ctx.font = "96px Arial";      //フォントにArial,96pxを指定
          if (i >= len) i = 0;          //繰り返し条件
            ctx.clearRect(x,y-96, x+96,y);//前描画文字を消す
            var chr = txt.charAt(i);    //表示文字を抽出
            ctx.fillStyle = 'violet';   //塗り潰し色を緑に
            ctx.fillText(chr, x, y);    //テキストを塗り潰しで描画
            ++i;
        }
    }
    function saveValue(){     //確定、timeridが1以上で有効
        clearInterval(timerid);
        timerid = 0;
    } // ]]>
    </script>
    <style type="text/css">
      canvas { border: 1px solid #999; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="560" height="330"></canvas>
    <input type="button" onClick="saveValue()" value="確定" />
  </body>
</html>
関連ページ

➊Webプログラミング書法
➋あみだくじ作成法

Webプログラミング書法

このページは本日の運勢を占うゲームを作りながら動きのある文書作りをするための手掛かりについて述べられています。

目次

はじめに
1.文書記述言語HTML
 HTML5の正式リリース
 プログラミングのいろは
 運試しのプログラミング
2.JavaScriptでプログラミング
 HTMLの構成例
 プログラミングの必要性
 運試し第2弾
 サンプルコード1からの改訂項目
 大当たりでファンファーレ鳴動
3.プログラミングの上質化
 運試し第3弾
 サンプルコード2からの改訂項目
 再開処理をスピードアップ
4.本格処理の追加
 運試し第4弾
 サンプルコード3からの改訂項目
 運試しをする
5.高品質化と負荷の軽減
 配列化を図る
 画像トリミングによる画像統合
 サンプルコード4からの改訂項目
 負荷の軽減実感
6.やわらかさを加える
 絵柄を選定する
 描画切り換え速度を設定
 改訂のポイント
 お子様と一緒に
終わりに
関連ページ

はじめに

以前にあみだくじ作成法を発表しましたが、動作デバイスはスマートフォンでJavaを用いて開発されました。今回は動作デバイスに限定せず、JavaScriptが動作する環境であればどのデバイスでも動作するように配慮されています。

今日の運勢を占うゲームを作り、楽しみながらJavaScriptで表現豊かな文書作りを目指します。個々のWebプログラミングは少しずつ進化し、リンクが貼られた独立したページ(例、《1》運試し…)に仕立てられています。

1.文書記述言語HTML

HeaderFooter世にはアプリケーションと称される利用者の業務を支援するプログラムが多く存在します。かつてそれらは専門知識を有する技術者の独壇場で、その上、複雑な手順を踏んで作成されていました。

ここではHTML,JavaScriptに的を絞って簡単なプログラムを作ってWebドキュメントに埋め込みます。

上図に示すようなドキュメントにおいて、全体的な構造に対するそれぞれの記事を表現するにはこれまでの記述法ではあいまいさがあったり、動画音声を織り交ぜたり、グラフィック描画は難しいものがありました。 html5structure

ウェブ上で動作する表現形式は文書記述言語HTMLを用います。その規格は改訂を続け5版をHTML5と言います。

HTMLは左図に示すように半角の<と>に挟まれた開始タグと終了タグに囲まれたブロックの集合体です。 説明文の中に、実際の半角<を入れるとタグの一部と見做されて正しい表現にはなりませんので全角<を使うことが一般化しています。

HTML5の正式リリース

2016年にHTML5.1が正式に勧告される予定ですが、それまでは使用できないのかというとそうではありません。主なブラウザにはすでに実行環境が実装され、動的なウェブサイト構築や、インターネットアプリケーションなど高度なユーザインタフェースの開発が可能になっています。

プログラミングのいろは

ウェブ上では当初、静的コンテンツ表現が中心でしたが、JavaScriptにより動的なコンテンツを制御する機能が備わり、スマートフォンやタブレット端末との相性の良さを好感しています。

JavaScript

JavaScriptとは、インターネット上のWebページを記述するプログラム言語の1つです。javaというプログラミング言語とは別ものです。Webページに、動きや対話性を付加することを目的に開発されたオブジェクト指向のスクリプト言語で、クライアント環境で動作します。

HTML5にはJavaScriptが使えるように仕様が策定されています。ここではJavaScriptを用いたプログラミングにスポットライトを当てていきます。当初は0~9の数字を表示し続ける簡単なプログラムから始め、だんだんと機能を追加していきます。

新しいことを始めるにあたり、いろいろな手法が考えられますが、当ブログでは難解な部分はとりあえず棚上げし、サンプルコードを参照しながら同じことを実践し体験していくことをお奨めします。

戻りキー

次のリンクからサンプルコードを実行します。簡素化のため、前のページに戻るコードは用意されていませんので上図の赤〇印キーをクリックしてこのページに戻ってください。

《1》運試しのプログラミングを実行

2.JavaScriptでプログラミング

すでに前項でJavaScriptでプログラミングが使われていますが、プログラムコードとHTML5との関連を述べ、HTMLドキュメントに厚みを加えていきます。

HTMLの構成例

HTML構成例

HTMLはテキストや写真などで構成されることが多いのですが、文書にJavaScriptなどのスクリプトを組み込むscriptタグがあります。ここからはプログラムコードを定義しますというタグです。/scriptまでの範囲です。

プログラミングの必要性

記事の中に、本日の日付、曜日、元日からの通算日や天気予報などを自動的に掲載したいときがあります。このような場合はプログラムコードを埋め込むことにより実現可能になります。紙媒体の百科事典では無理ですがWebページでは容易に実現できます。 筮竹・水晶

本日の運試しをするために、占い小道具の水晶や筮竹(ぜいちく)を用意した占い師に電話して吉兆を連絡してもらうのは現実的ではありません。

そこで前項では遊び心で、運を試す例を示しました。 プログラミングすることにより、グレゴリオ暦時間データやクリックタイミングなどを入力値にして、文書をその都度、改訂することなく、読者が納得する結果を提供することができます。

運試し第2弾

プログラムコードを少し進化させて、クリックタイミングで結果を出すように処理を加えていきます。

サンプルコード1からの改訂項目

❶0~9のうち好みの数字を選ぶことができる。
➋クリックして出た数字で当たりはずれに対応したメッセージが出力される。

《2》大当たりでファンファーレ鳴動を実行

3.プログラミングの上質化

日本製商品は心配りに富んでいると語られることがあります。他国製商品が雑かというと不明です。かなり前の話ですが、「ドイツアウトバーンにはブレーキ故障対策のため、上りこう配の横道が用意されている」と聴いたことがあります。

運試し第3弾

使い勝手・使いやすさのよい商品は体になじみます。プログラミングを上質化して使いやすさを向上させます。一度、記事を読み込むと2度目はシステムが保有する再読み込みをしなければなりませんが、再開を支援する処理を施せば使い勝手が向上します。 あまりにスピードアップされ、音声が鳴りやまないうちに再開を指定後に確定した場合、音声ファイルの処理が追いつかないくらいです。

高品質化

サンプルコード2からの改訂項目

❶確定ボタンを確定・再開ボタンに機能を変更する。
➋確定・再開ボタンの状態を記憶させる。
➌再開処理を追加する。
➍確定処理では、当たり・はずれを判定し、適切なメッセージを出力する。

《3》再開処理スピードアップを実行

4.本格処理の追加

回転ドラムゲームは難解さを含んでいないと飽きがきてつまらないものになります。数字付き回転ドラムは1桁より3桁がゲームとして面白味が増します。 最後に、バージョン管理や著作権所有のメッセージを設定します。

運試し第4弾

スロットマシンのように3桁の数字をそろえ、ねらった数字が出たらファンファーレを鳴らします。

サンプルコード3からの改訂項目

❶数字を1桁から3桁に拡大する。
判定基準 ➋当たり判定を3桁の数字にする。
➌桁ごとに表示色を変える。
➍当たる確率が高くなるように修正を加える。
➎数字は乱数を発生させて決定し表示する。
➏当たり種別をはずれ、当たり、大当たりの3種にする。
➐copyrightとVersion番号を追加する。
➑3桁処理になり処理の共通化のため、関数化を図る。

《4》運試しをするを実行

5.高品質化と負荷の軽減

品質の高い商品を目指すと嵩、重量、部品点数などが増大します。ウェブアプリケーションでは画像、音声データは別々であり、思った以上にシステムが巨大化します。0~9の数字を絵柄化すると10個の画像ファイルを用意し、事前に読み込んでおかなければなりませんが、工夫をすることによりプログラムコードのシンプル化を図ることができます。

配列化を図る

配列似たようなデータは配列化を図ることによってコードを縮小させることができます。似たデータでない場合はコード化をすることによって規則性のあるデータになります。

たとえば一クラスに40人のクラス員がいるとき、クラス員の氏名をコード化し配列に格納します。 10種の数字絵柄を1枚の画像にまとめ、添え字付きデータして扱えば、画像データと初期化処理が極端に小さくなります。

画像トリミングによる画像統合

トリミングとは写真の構図を整えるために、不要な部分を除くことを意味します。この機能を利用して個々の画像を横に並べ、まとまった大きな集合画像を作成し、必要な画像データを規則正しく変化させて複数画像のように扱い、負荷を軽減してシステムのシンプル化を図ります。

SlotMCN  
画像トリミング機能は9つの引数を持つdrawImage関数の拡張版フルスペック機能として用意されています。今回は10個の画像を上図のように2行5列にまとめ、drawImage関数にクローズアップ領域を指定して必要とする果実のみを描画させることができます。

hit012

ついでに、はずれ、当たり、大当たりの画像も1枚にまとめます。このようにプログラミングしておけば、当たり状態を3から5に増やした場合は、5枚の画像を1枚にまとめた画像ファイルを用意すれば済むことになります。

サンプルコード4からの改訂項目

❶はずれ、当たり、大当たり画像を統合したオブジェクトを作成。
➋音声参照IDテーブルを作成する。
➌確定/再開処理で当たり画像をトリミング描画する。
➍音声参照IDテーブルを使って音声を鳴らす。
➎回転ドラム画像をトリミング描画。

《5》負荷の軽減実感を実行

6.やわらかさを加える

乗り物や動物を見ると童心に戻ったような気分になります。スロットマシンを思い浮かべる絵柄から親しみが湧く絵柄に改訂しましょう。

絵柄を選定する

絵柄の候補には菓子、乗り物、都市、花、鳥、スポーツなどを挙げることができますが、親しみのある動物を選ぶことにしました。 animal10

描画切り換え速度を設定

自分の使い勝手に合わせられる機能を持つ商品は高級です。利用者の年齢や習熟度に合わせて描画切り換え速度を変更してみます。50ms~5000msの間で変更可能です。数字を直接入力するか上下の矢印キーを押下して設定します。

大当たり

描画切り換え速度が1000msを超える大きな値では、後だしジャンケンのように、上の3つの画像の揃い具合を見て確定ボタンをクリックすれば、当たり、大当たりが得やすくなります。 利用者の運勢を占う様から遠のきますが、小さなお子様が遊びやすいように配慮されています。

当たり判定テーブル改訂のポイント

❶回転ドラムの絵柄を変更する。
➋描画切り換え速度を可変に。
➌時計方向に数字を回転表示。
➍大当たり、当たり確率アップ。

回転数字

《6》お子様と一緒にを実行

終わりに

JavaScriptを用いて小さなゲームを作ってWebプログラミングの楽しさをまとめてみました。

動的なHTML5文書を作成してブログ、ホームページに公開するには、プログラムコードが含まれます。 記事は一般に、ビジュアルモードで作成されますが、プログラムコードを含む場合はテキストモードにして詳細な設定をします。

テキストモードでの記事作成には、細かなノウハウを要します。折を見て今回の記事作成手順を発表したいと考えています。

関連ページ

➊あみだくじ作成法
➋2015秋の花々