Android使用学习之画图(Canvas，Paint)与手势感应及其应用（乒乓球小游戏）

Posted 2020-06-08

作为一个没有学习android的菜鸟，近期一直在工作之外努力地学习的Android的使用。

这周看了下Android的画图。主要是Canvas，Paint等，感觉须要实践下。下午正好有空，就想整一个乒乓球的游戏，算是巩固学的知识。

首先，须要了解下Android的画图须要掌握的经常使用类。包含Canvas，就像一个画板一样，全部的东西都是在其上画的。Paint就是画笔。用其能够画各种基本图形和文字。       Canvas和Paint经常使用的方法就不列举了，这种东西网上到处是。有了这两个东西。想实现游戏，还差个手势感应，对这个游戏来说。仅仅须要识别出左移和右移就可以。

为此，我们须要使用Android的OnGestureListener接口和GestureDetector类。

        重要的方法例如以下所看到的：

    GestureDetector detector;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_start);
        detector = new GestureDetector(this, this);
    }
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        // TODO Auto-generated method stub
        return detector.onTouchEvent(event);
    }
    @Override
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
        // 最小移动标准
        float minMove = 30;
        if ((e1.getX() - e2.getX()) > minMove && Math.abs(velocityX) > Math.abs(velocityY)) {
            Toast.makeText(this, "Move to Left", Toast.LENGTH_LONG).show();
        } else if ((e2.getX() - e1.getX()) > minMove && Math.abs(velocityX) > Math.abs(velocityY)) {
            Toast.makeText(this, "Move to Right", Toast.LENGTH_LONG).show();
        }
        return false;
    }

我们须要在onTouchEvent中使用调用GestureDetector的onTouchEvent()方法，仅仅有这样手势感应的接口才干够被回调。当中。onFling()方法中，我们实现了左移和右移的推断。

游戏的截图例如以下所看到的：

实现该游戏，主要须要考虑的地方有下面几个地方：

1.游戏的状态怎样描写叙述。详细来说，就是小球和球拍的状态

2.视图怎样动态刷新

对问题1来说，球拍的状态比較简单。仅仅有左移和右移两种，设置球拍的x,y坐标，利用步长就可非常好改变，小球的话。略微麻烦一些。我们须要用其x,y坐标。x移动速度和y移动速度来控制其状态。碰到左右强。x速度反转，碰到球拍或者上边y速度反转，碰到下边（未碰到球拍）则比赛结束。

对问题2来说，我们须要启动定时刷新任务，定时运行推断当前状态，然后依据数据来刷新视图。

以下就主要介绍下自己的小游戏实现了。代母包括以下几个类，TablePlayActivity。TableView，MsgDefine，TablePlayModel。TablePlayController。

TablePlayActivity例如以下：

package com.example.tableplay;

import android.support.v7.app.ActionBarActivity;
import android.app.Service;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.os.Vibrator;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.GestureDetector;
import android.view.GestureDetector.OnGestureListener;
import android.view.Menu;
import android.view.MenuItem;
import android.view.MotionEvent;
import android.view.Window;
import android.view.WindowManager;
import android.widget.Toast;

public class TablePlayActivity extends ActionBarActivity implements OnGestureListener{
    private GestureDetector dector;
    private TableView myView;
    private Vibrator vibrator;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        super.onCreate(savedInstanceState);
        init();
        dector = new GestureDetector(this, this); 
        vibrator = (Vibrator) getSystemService(Service.VIBRATOR_SERVICE);
    }

    private void init() {
        myView = new TableView(this);
        setContentView(myView);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                WindowManager.LayoutParams.FLAG_FULLSCREEN);
        WindowManager wm = getWindowManager();
        DisplayMetrics metrics = new DisplayMetrics();
        wm.getDefaultDisplay().getMetrics(metrics);
        Log.i("dingbin", "width " + metrics.widthPixels + "height " + metrics.heightPixels);
        TablePlayModel.getInstance().mScreenX = metrics.widthPixels;
        TablePlayModel.getInstance().mScreenY = metrics.heightPixels;
        TablePlayModel.getInstance().mRacketY = metrics.heightPixels - TablePlayModel.getInstance().SHIFT_DISTANCE;
        createHandler();
        TablePlayController.getInstance().startGame(mHandler);
    }
    private Handler mHandler;
    public void createHandler() {
        mHandler = new Handler() {
            @Override
            public void handleMessage(Message msg) {
                super.handleMessage(msg);
                switch(msg.what) {
                    case MsgDefine.MSG_TYPE_REFRESH:{
                            myView.invalidate();
                            break;
                        }
                    case MsgDefine.MSG_TYPE_VIBROTOR:{
                        vibrator.vibrate(1000);
                        Toast.makeText(TablePlayActivity.this, "Nice", Toast.LENGTH_SHORT).show();
                        break;
                    }
                    default :break;
                    }
                   
            }
        };
    }
    
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.table_play, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        return dector.onTouchEvent(event);
    }
    
    @Override
    public boolean onDown(MotionEvent e) {
        // TODO Auto-generated method stub
        return false;
    }

    @Override
    public void onShowPress(MotionEvent e) {
        // TODO Auto-generated method stub
        
    }

    @Override
    public boolean onSingleTapUp(MotionEvent e) {
        // TODO Auto-generated method stub
        return false;
    }

    @Override
    public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
        // TODO Auto-generated method stub
        return false;
    }

    @Override
    public void onLongPress(MotionEvent e) {
        // TODO Auto-generated method stub
        
    }

    @Override
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
        // 最小移动标准
        float minMove = 30;
        if ((e1.getX() - e2.getX()) > minMove && Math.abs(velocityX) > Math.abs(velocityY)) {
           // 左移
            TablePlayController.getInstance().racketMoveLeft();
        } else if ((e2.getX() - e1.getX()) > minMove && Math.abs(velocityX) > Math.abs(velocityY)) {
           // 右移
            TablePlayController.getInstance().racketMoveRight();
        }
        // 重绘View
        myView.invalidate();
        return false;
    }
}

在TablePlayActivity类中。我们主要实现了手势感应的推断和Handler消息的处理，另外初始化中获取了屏幕的宽和高。
TableView是我们基本的绘图类，我们在其的onDraw方法中，实现了小球和球拍的重绘，代码例如以下：

package com.example.tableplay;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.util.Log;
import android.view.View;
import android.widget.Toast;

public class TableView extends View{

    private Paint paint;
    private Context mContext;
    public TableView(Context context) {
        super(context);
        mContext = context;
        // 创建画笔
        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setStyle(Style.FILL);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        TablePlayModel data = TablePlayModel.getInstance();
        if (data.isGameOver) {
            paint.setTextSize(80);
            paint.setColor(Color.BLUE);
            setBackgroundResource(R.drawable.game_over);
            canvas.drawText("Game is over!", 270, data.mScreenY / 2, paint);
        } else {
            // 画球拍
            paint.setColor(Color.GREEN);
            canvas.drawRect(data.mRacketX, data.mRacketY, data.mRacketX + data.RACKET_WIDTH,
                    data.mRacketY + data.RACKET_HEIGHT, paint);
            // 画球
            paint.setColor(Color.GRAY);
            canvas.drawCircle(data.mBallX, data.mBallY, data.mBallRadius, paint);
        }
    }
}

接下来是数据类TablePlayModel，该类主要缓存我们须要使用的数据，包含我们全部须要使用的游戏状态和常量。代码例如以下：

package com.example.tableplay;

import java.util.Random;

import android.util.Log;

public class TablePlayModel {
    private static TablePlayModel mInstance = null;
    // 屏幕的宽和高
    public int mScreenX;
    public int mScreenY;
    // 球拍的宽度和高度
    public final int RACKET_WIDTH = 180;
    public final int RACKET_HEIGHT = 25;
    // 球拍移动的步长
    public int mRacketStep = 150;
    // 球拍的水平和垂直位置
    public int mRacketX = 100;
    public int mRacketY;
    private Random rand = new Random();
    // 小球的半径
    public int mBallRadius = 35;
    // 小球的x,y坐标
    public int mBallX = rand.nextInt(200) + 20;
    public int mBallY = rand.nextInt(500) + 20;
    // 小球x,y移动速度
    public int mBallYSpeed = 28;
    private double mXRate = rand.nextDouble() - 0.5;
    public int mBallXSpeed = (int) (mBallYSpeed * mXRate * 2);
    
    // 刷新间隔 ms
    public int mTimeInterval = 100;
    // 刷新延时 ms
    public int mTimeDelay = 0;
    
    public final int SHIFT_DISTANCE = 200;
    
    public boolean isGameOver = false;
    
    public static TablePlayModel getInstance() {
        if (mInstance == null) {
            synchronized (TablePlayModel.class) {
                if (mInstance == null) {
                    Log.i("dingbin", "TablePlayModel.getInstance()");
                    mInstance =  new TablePlayModel();
                }
            }
        }
        return mInstance;
    }
}

接下来是最重要的控制类TablePlayController，我们的核心逻辑都在该类中。详细来说。就是启动定时器运行任务，依据当前的状态运行小球的运动位置，更新小球的坐标。并通知视图刷新界面。代码例如以下：

package com.example.tableplay;

import java.util.Timer;
import java.util.TimerTask;

import android.os.Handler;
import android.os.Message;
import android.util.Log;
import android.widget.Toast;

public class TablePlayController {
    private static TablePlayController mInstance = null;
    private TablePlayModel data = TablePlayModel.getInstance();
    private TablePlayController() {
    }
    public static TablePlayController getInstance() {
        if (mInstance == null) {
            synchronized (TablePlayController.class) {
                if (mInstance == null) {
                    return new TablePlayController();
                }
            }
        }
        return mInstance;
    }
    public void startGame(final Handler handler) {
        Log.i("dingbin", "startGame");
        data = TablePlayModel.getInstance();
        Log.i("dingbin", data.toString());
        final Timer timer = new Timer();
        timer.schedule(new TimerTask() {
            
            @Override
            public void run() {
                // 假设碰到左右边界
                if (data.mBallX <= data.mBallRadius || data.mBallX >= data.mScreenX - data.mBallRadius) {
                    data.mBallXSpeed = -data.mBallXSpeed;
                }
                // 假设位置低于球拍的高度可是不在球拍的范围内，则比赛结束
                if (data.mBallY > data.mRacketY && (data.mBallX < data.mRacketX ||
                        data.mBallX > data.mRacketX + data.RACKET_WIDTH)) {
                    timer.cancel();
                    data.isGameOver = true;
                } else if(data.mBallY <= data.mBallRadius ) {
                    data.mBallYSpeed = - data.mBallYSpeed;
                } else if ( (data.mBallX >= data.mRacketX &&
                        data.mBallX <= data.mRacketX + data.RACKET_WIDTH && 
                                (data.mBallY + data.mBallRadius) >= data.mRacketY)) {
                    data.mBallYSpeed = - data.mBallYSpeed;
                    Message msg = Message.obtain(handler);
                    msg.what = MsgDefine.MSG_TYPE_VIBROTOR;
                    msg.sendToTarget();
                }
                // 小球坐标改变
                data.mBallX += data.mBallXSpeed;
                data.mBallY += data.mBallYSpeed;
                // 发送消息
                Message msg = Message.obtain(handler);
                msg.what = MsgDefine.MSG_TYPE_REFRESH;
                msg.sendToTarget();
            }
        }, data.mTimeDelay, data.mTimeInterval);
    }
    
    /*
     * 球拍左移
     */
    public void racketMoveLeft() {
        if (data.mRacketX >= data.mRacketStep) {
            data.mRacketX += -data.mRacketStep;
        } else {
            data.mRacketX = 0;
        }
    }
    
    /*
     * 球拍右移
     */
    public void racketMoveRight() {
        if ((data.mRacketX + data.RACKET_WIDTH) < data.mScreenX) {
            data.mRacketX += data.mRacketStep;
        } else {
            data.mRacketX = data.mScreenX - data.RACKET_WIDTH;
        }
    }
}

为了实现较好的效果，我们在成功打击球时，会震动一下（须要在AndroidManifest.xml中添加<uses-permission android:name="android.permission.VIBRATE"/>），并弹toast祝贺。

最后剩下的是信息数据类MsgDefine。存放着数据的类型。详细来说，包含刷新消息和震动消息类型，代码例如以下：

package com.example.tableplay;

public class MsgDefine {
    public static final int MSG_TYPE_REFRESH = 1;
    public static final int MSG_TYPE_VIBROTOR = 2;
}

以上就是小游戏的所有代码实现，做的比較粗糙，希望后面有机会了能够优化下。