Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

JavaScriptとCSSによるブロック崩しの作成

スクリプトを利用してHTMLオブジェクトのスタイル属性を動的に変更する

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2006/02/17 15:30

本稿では、JavaScriptを使ってInternet Explorerで動作するゲームを開発します。 ゲーム開発に必要な、より自由な描画を行うには、スクリプトからHTMLオブジェクトのスタイル属性にアクセスしなければなりません。本稿では、スタイル属性をスクリプトから制御することで、オブジェクトをより自由にドキュメント上に描画する方法を検討します。

目次
完成図
完成図

はじめに

 JavaScriptを使ってWeb上で動作するゲームプログラムを作ろうとしたとき、多くの描画に関連する制限に衝突します。DHTMLを駆使しても、イメージをピクセル単位で処理したり、クライアントアプリケーションのように豊富なコントロールを自由に配置したりすることはできません。しかし、スクリプトからHTMLオブジェクトのスタイル属性を変更することで、HTML文書上の文字やイメージを、かなり高い自由度で動かすことができるようになります。

 例えば、一般的なゲームを開発する場合、イメージの重ね合わせや、イメージの上に文字を表示させるというテクニックは当然のように必要となります。スクリプトからHTMLドキュメントにアクセスするだけでは、文字やイメージの配置を細かく指定することはできませんが(ブラウザのレイアウトに依存)、スタイルシート(CSS)を駆使すると、HTMLオブジェクトをドキュメント上に絶対座標で配置することができるようになります。

styleオブジェクト

 HTMLオブジェクトの多くは、オブジェクト自身のスタイル属性を保存するstyleオブジェクトを保有しています。styleオブジェクトを使えば、CSSによるスタイル属性をスクリプトから読み出したり、新しく設定することができます。

 styleオブジェクトはスタイル属性を表すプロパティを数多く保有していますが、スタイルシートの知識があれば難しいものではありません。styleオブジェクトのプロパティは、単純にスタイルシートのスタイル属性名に一致しています。例えば、背景を設定するスタイル属性backgroundに対応するプロパティはbackgroundプロパティとなります。また、名前の途中がハイフン「-」で区切られている属性名の場合は、ハイフンを取り除いて、次の単語の最初の文字を大文字にします。例えばbackground-color属性に対応するプロパティはbackgroundColorプロパティです。

object.style.background [ = sBackground ]

object.style.backgroundColor [ = sColor ]

 styleオブジェクトのプロパティは、全て文字列でスタイル属性を設定することができます。スタイル属性の値は、単純な数値のほかに、JavaScriptのネイティブな値では表現できない独特の列挙子が使われていますが、これらは文字列として代入したり、比較したりすることができます。例えばCSSでは、色を「#」から始まる数値で設定するほかに、redやblackなどの文字で設定することもできます。また、背景にイメージを使う場合はurl(ファイルURL)と記述します。

 では、手始めにドキュメントの背景を変更するプログラムを書いてみましょう。backgroundプロパティは、背景のさまざまな設定を同時に行うことができます。backgroundColorbackgroundImagebackgroundRepeatbackgroundAttachmentbackgroundPositionの各プロパティで設定する値を半角で区切ることで同時に設定できます。省略されたプロパティには初期値が採用されます。

 backgroundColorプロパティは、「#」から始まる6桁の16進数によるRGB値か、色の名前(文字列)を指定します。

 背景にイメージファイルを表示させたい場合はbackgroundImageプロパティにurl(ファイルのURL)を設定します。

object.style.backgroundImage[ = URL]

 このプロパティの値は、CSSのスタイル属性background-Imageに対応するものです。スタイルはHTMLのstyle属性で設定することもできますが、スクリプトから制御することで、クライアント上で実行時に変更できるようになります。

サンプルプログラム1
<html>
    <head>
    <meta http-equiv="Content-Type"
          content="text/html; charset=shift_jis">
    <title>サンプル 01</title>

    <script language="javascript">
function colorButton_click() {
    document.body.style.backgroundImage = "";
    document.body.style.backgroundColor = "pink";
}
function imageButton_click() {
    document.body.style.backgroundColor = "";
    document.body.style.backgroundImage = "url(back.jpg)";
}
    </script>

    </head>

    <body>
    <h1>サンプルプログラム 1</h1>
    <input type="button" value="背景をピンクに"
           onClick="colorButton_click()">
    <input type="button" value="背景をイメージに"
           onClick="imageButton_click()">
    </body>
</html>

 このプログラムを実行すると2つのボタンが表示されます。[背景をピンクに]ボタンを押すとcolorButton_click()関数が実行され、背景イメージを初期化して、背景色をpinkに設定します。その結果、ドキュメントの背景はピンク一色になるでしょう。[背景をイメージに]ボタンを押すと、背景イメージとして「back.jpg」を設定します。


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 赤坂 玲音(アカサカ レオン)

    平成13年度「全国高校生・専門学校生プログラミングコンテスト 高校生プログラミングの部」にて最優秀賞を受賞。 2005 年度~ Microsoft Most Variable Professional Visual Developer - Visual C++。 プログラミング入門サイト Wis...

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5