前田稔のスマホ・ゲーム

ゲームのプレイはスマホ・ゲームを参照して下さい。
数独ゲームの問題数独ゲームを掲載します。
数独ゲームの詳しい説明は Numberplace(数独)ゲームを参照して下さい。
ゲームの説明はゲームの説明を参照して下さい。
自分のスマホにホームページの作成は My スマホページを参照して下さい。
自分のスマホにゲームを作成は My Game を参照して下さい。

前田稔(Maeda Minoru)の超初心者のプログラム入門

スマホ・ゲームの基本

HTML と JavaScript を使ってスマホ・ゲームの作り方を説明します。

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

画面の設定

私のページに掲載しているスマホ・ゲームは WWW サーバーにアップロードして、スマホからホームページにアクセスしてプレイします。
具体的なゲームの作成はゲームの説明を参照して下さい。
スマホの画面は小さくて操作が難しく文字が見にくいので、スマホ専用の sumaho.css を組み込んで "viewport" を設定します。
【ＮＯＴＥ】
最近では "viewport" の設定や sumaho.css を組み込まなくても、画面のサイズに合わせて調整してくれるようです？
「美人のアニメーション画像」を viewport や sumaho.css を変えて掲載するので試してみて下さい。
sumaho.css は、このページの後部に掲載しています。

"viewport" や sumaho.css を使わない場合です。
スマホで美人のアニメーション画像－１をクリックして表示サイズを確認して下さい。

<html>
<head><meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
<img src="bijin16.jpg"><br>
４＊４＝１６枚の Sprite が並んでいる元の画像です。<br>
１６枚の Sprite を順に切り替えてアニメーションを行います。<br>
</body>
</html>

"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" />
</head>
<body bgcolor="#faf8e0">
<img src="bijin16.jpg"><br>
４＊４＝１６枚の Sprite が並んでいる元の画像です。<br>
１６枚の Sprite を順に切り替えてアニメーションを行います。<br>
</body>
</html>

スマホ専用の sumaho.css を組み込んで "viewport" を設定した場合です。
美人のアニメーション画像－３をクリックして試してみて下さい。

<html>
<center>
<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>
<body>
<img src="bijin16.jpg"><br>
４＊４＝１６枚の Sprite が並んでいる元の画像です。<br>
１６枚の Sprite を順に切り替えてアニメーションを行います。<br>
</body>
</center>
</html>

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;
}