Question

嘿我正在使用我发现的一个javascript游戏的Spawn函数我正在创建随机生成敌人点击。但它非常慢，我希望它能够更快更快地生成..是否有可能以这种方式修改此代码？ spawn函数位于代码的末尾。

function Gem(Class, Value, MaxTTL) {
            this.Class = Class;
            this.Value = Value;
            this.MaxTTL = MaxTTL;
        };

    var gems = new Array();
    gems[0] = new Gem('green', 10, 0.5);
    gems[1] = new Gem('blue', 20, 0.4);
    gems[2] = new Gem('red', 50, 0.6);

    function Click(event)
    {
        if(event.preventDefault) event.preventDefault();
        if (event.stopPropagation) event.stopPropagation();
        else event.cancelBubble = true;

        var target = event.target || event.srcElement;

        if(target.className.indexOf('gem') > -1){
            var value = parseInt(target.getAttribute('data-value'));
            var current = parseInt( score.innerHTML );
            var audio = new Audio('music/blaster.mp3');
            audio.play();
            score.innerHTML = current + value;
            target.parentNode.removeChild(target);

            if (target.className.indexOf('red') > 0){
                var audio = new Audio('music/scream.mp3');
                audio.play();
                endGame("You lose");
            }

        }

        return false;
    }

    function Remove(id) {
        var gem = game.querySelector("#" + id);

        if(typeof(gem) != 'undefined')
            gem.parentNode.removeChild(gem);
    }

    function Spawn() {
        var index = Math.floor( ( Math.random() * 3 ) );
        var gem = gems[index];

        var id = Math.floor( ( Math.random() * 1000 ) + 1 );
        var ttl = Math.floor( ( Math.random() * parseInt(gem.MaxTTL) * 1000 ) + 1000 ); //between 1s and MaxTTL
        var x = Math.floor( ( Math.random() * ( game.offsetWidth - 40 ) ) );
        var y = Math.floor( ( Math.random() * ( game.offsetHeight -  44 ) ) );

        var fragment = document.createElement('span');
        fragment.id = "gem-" + id;
        fragment.setAttribute('class', "gem " + gem.Class);
        fragment.setAttribute('data-value', gem.Value);

        game.appendChild(fragment);

        fragment.style.left = x + "px";
        fragment.style.top = y + "px";

        setTimeout( function(){
            Remove(fragment.id);
        }, ttl)
    }
        function Stop(interval) {
            clearInterval(interval);
        }

        function endGame( msg ) {
            count = 0;
            Stop(interval);
            Stop(counter);
            var left = document.querySelectorAll("section#game .gem");
            for (var i = 0; i < left.length; i++) {
                if(left[i] && left[i].parentNode) {
                    left[i].parentNode.removeChild(left[i]);
                }
            }
            time.innerHTML = msg || "Game Over!";
            start.style.display = "block";
            UpdateScore();
        }

        this.Start = function() {
            score.innerHTML = "0";
            start.style.display = "none";
            interval = setInterval(Spawn, 750);

            count = 4000;
            counter = null;

            function timer()
            {
                count = count-1;
                if (count <= 0)
                {
                    endGame();

                    return;
                } else {
                    time.innerHTML = count + "s left";
                }
            }

            counter = setInterval(timer, 1000);

            setTimeout( function(){
                Stop(interval);
            }, count * 1000)
        };
        addEvent(game, 'click', Click);
        addEvent(start, 'click', this.Start);
        HighScores();
    }

Answer 1

JS / HTML性能提示：

1）var gems = new Array（）;改为新的Array（3）;

2）缓存所有新音频（'...'）;

3）使用getElementById比querySelector（'＃'）

更快

4）准备var fragment = document.createElement（'span'）;并缓存它，使用cloneNode插入它。

5）fragment.style.left＆amp;顶部更改为CSS3转换：translate（）。 CSS3转换使用你的显卡GPU，style.left使用CPU ...

6）仅使用单个setInterval并在所有片段列表上运行。

7）你可以创建一个“片段”池，只显示\ hide，它会大大提高性能。

由于许多页面重绘，基本上它工作缓慢，每次向页面浏览器添加新元素时都必须重绘整个屏幕，不要添加元素，只需显示\隐藏它们。

随机生成更快更快的敌人Javascript

1 个答案: