Back Image

ゲームの背景画像とスクロールの説明です。
ソースコードは、実行画面で右クリックしてソースコードの表示、または F12 キーから「ソース」タブで確認して下さい。

ゲームの背景画像

  1. ゲームの背景に小さな画像をタイル状に貼り付けるのは簡単です。
    このページ自身が "back06.gif" をタイル状に貼り付けた背景になっています。
    <body> を次のように書き換えるだけです。
    "back06.gif" は 128*128 の GIF 画像です。
    <body background="back06.gif">
  2. Back Image(game_bg1.html)
    一枚の背景画像を画面全体に描画するのも簡単です。上の行のリンクをクリックして下さい。
    bg.gif のサイズは 640*480 ですが、これを画面全体に描画してみましょう。
    画面サイズを変えると背景画像が伸縮することを確認して下さい。
    【game_bg1.html のソースコード】
    <html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="javascript.css" type="text/css">
<title>JavaScript</title>
</head>

<body>
<img src="bg.gif" width="100%" height="100%">
</body>
</html>

  3. CSS Scroll(css_scroll.html)


    1. 二枚並んだ画像を切り出して、背景画像を横にスクロールします。
      上のリンクをクリックして下さい。
      【css_scroll.html のソースコードです】
      <html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Scroll</title>
<script type="text/javascript">
  function cut(pos)
  { var s1 = '(0px,' + (640+pos) + 'px,480px,' + pos + 'px)';
    var s2 = pos + 'px;top:0px;';
    var s = 'clip:rect' + s1 + '; position:absolute;left:-' + s2;
    return s;
  }
</script>
</head>

<body onLoad="setInterval('scroll()',25)">
<img src="bg2.gif" name="bg2"
  style="clip:rect(0px,640px,480px,0px); position:absolute;left:0px; top:0px;">

<script type="text/javascript">
  var pos = 0;
  function scroll()
  { pos++;
    if (pos>=640)   pos = 0;
    var str = cut(pos);
//window.alert(str);
    document.bg2.style = str;
  }
</script>

</body>
</html>
    2. cut(pos) 関数で画像を切り出してスクロールします。
      "bg2.gif" は上の画像(bg.gif)を横に２枚並べた 1280×480 ドットの画像です。
      <img src="bg2.gif" name="bg2"
  style="clip:rect(0px,640px,480px,0px); position:absolute;left:0px; top:0px;">
    3. body から 25 ミリ秒間隔で 'scroll()' 関数を呼び出します。
      <body onLoad="setInterval('scroll()',25)">
    4. 'scroll()' 関数では cut(pos); で取得した String を document.bg2.style に設定することで画像をスクロールします。
      pos は画像を切り出す位置で、640 を超えると 0 に戻します。
        function scroll()
  { pos++;
    if (pos>=640)   pos = 0;
    var str = cut(pos);
//window.alert(str);
    document.bg2.style = str;
  }
    5. function cut(pos) は "bg2.gif" の画像を pos の位置から幅 640 で切り出す関数です。
      画像を切り出すプログラムの例は CSS Position を参考にして下さい。
        function cut(pos)
  { var s1 = '(0px,' + (640+pos) + 'px,480px,' + pos + 'px)';
    var s2 = pos + 'px;top:0px;';
    var s = 'clip:rect' + s1 + '; position:absolute;left:-' + s2;
    return s;
  }
    6. jQuery を使った例に、背景画像をスクロールするものを見かけましたが、画面の背景をスクロールするのは簡単です。(_css_scroll.html)
      画面が大きくなる(1280*960)ので bg.gif を横に４枚、縦に２枚並べた 2560×960 ドットの画像(bg4.gif)を作成して下さい。
      横方向にスクロールするので、画像の幅は画面の倍になります。
      img タグは次のようになります。
      <img src="bg4.gif" name="bg4"
  style="clip:rect(0px,1280px,960px,0px); position:absolute;left:0px; top:0px;">
      背景を横にスクロールする scroll() 関数は次のようになります。
        var pos = 0;
  function scroll()
  { pos++;
    if (pos>=1280)  pos = 0;
    var str = cut(pos);
    document.bg4.style = str;
  }
      cut(pos) 関数は次のようになります。
        function cut(pos)
  { var s1 = '(0px,' + (1280+pos) + 'px,960px,' + pos + 'px)';
    var s2 = pos + 'px;top:0px;';
    var s = 'clip:rect' + s1 + '; position:absolute;left:-' + s2;
    return s;
  }
  4. Window Scroll(scroll.html)
    背景画像では無く、スクロールバーによるスクロールの説明です。
    画面をスクロールしてマウスをクリックすると、スクロール量が確認できます。
    この項目の作成に当たっては スクロール量を取得する を参考にさせていただきました。
  5. 表示サイズが大きくなると、上下／左右にスクロールバーが設定されます。
    このとき、現在表示されている画面のスクロール情報が必要になることがあります。
    スクロール情報の取得はブラウザによって異なり、主として２種類の方法が知られています。
      var x = document.body.scrollLeft;
  var y = document.body.scrollTop;

      x = document.documentElement.scrollLeft;
  y = document.documentElement.scrollTop;
    scroll.html では両方の方法で取得を試みて alert() で知らせてくれます。
  6. 大きな画面を設定するために div タグの横幅＆縦幅を 10000px に指定しています。
    <style type="text/css">
div{ width:10000px; height:10000px }
</style>
  7. Window Size(game_size.html)
    Mouse Up で画面サイズとウィンドウサイズを確認します。
    上のリンクから起動して、マウス操作でウィンドウサイズを変更して、マウスをクリックしてみて下さい。
    【game_size.html ソースコード】
    <p>画面サイズ：<span id="ScrSize"></span></p>
<p>ウィンドウサイズ：<span id="WinSize"></span></p>

<script type="text/javascript">
window.onmouseup = mouseup;

function mouseup()
{   //画面サイズの取得
    getScreenSize();
    //ウィンドウサイズの取得
    getWindowSize();
}

//画面サイズを取得する
function getScreenSize() {
    var s = "横幅 = " + window.parent.screen.width + " / 高さ = " + window.parent.screen.height;
    document.getElementById("ScrSize").innerHTML = s;
}

//ウィンドウサイズを取得する
function getWindowSize() {
    var sW,sH,s;
    sW = window.innerWidth;
    sH = window.innerHeight;

    s = "横幅 = " + sW + " / 高さ = " + sH;
 
    document.getElementById("WinSize").innerHTML = s;
}
</script>
  8. Set Window Size(game_setsize.html)
    bg.gif のサイズ(640*480)に合わせて "game_bg1.html" を開きます。
    上のリンクから起動して、ブロックされたときは実行を許可して下さい。
    (実行を許可してから、再度リンクをクリックしてみて下さい)
    【game_setsize.html のソースコード】
    <html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript">
function openwin()
{   window.open("./game_bg1.html", "", "width=640,height=480");
}
</script>
</head>

<body>
<script type="text/javascript">
openwin();
</script>
</body>
</html>
  9. ネットで検索するとウィンドウを指定されたサイズに変更する関数 resizeTo(x,y) がヒットします。
    所が何故か私の環境では "300×200" "600×400" しか効かないようです。 (^_^;)
    (サイズは変わっても指定サイズに合っていない？)
    Window Size を切り替える
    function changeWindow(x,y)
{   resizeTo(x,y);
}
  10. 大きな背景画像のスクロールは CSS Sprite から CSS Scroll を参照して下さい。
    BG MAP を使った背景画像のスクロールは CSS Scroll と BG MAP の組み合わせです。

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