使用火狐开发版本的性能监测工具提高星球保卫小游戏的性能

Firefox Performance Tool Power Surge Refer to: https://www.mozilla.org/en-US/firefox/developer/ 需要在Firefox中打开监控游戏性能。

game，performance，开发工具

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 5119
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

/**
 *
 * Get Firefox Developer Edition to try the new Performance Tools:
 *   https://www.mozilla.org/firefox/developer/
 *
 * 1. Open the `Performance` tool in Firefox Developer Edition
 * 2. Start recording a performance profile
 * 3. Play the game
 * 4. Stop profiling and check the Call Tree or Flame Chart for the maleficent
 *
 * Got ideas for better bottlenecks or even faster code, file
 * an issue or send us a pull request:
 *   https://github.com/mozilla/devtools-perf-game/issues
 */

/**
 * Creates a new array with all elements that pass the `test` function
 * @param {Array} array The array to filter
 * @param {Function} test Function to test each element, invoked with (element)
 * @return {Array} A new array with only passed elemennts
 */
Utils.filter = function(array, test) {
    var result = array.slice(); // Clone array
    for (var i = 0; i < result.length; i++) {
        if (!test(result[i])) {
            result.splice(i, 1); // Remove element
            i--;
        }
    }
    return result;
};

/**
 * Find nearest entity from a list of entities
 * @param {Entity} from Entity
 * @param {Entity[]} entities List of entities to compare
 * @return {Entity} Nearest Entity
 */
Utils.nearest = function(from, entities) {
    var distances = [];
    for (var i = 0; i < entities.length; i++) {
        var to = entities[i];
        if (from === to) continue;
        var distance = this.distance(from, to);
        distances.push({
            target: to,
            distance: distance
        });
    }
    if (!distances.length) {
        return null;
    }
    var sortedDistances = distances.sort(
        function sortDistances(a, b) {
            return a.distance - b.distance;
        }
    );
    return sortedDistances[0].target;
};

/**
 * Returns nearest ship of opposite team
 * @return {Ship} Nearest enemy ship
 */
ENGINE.Ship.prototype.getTarget = function() {
    var pool = [];
    for (var i = 0; i < this.game.entities.length; i++) {
        var entity = this.game.entities[i];
        if (!(entity instanceof ENGINE.Ship)) continue;
        if (entity.team !== this.team) pool.push(entity);
    }
    // Is Utils.nearest fast enough?
    return Utils.nearest(this, pool);
};

// We update those for positions, maybe we don't need it?
var axes = {
    x: Math.cos,
    y: Math.sin
};

/**
 * Update position for an entity that has speed and direction.
 * @param {Number} direction Angle given in radians
 * @param {Number} value Distance to move
 */
Utils.moveInDirection = function(direction, value) {
    Utils.justAnExpensiveLoop();
    value /= 100;
    for (var i = 0; i < 100; i++) {
        for (var axis in axes) {
            this[axis] += axes[axis](this.direction) * value;
        }
    }
};

/**
 * I am really just an expensive loop ;)
 * Remove me and all references calling me!
 */
Utils.justAnExpensiveLoop = function() {
    // This isn't even doing anything
    var oops = Array(1000);
    oops.map(function(val, i) {
        return Math.PI / 2500 * i;
    }).filter(function(rad) {
        return Math.sin(rad) > 0;
    });
}

/**
 * Update ship position with current direction and speed
 * @param {Number} dt Time delta for current frame in seconds
 */
ENGINE.Ship.prototype.move = function(dt) {
    if (!this.frozen) {
        Utils.moveInDirection.apply(this, [this.direction, this.speed * dt]);
    }

if (this.force > 0) {
        this.force -= 200 * dt;
        Utils.moveInDirection.apply(this, [this.forceDirection, this.force * dt]);
    }
};

/**
 * Frame step for a particle
 * @param {Number} dt Time delta for current frame in seconds
 */
ENGINE.Particle.prototype.step = function(dt) {
    this.lifetime += dt;
    // Update position
    for (var axis in axes) {
        this[axis] += axes[axis](this.direction) * this.speed * dt;
    }
    this.speed = Math.max(0, this.speed - this.damping * dt);

this.progress = Math.min(this.lifetime / this.duration, 1.0);
    // Put particle offscreen for pooling and to keep render time constant
    if (this.progress >= 1.0) {
        this.x = 0;
        this.y = 0;
        this.progress = 0;
    }
    // Update index for current sprite to render
    this.spriteIndex = Math.floor(this.progress * this.sprites.length);
}

/**
 * Check if star is in screen boundaries.
 * Otherwise wrap it to the opposite side of screen.
 * @param {Star} star Probed star
 */
ENGINE.BackgroundStars.prototype.wrap = function(star) {
    var pos = [star.x, star.y, 1, 1];
    var bounds = [0, 0, app.width, app.height];

if (pos[0] < bounds[0]) star.x = app.width;
    if (pos[1] < bounds[1]) star.y = app.height;

if (pos[0] > bounds[2]) star.x = 0;
    if (pos[1] > bounds[3]) star.y = 0;
};

编译

CSS

HTML

Firefox Performance Tool Power Surge Refer to: https://www.mozilla.org/en-US/firefox/developer/ 需要在Firefox中打开监控游戏性能。

game，performance，开发工具

编辑器支持Emmet

快捷键

Firefox Performance Tool Power Surge Refer to: https://www.mozilla.org/en-US/firefox/developer/ 需要在Firefox中打开监控游戏性能。

game，performance，开发工具

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：