Game peerjs

by techsin

HTML

<script src="https://rawgit.com/sindresorhus/screenfull.js/gh-pages/dist/screenfull.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="http://cdn.peerjs.com/0.3/peer.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/chance/0.5.6/chance.js"></script>
<!-- <button>sdf</button> -->
<div class="msgs">
    <div class="msgCenter"></div>
    <div class="user">
        <p>Users In room</p>
        <ol>
            <li> <span class="name ">You</span></li>
        </ol>
    </div>
    <div class="console">
        <div class="log"></div>
        <input class="chat" maxlength="90"></input>
    </div>
</div>
<canvas id="can"></canvas>

CSS

* { padding: 0; margin: 0; }
html, body, .msgs { height: 100%; width: 100%; cursor: none; position: relative;}

.msgs { 
    pointer-events:none;
    position: absolute;  top: 0;
    user-select: none;
    font-family: "Helvetica";
    font-size: 10pt;
}

.msgCenter {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    width: 1px;
    height: 1px;
}

.user>p{ }
.user li { margin-left: 18px; text-indent: -5px; font-size: 9pt;}

.console {
    height: 260px;
    width: 250px;
    position: absolute;
    bottom: 0;
    overflow: hidden;
}
.console .log {
    position: absolute;
    bottom: 40px;

}
.console .chat {
    background-color: rgba(0,0,0,.02);
    height: 40px;
    position: absolute;
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
    bottom: 0;
    outline:none;
    border:0;
}

.outl {outline: lightgray 1px solid !important;}

JavaScript

var $canvas = $('#can'), 
    ctx = $canvas[0].getContext("2d"),
    w = $canvas.parent().width()-1,
    h = $canvas.parent().height()-3,
    RAD = 40,
    peers = [],
    ptest = $('.user ol li').clone();


function main() {
    init();
    animate();
    network.init();
    console.log('started');
}

function init() {
    $canvas[0].width = w;
    $canvas[0].height = h;
    peers.push(new peerCont(null,null,getColor(),0,0,false,chance.name()));
     $('.user .name').text(peers[0].name);

    $(window).mousemove(function(e){
        peers[0].active = 1;
        peers[0].x=e.pageX;
        peers[0].y=e.pageY;
    }).on("keydown",function(e){
        if (e.which==13) {
            (chat.active)?chat.disable():chat.activate();
        }
    });
//    document.oncontextmenu =new Function("return false;")
}

function draw() {
    for (var i=0; i<peers.length;i++) { 
        if (!peers[i].active) continue;
        drawCircle(peers[i].x, peers[i].y, RAD, peers[i].color);
    }
}

function drawCircle(x,y,rad,color) {
    ctx.beginPath();
    ctx.fillStyle=color;
    ctx.arc(x,y,rad,0,2*Math.PI);
    ctx.fill();
}


function animate() {
    ctx.clearRect ( 0 , 0 , w , h );
    draw();
    network.send(peers[0].x,peers[0].y);
    network.kickClosed();
    requestAnimationFrame(animate);
}

function getColor() {
    return "rgb(" + rand(255) + "," + rand(255) + "," + rand(255) + ")";
}

function rand(x) {
    return ~~(Math.random() * x);
}

function tellUser(){}

function peerCont(id,peer,color,x,y,active,name) {
    this.x=null;
    this.y=null;
    this.id=id;
    this.color=color;
    this.active=null;
    this.peer=peer;
    this.name=name;
}


var network = {
    num:0, 
    ids :  ids = ['a123', 'b123','c123', 'd123', 'e123', 'f123', 'g123', 'h123', 'i123', 'j123', 'k123', 'l123'],
    send : function (x,y){
            for(var i=1;i<peers.length;i++) {
                peers[i].peer.send(["cords",x,y]);
            }
    },
    init : function(){this.getId();},
   ...