javascript - 我已经为单个浏览器实现了 winwheel 应用程序,现在我想为所有访问同步它的旋转
问题描述
我已经为单机浏览器实现了 winwheel 应用程序,现在我想为任何机器浏览器同步它的旋转。
我用过..
Winwheel.js TweenMax.min.js
单机工作正常,但现在我想全部同步。
我正在发布部分代码.. winwheel 应该一次旋转.. 应该得到独特的结果
我的代码部分:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/Winwheel.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>
setTimeout(function(){ startSpin() }, 20000);
setTimeout(function(){ timecounting() }, 1000);
let theWheel = new Winwheel({
'outerRadius' : 200,
'responsive' : true,
'innerRadius' : 75,
'textFontSize' : 72,
'textOrientation' : 'vertical',
'textAlignment' : 'outer',
'numSegments' : 10,
'segments' :
[
{'fillStyle' : '#ee1c24', 'text' : '1'},
{'fillStyle' : '#3cb878', 'text' : '2'},
{'fillStyle' : '#f6989d', 'text' : '3'},
{'fillStyle' : '#00aef0', 'text' : '4'},
{'fillStyle' : '#f26522', 'text' : '5'},
{'fillStyle' : '#e70697', 'text' : '6'},
{'fillStyle' : '#fff200', 'text' : '7'},
{'fillStyle' : '#f6989d', 'text' : '8'},
{'fillStyle' : '#ee1c24', 'text' : '9'},
{'fillStyle' : '#3cb878', 'text' : '0'},
],
'animation' :
{
'type' : 'spinToStop',
'duration' : 10,
'spins' : 10,
'callbackFinished' : alertPrize,
'callbackSound' : playSound,
'soundTrigger' : 'pin'
},
'pins' :
{
'number' : 10,
'fillStyle' : 'silver',
'outerRadius': 10,
'responsive' : true,
}
});
var timecounter = 20;
var winning_no = '';
let audio = new Audio('tick.mp3');
function timecounting()
{
if(timecounter>1){
timecounter=timecounter-1;
setTimeout(function(){ timecounting() }, 1000);
$('#timeCntPara').html(timecounter);
$('#timeCntPara').show();
}else{
$('#timeCntPara').hide();
}
}
function playSound()
{
audio.play();
}
let wheelSpinning = false;
function startSpin()
{
$('#timeCntPara').hide();
if (wheelSpinning == false) {
theWheel.animation.spins = 10;
theWheel.startAnimation();
wheelSpinning = true;
}
}
var delay=0;
function alertPrize(indicatedSegment)
{
if (indicatedSegment.text == 'LOOSE TURN') {
$('#spinres').html('Sorry but you loose a turn.');
$("#spinres").show().delay(2000).fadeOut();
} else if (indicatedSegment.text == 'BANKRUPT') {
$('#spinres').html('Oh no, you have gone BANKRUPT!');
$("#spinres").show().delay(2000).fadeOut();
} else {
$('#spinres').html('You have won '+indicatedSegment.text);
$("#spinres").show().delay(2000).fadeOut();
}
theWheel.stopAnimation(false);
theWheel.rotationAngle = 0;
wheelSpinning = false;
// save spin records in db - start
winning_no = indicatedSegment.text;
s = {winning_no:winning_no};
jQuery.ajax({
type: "post",
url: 'php/save.php',
data: s,
success: function(response) {
wait(5000);
setTimeout(function(){ startSpin() }, 20000);
timecounter=20;
setTimeout(function(){ timecounting() }, 1000);
}
})
// save spin records in db - end
}
function wait(ms){
var start = new Date().getTime();
var end = start;
while(end < start + ms) {
end = new Date().getTime();
}
}
</script>
请给我想法..
解决方案
我希望为此使用推送通知。向所有监听事件的浏览器推送一个“spin”命令。
我以前使用过https://pusher.com/channels并认为这个或类似的东西可以做你想做的事。在 pusher JS 示例中,您可以触发轮子的旋转,而不是发出警报...
var channel = pusher.subscribe('my-channel');
channel.bind('my-event', function(data) {
if (data.message == 'spin') {
theWheel.startAnimation();
}
});
推荐阅读
- r - 在 R 中,如何将一列拆分为两列?谢谢
- python - 根据属性的值在 Django 项目中使用信号删除通知
- python - 可以使用元组索引找到列表的长度吗?
- javascript - 如何在上传到数据库之前拖动和重新定位图像?
- node.js - nginx.conf文件中的nginx配置问题
- sql - 如何查看每个员工在哪个类别中销售的商品最多?我只能显示员工的姓名和销售的商品
- python - 在 Python 中创建一个具有相同键和值的新字典,该字典从另一个字典中取平均值
- visual-studio-code - 在 VSCode 中使用环境变量
- ios - 如何在 Objective-C 中挂钩 Apple 的 `os_log_with_type` 方法
- flutter - 为什么新值没有显示在屏幕上?