図形の移動

次は、画面上に丸を描き、その丸をキー入力によって上下左右に動かしてみましょう。まずは、塗りつぶされた円を画面に描きます。

30行目から44行目までを以下のように書き換えてください。

class MainCanvas extends Canvas {
    int x = 100;
    int y = 100;
    MainCanvas() {
        setSoftLabel(SOFT_KEY_1, "END");
        setBackground(Graphics.getColorOfName(Graphics.BLUE));

    }

    public void paint(Graphics g) {
        g.lock();
        g.clearRect(0, 0, Display.getWidth(), Display.getHeight());
        g.setColor(Graphics.getColorOfName(Graphics.RED));
        g.fillArc(x, y, 40, 40, 0, 360);
        g.unlock(true);
    }

30,31行目の2行分

    int x = 100;
    int y = 100;

はx, yの二つの整数の変数を宣言しています。ついでに変数の中に各々100という値も代入しています。41行目のclearRect( )関数は画面をクリアします。次の42,43行目は、赤で塗りつぶした円を描画しています。

        g.clearRect(0, 0, Display.getWidth(), Display.getHeight());
        g.setColor(Graphics.getColorOfName(Graphics.RED));
        g.fillArc(x, y, 40, 40, 0, 360);

書き換えが終わったらいつものように、ソースコードを保存し、「ビルド」、「実行」の順に進めていきましょう。携帯電話エミュレータの画面に、以下のような表示が行われているはずです。

画面イメージ

いよいよ、キー入力による図形の移動の機能を追加します。以下のように47行目以降の processEvent( )関数を書き換えてください。

    public void processEvent(int type, int param) {
        if (type == Display.KEY_RELEASED_EVENT) {
            if (param == Display.KEY_SOFT1) {
                (IApplication.getCurrentApp()).terminate();
            }
        
            if (param == Display.KEY_LEFT) {
                x -= 10;
            } else if (param == Display.KEY_RIGHT) {
                x += 10;
            } else if (param == Display.KEY_UP) {
                y -= 10;
            } else if (param == Display.KEY_DOWN) {
                y += 10;
            }
            paint(getGraphics());
        }
    }

いつものように保存、「ビルド」、「実行」と進めてください。エミュレータに赤丸が表示されたら、携帯電話エミュレータの上下左右のキーをマウスの左ボタンで押してみてください。どうですか、ちゃんと動きましたか。

画面イメージ

マウスのボタンで押すのが面倒な方は、パソコンのキーボードの矢印キーでも同様に動作しますので、試してみてください。