JavaScriptでテトリスっぽいもの#2

では、前回の続きから進めていきましょう。

次に作成するのは足し算を行うプログラムです。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <title>Sample</title>
        <script type="text/javascript">

            function main() {
                var elmTarget = document.getElementById('target');
                var elmValue0 = document.getElementById('value0');
                var elmValue1 = document.getElementById('value1');

                elmTarget.innerHTML = parseInt(elmValue0.value) +
                                            parseInt(elmValue1.value);
            }

        </script>
    </head>

    <body>
        <p id="target">Hello, world!</p>
        <input id="value0" type="text" value="100" />
        +
        <input id="value1" type="text" value="200" />
        <input type="button" value="click" onclick="main()" />
    </body>
</html>

function mainの中身とbodyタグ内がかなり変更されていますね。
一つずつ確認していきましょう。

まず、mainの中身で３つの変数が生成されていることが分かります。
一つ目のelmTargetは名前こそ変わっていますがやっていることは今までのelmと一緒です。
二つ目のelmValue0はvalue0というidで要素を抽出するように定められています。
三つ目も二つ目にしかりです。

innerHTMLではelmTargetをオブジェクトとして使用しています。
ここで新たなparseIntという命令が出てきました、これは文字列を引数として与えると数値として返してくれる命令です。
さらに、それらをidがelmValue0の時とelmValue1の時の数値で足し算されたものとしてinnerHTMLで改変されています。

次に、bodyタグ内を見ていきましょう。
id=targetは今までと一緒でHello,worldのタグを要素として指定しています。
inputタグでは今回typeはtextとされています、これはtextフィールドとして指定しているのです。
で、今回そのvalueは100とされています、これは文字列であり数値ではないので注意。

その後に続く+はただの文字としての+ですので実際にここで+されているわけではないのにも注意です。

で、最後のinputタグは前回と同じですのでスルーします。

今回のプログラムの動作はクリックするとHello, world!の文字列が100+200の計算結果に変化します。
では、動作を追っていきましょう。

idがtargetの要素をelmTargetへ代入
値が100と200のtextフィールドを作成、idがそれぞれ対応したものへ各要素を代入
ボタンを押すとmainが読み込まれ、idがtargetの部分を改変

というような感じです。

今回はここまで。
次回は図形の表示に変化をつけてみます。

次は図形描写のプログラムです。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <title>Sample</title>
        <script type="text/javascript">

            function main() {
                var elmTarget = document.getElementById('target');
                var ctx = elmTarget.getContext('2d');

                ctx.fillStyle = 'rgb(255, 0, 0)';
                ctx.fillRect(0, 0, 20, 20);
            }

        </script>
    </head>

    <body>
        <canvas id="target" style="border: 5px solid gray" width="200" height="400"></canvas>
        <input type="button" value="click" onclick="main()" />
    </body>
</html>

今回の変更点はctx変数関連とbodyタグ内のcanvasタグです。
詳しく見ていきましょう。

まずは、変数ctxについて。
elmTargetをオブジェクトにgetContextメソッドが呼び出されていますね。
getContextメソッドは、描画用のコンテキストを取得します。
引数の2dはその名の通り２Dであるということを示しています。（色々やれば３Dも使えるみたいです）

で、fillStyleとfillRectがありますがこれは、ctxというコンテキストをどういう風なものにするか整形しています。
fillStyleでrgb(255,0,0)とあるとおり色は真っ赤っか、fillRectで指定された色で塗りつぶされた四角形を作成します、引数は順にx座標、y座標、四角形の横の長さ、四角形の縦の高さです。

そして、body内のcanvasタグは名前の通り図形の描写するキャンバスの設定となります。
style内で罫線の設定、widthとheightでは大きさを設定しています。

inputタグは今までと一緒なのでスルー。

動作を追うと