首页 > 代码库 > SlotMachine

SlotMachine

//            SlotMachine            var goButton = $("#go_button");            var completed = 0,                imgHeight = 776,                posArr = [                    0, //4.4                    194, //12.5                    194*2, //38.1                    194*3                ];            window.setTimeout(function(){                    go();                },600);                        $.addPressListener(goButton,                  {                     "onPressEnd": function (event)                     {                         go();                     }                 });                        function go(){                document.body.style.pointerEvents = "none";                a.start();                b.start();                c.start();                $(‘#text‘).style.webkitTransition = "opacity 1s";                $(‘#text‘).style.opacity = "0";                disableControl()                x = window.setInterval(function() {                    if(a.speed >= a.maxSpeed && b.speed >= b.maxSpeed && c.speed >= c.maxSpeed) {                        enableControl();                        window.clearInterval(x);                    }                }, 100);                 window.setTimeout(function(){                    a.stop();                    b.stop();                    c.stop();                     window.setTimeout(function(){                        $(‘#text‘).style.webkitTransition = "opacity 1s";                        $(‘#text‘).style.opacity = "1";                        document.body.style.pointerEvents = "auto";                     },2500);                 },3500);            }                        function enableControl() {                J(‘#go_button‘).attr("disabled", false);            }            function disableControl() {                J(‘#go_button‘).attr("disabled", true);            }                        //create slot objects            var a = new Slot(‘#machine1‘, 70, 3.5),                b = new Slot(‘#machine2‘, 65, 3),                c = new Slot(‘#machine3‘, 70, 4);                        function Slot(el, max, step) {                this.speed = 0; //speed of the slot at any point of time                this.step = step; //speed will increase at this rate                this.si = null; //holds setInterval object for the given slot                this.el = el; //dom element of the slot                this.maxSpeed = max; //max speed this slot can have                this.pos = null; //final position of the slot	                J(el).pan({                    fps:30,                    dir:‘down‘                });                J(el).spStop();            }                        //start            Slot.prototype.start = function() {                var _this = this;//                J(_this.el)[0].style.backgroundImage = "url(../images/reel_blur.png)";                J(_this.el).spStart();                _this.si = window.setInterval(function() {                    if(_this.speed < _this.maxSpeed) {                        _this.speed += _this.step;                        J(_this.el).spSpeed(_this.speed);                    }                }, 100);            };                        //stop            Slot.prototype.stop = function() {                var _this = this,                    limit = 15;                clearInterval(_this.si);                _this.si = window.setInterval(function() {                    if(_this.speed > limit) {                        _this.speed -= _this.step;                        J(_this.el).spSpeed(_this.speed);                    }                    if(_this.speed <= limit) {                        _this.finalPos(_this.el);                        J(_this.el).spSpeed(0);                        J(_this.el).spStop();                        clearInterval(_this.si);                        J(_this.el).removeClass(‘motion‘);                        _this.speed = 0;                    }                }, 100);            };                        //final Position            Slot.prototype.finalPos = function() {                var el = this.el,                    el_id,                    pos,                    posMin = 2000000000,                    best,                    bgPos,                    i,                    j,                    k;                el_id = J(el).attr(‘id‘);                //pos = J(el).css(‘background-position‘); //for some unknown reason, this does not work in IE                pos = document.getElementById(el_id).style.backgroundPosition;                pos = pos.split(‘ ‘)[1];                pos = parseInt(pos, 10);                                for(i = 0; i < posArr.length; i++) {                    for(j = 0;;j++) {                        k = posArr[i] + (imgHeight * j);                        if(k > pos) {                            if((k - pos) < posMin) {                                posMin = k - pos;                                best = k;                                this.pos = posArr[i]; //update the final position of the slot                            }                            break;                        }                    }                }                            var number =  Math.floor(best / imgHeight);                best = number * imgHeight + imgHeight / 2;//fixed position                                bgPos = "0 " + best + "px";                                J(el).animate({                    backgroundPosition:"(" + bgPos + ")"                }, {                    duration: 1000,                    complete: function() {                        completed ++;                    }                });            };

  

#SlotMachine-background{    position:absolute;    left: 98px;    top: 223px;    width: 734px;    height: 442px;    background-image: url(../images/SlotMachine-background.98-223.png);    background-size: 734px 442px;    background-repeat: no-repeat;}#go_button{    width: 44px;    height: 220px;    left: 678px;    top: 120px;    position: absolute;}#machine1, #machine2, #machine3{    position: absolute;    width: 148px;    height: 194px;}#machine1{    background-image: url(../images/reel_normal-1.png);    left: 137px;    top: 127px;} #machine2{    background-image: url(../images/reel_normal-2.png);    left: 314px;    top: 127px;}#machine3{    background-image: url(../images/reel_normal-3.png);    left: 490px;    top: 127px;}#text{    position:absolute;    left: 278px;    top: 488px;    width: 419px;    height: 37px;    background-image: url(../images/text.278-488.png);    background-size: 419px 37px;    background-repeat: no-repeat;    opacity: 0;}#title-text{    position:absolute;    left: 230px;    top: 269px;    width: 497px;    height: 60px;    background-image: url(../images/title-text.230-269.png);    background-size: 497px 60px;    background-repeat: no-repeat;}#paper-pop-up{    background-image: url(../../_/images/paper-list.png);    background-position: center;}#paper-pop-up >.close-button{    position:absolute;    left: 945px;    top: 85px;    width: 42px;    height: 42px;    opacity: 0;}

  用到的框架:

jquery-1.6.1.min.jsjquery.backgroundPosition.jsjquery.spritely.js