カウンタークラス

【実行画面】

【Counter Class の定義】

<script>
function Counter(img, sw, sh)
{   this.Img= img;  //Image File(０～９の画像)
    this.Sw = sw;   //Sprite の幅
    this.Sh = sh;   //Sprite の高さ

    //「上, 右, 下, 左」の順
    this.View = function()
    {   var s1= 'style="clip:rect(0px,' + (this.Sw*10) + 'px,' + this.Sh + 'px,0px);';
        var s2 = 'position:absolute;left:20px;top:100px;';
        var s = '<img src="' + this.Img + '"' + s1 + s2 + '">';
        document.write(s);
    }

    //「上, 右, 下, 左」の順
    this.View_Num = function(num, x, y)
    {   var pos = num*this.Sw;
        var s1= 'style="clip:rect(0px,' + (pos+this.Sw) + 'px,' + this.Sh + 'px,' + pos + 'px);';
        var s2 = 'position:absolute;left:' + (x-pos) + 'px;top:' + y + 'px;';
        var s = '<img src="' + this.Img + '"' + s1 + s2 + '">';
        document.write(s);
    }
}
</script>
</head>

【実行画面のソースコード】

【実行画面】<br>
<script>
    var cls = new Counter("img/nums.gif", 8, 10);
    cls.View();
    cls.View_Num(0, 70, 140);
    cls.View_Num(1, 78, 140);
    cls.View_Num(2, 86, 140);
    cls.View_Num(5, 100, 160);
    cls.View_Num(4, 106, 160);
    cls.View_Num(0, 112, 160);
    cls.View_Num(0, 118, 160);
</script>

ヒットポイントなどを表示する汎用的な Counter Class を作成します。
任意のサイズと色で０～９の数字が横一列に並んだ画像を作成して下さい。
new Counter() で画像ファイルの名前と横幅と高さを指定して Class を生成します。
cls.View(); で画像全体を描画します。
続いて 012 を並べて描画します。
続いて 5400 を並べて描画します。
Constructor では受け取ったパラメータを this. の領域に保存します。
this は Counter Class が呼ばれたときのインスタンスです。
this. で始まるのは、クラスの内部変数と内部関数(メソッド)です。
<script> function Counter(img, sw, sh) { this.Img= img; //Image File(０～９の画像) this.Sw = sw; //Sprite の幅 this.Sh = sh; //Sprite の高さ

画像全体を描画する this.View() 関数です。
左上座標を 20*100 に設定して描画します。

    this.View = function()
    {   var s1= 'style="clip:rect(0px,' + (this.Sw*10) + 'px,' + this.Sh + 'px,0px);';
        var s2 = 'position:absolute;left:20px;top:100px;';
        var s = '<img src="' + this.Img + '"' + s1 + s2 + '">';
        document.write(s);
    }

一桁の数字を描画する this.View_Num() 関数です。
num が数字で、x,y が座標です。

    //「上, 右, 下, 左」の順
    this.View_Num = function(num, x, y)
    {   var pos = num*this.Sw;
        var s1= 'style="clip:rect(0px,' + (pos+this.Sw) + 'px,' + this.Sh + 'px,' + pos + 'px);';
        var s2 = 'position:absolute;left:' + (x-pos) + 'px;top:' + y + 'px;';
        var s = '<img src="' + this.Img + '"' + s1 + s2 + '">';
        document.write(s);
    }

画像を切り分けたときの座標に付いては数字の画像を切り分けてカウンターを描画を参照して下さい。

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