生涯未熟

プログラミングをちょこちょこと。

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の中身で3つの変数が生成されていることが分かります。
一つ目の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の計算結果に変化します。
では、動作を追っていきましょう。

  1. idがtargetの要素をelmTargetへ代入
  2. 値が100と200のtextフィールドを作成、idがそれぞれ対応したものへ各要素を代入
  3. ボタンを押すと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はその名の通り2Dであるということを示しています。(色々やれば3Dも使えるみたいです)

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

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

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

動作を追うと

  1. まずはキャンバスとボタンが表示される
  2. ボタンを押すとmainへ
  3. idのtargetから要素を抽出、今回はcanvasの要素を抽出する
  4. 変数ctxにelmTargetを描画用コンテキストとしたものを代入する
  5. ctxをオブジェクトとし、図形を整形する。

という感じでしょうか。



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

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