用canvas结合css3写一个骰宝游戏

这个项目预览效果: https://leeseean.github.io/sic-bo
用canvas结合css3写一个骰宝游戏_第1张图片

布局

布局采用html+css布局,桌面背景使用图片,里面的选号不使用图片全部采用css编写,盅和里面的骰子采用图片。

动画效果

动画效果主要两个,

  • 1个是开奖后盅摇骰子,这个使用css3的keyframe动画,用到了scale,rotate,骰子div随机变换位置和背景图片,直至最后更换为开奖选号图片。
  • 一个是筹码飞出去的效果,这里用到了canvas,难点在于计算坐标和适配屏幕,计算选号坐标,然后得到飞出去的位置坐标。当屏幕收缩放大的时候可能位置会跑偏,因此还要主要适配屏幕。

主要是这么点,是个细活,源码地址:https://github.com/leeseean/s...

你可能感兴趣的:(javascript,css3,canvas)