Canvas 太空漂泊

adrift-in-space

游戏, 塔防

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2620
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

function _possibleConstructorReturn(self, call) {
    if (!self) {
        throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
    }
    return call && (typeof call === "object" || typeof call === "function") ? call : self;
}

function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
        throw new TypeError("Cannot call a class as a function");
    }
}

var seed = +new Date();
var gravityForce = 100;
var asteroidOrbitRadius = 80;
var asteroidCount = 3;
var trailCanvasCount = 60;
var spaceshipThrust = 0.01;
var input = {
    up: false,
    right: false,
    down: false,
    left: false
};

var random = function() {
    var s = seed;
    return function() {
        return alea(s++)();
    };
}();

setTimeout(function() {
    var proximityManager = new ProximityManager(32);
    var canvasEl = document.getElementById('js-canvas');
    var width = canvasEl.width;
    var height = canvasEl.height;

var canvasCtx = canvasEl.getContext('2d');
    var trailBook = new TrailBook(trailCanvasCount, width, height);
    var planet = new Planet(width / 2, height / 2, 20);
    proximityManager.addItem(planet);
    var ship = new Ship(planet.x - 90, planet.y, 12, Math.PI / 2);
    proximityManager.addItem(ship);

var _calculateCircularOrb = calculateCircularOrbitVector(ship, planet);

ship.vX = _calculateCircularOrb[0];
    ship.vY = _calculateCircularOrb[1];

var stepSize = Math.PI * 2 / asteroidCount;
    var angleOffset = Math.PI * 2 / 12;
    var asteroids = Array.apply(undefined, Array(asteroidCount)).map(function(_, index) {
        var angle = index * stepSize;
        var x = planet.x + Math.cos(angle) * asteroidOrbitRadius;
        var y = planet.y + Math.sin(angle) * asteroidOrbitRadius;
        var asteroid = new Asteroid(x, y, 20, 0);

var _calculateCircularOrb2 = calculateCircularOrbitVector(asteroid, planet);

asteroid.vX = _calculateCircularOrb2[0];
        asteroid.vY = _calculateCircularOrb2[1];

proximityManager.addItem(asteroid);
        return asteroid;
    });
    setupEventListeners(input);
    animate(0, canvasCtx, width, height, planet, asteroids, ship, input, proximityManager, trailBook);
}, 0);

function detectCollisions(ship, neighbors) {
    var _ship$getBounds = ship.getBounds();

var minX = _ship$getBounds[0];
    var maxX = _ship$getBounds[1];
    var minY = _ship$getBounds[2];
    var maxY = _ship$getBounds[3];
    var width = _ship$getBounds[4];
    var height = _ship$getBounds[5];

return neighbors.filter(function(neighbor) {
        if (neighbor.id === ship.id) {
            return false;
        }

var _neighbor$getBounds = neighbor.getBounds();

var neighborMinX = _neighbor$getBounds[0];
        var neighborMaxX = _neighbor$getBounds[1];
        var neighborMinY = _neighbor$getBounds[2];
        var neighborMaxY = _neighbor$getBounds[3];
        var neighborWidth = _neighbor$getBounds[4];
        var neighborHeight = _neighbor$getBounds[5];

return aabb2DIntersection({
            height: height + 4, // refactor, +4 to compensate for `lineWidth`
            width: width + 4,
            x: ship.x,
            y: ship.y
        }, {
            height: neighborHeight + 4,
            width: neighborWidth + 4,
            x: neighbor.x,
            y: neighbor.y
        });
    });
}

function aabb2DIntersection(a, b) {
    // this is taken verbatim from the BruteForceTech
    return Math.abs(a.x - b.x) * 2 < a.width + b.width && Math.abs(a.y - b.y) * 2 < a.height + b.height;
}

function setupEventListeners(input) {
    window.addEventListener('keydown', handleKeyDown(input));
    window.addEventListener('keyup', handleKeyUp(input));
}

function handleKeyUp(input) {
    return function(_ref) {
        var keyCode = _ref.keyCode;

document.getElementById('left').className = 'key left';
        document.getElementById('right').className = 'key right';
        document.getElementById('up').className = 'key up';
        document.getElementById('down').className = 'key down';
        switch (keyCode) {
            case 38:
                input.up = false;
                break;
            case 39:
                input.right = false;
                break;
            case 40:
                input.down = false;
                break;
            case 37:
                input.left = false;
                break;
        }
    };
}

function handleKeyDown(input) {
    return function(_ref2) {
        var keyCode = _ref2.keyCode;

switch (keyCode) {
            case 38:
                input.up = true;
                break;
            case 39:
                input.right = true;
                break;
            case 40:
                input.down = true;
                break;
            case 37:
                input.left = true;
                break;
        }
    };
}

function calculateCircularOrbitVector(target, planet) {
    var angle = Math.atan2(planet.y - target.y, planet.x - target.x);
    var desired = vec2.sub([], [planet.x, planet.y], [target.x, target.y]);
    var distance = vec2.len(desired);
    var gravityStrength = gravityForce / (distance * distance);
    var neighborGravity = vec2.mul([], vec2.normalize([], desired), [gravityStrength, gravityStrength]);
    var velocity = Math.sqrt(distance / vec2.len(neighborGravity)) * vec2.len(neighborGravity);
    var output = vec2.mul([], [Math.sin(-angle), Math.cos(angle)], [velocity, velocity]);
    return output;
}

function generatePolygon(avgRadius) {
    var pointCount = arguments.length <= 1 || arguments[1] === undefined ? 6 : arguments[1];

var stepSize = Math.PI * 2 / pointCount;
    var variance = avgRadius * 0.5;
    return Array.apply(undefined, Array(pointCount)).map(function(_, index) {
        return [Math.cos(stepSize * index) * (avgRadius + (random() * variance - variance / 2)), Math.sin(stepSize * index) * (avgRadius + (random() * variance - variance / 2))];
    });
}

function rotatePoint(_ref3, _ref4, angle) {
    var originX = _ref3[0];
    var originY = _ref3[1];
    var pointX = _ref4[0];
    var pointY = _ref4[1];

return [Math.cos(angle) * (pointX - originX) - Math.sin(angle) * (pointY - originY) + originX, Math.sin(angle) * (pointX - originX) + Math.cos(angle) * (pointY - originY) + originY];
}

function limit(_ref5, maxLength) {
    var x = _ref5[0];
    var y = _ref5[1];

var len = vec2.len([x, y]);
    if (vec2.len([x, y]) > maxLength) {
        return vec2.mul([], vec2.normalize([], [x, y]), [maxLength, maxLength]);
    }
    return [x, y];
}

var TrailBook = function() {
    function TrailBook(layerCount, width, height) {
        _classCallCheck(this, TrailBook);

this.width = width;
        this.height = height;
        this.layers = Array.apply(undefined, Array(layerCount)).map(function(_, index) {
            var layerEl = document.createElement('canvas'); // it's very slow to `drawImage` when the canvases are different sizes
            // this takes more space but it runs faster by using many off-screen canvases
            var _ref6 = [width, height];
            layerEl.width = _ref6[0];
            layerEl.height = _ref6[1];
            return {
                ctx: layerEl.getContext('2d'),
                canvas: layerEl
            };
        });
        var trailEl = document.createElement('canvas');
        var _ref7 = [width, height];
        trailEl.width = _ref7[0];
        trailEl.height = _ref7[1];

this.trailCtx = trailEl.getContext('2d');
    }

TrailBook.prototype.render = function render(ctx, iteration, trailables) {
        var _this = this;

return TrailBook;
}();

var Entity = function() {
    function Entity(x, y, size, rotation) {
        _classCallCheck(this, Entity);

this.x = x;
        this.y = y;
        this.vX = 0;
        this.vY = 0;
        this.rotation = rotation;
        this.size = size;
        this.canvasSize = this.size * 2;
        this.cacheEl = document.createElement('canvas');
        this.cacheEl.width = this.canvasSize;
        this.cacheEl.height = this.canvasSize;
        this.points = [];
        this.id = Math.floor(random() * 0xffffff * +new Date()).toString(36);
    }

Entity.prototype.render = function render(ctx) {
        var collisions = arguments.length <= 1 || arguments[1] === undefined ? [] : arguments[1];

ctx.translate(this.x, this.y);
        ctx.rotate(this.rotation);
        ctx.drawImage(this.cacheEl, 0, 0, this.canvasSize, this.canvasSize, -this.canvasSize / 2, -this.canvasSize / 2, this.canvasSize, this.canvasSize);
        ctx.rotate(-this.rotation);
        ctx.translate(-this.x, -this.y);

var _getBounds = this.getBounds();

var minX = _getBounds[0];
        var maxX = _getBounds[1];
        var minY = _getBounds[2];
        var maxY = _getBounds[3];
        var width = _getBounds[4];
        var height = _getBounds[5];

ctx.strokeStyle = '#f00';
        if (collisions.length) {
            ctx.fillStyle = 'rgba(255, 0, 0, 0.3)';
        }
        ctx.beginPath();
        ctx.rect(this.x + minX - 2, this.y + minY - 2, width + 4, height + 4); // refactor, -2/+4 to compensate for `lineWidth`
        ctx.closePath();
        ctx.stroke();
        if (collisions.length) {
            ctx.fill();
        }
    };

Entity.prototype.getBounds = function getBounds() {
        var _this2 = this;

return this.points.map(function(point) {
            return rotatePoint([0, 0], point, _this2.rotation);
        }).reduce(function(_ref8, _ref9) {
            var minX = _ref8[0];
            var maxX = _ref8[1];
            var minY = _ref8[2];
            var maxY = _ref8[3];
            var width = _ref8[4];
            var height = _ref8[5];
            var x = _ref9[0];
            var y = _ref9[1];

return [Math.min(minX, x), Math.max(maxX, x), Math.min(minY, y), Math.max(maxY, y), Math.max(maxX, x) - Math.min(minX, x), Math.max(maxY, y) - Math.min(minY, y)];
        }, [Infinity, -Infinity, Infinity, -Infinity, 0, 0]);
    };

Entity.prototype.update = function update(neighbors) {
        var acceleration = [this.vX, this.vY];
        vec2.add(acceleration, acceleration, forces.gravitation(this, neighbors));

var _vec2$add = vec2.add([], [this.vX, this.vY], acceleration);

this.vX = _vec2$add[0];
        this.vY = _vec2$add[1];

var _limit = limit([this.vX, this.vY], 2);

this.vX = _limit[0];
        this.vY = _limit[1];

var _vec2$add2 = vec2.add([], [this.x, this.y], [this.vX, this.vY]);

this.x = _vec2$add2[0];
        this.y = _vec2$add2[1];

this.rotation = Math.atan2(this.vY, this.vX) + Math.PI / 2;
    };

return Entity;
}();

var Asteroid = function(_Entity) {
    _inherits(Asteroid, _Entity);

function Asteroid(x, y, size, rotation) {
        _classCallCheck(this, Asteroid);

var _this3 = _possibleConstructorReturn(this, _Entity.call(this, x, y, size, rotation));

_this3.points = generatePolygon(_this3.size / 2, Math.floor(random() * 6) + 6);
        _this3.cache();
        return _this3;
    }

Asteroid.prototype.cache = function cache() {
        var ctx = this.cacheEl.getContext('2d');
        var center = this.canvasSize / 2;
        ctx.strokeStyle = '#dedede'; // taken from http://codepen.io/jscottsmith/pen/qNvAXo/
        ctx.fillStyle = '#333';
        ctx.lineWidth = 4;
        ctx.beginPath();
        this.points.forEach(function(_ref10, index) {
            var x = _ref10[0];
            var y = _ref10[1];

if (!index) {
                ctx.moveTo(x + center, y + center);
                return;
            }
            ctx.lineTo(x + center, y + center);
        });
        ctx.closePath();
        ctx.stroke();
        ctx.fill();
    };

return Asteroid;
}(Entity);

var Planet = function(_Entity2) {
    _inherits(Planet, _Entity2);

function Planet(x, y, radius) {
        _classCallCheck(this, Planet);

var _this4 = _possibleConstructorReturn(this, _Entity2.call(this, x, y, radius * 2, 0));

_this4.radius = radius;
        _this4.cache();
        var stepSize = Math.PI * 2 / 20;
        _this4.points = Array.apply(undefined, Array(20)).map(function(_, index) {
            return [Math.cos(index * stepSize) * _this4.radius, Math.sin(index * stepSize) * _this4.radius];
        });
        return _this4;
    }

Planet.prototype.cache = function cache() {
        var ctx = this.cacheEl.getContext('2d');
        var center = this.canvasSize / 2;
        ctx.beginPath();
        ctx.fillStyle = '#dedede';
        ctx.arc(center, center, this.radius, 0, Math.PI * 2);
        ctx.fill();
        ctx.closePath();
    };

return Planet;
}(Entity);

var Ship = function(_Entity3) {
    _inherits(Ship, _Entity3);

function Ship(x, y, size, rotation) {
        _classCallCheck(this, Ship);

var _this5 = _possibleConstructorReturn(this, _Entity3.call(this, x, y, size, rotation));

_this5.cache();
        var offset = _this5.canvasSize / 4;
        _this5.points = [
            [_this5.size / 2 - offset, -offset * 1.7],
            [_this5.size - offset, _this5.size - offset],
            [0 - offset, _this5.size - offset]
        ];
        return _this5;
    }

Ship.prototype.cache = function cache() {
        var ctx = this.cacheEl.getContext('2d');
        var offset = this.canvasSize / 4;
        ctx.beginPath(); // this is from http://codepen.io/jscottsmith/pen/KrJvAq
        ctx.strokeStyle = '#dedede';
        ctx.fillStyle = '#333';
        ctx.lineWidth = 4;
        ctx.translate(this.canvasSize / 2, this.canvasSize / 2);
        ctx.moveTo(this.size / 2 - offset, -offset * 1.7);
        ctx.lineTo(this.size - offset, this.size - offset);
        ctx.lineTo(0 - offset, this.size - offset);
        ctx.closePath();
        ctx.fill();
        ctx.stroke();
        ctx.translate(-this.canvasSize / 2, -this.canvasSize / 2);
    };

Ship.prototype.update = function update(neighbors, input) {
        var acceleration = [this.vX, this.vY];
        var gravitation = forces.gravitation(this, neighbors);
        vec2.add(acceleration, acceleration, gravitation);
        this.handleInput(input, acceleration);

// [this.vX, this.vY] = limit([this.vX, this.vY], 2.25);

var _vec2$add3 = vec2.add([], [this.vX, this.vY], acceleration);

this.vX = _vec2$add3[0];
        this.vY = _vec2$add3[1];

var _vec2$add4 = vec2.add([], [this.x, this.y], [this.vX, this.vY]);

this.x = _vec2$add4[0];
        this.y = _vec2$add4[1];
    };

Ship.prototype.handleInput = function handleInput(input, acceleration) {
        if (input.left) {
            this.rotation -= 0.1;
            document.getElementById('left').className = 'key left is-down';
        }
        if (input.right) {
            this.rotation += 0.1;
            document.getElementById('right').className = 'key right is-down';
        }
        if (input.up) {
            document.getElementById('up').className = 'key up is-down';
            var angle = this.rotation - Math.PI / 2;
            vec2.add(acceleration, acceleration, [Math.cos(angle) * spaceshipThrust, Math.sin(angle) * spaceshipThrust]);
        }
        if (input.down) {
            document.getElementById('down').className = 'key down is-down';
            var angle = this.rotation - Math.PI / 2;
            vec2.sub(acceleration, acceleration, [Math.cos(angle) * spaceshipThrust, Math.sin(angle) * spaceshipThrust]);
        }
        this.rotation = (Math.PI * 2 + this.rotation) % (Math.PI * 2);
    };

return Ship;
}(Entity);

编译

CSS

html {
    height: 100%;
}
body {
    background-color: #333;
    font-family: sans-serif;
    margin: 0;
    overflow: hidden;
    padding: 0;
}
canvas {
    background-color: transparent;
    background-image: linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.05) 75%, rgba(255, 255, 255, 0.05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.05) 75%, rgba(255, 255, 255, 0.05) 76%, transparent 77%, transparent);
    background-size: 64px 64px;
    background-position: 50% 50%;
    border: solid 1px #dedede;
    display: block;
    height: 100%;
    margin: 0 auto;
}
.keys {
    position: absolute;
    bottom: 1em;
    left: 50%;
    text-align: center;
    font-size: 10px;
    width: 17.4em;
    margin-left: -8.7em;
}
.keys:hover .key {
    background-color: rgba(255, 255, 255, 0.3);
}
.keys .key {
    margin: 0 0.4em;
    display: inline-block;
    line-height: 2.5em;
    width: 5em;
    border-radius: 0.4em;
    background-color: rgba(255, 255, 255, 0.15);
}
.keys .key.up {
    margin: 0 5em 0.8em;
}
.keys .key:hover,
.keys .key.is-down {
    background-color: rgba(39, 212, 156, 0.7);
    color: white;
}

HTML

adrift-in-space

游戏, 塔防

编辑器支持Emmet

快捷键

adrift-in-space

游戏, 塔防

HTML5 Canvas打苍蝇游戏

HTML5 Canvas月球着陆游戏

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：