前田稔のスマホ・ゲーム

HTML と JavaScript でスマホ・ゲームを作成します。

スマホ・ゲームの実行


  1. スマホでホームページが閲覧出来るようなので、HTPP(HyperText Transfer Protocol)を使ったスマホ対応ゲームに挑戦します。
    HTPP を使ったゲームプログラムは、専用ソフトが必要なく HTML の知識と Text Editor があれば誰でも開発することが出来ます。
    このコーナーはゲームを作成するための基本的な説明が主体で、本格的なゲームの作成は読者に任せます。
    掲載しているゲームは JavaScript や PHP で作成した簡単なゲームです。
    実行を確認した環境は ZenfoneGo の Android です。
  2. スマホ・ゲームのページは画面が小さいこともあり、十分な説明が出来ません。
    ゲームの基本的な説明は 前田稔の JavaScript のページ を参照して下さい。
  3. スマホでゲームを作成するときの要点です。
    1. 画面が小さいので操作が容易なようにレイアウトします。
      文章は簡潔に最低限必要なものに留めて下さい。
    2. 画面が縮小されて操作が難しいので、スマホ専用の sumaho.css を使用します。
      sumaho.css を組み込んで "viewport" を設定して下さい。
      これで文章が短いときには、スマホの文字が大きくなります。
      <html>
      <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1.0" />
      <link rel="stylesheet" href="sumaho.css" type="text/css">
      </head>
      
    3. 直接タイプ入力するよりも、選択(タップ)する方が操作性が増します。
    4. パソコンの [戻るアイコン←] はスマホの [戻るボタン] に対応しているのですが、機能に多少の違いがあるようです。
    5. Android では通信料金が発生するのでサウンドの自動再生はされないようです。
      touchstart 等のユーザによる操作のイベントの中で再生処理をする必要があります。
      具体例は Sound の再生 を参照して下さい。
      hoge.addEventListener('touchstart', function()
      { var audio = new Audio ('osrstart.mp3');
        audio.play();
      });      
      
    6. スマホでは全角でタイプする場合も多く、全角⇒半角変換を行います。
    7. 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;
      }
      

スマホ・ゲームの実行は、次のリンクをクリックして下さい。
スマホ・ゲームの実行

ゲームのソースコードは、パソコンからゲームを起動して「F12 からデバッグタブ」で確認できます。
ゲームの作成方法や解説は 超初心者のプログラム入門(JavaScript) で説明しています。