SkyRoads

by egon

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Game Object System</title>
        <meta charset="utf-8"/>
    </head>
    <body>
        <div id="center">
            <canvas id="canvas"></canvas>
            <script type="text/javascript">
                canvas = document.getElementById("canvas");
                W=600; H=600;
                canvas.width = W;
                canvas.height = H,
                canvas2D = canvas.getContext("2d");
            </script>
        </div>
    </body>
</html>

CSS

body {
    margin : 0 0;
    width  : 100%;
    background: #000;
}
#center {
    align : center;
    margin : 0 auto;
    margin-top : 30px;
    width : 600px;
}

JavaScript

function V3(x,y,z){
    return {x:x,y:y,z:z};
};

V3.add = function(a,b,r){
    r = r || {};
    r.x = a.x + b.x;
    r.y = a.y + b.y;
    r.z = a.z + b.z;
    return r;
};

V3.random = function(x,y,z){
    return V3( Math.random()*x,
               Math.random()*y,
               Math.random()*z);
}

V3.zero = function(a){
    a.x = 0.0;
    a.y = 0.0;
    a.z = 0.0;
    return a;
}

V3.sub = function(a,b,r){
    r = r || {};
    r.x = a.x - b.x;
    r.y = a.y - b.y;
    r.z = a.z - b.z;
    return r;
};

V3.scale = function(a,s,r){
    r = r || {};
    r.x = a.x * s;
    r.y = a.y * s;
    r.z = a.z * s;
    return r;
};

V3.dot = function(a,b,r){
    r = r || {};
    r.x = a.x * b.x;
    r.y = a.y * b.y;
    r.z = a.z * b.z;
    return r;
};

V3.length = function(a){
    return Math.sqrt(a.x*a.x + a.y*a.y + a.z*a.z);
};

V3.lengthSquared = function(a){
    return a.x*a.x + a.y*a.y + a.z*a.z;
};

V3.distance = function(a,b){
    return V3.length(V3.sub(b, a));
};

V3.distanceSquared = function(a,b){
    return V3.length(V3.sub(b, a));
};
    
V3.clamp = function(a, min, max, r){
    r = r || {};
    r.x = a.x < min.x ? min.x : a.x > max.x ? max.x : a.x;
    r.y = a.y < min.y ? min.y : a.y > max.y ? max.y : a.y;
    r.z = a.z < min.z ? min.z : a.z > max.z ? max.z : a.z;
    return r;
};

canvas2D.fillStyle = "#fff";
canvas2D.fillRect(0,0,W,H);

levels = {
    Alpha : {
        gravity : 0.0,
        map : [ '     ##                         ',
                '   ####        0011             ',
                '####  00 0 0 0     123123123123 ',
                '   ####        0011             ',
                '     ##             #  #  #  #  ']
    },
};

Camera = {
    depth    : 350,
    position : null,
    rotation : null,
    scale    : null,
    screen   : null,
    size     : null,
    offset   : null,
    
    create   : function( cavas ){
        var c = Object.create( Camera );
        c.position = V3(0,0,0);
        c.rotation = V3(0,0,0);
       ...