阅读 1431

实战|Android开发守护月饼小游戏

我正在参加中秋创意投稿大赛,详情请看:中秋创意投稿大赛

概述

重阳已过,中秋将至,想起农村老家,这个季节到了晚上,偶尔会比较凉爽,甚至有些凉意。不禁想吟词一首:

      定风波·湖村晚
        苍耳叔叔
湖面蒹葭荡影重,黄昏渐映水寒清。远处人家声影乱,亲唤,小童归去老村惊。
月上枝头双戏景,微冷,农家秋月夜燃灯。灯影幢幢人影瘦,浊酒,菜花香入梦回轻。
复制代码

好吧,这其实是一篇技术文章。周末闲来没事,看到了掘金的中秋投稿活动,正好写个“守护月饼”的小游戏来玩玩,游戏名和游戏 UI 都是我瞎扯的~直接上效果图:

UI布局方面就别吐槽了,让一个开发来思考这个问题简直噩梦(😂),里面的色值,样式,布局换了又换,随着视觉效果的越来越诡异,我只好恋恋不舍地放弃了 UI 上的修改(🐶)。

这个小游戏底部会不停出现一些大小随机的老鼠,然后过一会后自动消失,自动消失后上方的月饼会被吃掉对应老鼠体积的一部分,点击老鼠可以增加月饼对应的体积,延长寿命。目前一共设置了 15 关,每一关都设置了 20s 倒计时,在时间内月饼未被吃光则视为胜利!在通关后会有神秘奖品哦~中间的 Banner 广告是瞎加的,不然看上去 UI (我自己)感觉底部的老鼠区域太大了不协调。

接下来看看游戏实现,源码使用 MVVM 架构,github 链接在文末,欢迎 star~

吃月饼控件

月饼MoonView

首先看看顶部这个月饼控件的实现,其实本来一开始是想做“守护月亮”,网上查了查月亮阴晴阳缺的代码,看到是用xxx曲线,椭圆画的,毕业到两年,学霸也无言,我觉得大可不必,还是别去挑战这些数学问题了吧,已经过了争狠斗勇的年纪了(Doge),所以把月亮换成了月饼,用俩月饼来实现这个被吃掉的效果,一个是“正常”月饼,另一个是跟背景色一样的月饼,通过用这个白色的月饼左右移动,来遮挡住正常的月饼,实现视觉上被吃掉的效果。

首先看下月饼 View 的实现:

class MoonView @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {
    // 半径
    private var radius = SizeUtil.dp2px(30f)
    // 颜色
    private var color = Color.BLUE
    // 绘制的文本
    private var text = ""
    // 圆的画笔
    private val moonPaint = Paint(Paint.ANTI_ALIAS_FLAG)
    // 文本画笔
    private val textPaint = TextPaint()

    // 省略了初始化和 onMeasure 方法

    /**
     * 画圆和文本
     */
    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        val padding = (measuredWidth - radius * 2) / 2f
        canvas?.drawCircle(padding + radius, padding + radius, radius.toFloat(), moonPaint)
        if (text.isNotEmpty()) {
            val fontMetrics = textPaint.fontMetricsInt
            canvas?.drawText(
                text,
                radius + padding,
                radius + padding - (fontMetrics.bottom + fontMetrics.top) / 2,
                textPaint
            )
        }
    }
}
复制代码

这个自定义 View 其实很简单,就是画了个实心圆,然后中心画上文本。这里其实可以直接用一张月饼的图片,也可以用月饼的 emoji 等,不过中心写上“月饼”的文字是不是最直白!

吃月饼MoonEatView

接着就是通过上面的月饼 MoonView 控件来实现这个吃月饼控件。

class MoonEatView @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : ConstraintLayout(context, attrs, defStyleAttr) {

    // 正常月饼
    private var moonView: MoonView
    
    // 用来遮挡正常月饼的 mask 月饼
    private var maskView: MoonView
    
    // mask 月饼的移动量
    private var maskTranX: Float = 0f
}
复制代码

上面定义了两个月饼:一个正常显示的月饼 moonView,另一个是遮挡的背景色月饼 maskView,通过移动 maskView 来实现被吃效果:

fun translateMask(tranX: Float) {
    maskTranX += tranX
    if (maskTranX < 0) {
        maskTranX = 0f
    }
    if (maskTranX > moonView.width) {
        maskTranX = moonView.width.toFloat()
    }
    maskView.animate().translationX(maskTranX).setDuration(100).setListener(object : AnimatorListenerAdapter() {
        override fun onAnimationEnd(animation: Animator?) {
            if (maskAll()) {
                // 如果全部被吃掉了,则回调监听器
                onMaskListener?.onMaskAll()
            }
        }
    }).start()
    // 根据被吃的大小,展示不同的月饼色
    modifyMoonColor()
}
复制代码

上面都有注释,就不详细介绍代码逻辑了。在下面的老鼠控件消失后,会计算对应应该吃掉或增加的月饼偏移量,然后设置给 MoonEatView, 来实现这个效果。

老鼠控件

老鼠MouseView

考虑单个老鼠控件的特点:展示一段时间后消失,如果是自动消失则回调 onDismiss 监听方法,如果是点击后消失,则应该回调 onClick 监听方法,注意这些回调方法都应该在游戏正在进行的时候才执行。

因此 MouseView 需要持有其所在的容器 ViewGroup 的引用,用来添加移除老鼠 View 自身,并用来判断游戏是否在进行:

class MouseView constructor(
    context: Context,
    private val goneInterval: Long,  // 超时自动消失的时间,用来控制不同关卡的难度
    private val container: OperateLayout,
    private val listener: OnMouseListener?
) : AppCompatImageView(context, null, 0), Runnable {
    init {
        setImageDrawable(
            AppCompatResources.getDrawable(
                context, when (Random.nextInt(3)) {
                    0 -> R.drawable.mouse1
                    1 -> R.drawable.mouse2
                    else -> R.drawable.mouse3
                }
            )
        )
        // 设置点击后移除自身,并移除超时自动消失的任务
        setOnClickListener {
            removeCallbacks(this)
            container.removeView(this)
            if (container.isRunning) {
                listener?.onClick(size())
            }
        }
    }

    /**
     * 超时自动消失的任务
     */
    override fun run() {
        container.removeView(this)
        if (container.isRunning) {
            listener?.onDismiss(size())
        }
    }

    /**
     * 展示自身,并发送一个超时自动消失的任务
     */
    fun show() {
        val size = mouseSize()
        // 随机大小,随机位置
        val params = FrameLayout.LayoutParams(size, size)
        params.leftMargin = Random.nextInt(0, max(container.width - size, 1))
        params.topMargin = Random.nextInt(0, max(container.height - size, 1))
        container.addView(this, params)
        postDelayed(this, goneInterval)
    }
}
复制代码

上面代码都有注释,逻辑比较清晰,这里用了一个 goneInterval 属性来控制不同关卡的难度,这个参数表示老鼠超时多久没被点击后会自动消失。

老鼠容器OperateLayout

OperateLayout 就是游戏底部的控件,它在开始游戏后用来控制老鼠的出现和消失,同时将老鼠的点击消失和自动消失回调给外部,其内有三个属性参数:

// 同时生成的 View 数
var countOnce = 1

// 生成 View 的间隔速度
var speed = 1000L

// 游戏是否进行中
var isRunning = false
    private set
复制代码

countOnce 和 speed 用来控制关卡游戏难度,isRunning 表示游戏是否在进行。然后就是游戏开始的逻辑了:

fun start(listener: MouseView.OnMouseListener) {
    this.onMouseListener = listener
    this.isRunning = true
    removeAllViews()
    // 发送一个任务,会执行下面的 run 方法
    post(this)
}

override fun run() {
    repeat(countOnce) { // 生成 countOnce 数量的老鼠
        if (!isRunning) {
            return
        }
        val mouseView = MouseView(
            context,
            goneInterval = speed,
            container = this,
            listener = onMouseListener
        )
        // 调用老鼠的 show 方法来展示
        mouseView.show()
    }

    // 发送延时任务,一段时间后接着生成老鼠
    postDelayed(this, speed)
}
复制代码

上面注释比较清晰,这个控件主要就是用来生成老鼠,以及将玩家的点击或者漏过事件通知给外部调用者,将老鼠的自动展示和消失逻辑封装在内部。

游戏Activity

最后就是游戏的主 MainActivity 实现了,在这里会把上面的控件都组合起来,实现游戏功能。游戏的布局文件就不贴了,布局效果如上的 Gif 图。

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        // ... 初始化 View
        initData()
        initListener()
        initObserver()
    }
}
复制代码

上面主要有三个方法,先看 initData 方法:

private fun initData() {
    gameViewModel.initData(this)
    bannerView.isScrollRepeatable = true
    bannerView.highLightColor = Color.GRAY
    bannerView.setContentText(bannerViewModel.getBannerText())
    bannerView.resume(100)
}

class GameViewModel : ViewModel() {
    private val _level: MutableLiveData<Int> = MutableLiveData(1)
    val level: LiveData<Int> = _level

    fun initData(context: Context) {
        _level.value = getLevel(context)
    }
}
复制代码

首先 gameViewModel.initData() 方法用来在 ViewModel 中初始化当前的关卡是第几关,简单实现,当前关卡是用 SP 存储的。然后就是初始化 Banner 控件了,这个 Banner 控件我在之前的自定义 View 文章中有写过,直接拿来用: 有意思的自定义View | 高亮滚动文本, 有意思的自定义View | 手指平移缩放旋转

接着在 initListener 方法中初始化监听器,具体代码可以看文章末贴出的 GitHub 链接,这里在“开始游戏”的点击事件里,会先判断当前关卡是不是已经通关了,通关则会提醒是否跳转神秘奖品页面,否则会调用 startGame() 开始游戏。

至于 initObserver 方法则是监听 gameViewModel.level 这个 LiveData 的数据,用来展示当前关卡的文案。

最后再看下游戏开始的方法实现:

// startGame()
operateLayout.start(object : MouseView.OnMouseListener {
    override fun onClick(size: Int) {
        moonEatLayout.translateMask(-maskTranslate(size))
    }

    override fun onDismiss(size: Int) {
        moonEatLayout.translateMask(maskTranslate(size))
    }
})
moonEatLayout.onMaskListener = object : MoonEatView.OnMaskListener {
    override fun onMaskAll() {
        stopGame()
    }
}
复制代码

可以看到游戏开始就是调用了 OperateLayout.start() 方法,底部开始老鼠的出现和消失,然后在其回调方法中调用 MoonEatLayout.translateMask() 方法来控制月饼的被吃掉和增多效果。

总结

看了一圈下来,其实游戏实现是比较简单的,重要的是啊,蹭蹭中秋的热气,图个吉利!

总结一下这个小游戏的逻辑是:开始游戏后,底部老鼠控件 OperateLayout.start() 会控制老鼠的出现和消失,老鼠的点击消失和自动消失会触发对应的回调,在回调方法里通过计算偏移量,然后设置给 MoonEatLayout 吃月饼控件来实现吃月饼的效果。

游戏一个设置了 15 关,通关后有神秘奖品哦~

附上 apk链接, 有兴趣的可以玩玩,GitHub源码链接 在这,欢迎点赞, star~

重九刚过,远在异乡的各种飘们是否想家呢?再来一首词fs一下吧~

      渔歌子·重九
        苍耳叔叔
陌上闲枝半过秋,重阳当饮酒难休。
杯入曲,晚归悠。炊烟袅袅正秋收。
复制代码

文中内容如有错误欢迎指出,共同进步!觉得不错的同学留个再走哈~

博文链接