前田稔のスマホ・ゲームの作り方

スマホでゲームをプレイするときは スマホ・ゲーム を参照して下さい。
スマホ・ゲームの説明は ゲームの説明 を参照して下さい。
前田稔(Maeda Minoru)の超初心者のプログラム入門

スマホ・ゲームの基本

HTML と JavaScript を使ってスマホ・ゲームの作り方を説明します。
  1. スマホでホームページが閲覧出来るようなので、HTPP(HyperText Transfer Protocol)を使ったスマホ対応ゲームに挑戦します。
    HTPP を使ったゲームプログラムは、専用ソフトが必要なく HTML の知識と Text Editor があれば誰でも開発することが出来ます。
    掲載しているゲームは HTML と JavaScript や PHP で作成した簡単なゲームです。
    ゲームを作成するための基本的な説明が主体で、本格的なゲームの作成は読者に任せます。
    このコーナーのソースファイルの文字コードは utf-8 に統一しています。
    実行を確認した環境は ZenfoneGo の Android です。
  2. スマホ・ゲームのページは画面が小さいこともあり、十分な説明が出来ません。
    ゲームの解説やプログラムの詳細は次のページを参照して下さい。
    ゲームの説明  前田稔の JavaScript のページ
  3. スマホでゲームを作成するときの要点です。
    1. 画面が小さいので操作が容易なようにレイアウトします。
      文章は簡潔に最低限必要なものに留めて下さい。
    2. スマホでは全角でタイプする場合も多く、全角⇒半角変換を行います。
      直接タイプ入力するよりも、選択(タップ)する方が操作性が増します。
      // 全角⇒半角変換
      function toChar_8(s)
      {   return s.replace(/[A-Za-z0-9]/g, function(s)
          {   return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
          });
      }
      
    3. パソコンの [戻るアイコン←] はスマホの [戻るボタン] に対応しているのですが、機能に多少の違いがあるようです。
    4. 一般の画像ファイルも使えますが、Animation GIF を使うとアニメーションしながら動きまわります。
      style で画像を描画(移動)するときは <!DOCTYPE html> を指定すると動かなくなるようです。
    5. 三山くずしゲームにサウンドを組み込んだのですが Android では通信料金が発生するのかサウンドの自動再生はされないようです。
      touchstart 等のユーザによる操作のイベントの中で再生処理をする必要があります。
      具体例は Sound Test を参照して下さい。
      【NOTE】
      最近(2019/10)ではサウンドも普通に再生されるようになったようです。
      hoge.addEventListener('touchstart', function()
      { var audio = new Audio ('osrstart.mp3');
        audio.play();
      });      
      

画面の設定

  1. スマホの画面は小さくて操作が難しく文字が見にくいので、スマホ専用の sumaho.css を組み込んで "viewport" を設定します。
    sumaho.css は、このページの後部に掲載しています。
  2. HTML に組み込む sumaho.css のソースコードです。
    詳細は CSSの基本 を参照して下さい。
    @charset "utf-8";
    
    /* 全般的なスタイル */
    *  {
        margin:0; padding:0;    /*マージン・パディングをリセット*/
        color:#333333;          /*文字色*/
       } 
    body {
        background-color:#faf8e0;   /*ページ全体の背景色*/
        margin:0px 10px 10px 10px;
        -webkit-text-size-adjust: 100%!important ;
       }
    h1 {
        margin: 10px 0 10px 0;  /* 上右下左 */
        font-size: 20p;         /* 文字サイズ */
        color: #333333;         /* 文字色を#333333 */
        padding: 5px 0px;       /* 上下5ピクセル、左右0px */
       }
    h2 {
        margin: 8px 0 8px 0;    /* 上右下左 */
        font-size: 18p;         /* 文字サイズ */
        color: #333333;         /* 文字色を#333333 */
        padding: 5px 0px;       /* 上下5ピクセル、左右0px */
       }
    h3 {
        margin: 6px 0 6px 0;    /* 上右下左 */
        font-size: 16p;         /* 文字サイズ */
        color: #333333;         /* 文字色を#333333 */
        padding: 5px 0px;       /* 上下5ピクセル、左右0px */
       }
    ul { margin:0px 10px 0px 16px; }
    ol { margin:0px 10px 0px 16px; }
    li { margin:20px 10px 20px 10px; }
    p  { margin:40px 0px 40px 0px; }
    hr { height:1px; border:solid 1px #cccccc;
         margin:10px 1px 10px 0px;
       }
    /* 範囲設定 */
    div.ff
    {   text-align:left;
        background-color:#ffffff;   /*内容全体の背景色*/
    }
    div.e0
    {   text-align:left;
        background-color:#e0e0e0;
    }
    span.red
    { color:#e02020; }
    span.s1
    { font-size:20pt; }
    span.s2
    { font-size:18pt; }
    span.s3
    { font-size:16pt; }
    img.s1
    {   max-width:100%;
        height:auto;
    }
    img.s2
    {   max-width:75%;
        height:auto;
    }
    img.s3
    {   max-width:50%;
        height:auto;
    }
    a:link {/*未訪問のリンク*/
        color:0000e0;
        font-style:normal;
        text-decoration:underline;
    }
    a:visited {/*訪問後のリンク*/
        color:#934C7B;
        text-decoration:underline;
    }
    a:hover {/*マウスをのせたとき*/
        color:#f000a0;
        font-style:normal;
        text-decoration:underline;
    }
    a:active {/*クリック中*/
        text-decoration:none;
    }