基于Vector2D的Attractors, forces, collisions

Vector2D游戏的一些基本要素：吸引器、武器、碰撞检测。点击吸引器（银色中心小球）能产生武器。

game

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

// dependencies: Vector2D
function Ball(radius, color, mass, charge, gradient, line, field, sizefield) {
    if (typeof(radius) === 'undefined') radius = 20;
    if (typeof(color) === 'undefined') color = '#0000ff';
    if (typeof(mass) === 'undefined') mass = 1;
    if (typeof(charge) === 'undefined') charge = 0;
    if (typeof(gradient) === 'undefined') gradient = false;
    if (typeof(line) === 'undefined') line = false;
    if (typeof(field) === 'undefined') field = false;
    if (typeof(sizefield) === 'undefined') sizefield = 0;
    this.radius = radius;
    this.color = color;
    this.mass = mass;
    this.charge = charge;
    this.gradient = gradient;
    this.line = line;
    this.x = 0;
    this.y = 0;
    this.vx = 0;
    this.vy = 0;
    this.angVelo = 0;
    this.field = field;
    this.sizefield = sizefield;
}

Ball.prototype = {
    get pos2D() {
        return new Vector2D(this.x, this.y);
    },
    set pos2D(pos) {
        this.x = pos.x;
        this.y = pos.y;
    },
    get velo2D() {
        return new Vector2D(this.vx, this.vy);
    },
    set velo2D(velo) {
        this.vx = velo.x;
        this.vy = velo.y;
    },
    draw: function(context) {
        if (this.field) {
            context.fillStyle = "rgba(32,214,199,.3)";
            context.beginPath();
            context.arc(this.x, this.y, this.radius + this.sizefield, 0, 2 * Math.PI, true);
            context.closePath();
            2
            context.fill();
        }
        if (this.gradient) {
            grad = context.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.radius);
            grad.addColorStop(0, '#ffffff');
            grad.addColorStop(1, this.color);
            context.fillStyle = grad;
        } else {
            context.fillStyle = this.color;
        }
        context.beginPath();
        context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, true);
        context.closePath();
        context.fill();
        if (this.line) {
            context.strokeStyle = this.color;
            context.lineWidth = 1;
            context.beginPath();
            context.moveTo(this.x - this.radius, this.y);
            context.lineTo(this.x + this.radius, this.y);
            context.moveTo(this.x, this.y + this.radius);
            context.lineTo(this.x, this.y - this.radius);
            context.closePath();
            context.stroke();
        }

}
};

function Forces() {}

// STATIC METHODS
Forces.zeroForce = function() {
    return (new Vector2D(0, 0));
}
Forces.constantGravity = function(m, g) {
    return new Vector2D(0, m * g);
}
Forces.gravity = function(G, m1, m2, r) {
    return r.multiply(-G * m1 * m2 / (r.lengthSquared() * r.length()));
}
Forces.electric = function(k, q1, q2, r) {
    return r.multiply(k * q1 * q2 / (r.lengthSquared() * r.length()));
}
Forces.forceField = function(q, E) {
    return E.multiply(q);
}
Forces.lorentz = function(q, E, B, vel) {
    return E.multiply(q).add(vel.perp(q * B * vel.length()));
}
Forces.central = function(k, n, r) {
    return r.multiply(k * Math.pow(r.length(), n - 1));
}
Forces.linearDrag = function(k, vel) {
    var force;
    var velMag = vel.length();
    if (velMag > 0) {
        force = vel.multiply(-k);
    } else {
        force = new Vector2D(0, 0);
    }
    return force;
}
Forces.drag = function(k, vel) {
    var force;
    var velMag = vel.length();
    if (velMag > 0) {
        force = vel.multiply(-k * velMag);
    } else {
        force = new Vector2D(0, 0);
    }
    return force;
}
Forces.lift = function(k, vel) {
    var force;
    var velMag = vel.length();
    if (velMag > 0) {
        force = vel.perp(k * velMag);
    } else {
        force = new Vector2D(0, 0);
    }
    return force;
}
Forces.upthrust = function(rho, V, g) {
    return new Vector2D(0, -rho * V * g);
}
Forces.vortex = function(k, r0, r) {
    var force;
    var rMag = r.length();
    if (rMag > 0) {
        if (rMag > r0) {
            force = r.multiply(-k * Math.pow(r0 / rMag, 4));
        } else {
            force = r.multiply(k);
        }
    } else {
        force = new Vector2D(0, 0);
    }
    return force;
}
Forces.spring = function(k, r) {
    return r.multiply(-k);
}
Forces.damping = function(c, vel) {
    var force;
    var velMag = vel.length();
    if (velMag > 0) {
        force = vel.multiply(-c);
    } else {
        force = new Vector2D(0, 0);
    }
    return force;
}
Forces.add = function(arr) {
    var forceSum = new Vector2D(0, 0);
    for (var i = 0; i < arr.length; i++) {
        var force = arr[i];
        forceSum.incrementBy(force);
    }
    return forceSum;
}

function Vector2D(x, y) {
    this.x = x;
    this.y = y;
}

// PUBLIC METHODS	
Vector2D.prototype = {
    lengthSquared: function() {
        return this.x * this.x + this.y * this.y;
    },
    length: function() {
        return Math.sqrt(this.lengthSquared());
    },
    angle: function() {
        return Math.atan2(this.y, this.x);
    },
    clone: function() {
        return new Vector2D(this.x, this.y);
    },
    negate: function() {
        this.x = -this.x;
        this.y = -this.y;
    },
    unit: function() {
        var length = this.length();
        if (length > 0) {
            return new Vector2D(this.x / length, this.y / length);
        } else {
            return new Vector2D(0, 0);
        }
    },
    normalize: function() {
        var length = this.length();
        if (length > 0) {
            this.x /= length;
            this.y /= length;
        }
        return this.length();
    },
    add: function(vec) {
        return new Vector2D(this.x + vec.x, this.y + vec.y);
    },
    incrementBy: function(vec) {
        this.x += vec.x;
        this.y += vec.y;
    },
    subtract: function(vec) {
        return new Vector2D(this.x - vec.x, this.y - vec.y);
    },
    decrementBy: function(vec) {
        this.x -= vec.x;
        this.y -= vec.y;
    },
    multiply: function(k) {
        return new Vector2D(k * this.x, k * this.y);
    },
    addScaled: function(vec, k) {
        return new Vector2D(this.x + k * vec.x, this.y + k * vec.y);
    },
    scaleBy: function(k) {
        this.x *= k;
        this.y *= k;
    },
    dotProduct: function(vec) {
        return this.x * vec.x + this.y * vec.y;
    },
    projection: function(vec) {
        var length = this.length();
        var lengthVec = vec.length();
        var proj;
        if ((length == 0) || (lengthVec == 0)) {
            proj = 0;
        } else {
            proj = (this.x * vec.x + this.y * vec.y) / lengthVec;
        }
        return proj;
    },
    project: function(vec) {
        return vec.para(this.projection(vec));
    },
    para: function(u, positive) {
        if (typeof(positive) === 'undefined') positive = true;
        var length = this.length();
        var vec = new Vector2D(this.x, this.y);
        if (positive) {
            vec.scaleBy(u / length);
        } else {
            vec.scaleBy(-u / length);
        }
        return vec;
    },
    perp: function(u, anticlockwise) {
        if (typeof(anticlockwise) === 'undefined') anticlockwise = true;
        var length = this.length();
        var vec = new Vector2D(this.y, -this.x);
        if (length > 0) {
            if (anticlockwise) { // anticlockwise with respect to canvas coordinate system
                vec.scaleBy(u / length);
            } else {
                vec.scaleBy(-u / length);
            }
        } else {
            vec = new Vector2D(0, 0);
        }
        return vec;
    }
};

// STATIC METHODS
Vector2D.distance = function(vec1, vec2) {
    return (vec1.subtract(vec2)).length();
}
Vector2D.angleBetween = function(vec1, vec2) {
    return Math.acos(vec1.dotProduct(vec2) / (vec1.length() * vec2.length()));
}
Vector2D.scale = function(vec, sca) {
    vec.x *= sca;
    vec.y *= sca;
}
Vector2D.vector2D = function(mag, angle, clockwise) {
    if (typeof(clockwise) === 'undefined') clockwise = true;
    var vec = new Vector2D(0, 0);
    vec.x = mag * Math.cos(angle);
    vec.y = mag * Math.sin(angle);
    if (!clockwise) {
        vec.y *= -1;
    }
    return vec;
}

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

// size
var W = window.innerWidth,
    H = window.innerHeight,
    halfW = W / 2,
    halfH = H / 2;

canvas.width = W;
canvas.height = H;

var G = 1;
var c = 200;
var attractors;
var orbiters;
var t0;
var dt;
var force;
var acc;
var numOrbiters = 50;
var rows = 10;
var cols = 10;
var refPoint = new Vector2D(W / cols / 2, W / rows / 2);
var spacing = W / cols;
var numAttractors = rows * cols;

window.onload = init;

function init() {
    // create attractors
    attractors = new Array();
    for (var i = 0; i < cols * rows; i++) {
        var color = "rgba(17,63,89,1)";
        var r = 10;
        var m = (0.5 * c * c / G) * r;
        var attractor = new Ball(r, color, m, 0, true, false, true, 30);
        var ncol = Math.floor(i / rows);
        attractor.pos2D = new Vector2D(refPoint.x + ncol * spacing, refPoint.y + (i - ncol * rows - 1) * spacing);
        attractor.draw(context);
        attractors.push(attractor);
    }

// create orbiters
    orbiters = new Array();
    for (var i = 0; i < numOrbiters; i++) {
        var color = 'rgba(243,237,91,1)';
        var orbiter = new Ball(3, color, 1, 0, false, false, true, 5);
        orbiter.pos2D = new Vector2D(Math.random() * canvas.width, Math.random() * canvas.height);
        orbiter.velo2D = new Vector2D((Math.random() - 0.5) * 100, (Math.random() - 0.5) * 100);
        orbiter.draw(context);
        orbiters.push(orbiter);
    }
    t0 = new Date().getTime();

window.addEventListener('mousedown', onDocumentMouseDown, false);
    window.addEventListener('resize', onResize, false);
    animFrame();
}

function onResize(e) {
    W = window.innerWidth;
    H = window.innerHeight;
    halfW = W / 2;
    halfH = H / 2;

canvas.width = W;
    canvas.height = H;
    spacing = W / cols;
}

function onDocumentMouseDown(e) {
    if (e.pageX || e.pageY) {
        posx = e.pageX;
        posy = e.pageY;
    } else if (e.clientX || e.clientY) {
        posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }

var color = 'rgba(243,237,91,1)';
    var orbiter = new Ball(3, color, 1, 0, false, false, true, 5);
    orbiter.pos2D = new Vector2D(posx, posy);
    orbiter.velo2D = new Vector2D((Math.random() - 0.5) * 100, (Math.random() - 0.5) * 100);
    orbiter.draw(context);
    orbiters.push(orbiter);
    numOrbiters++;
    console.log(numOrbiters);

}

function animFrame() {
    requestAnimationFrame(animFrame, canvas);
    onTimer();
}

function onTimer() {
    var t1 = new Date().getTime();
    dt = 0.001 * (t1 - t0);
    t0 = t1;
    if (dt > 0.2) {
        dt = 0;
    };
    move();
}

function move() {

context.clearRect(0, 0, canvas.width, canvas.height);

for (var i = 0; i < numOrbiters; i++) {
        var orbiter = orbiters[i];
        moveObject(orbiter);
        calcForce(orbiter);
        updateAccel(orbiter.mass);
        updateVelo(orbiter);
    }
    for (var i = 0; i < numAttractors; i++) {
        var attractor = attractors[i];
        attractor.draw(context);
    }

}

function moveObject(obj) {
    obj.pos2D = obj.pos2D.addScaled(obj.velo2D, dt);
    if (obj.x < 0 || obj.x > canvas.width || obj.y < 0 || obj.y > canvas.height) {
        recycleOrbiter(obj);
    }
    obj.draw(context);
}

function updateAccel(mass) {
    acc = force.multiply(1 / mass);
}

function updateVelo(obj) {
    obj.velo2D = obj.velo2D.addScaled(acc, dt);
}

function recycleOrbiter(obj) {
    obj.pos2D = new Vector2D(Math.random() * canvas.width, Math.random() * canvas.height);
    obj.velo2D = new Vector2D((Math.random() - 0.5) * 100, (Math.random() - 0.5) * 100);
}

编译

CSS

HTML

Vector2D游戏的一些基本要素：吸引器、武器、碰撞检测。点击吸引器（银色中心小球）能产生武器。

game

编辑器支持Emmet

快捷键

Vector2D游戏的一些基本要素：吸引器、武器、碰撞检测。点击吸引器（银色中心小球）能产生武器。

game

使用WebAssembly（wasm）和Unity WebGL实现的FPS射击游戏：愤怒的机器人（AngryBots）

Verlet 一款JavaScript 2D游戏物理引擎

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：