14.01.2017, 12:10
|
 |
Аспирант
|
|
Регистрация: 14.01.2017
Сообщений: 46
|
|
|
Как вернуть результат функции в литерал объекта
Всем здасьте, Пытаюсь написать скрипт рулетки. Ссылка на файлы
Затык в следующем - при нажатии на кнопку start запускается function updateNumber().
updateNumber() - должна переопределять значение литерала объектов
param1.stopImageNumber,
param2.stopImageNumber,
param3.stopImageNumber
Однако переопределения не происходит.
Подозреваю, что новые значения остаются в локальной области видимости.
Как переопределить значения литерала объектов
$(function(){
// функция генерации случайного значения
function randomInteger(min, max) {
var rand = min - 0.5 + Math.random() * (max - min + 1);
rand = Math.round(rand);
return rand;
}
// задаём интервал для генерации случайного значения
var numMin = 0;
var numMax = 5;
var win = true // переключатель возможности выигрыша
var a;
// функция генерации нового случайного значения stopImageNumber
function updateNumber(){
if(win){// совпадения допускаются
param1.stopImageNumber = randomInteger(numMin, numMax);
param2.stopImageNumber = randomInteger(numMin, numMax);
param3.stopImageNumber = randomInteger(numMin, numMax);
}
else{// совпадения НЕ допускаются
param1.stopImageNumber = randomInteger(numMin, numMax);
param2.stopImageNumber = randomInteger(numMin, numMax);
param3.stopImageNumber = randomInteger(numMin, numMax);
// в случае совпадения
if(param2.stopImageNumber == param1.stopImageNumber &&
param2.stopImageNumber == param3.stopImageNumber){
param2.stopImageNumber = param1.stopImageNumber + 1;
param3.stopImageNumber = param1.stopImageNumber - 1;
}
}
}
// задаём параметры 1-го слота
var param1 = {
speed : 5,
duration : 1,
stopImageNumber : a,
startCallback : function() {
$('.start').attr('disabled', 'true');
$('.stop').removeAttr('disabled');
},
slowDownCallback : function() {
$('.stop').attr('disabled', 'true');
},
stopCallback : function($stopElm) {
$('.start').removeAttr('disabled');
$('.stop').attr('disabled', 'true');
}
}
// задаём параметры 2-го слота
var param2 = {
speed : 10,
duration : 2,
stopImageNumber : a
}
// задаём параметры 3-го слота
var param3 = {
speed : 8,
duration : 2,
stopImageNumber : a
}
// применяем метод roulette() к слотам
var rouletter1 = $('div.roulette-1');
rouletter1.roulette(param1);
var rouletter2 = $('div.roulette-2');
rouletter2.roulette(param2);
var rouletter3 = $('div.roulette-3');
rouletter3.roulette(param3);
// обработчики кнопок
$('.stop').click(function(){
rouletter1.roulette('stop');
rouletter2.roulette('stop');
rouletter3.roulette('stop');
});
$('.stop').attr('disabled', 'true');
$('.start').click(function(){
rouletter1.roulette('start');
rouletter2.roulette('start');
rouletter3.roulette('start');
updateNumber(); // запуск апдейта
});
});
ссылка на все файлы
https://yadi.sk/d/z-R27m_o38uHkT
|
|
14.01.2017, 13:04
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,134
|
|
|
Сообщение от komplekt_17
|
|
// запуск апдейта
|
поставить выше всех roulette('start'); |
|
14.01.2017, 17:47
|
|
Аспирант
|
|
Регистрация: 14.01.2017
Сообщений: 46
|
|
|
Сообщение от рони
|
Сообщение от komplekt_17
// запуск апдейта
поставить выше всех roulette('start');
|
Поставил выше всех roulette('start'),
// обработчики кнопок
$('.start').click(function(){
updateNumber(); // запуск апдейта
rouletter1.roulette('start');
rouletter2.roulette('start');
rouletter3.roulette('start');
});
это не решило проблему - почему-то библиотека roulette.js переписывает значения, созданные в updateNumber()
вот сама библиотека
(function($) {
var Roulette = function(options) {
var defaultSettings = {
maxPlayCount : null, // x >= 0 or null
speed : 10, // x > 0
stopImageNumber : null, // x >= 0 or null or -1
rollCount : 3, // x >= 0
duration : 3, //(x second)
stopCallback : function() {
},
startCallback : function() {
},
slowDownCallback : function() {
}
}
var defaultProperty = {
playCount : 0,
$rouletteTarget : null,
imageCount : null,
$images : null,
originalStopImageNumber : null,
totalHeight : null,
topPosition : 0,
maxDistance : null,
slowDownStartDistance : null,
isRunUp : true,
isSlowdown : false,
isStop : false,
distance : 0,
runUpDistance : null,
slowdownTimer : null,
isIE : navigator.userAgent.toLowerCase().indexOf('msie') > -1 // TODO IE
};
var p = $.extend({}, defaultSettings, options, defaultProperty);
var reset = function() {
p.maxDistance = defaultProperty.maxDistance;
p.slowDownStartDistance = defaultProperty.slowDownStartDistance;
p.distance = defaultProperty.distance;
p.isRunUp = defaultProperty.isRunUp;
p.isSlowdown = defaultProperty.isSlowdown;
p.isStop = defaultProperty.isStop;
p.topPosition = defaultProperty.topPosition;
clearTimeout(p.slowDownTimer);
}
var slowDownSetup = function() {
if(p.isSlowdown){
return;
}
p.slowDownCallback();
p.isSlowdown = true;
p.slowDownStartDistance = p.distance;
p.maxDistance = p.distance + (2*p.totalHeight);
p.maxDistance += p.imageHeight - p.topPosition % p.imageHeight;
if (p.stopImageNumber != null) {
p.maxDistance += (p.totalHeight - (p.maxDistance % p.totalHeight) + (p.stopImageNumber * p.imageHeight))
% p.totalHeight;
}
}
var roll = function() {
var speed_ = p.speed;
if (p.isRunUp) {
if (p.distance <= p.runUpDistance) {
var rate_ = ~~((p.distance / p.runUpDistance) * p.speed);
speed_ = rate_ + 1;
} else {
p.isRunUp = false;
}
} else if (p.isSlowdown) {
var rate_ = ~~(((p.maxDistance - p.distance) / (p.maxDistance - p.slowDownStartDistance)) * (p.speed));
speed_ = rate_ + 1;
}
if (p.maxDistance && p.distance >= p.maxDistance) {
p.isStop = true;
reset();
p.stopCallback(p.$rouletteTarget.find('img').eq(p.stopImageNumber));
return;
}
p.distance += speed_;
p.topPosition += speed_;
if (p.topPosition >= p.totalHeight) {
p.topPosition = p.topPosition - p.totalHeight;
}
// TODO IE
if (p.isIE) {
p.$rouletteTarget.css('top', '-' + p.topPosition + 'px');
} else {
// TODO more smooth roll
p.$rouletteTarget.css('transform', 'translate(0px, -' + p.topPosition + 'px)');
}
setTimeout(roll, 1);
}
var init = function($roulette) {
$roulette.css({ 'overflow' : 'hidden' });
defaultProperty.originalStopImageNumber = p.stopImageNumber;
if (!p.$images) {
p.$images = $roulette.find('img').remove();
p.imageCount = p.$images.length;
p.$images.eq(0).bind('load',function(){
p.imageHeight = $(this).height();
$roulette.css({ 'height' : (p.imageHeight + 'px') });
p.totalHeight = p.imageCount * p.imageHeight;
p.runUpDistance = 2 * p.imageHeight;
}).each(function(){
if (this.complete || this.complete === undefined){
var src = this.src;
// set BLANK image
this.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
this.src = src;
}
});
}
$roulette.find('div').remove();
p.$images.css({
'display' : 'block'
});
p.$rouletteTarget = $('<div>').css({
'position' : 'relative',
'top' : '0'
}).attr('class',"roulette-inner");
$roulette.append(p.$rouletteTarget);
p.$rouletteTarget.append(p.$images);
p.$rouletteTarget.append(p.$images.eq(0).clone());
$roulette.show();
}
var start = function() {
p.playCount++;
if (p.maxPlayCount && p.playCount > p.maxPlayCount) {
return;
}
p.stopImageNumber = $.isNumeric(defaultProperty.originalStopImageNumber) && Number(defaultProperty.originalStopImageNumber) >= 0 ?
Number(defaultProperty.originalStopImageNumber) : Math.floor(Math.random() * p.imageCount);
p.startCallback();
roll();
p.slowDownTimer = setTimeout(function(){
slowDownSetup();
}, p.duration * 1000);
console.log(p.stopImageNumber);
}
var stop = function(option) {
if (!p.isSlowdown) {
if (option) {
var stopImageNumber = Number(option.stopImageNumber);
if (0 <= stopImageNumber && stopImageNumber <= (p.imageCount - 1)) {
p.stopImageNumber = option.stopImageNumber;
}
}
slowDownSetup();
}
}
var option = function(options) {
p = $.extend(p, options);
p.speed = Number(p.speed);
p.duration = Number(p.duration);
p.duration = p.duration > 1 ? p.duration - 1 : 1;
defaultProperty.originalStopImageNumber = options.stopImageNumber;
}
var ret = {
start : start,
stop : stop,
init : init,
option : option
}
return ret;
}
var pluginName = 'roulette';
$.fn[pluginName] = function(method, options) {
return this.each(function() {
var self = $(this);
var roulette = self.data('plugin_' + pluginName);
if (roulette) {
if (roulette[method]) {
roulette[method](options);
} else {
console && console.error('Method ' + method + ' does not exist on jQuery.roulette');
}
} else {
roulette = new Roulette(method);
roulette.init(self, method);
$(this).data('plugin_' + pluginName, roulette);
}
});
}
})(jQuery);
Последний раз редактировалось komplekt_17, 14.01.2017 в 17:59.
|
|
14.01.2017, 17:57
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,134
|
|
|
Сообщение от komplekt_17
|
|
переписывает значения, созданные в updateNumber()
|
обьясните что не так? |
|
14.01.2017, 18:24
|
|
Аспирант
|
|
Регистрация: 14.01.2017
Сообщений: 46
|
|
|
updateNumber() - генерирует случайные значения для каждого из слотов, например 0, 2, 4. Далее эти значения должны попадать в библиотеку roulette.js
Но библиотека генерирует свои случайные значения, например, 3, 2, 1.
Далее в param1.stopImageNumber, param2.stopImageNumber, param3.stopImageNumber попадают значения 3, 2, 1. А НЕ 0, 2, 4
|
|
14.01.2017, 18:25
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,134
|
|
|
komplekt_17,
функция updateNumber неправильная!!! менять надо не параметры инициализации а свойство обьекта roulette
|
|
14.01.2017, 18:30
|
|
Аспирант
|
|
Регистрация: 14.01.2017
Сообщений: 46
|
|
|
Не понял, это в скрипте библиотеки надо делать или в моём scripts.js
Куда смотреть, в какую строку?
|
|
14.01.2017, 19:13
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,134
|
|
komplekt_17,
будет что -то типа
param1.stopImageNumber = randomInteger(numMin, numMax);
rouletter1.roulette('init',param1);
вариант не верный но для примера
Последний раз редактировалось рони, 14.01.2017 в 19:16.
|
|
14.01.2017, 19:18
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,134
|
|
|
komplekt_17,
документация на плагин есть?
|
|
14.01.2017, 19:33
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,134
|
|
komplekt_17,
окончательный вариант
if(win){// совпадения допускаются
param1.stopImageNumber = randomInteger(numMin, numMax);
param2.stopImageNumber = randomInteger(numMin, numMax);
param3.stopImageNumber = randomInteger(numMin, numMax);
rouletter1.roulette('option',{stopImageNumber: param1.stopImageNumber});
rouletter2.roulette('option',{stopImageNumber: param2.stopImageNumber});
rouletter3.roulette('option',{stopImageNumber: param3.stopImageNumber});
console.log(param1.stopImageNumber,param2.stopImageNumber,param3.stopImageNumber)
}
можно и целиком все параметры
rouletter1.roulette('option',param1);
|
|
|
|
