冒险岛2幸运大转盘盘游戏开发成本是多少?小本经营求1万以内

来源：蜘蛛抓取(WebSpider) 时间：2017-09-28 10:29 标签： 幸运大转盘音效
拒绝访问 |
| 百度云加速
请打开cookies.
此网站 () 的管理员禁止了您的访问。原因是您的访问包含了非浏览器特征(3a563baa-ua98).
重新安装浏览器，或使用别的浏览器1427人阅读
html5（15）
& & & & 幸运大转盘是APP和微信中使用很广泛的一种小游戏，最近由于客户需要推一些新的小游戏，于是我开发了一款幸运大转盘，下面将开发中遇到的问题总结一下，毕竟好记性不如烂笔头。开发中参照了网上找到的例程，有现成的轮子就没有必要自己再从0开始造轮子了，呵呵。页面如下：
1.是该先从服务端获取奖品信息还是先转动转盘？
& & & 这个问题在我开发的上一款H5游戏砸金蛋中也遇到过，一开始的设计是通过ajax从服务端获取奖品信息，然后再调用砸金蛋的动画，但是如果网络延迟比较大的时候，在页面中的效果就是点击金蛋后，锤子好几秒没有反应，这容易给用户一种错觉，页面好像卡死了。最后调换了顺序，先调用砸金蛋的动画，然后再从服务端请求奖品信息。
& & & &同理，幸运大转盘也应该是用户点击开始后立即转动转盘，否则延时后再转动转盘用户体验不好。旋转大转盘的动画我使用的是awardRotate.js这个插件实现的，调用它很方便，代码如下：
$('#wheelcanvas').rotate({
animateTo: angles + 1800,
duration: 8000,
callback: function() {
& & & 但是问题在于我不可能先让转盘转1800度，在这期间从服务端请求到数据后，再接着转动angles度，这样转盘会有一个明显的停止再转动的效果。
& & & 为了解决这个问题，我最终采用了初始化时就请求一次奖品信息，在转盘的回调函数中，一旦当前抽奖弹出了中奖对话框，则马上请求下一次奖品信息，这样就保证了每次用户点击立即抽奖前，奖品信息已经准备好了，不需要任何延时，可以立马开始转动。
2.如何将可变的图片画到转盘上？
& & & 在图1中，最开始我是将奖品实物图画到圆盘中的，但是奖品实物图片的url地址是从服务端获取的，不可能在浏览器加载dom时加载，只能在获取到全部奖品信息时将图片插入到dom中，但是canvas的画图片函数需要一个已经加载好的图片，而图片加载速度是较慢的，有可能圆盘已经全部绘制完了，一张奖品图片都没有加载完，所以需要用到img的onload事件，但是onload事件触发时绘制圆盘的函数已经执行完了，所以在onload回调函数中的参数需要重新计算，这在有DOM中有图片时都是需要特别注意的地方。最后为了解决这个问题，我将canvas的初始化放在绘制圆盘函数外部，先绘制圆盘，再绘制奖品图片，代码如下：
canvas = document.getElementById(&wheelcanvas&);
if (canvas.getContext) {
// 确定浏览器支持&canvas&元素
ctx = canvas.getContext(&2d&);
ctx.clearRect(0,0,422,422);
//在给定矩形内清空一个矩形
ctx.strokeStyle = &#FFBE04&;
//strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式
ctx.font = '16px 黑体';
//font 属性设置或返回画布上文本内容的当前字体属性
arc = Math.PI / (turnplate.restaraunts.length/2);
initLuckyTurntable(turnplate, arc, ctx);
for (var i = 0; i & turnplate.restaraunts. i++) {
// 图片加载速度较慢，单独加载奖品图片
var img = document.getElementById(&prize_& + i);
img.onload = function () {
ctx.save();
// 变化原点前需要保存当前设置
var index = $(this).attr(&id&).split(&prize_&)[1];
var img = document.getElementById(&prize_& + index);
var angle = turnplate.startAngle + index *
ctx.translate(211 + Math.cos(angle + arc / 2) * turnplate.textRadius, 211 + Math.sin(angle + arc / 2) * turnplate.textRadius);
ctx.rotate(angle + arc / 2 + Math.PI / 2);
ctx.drawImage(img, -26, 16, 50, 50);
// 不需要使用角度实时计算吗？
ctx.restore();
}& & & &需要注意的是在绘制每张奖品图片时需要调用ctx.save()函数，方便在绘制完后返回原绘图环境，因为奖品图片是要相对对应圆盘更换原点位置和旋转的。如果不调用save()函数，奖品图片位置会错乱。
& & & &后来由于奖品图片放置在圆盘中效果不好，就换成了通用的图片。
3.奖品的排布&
& & 既然奖品图片不放在转盘中，那奖品图片就应该放置在圆盘下方，我试过了几种排布方案。
& & 有参照我做的直播列表项页面的：
试过后效果一般，就没使用。
也试过我做的视频点播的列表效果：
& & & 效果也一般，也pass掉了。最终参照我之前做的心愿漂流瓶的项目，采用两列瀑布流布局的方式显示奖品，如下图所示：
& & & &还有就是canvas的绘图api初看起来有点复杂，但是只要看过几个例子， 把每个函数的功能和参数查清楚，其实也还好了。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：42529次
排名：千里之外
原创：26篇
(1)(1)(3)(1)(2)(2)(3)(4)(9)
(window.slotbydup = window.slotbydup || []).push({
id: '4740887',
container: s,
size: '250,250',
display: 'inlay-fix'

我要回帖

更多关于 幸运大转盘音效 的文章

 

随机推荐