小猪佩琪 快乐小鸡 Vue 版

By | 2018/09/22

女儿自从看得懂小猪佩琪,每天不同时段都要看几集才肯罢休,看的时候阻断一切交流,谁和她说话都没反应,看着这么个电视迷,心里很是担心。虽然不得不说,小猪佩琪真好看啊!

里面有个非常蠢萌的“快乐小鸡”的游戏,感觉非常简单,做出来以后能不能有点乐趣呢?诚然我们可以用Pygame呀,Phaser来做,但是Vue的Star数都超React了,为什么不用Vue呢:)

游戏分析

感觉开车以后就是按键盘,里面的小鸡随机下蛋,就是这么简单,拼手速的游戏吧。似乎有记分牌,因为猪爷爷说他要超过猪奶奶的记录…… 还有一个开场动画,就忽略吧~

元素要点

里面一共只有几个画面要素,一只小鸡,蛋,记分牌。似乎过了一段时间后鸡蛋会破裂里面会出现新的小鸡,这个机制商不明确,待2.0再完善。

既然纯Vue不用Canvas,那么我得用CSS或者什么技术把他们画出来。

先说蛋:蛋比较简单,可以用border-radius模拟,虽然它是个上小下大的椭圆形,border-radius可以不是只能画正圆或者圆角矩形的,它的参数最多高达8个!因为说白了,它是指四个角的椭圆曲线,每个椭圆有纵横两个半径,所以就有八个咯。

最终效果差不多这个样子,已经基本接近了,就用它。

再说小鸡:我本来想用为元素的after/before、然后配合shadow什么的来画出小鸡的,首先这个肯定是可行的,因为这只鸡也确实没有多少笔画,但是考虑它有个张嘴和劈叉的动作,纯css的效率可能没那么高,综合考虑我决定用svg来画,这样还可以很自然的用数据来控制它。

分析一下

http://editor.method.ac/

 

唔,最终使用Pixi.js完成了,下次整理一下发出来

4 thoughts on “小猪佩琪 快乐小鸡 Vue 版

  1. Leon Zou

    更新了耶:——)
    是什么鬼??
    竟然可以这样写?!

    Reply

发表评论

电子邮件地址不会被公开。 必填项已用*标注