Java教程

长大了再也没有人给我发红包了,那就自己发!

本文主要是介绍长大了再也没有人给我发红包了,那就自己发!，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
写个红包雨,纪念一下那些还能拿红包的岁月~

上个图先


游戏核心：掌握canvas的基本应用，保持动画流畅性。

业务核心问题：
1. 生成红包：要求红包必须散落在各个位置不能重叠 ；
2. 红包下落运动，使用定时器setTimeout或者动画函数requestAnimationFrame进行清除并重新绘制每一帧的画面；
3. 用户点击红包，计算鼠标位置是否点中红包。

以上过程的具体实现思路可以参考这篇文章：canvas+vue实现60帧FPS的抢金币动画（类天猫红包雨）(出自掘金用户amandakelake)，已详细描述了实现的过程，这里不做赘述。
juejin.im/post/5c874d…

在这个基础上实现另外的两个动画：摇摆和点击缩放。

需要了解canvas的旋转API是以左上方（0，0）为中心点进行旋转，像这样：


因此我们要进行以红包中心点为准进行旋转，需要使用另一个API：translate()来变换画布的坐标。

注意：rotate完后要再重新translate回到坐标点(0,0)，不然画出来的红包就有可能出界了！

ctx.translate(红包左上方的x坐标 + 红包的宽度/2, 红包左上方的y坐标 + 红包的高度/2);
ctx.rotate(rotate);   // 要旋转的角度
ctx.translate(-红包左上方的x坐标 - 红包的宽度/2, -红包左上方的y坐标 - 红包的高度/2);复制代码

同理可得红包的缩放效果。

最后，点击红包事件监听绑定在canvas上，当点击canvas时获取鼠标的坐标，然后跟当前红包的坐标进行比对即可。

if(Math.abs(红包左上角x坐标- 鼠标x坐标) < 红包宽度 && Math.abs(红包左上角y坐标 - 鼠标y坐标) < 红包高度){ 
 // 可做计分等功能
}复制代码

这里要注意，因为动画很快，有的时候点击红包没有反应，可以对点击的面积适当的加大一点。

贴个github ,有需要的自取，如果觉得还ok的话，点个star吧

github.com/PeggyWeb/ga…


这篇关于长大了再也没有人给我发红包了,那就自己发!的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航