Android实现汤姆猫小游戏

我不是女神ヾ 2023-06-16 01:50 3阅读 0赞

> 本文同步发表于我的微信公众号，扫一扫文章底部的二维码或在微信搜索 ChaoYoung 即可关注。

相信好多人都玩过汤姆猫这个小游戏，要做这个小游戏其实也不难，这不，现写一个，先看效果演示。  
![tom.gif][]

目前实现的主要功能点包括以下两部分：

*  戳 tom 的各个身体部位它会做出相应反馈，包括动作和声音。
 *  往右滑动屏幕的时候另外一只黄色的小狗跳出来搞怪，并发出怪声。

鉴于我不知道这只黄色的狗子叫啥名字，后面的内容里我就称呼它为小黄吧。效果图听不见声音感觉有点无趣，所以我打了个安装包，想安装体验的可以扫码下载。  
![qr\_tomcat.png][qr_tomcat.png]

#### 思路分析 ####

我们先来分析一下这个小游戏的实现思路，首先是动作效果，不管是汤姆还是小黄所做的动作，其实就是一个**逐帧动画**，也就是将动画拆分为帧的形式，每一帧也就是一张图片，然后按序播放一组预先定义好的图片，就像播放一卷电影一样。声音效果就很简单了，在动作发生时播放音效即可。  
这篇文章就分两部分讲吧，一部分是用手指戳汤姆，另一部分是小黄出来搞怪。

--------------------

#### 一、戳汤姆 ####

##### 1. 确定点击位置 #####

我们点击汤姆时其实是点击了一些透明的按钮，透明效果只需要给控件alpha属性设置为0即可，如下图所示我们分别给汤姆的脚，肚子，尾巴和左右脸放置了按钮点击。  
![layout.png][]

##### 2. 逐帧动画 #####

逐帧动画就是加载一系列可绘制资源来创建动画，需要在xml文件的 animation-list 元素中使用 item 子元素定义动画的全部帧，并指定各帧的持续时间即可。  
**第一步**  
在/res/drawable目录下，定义一个逐帧动画的xml资源文件，如下

<?xml version="1.0" encoding="utf-8"?>
    <animation-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@drawable/breath_0001" android:duration="200"/>
        <item android:drawable="@drawable/breath_0002" android:duration="200"/>
        <item android:drawable="@drawable/breath_0003" android:duration="200"/>
        <item android:drawable="@drawable/breath_0004" android:duration="200"/>
        <item android:drawable="@drawable/breath_0005" android:duration="200"/>
        <item android:drawable="@drawable/breath_0006" android:duration="200"/>
    </animation-list>

这里每一个item就是一帧，drawable设置动画图片资源，duration设置一帧持续的时间(ms)。

**第二步**  
播放逐帧动画，如下

layout_animation.setBackgroundResource(R.drawable.breath);
    AnimationDrawable anim = (AnimationDrawable) layout_animation.getBackground();
    anim.setOneShot(true);//是否播放一次
    if (anim.isRunning()) { //如果动画已经播放过
        anim.stop();//停止动画
    }
    //启动动画
    anim.start();

这里很简单，直接使用AnimationDrawable类的start()方法即可启动逐帧动画，另外通过setOneShot()方法可以设置是否循环一次，为true将循环一次，然后停止并保持最后一帧。如果设置为false，则动画将一直循环。

##### 3. 播放声音 #####

Android中除了MediaPlayer播放音频之外，还提供了**SoundPool**来播放音效，SoundPool使用音效池的概念来管理多个短促的音效，适用于短且对反应速度比较高的情况（游戏音效或按键声等），所以我们选择SoundPool来给汤姆和小黄加音效。

**(1) 实例化SoundPool**

SoundPool pool = new SoundPool(3, AudioManager.STREAM_MUSIC, 1);//同时播放最大数量 类型 音质

可以看到SoundPool的构造函数中有三个参数，SoundPool(int maxStreams, int streamType, int srcQuality)，各参数如下

*  参数maxStreams：指定支持多少个声音，也就是同时播放最大数量。
 *  参数streamType：指定声音类型。
 *  参数srcQuality：指定声音品质。

**(2) 加载声音**  
得到SoundPool对象之后，就可调用SoundPool的load()方法来加载声音。load()方法有四个重载，返回值都是该声音的ID，如下

//1.通过资源ID加载声音。
    int load(Context context, int resld, int priority)
    //2.通过FileDescriptor加载 offset开始、长度为length的声音。
    int load(FileDescriptor fd, long offset, long length, int priority)
    //3.通过一个AssetFileDescriptor对象所对应的文件中加载声音
    int load(AssetFileDescriptor afd, int priority)
    //4.通过指定的路径加载。
    int load(String path, int priority)

我们把声音文件放在res下的raw文件中，所以使用第一个重载load()方法，第一个参数是上下文，第二个参数就是我们的音频资源ID，第三个参数是声音的优先级。如下代码所示：

pool.load(this, R.raw.fart003_11025, 1);

**(3) 播放声音**  
SoundPool提供了play()方法播放指定声音，有六个参数，如下：

int play(int soundID, float leftVolume, float rightVolume, int priority, int loop, float rate);

*  参数soundID：指定播放哪个声音，也就是上面load()方法返回的声音ID。
 *  参数leftVolume、rightVolume：指定左、右声道的音量。
 *  参数priority：指定播放声音的优先级，数值越大，优先级越高。
 *  参数loop：指定是否循环，0：不循环，-1：循环，其他值表示要重复播放的次数。
 *  参数rate：指定播放的比率，数值可从0.5到2， 1为正常比率。

当需要播放声音时，则调用play()方法即可，如下代码所示：

pool.play(soundId, 1, 1, 1, 0, 1);//声音id,左声道，右声道，优先级，循环，速率

#### 二、小黄搞怪 ####

这里我们设定了右滑屏幕小黄跑出来搞怪，其原理和戳汤姆是一样的，同样是播放逐帧动画和播放声音，只是我们触发这个事件的方式不同，当然你也可以写成戳他眼睛鼻子耳朵或者左滑下滑上滑让小黄出来搞怪，这里我就只介绍一下监听手势滑动的方法。  
**监听手势滑动**可以利用Activity的ontouchEvent()方法或手势滑动监听器OnGestureListener等，咱们的重点在于讲解这个游戏的实现原理，这里我就只介绍第一种监听了。

首先手指滑动的时候会先按下，滑到另一个地方再抬起，我们就可以根据按下的坐标和抬起的坐标算出是往哪一个方向滑动了，如下代码所示。

@Override
        public boolean onTouchEvent(MotionEvent event) { 
            if (event.getAction() == MotionEvent.ACTION_DOWN) { 
                //当手指按下的时候
                x1 = event.getX();
                y1 = event.getY();
            }
            if (event.getAction() == MotionEvent.ACTION_UP) { 
                //当手指离开的时候
                x2 = event.getX();
                y2 = event.getY();
                if (x1 - x2 > 50) { //向左滑
    
                } else if (x2 - x1 > 50) { //向右滑
                    //小黄开始出来搞怪
                }
            }
            return super.onTouchEvent(event);
        }

最后附上源码地址，GitHub：[https://github.com/yangxch/Tomcat][https_github.com_yangxch_Tomcat]  
原创不易，转载请注明出处。

--------------------

> 微信扫一扫下方二维码即可关注我的公众号  
> ![201911051045512.jpg][]

[tom.gif]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMTYxMDE0OC0yY2M5Nzc1ZDQ5YmM3OGFkLmdpZg
[qr_tomcat.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMTYxMDE0OC1kZGNiMjVkMWYzYzIyNGYwLnBuZw?x-oss-process=image/format,png
[layout.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMTYxMDE0OC1lMzgwNDA5NzI0MWQ1YzhjLnBuZw?x-oss-process=image/format,png
[https_github.com_yangxch_Tomcat]: https://github.com/yangxch/Tomcat
[201911051045512.jpg]: https://img-blog.csdnimg.cn/201911051045512.jpg