矢印キーでキャラクターを動かす

AWT の KeyListener で、矢印キーの操作でキャラクターを動かします。
下のリンクをクリックすると、このページで作成したアプレットが実行されます。
漢字変換を OFF にして、ウインドウ上でクリックしてから操作して下さい。
2014/12/15 Windows 8.1 & Internet Explorer11 11.0.15 で実行を確認しました。

キーを押し続けるとリピート機能が働いて、連続してキーが入力されるようになります。
このとき問題になるのが、一回目の入力と二回目の入力の間にタイムラグが生じることです。
矢印キーでキャラクターを動かす

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

プログラムの作成

  1. Windows8 で Java Applet を使うと、何故かキーが効きません。 (^_^;)
    そこで AWT を使った簡単なプログラムに書き直すことにします。
  2. メモ帳などでタイプして charmove.java の名前で保存して下さい。
    appletviewer charmove.htm はローカルの環境で Applet をテストするときのコマンドです。
    //★ AWT 矢印キーでキャラクタを動かす    前田 稔
    //   appletviewer charmove.htm
    import java.applet.*;
    import java.awt.*;
    import java.awt.event.*;
    
    public class charmove extends Applet implements KeyListener
    {   static  Image   img;
        int     x= 50, y= 50, dir= 0, num= 0;
    
        public void init()
        {   setBackground(Color.gray);
            img = getImage(getDocumentBase(),"chr47.gif");
            addKeyListener(this);
        }
    
        public void paint(Graphics g)
        {   int yoff;
            Dimension  size = getSize();
            g.setColor(getBackground());
            g.fillRect(0, 0, size.width, size.height);
            if (img!=null)
            {
    		    yoff= (dir*2+num)*32;
                g.drawImage(img,x,y,x+32,y+32,0,yoff,32,yoff+32,this);
            }
        }
    
        // KeyEvent Listener
        public void keyPressed(KeyEvent e)
        {
            switch(e.getKeyCode())
            {   case KeyEvent.VK_UP : y=y-10; dir=0; break;
                case KeyEvent.VK_RIGHT : x=x+10; dir=1; break;
                case KeyEvent.VK_DOWN : y=y+10; dir=2; break;
                case KeyEvent.VK_LEFT : x=x-10; dir=3; break;
            }
            num ^= 1;
            repaint();
        }
        public void keyReleased(KeyEvent e) { }
        public void keyTyped(KeyEvent e) { }
    }
    
  3. 画像ファイル(chr47.gif)をプログラムと同じフォルダーに格納して下さい。
    chr47.gif は「縦横共に32ドット」の Sprite が縦に8枚並んだ画像です。
    Java Applet の領域をクリックしてから、上下左右の矢印キーで、ネコがアニメーションしながら動いたら完成です。
  4. ホームページを表示する HTML ファイルを作成します。
    <html>
      <body>
        <h3>AWT で矢印キーでキャラクタを動かす</h3>
        <applet code=charmove.class width=300 height=200>
        </applet>
      </body>
    </html>
    

プログラムの説明

  1. Applet では Swing が思うように動かないので AWT の KeyListener を使って矢印キーの操作でキャラクターを動かします。
    キーを検出するので KeyListener を implements(実装) します。
    img はネコの画像の領域です。
    x, y は猫を描画する座標です。
    dir はネコの移動方向(上下左右)を記録する領域です。
    num は二枚の画像を切り替えてアニメーションするための領域です。
    import java.applet.*;
    import java.awt.*;
    import java.awt.event.*;
    
    public class charmove extends Applet implements KeyListener
    {   static  Image   img;
        int     x= 50, y= 50, dir= 0, num= 0;
    
  2. init() はアプレットの初期化を行うメソッドです。
    init() に制御が渡されたときには class charmove はインスタンス化されています。
    背景色を gray に設定しています。
    getImage() で画像を入力します。
    キー操作を検出するために addKeyListener(this) を設定します。
        public void init()
        {   setBackground(Color.gray);
            img = getImage(getDocumentBase(),"chr47.gif");
            addKeyListener(this);
        }
    
  3. paint() メソッドで画像を描画します。
    getBackground() で背景色を設定して fillRect() で画面を矩形でクリアします。
    super.paint(g) で画面をクリアすることも出来るのですが、画面がチラツキます。
    (img!=null) で img が設定されていることを確認して描画します。
    ネコは進行方向(上下左右)それぞれに、二枚の画像を切り替えながら移動します。
        public void paint(Graphics g)
        {
            int yoff;
    		//super.paint(g);
            Dimension  size = getSize();
            g.setColor(getBackground());
            g.fillRect(0, 0, size.width, size.height);
            if (img!=null)
            {
    		    yoff= (dir*2+num)*32;
                g.drawImage(img,x,y,x+32,y+32,0,yoff,32,yoff+32,this);
            }
        }
    
  4. 矢印キーを検出するメソッドです。
    上下左右のキーにより、進行方向を設定して座標を移動します。
    num の値は、0と1を交互に繰り返します。
        public void keyPressed(KeyEvent e)
        {
            switch(e.getKeyCode())
            {   case KeyEvent.VK_UP : y=y-10; dir=0; break;
                case KeyEvent.VK_RIGHT : x=x+10; dir=1; break;
                case KeyEvent.VK_DOWN : y=y+10; dir=2; break;
                case KeyEvent.VK_LEFT : x=x-10; dir=3; break;
            }
            num ^= 1;
            repaint();
        }
    
  5. PHP 超初心者のプログラム入門(PHP) でも同様のプログラムを作成しています。
    リンク出来ないときはトップページからたどって下さい。
    Java は動かすのに一苦労ですが、こちらは簡単に動きます。

Java Game Program