动物世界游戏!!

时间:2014-04-29 22:31:42   收藏:0   阅读:689

前两天跟朋友说起以前玩的DUBO的“动物世界”的游戏,下载了一个android的,觉得不太爽,干脆按照以前玩的感觉自己做了一个,这个版本没有用canvas,主要用css3 的transform 属性,在手机端效率太差劲了,还望高人指点效率迷津。

说明:

1.45秒压点倒计时

2.10秒中奖反馈倒计时

3.随机中奖,先到先得

4.可以用node扩展为多人在线版本

5.效率有待优化

 

贴上图片:

mamicode.com,码迷

 

贴上代码:

mamicode.com,码迷
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>title</title>
        <style type="text/css">
        .container{
            overflow:hidden;
            *zoom:1;
        }
        .main{
            float:left;
            position:relative;
            width:600px;
            height:600px;
            border:5px solid #efefef;
            border-radius: 50%;
            box-shadow:3px 3px 3px #ccc;
        }
        .animals{
            position:absolute;
            top:0;
            left:0;
            width:600px;
            height:600px;
        }
        .animal{
            position:absolute;
            width:45px;
            height:45px;
            background-color:#efefef;
            border-radius:50%;
            box-shadow:3px 3px 3px #ccc;
            font-size:10px;
            text-align:center;
            line-height:45px;
        }
        .colors{
            position:absolute;
            top:100px;
            left:100px;
        }
        .color{
            position:absolute;
            width:30px;
            height:30px;
            background-color:#999;
            border-radius:50%;
            box-shadow:3px 3px 3px #ccc;
            opacity:0.3;
        }
        .pointer{
            position:absolute;
            top:100px;
            left:100px;
            width:400px;
            height:400px;
        }
        .pointer span{
            position:absolute;
            display:block;
            top:0;
            left:200px;
            width:5px;
            height:200px;
            background-color:#ff0000;
            box-shadow:3px 3px 3px #ccc;
            opacity:0.7;
        }
        .time-left{
            position:absolute;
            left:248px;
            top:272px;
            width:100px;
            height:50px;
            line-height:50px;
            border:5px solid #333;
            background-color:#fff;
            color:#ff0000;
            font-size:30px;
            font-weight:bold;
            text-align:center;
        }

        .operation{
            margin:0 0 0 650px;
            border:1px solid #ccc;
        }
        .masker{
            position:absolute;
            background-color:#ccc;
            opacity:0.5;
        }
        .operation ul{
            list-style:none;
            overflow:hidden;
            *zoom:1;
        }
        .operation ul li{
            float:left;
            margin:0 10px 0 0;
            overflow:hidden;
            *zoom:1;
        }
        .operation ul li .btn{
            float:left;
            color:#fff;
            font-weight:bold;
            width:100px;
            height:100px;
            border:1px solid #ccc;
            background-color:#333;
            text-align:center;
            line-height:100px;
            cursor:pointer;
        }
        .operation ul li .data{
            margin:0 0 0 100px;
            width:50px;
            height:100px;
            color:#fff;
            background-color:#333;
            font-weight:bold;
        }
        .operation ul li .data div{
            color:green;
            width:50px;
            height:50px;
            text-align:center;
            line-height:50px;
            border:1px solid #ccc;
        }
        .operation ul li .btn{            
            opacity:0.5;
        }
        .operation ul li.red .btn{
            background-color:red;
        }
        .operation ul li.yellow .btn{
            background-color:yellow;
        }
        .operation ul li.green .btn{
            background-color:green;
        }
        .records{
            overflow:hidden;
            *zoom:1;
        }
        .records .coin{
            float:left;
            width:100px;
            height:50px;
            line-height:50px;
            text-align:center;
            background:#000;
            color:green;
            font-size:30px;
            font-weight:bold;
            margin:0 10px 0 0;
        }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="main">
                <div class="animals"></div>
                <div class="colors"></div>
                <div class="pointer">
                    <span></span>
                </div>
                <div class="time-left">00</div>
            </div>
            <div class="operation">
                <div class="others"></div>
                <div class="mine"></div>
                <div class="records">
                    <span class="coin"></span>
                    <a href="###">充值</a>
                </div>
            </div>
            <div class="masker"></div>
        </div>
        <script src="/test/common/jquery.js"></script>
        <script src="/test/common/base.js"></script>
        <script>
        (function($){

            var Lionking = DH.Base.create({

                elements : {
                    ‘.animals‘ : ‘elAnimals‘,
                    ‘.colors‘ : ‘elColors‘,
                    ‘.pointer‘ : ‘elPointer‘,
                    ‘.time-left‘ : ‘elTimeleft‘,
                    ‘.mine‘ : ‘elMine‘,
                    ‘.operation‘ : ‘elOperation‘,
                    ‘.masker‘ : ‘elMasker‘,
                    ‘.coin‘ : ‘elCoin‘
                },

                events : {
                    ‘click .j-btn‘ : ‘bet‘
                },

                tpl : {
                    mine : {
                        list : ‘<ul><%=list%></ul>‘,
                        item : <li class="j-item <%=color%> j-mine-color-<%=colorid%>">                                    <div class="btn j-btn"><%=animal%></div>                                    <div class="data j-mine-animal-<%=animalid%>">                                        <div class="multiple">0</div>                                        <div class="times">0</div>                                    </div>                                </li>
                    }
                },

                init : function(){

                    this.radius = 300; // 半径

                    this.leftTime = 45;

                    this.$animals = [];

                    this.animals = [‘panda‘, ‘lion‘, ‘monkey‘, ‘rabbit‘];

                    this.animalMultiple = [25, 15, 7, 5];

                    this.$colors = []; // 颜色元素数组

                    this.colors = [‘red‘, ‘yellow‘, ‘green‘]; // 颜色数组

                    this.colorMultiple = [10, 8, 5, 2];

                    this.animalsStartPos = 0;

                    this.pointerStartPos = 360; // 指针开始位置

                    this.$currentColor = null; // 当前颜色元素

                    this.renderMine();

                    this.setAnimals();

                    this.setColors();

                    this.coin = 2000;

                    this.win = {};

                    this.resetMultiple();

                    this.resetCoin();

                    this.start();

                },

                bet : function(e){

                    if(this.coin === 0){
                        alert(‘没有币了,请充值。‘);
                        return;
                    }

                    var $e = $(e.target),
                        $item = $e.closest(‘.j-item‘),
                        $times = $item.find(‘.times‘),
                        times = +$times.text()
                        ;

                    $times.text(++times);

                    this.coin--;

                    this.resetCoin();

                },

                resetCoin : function(){

                    this.elCoin.text(this.coin);

                },

                renderMine : function(){
                    var tpl = this.tpl,
                        tmpl = this.tmpl,
                        colors = this.colors,
                        animals = this.animals,
                        list = [],
                        item
                        ;

                    for(var i = 0, len = colors.length; i < len; i++){

                        item = [];

                        for(var j = 0, len2 = animals.length; j < len2; j++){
                            item.push(tmpl(tpl.mine.item, {
                                color : colors[i],
                                animal : animals[j],
                                colorid : i,
                                animalid : j
                            }));
                        }

                        list.push(tmpl(tpl.mine.list, {
                            list : item.join(‘‘)
                        }));
                    }

                    this.elMine.append(list.join(‘‘));

                },
                resetMultiple : function(){

                    var rnd = Math.random() * 1,
                        colors = this.colors,
                        animals = this.animals,
                        animalMultiple = this.animalMultiple,
                        colorMultiple = this.colorMultiple
                        ;

                    for(var i = 0, len = colors.length; i < len; i++){

                        var $colors = this.el.find(‘.j-mine-color-‘ + i);

                        for(var j = 0, len2 = animals.length; j < len2; j++){

                            var multi = Math.ceil(animalMultiple[j] + colorMultiple[i] * rnd + colorMultiple[i]);

                            $colors.each(function(){
                                $(this).find(‘.j-mine-animal-‘ + j).find(‘.multiple‘).text(multi);
                            });

                        }

                    }

                },
                setAnimals : function(){

                    var radius = this.radius - 30,
                        animals = this.animals
                        ;

                    for(var i = 1; i <= 36; i++){

                        var $animal = $(‘<div>‘).appendTo(this.elAnimals),
                            theta = (i - 9) * 2 * Math.PI / 36,
                            left = radius * Math.cos(theta),
                            top = radius * Math.sin(theta),
                            rnd = Math.floor(Math.random() * animals.length),
                            animal = animals[rnd]
                            ;

                        left += radius + 8;

                        top += radius + 8;

                        $animal
                            .attr(‘data-animal‘, rnd)
                            .text(animal)
                            .addClass(‘animal‘)
                            .css({
                                left : left,
                                top : top
                            })
                            ;

                        this.$animals.push($animal);
                    }

                },
                setColors : function(){

                    var radius = this.radius - 70;

                    for(var i = 1; i <= 36; i++){

                        var $color = $(‘<div>‘).appendTo(this.elColors),
                            theta = (i - 10) * 2 * Math.PI / 36,
                            left = radius * Math.cos(theta),
                            top = radius * Math.sin(theta)
                            ;

                        left += radius - 46;

                        top += radius - 46;

                        $color
                            .addClass(‘color‘)
                            .css({
                                left : left,
                                top : top
                            })
                            ;

                        this.$colors.push($color);
                    }

                },
                resetColors : function(){

                    var $colors = this.$colors,
                        $ocolors = this.el.find(‘.color‘),
                        colors = this.colors,
                        len = $colors.length,
                        i = 0
                        ;

                    $ocolors.css({
                        backgroundColor : ‘#999‘
                    });

                    (function reset(){

                        if(i === len) return;

                        var rnd = Math.floor(Math.random() * colors.length),
                            color = colors[rnd]
                            ;

                        $colors[i]
                            .attr(‘data-color‘, rnd)
                            .css({
                                backgroundColor : color
                            })
                            ;

                        i++;

                        setTimeout(reset, 20);

                    }());

                },
                startAnimals : function(){

                    var self = this,
                        $animals = this.elAnimals,
                        i = this.animalsStartPos || 360,
                        circle = 0,
                        interval = 10,
                        stop,
                        animal
                        ;

                    (function start(){

                        if(i === 0){
                            i = 359;

                            circle++;

                            if(circle > 1){
                                interval += 10;
                            }

                            if(circle === 3 && stop === undefined){
                                stop = Math.floor(Math.random() * 36);
                            }
                        }

                        animal = Math.floor(i / 10);

                        if(stop && animal === stop){
                            self.animalsStartPos = i;
                            self.win.animal = +self.$animals[animal].attr(‘data-animal‘);

                            self.setWin();
                            return;
                        }

                        $animals.css({
                            ‘transform‘ : ‘rotate(‘+ i +‘deg)‘
                        });

                        i--;

                        setTimeout(start, interval);

                    }());

                },
                startPointer : function(){

                    var self = this,
                        $pointer = this.elPointer,
                        $colors = this.$colors,
                        i = this.pointerStartPos || 0,
                        circle = 0,
                        interval = 1,
                        color,
                        stop
                        ;

                    (function start(){

                        if(i === 360){
                            i = 0;

                            circle++;

                            if(circle > 1){
                                interval += 10;
                            }

                            if(circle === 3 && stop === undefined){
                                stop = Math.floor(Math.random() * 36);
                            }
                        }

                        color = Math.floor(i / 10);

                        self.$currentColor && self.$currentColor.css({
                            opacity : 0.3
                        });

                        self.$currentColor = $colors[color];

                        self.$currentColor.css({
                            opacity : 1
                        });

                        if(stop && color === stop){
                            self.pointerStartPos = i;
                            self.win.color = +self.$currentColor.attr(‘data-color‘);

                            self.setWin();
                            return;
                        }

                        $pointer.css({
                            ‘transform‘ : ‘rotate(‘+ i +‘deg)‘
                        });

                        i++;

                        setTimeout(start, interval);

                    }());

                },
                coverNum : function(num){
                    return typeof num === ‘number‘ && num < 10 ? ‘0‘ + num : num;
                },
                setWin : function(){
                    var win = this.win;

                    if(win.color !== undefined && win.animal !== undefined){

                        var color = win.color,
                            animal = win.animal,
                            $colors = this.el.find(‘.j-mine-color-‘ + color),
                            $animal,
                            multiple,
                            times
                            ;

                        for(var i = 0, len = $colors.length; i < len; i++){

                            $colors.eq(i).find(‘.j-mine-animal-‘ + animal).length && ($animal = $colors.eq(i).find(‘.j-mine-animal-‘ + animal));

                        }

                        if($animal){

                            this.$winAnimal = $animal.prev(‘.j-btn‘);

                            multiple = +$animal.find(‘.multiple‘).text();

                            times = +$animal.find(‘.times‘).text();

                            this.coin += multiple * times;

                            this.resetCoin();

                        }

                        this.win = {};

                        this.resetMultiple();

                        this.hideMasker();

                        this.stop();

                    }

                },
                clearTimes : function(){

                    this.el.find(‘.times‘).text(0);

                },
                showMasker : function(){

                    var $masker = this.elMasker,
                        $operation = this.elOperation,
                        width = $operation.width(),
                        height = $operation.height(),
                        offset = $operation.offset()
                        ;

                    $masker
                        .show()
                        .css({
                            width : width,
                            height : height,
                            left : offset.left,
                            top : offset.top
                        })
                        ;

                },
                hideMasker : function(){
                    this.elMasker.hide();
                },
                focusWinAnimal : function(){

                    var self = this,
                        $animal = this.$winAnimal,
                        leftTime = this.leftTime
                        ;

                    (function focus(){

                        if(leftTime === 0){
                            $animal.css({
                                opacity : 0.5
                            });
                            $animal.removeAttr(‘data-focus‘);
                            return;
                        }

                        if($animal.attr(‘data-focus‘) === ‘1‘){
                            $animal.css({
                                opacity : 0.5
                            });
                            $animal.removeAttr(‘data-focus‘);
                        }else{
                            $animal.css({
                                opacity : 1
                            });
                            $animal.attr(‘data-focus‘, ‘1‘);
                        }

                        leftTime -= 0.5;

                        setTimeout(focus, 500);

                    }());

                },
                start : function(){

                    var self = this,
                        leftTime = this.leftTime
                        ;

                    this.elTimeleft.text(this.coverNum(leftTime));

                    (function start(){

                        leftTime--;

                        self.elTimeleft.text(self.coverNum(leftTime));

                        if(leftTime === 0){
                            self.resetColors();
                            self.startAnimals();
                            self.startPointer();
                            self.showMasker();
                            self.leftTime = 10;
                            return;
                        }

                        setTimeout(start, 1000);

                    }());

                },
                stop : function(){

                    var self = this;

                    this.elTimeleft.text(this.coverNum(this.leftTime));

                    this.focusWinAnimal();

                    (function stop(){

                        self.leftTime--;

                        self.elTimeleft.text(self.coverNum(self.leftTime));

                        if(self.leftTime === 0){

                            self.leftTime = 45;                            

                            self.clearTimes();

                            self.start();

                            return;
                        }

                        setTimeout(stop, 1000);

                    }());

                }

            });

            new Lionking();
            
        })(window.jQuery);
        </script>
    </body>
</html>
mamicode.com,码迷

 

动物世界游戏!!,码迷,mamicode.com

评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码!