diff --git a/script.js b/script.js index 7b6e90b..1b58cc7 100644 --- a/script.js +++ b/script.js @@ -1,20 +1,9 @@ -function AnimatedValue(object, name, value, timeout) { - this.overwrite(value); - this.timeout = timeout; - var _this = this; - Object.defineProperty(object, name, { - get: function() { - return _this.get(); - }, - set: function(x) { - return _this.set(x); - } - }); - object[name + 'handler'] = this; +function AnimatedValue(value) { + this.write(value); } AnimatedValue.prototype = { - get: function() { + get: function () { var now = performance.now(), end = this.frTime + this.timeout; if (now >= end) { @@ -23,17 +12,19 @@ AnimatedValue.prototype = { return this.toVal - (this.toVal - this.frVal) * (end - now) / this.timeout; } }, - set: function(value) { + set: function (value, timeout) { if (value != this.toVal) { + this.timeout = timeout; this.frVal = this.get(); this.toVal = value; this.frTime = performance.now(); } }, - overwrite: function(value) { + write: function (value) { this.frVal = value; this.toVal = value; - this.frTime = performance.now() - this.timeout; // so end == now + this.timeout = 0; + this.frTime = performance.now(); // so end == now } }; @@ -42,53 +33,49 @@ function BallView(main, ball) { this.ball = ball; this.graphic = new PIXI.Graphics(); - new AnimatedValue(this, 'x', 0, 100); - new AnimatedValue(this, 'y', 0, 100); - new AnimatedValue(this, 's', 0, 100); + this.x = new AnimatedValue(0); + this.y = new AnimatedValue(0); + this.s = new AnimatedValue(0); var _this = this; - // console.log(_this.ball.id, 'NEW'); this.appear(); - this.ball.on('appear', function() { + this.ball.on('appear', function () { _this.appear(); }); - this.ball.on('destroy', function() { - // console.log(_this.ball.id, 'DES'); + this.ball.on('destroy', function () { _this.main.stage.removeChild(_this.graphic); }); - this.ball.on('disappear', function() { - // console.log(_this.ball.id, 'DIS'); + this.ball.on('disappear', function () { _this.main.stage.removeChild(_this.graphic); }); - this.ball.on('move', function() { - _this.x = _this.ball.x; - _this.y = _this.ball.y; + this.ball.on('move', function () { + _this.x.set(_this.ball.x, 100); + _this.y.set(_this.ball.y, 100); }); - this.ball.on('resize', function() { - _this.s = _this.ball.size; + this.ball.on('resize', function () { + _this.s.set(_this.ball.size, 100); }); } BallView.prototype = { - appear: function() { - // console.log(this.ball.id, 'APP'); - this.x = this.ball.x; - this.y = this.ball.y; - this.s = this.ball.size; + appear: function () { + this.x.write(this.ball.x); + this.y.write(this.ball.y); + this.s.write(this.ball.size); this.shape(); this.main.stage.addChild(this.graphic); }, - shape: function() { + shape: function () { this.graphic.clear(); this.graphic.beginFill(this.ball.color.replace('#', '0x'), this.ball.virus ? 0.5 : 0.9); this.graphic.drawCircle(0, 0, 1); this.graphic.endFill(); }, - render: function() { - this.graphic.position.x = this.x; - this.graphic.position.y = this.y; - this.graphic.scale.x = this.graphic.scale.y = this.s; + render: function () { + this.graphic.position.x = this.x.get(); + this.graphic.position.y = this.y.get(); + this.graphic.scale.x = this.graphic.scale.y = this.s.get(); } }; @@ -102,7 +89,7 @@ function Viewer(client, container) { this.addRenderer(); this.addStats(); var _this = this; - client.once('mapSizeLoad', function(min_x, min_y, max_x, max_y) { + client.once('mapSizeLoad', function (min_x, min_y, max_x, max_y) { _this.gameWidth = max_x; _this.gameHeight = max_y; _this.initStage(); @@ -111,52 +98,54 @@ function Viewer(client, container) { _this.animate(); _this.emit('launched'); }); - window.addEventListener('resize', function() { + window.addEventListener('resize', function () { _this.updateSize(); }); } Viewer.prototype = { - getSize: function() { + getSize: function () { this.width = window.innerWidth; this.height = window.innerHeight; }, - addRenderer: function() { + addRenderer: function () { this.getSize(); this.renderer = PIXI.autoDetectRenderer(this.width, this.height, { antialias: true }); this.container.appendChild(this.renderer.view); }, - updateSize: function() { + updateSize: function () { this.getSize(); this.renderer.resize(this.width, this.height); }, - initStage: function() { + initStage: function () { this.stage = new PIXI.Container(); - this.cam = {}; - new AnimatedValue(this.cam, 'x', this.gameWidth / 2, 100); - new AnimatedValue(this.cam, 'y', this.gameHeight / 2, 100); - new AnimatedValue(this.cam, 's', 0.5 / 2, 100); + this.cam = { + x: new AnimatedValue(this.gameWidth / 2), + y: new AnimatedValue(this.gameHeight / 2), + s: new AnimatedValue(0.5) + }; }, - addListners: function() { + addListners: function () { var _this = this; - this.client.on('ballAppear', function(id) { + this.client.on('ballAppear', function (id) { if (!_this.balls[id]) { _this.balls[id] = new BallView(_this, this.balls[id]); + } else { } }); - this.client.on('ballDestroy', function(id) { - delete this.balls[id]; - }); + // this.client.on('ballDestroy', function(id) { + // delete this.balls[id]; + // }); }, - addBorders: function() { + addBorders: function () { this.borders = new PIXI.Graphics(); this.borders.lineStyle(5, 0xFF3300, 1); this.borders.drawRect(0, 0, this.gameWidth, this.gameHeight); this.stage.addChild(this.borders); }, - addStats: function() { + addStats: function () { this.stats = new Stats(); this.stats.setMode(1); this.stats.domElement.style.position = 'absolute'; @@ -164,7 +153,7 @@ Viewer.prototype = { this.stats.domElement.style.top = '0px'; document.body.appendChild(this.stats.domElement); }, - posCamera: function() { + posCamera: function () { var x = y = p = 0; for (var ball_id in this.client.my_balls) { var ball = this.client.balls[this.client.my_balls[ball_id]]; @@ -174,13 +163,13 @@ Viewer.prototype = { p += ball.size; } if (p > 0) { // if we have visible ball(s) - this.cam.x = x / p; - this.cam.y = y / p; - this.cam.s = 0.04 * this.width / p; // Scale - // TODO Better scale calculation + this.cam.x.set(x / p, 100); + this.cam.y.set(y / p, 100); + this.cam.s.set(0.04 * this.width / p, 500); // Scale + // TODO Better scale calculation } // else: don't move the camera }, - render: function() { + render: function () { for (var ball_id in this.client.balls) { var ball = this.balls[ball_id]; if (ball) { @@ -188,18 +177,18 @@ Viewer.prototype = { } } }, - animate: function() { + animate: function () { this.stats.begin(); this.render(); this.posCamera(); - this.stage.scale.x = this.stage.scale.y = this.cam.s; - this.stage.position.x = -this.cam.x * this.stage.scale.x + this.width / 2; - this.stage.position.y = -this.cam.y * this.stage.scale.y + this.height / 2; + this.stage.scale.x = this.stage.scale.y = this.cam.s.get(); + this.stage.position.x = -this.cam.x.get() * this.stage.scale.x + this.width / 2; + this.stage.position.y = -this.cam.y.get() * this.stage.scale.y + this.height / 2; this.renderer.render(this.stage); this.stats.end(); this.emit('animate'); var _this = this; - requestAnimationFrame(function() { + requestAnimationFrame(function () { _this.animate(); }); } @@ -218,19 +207,19 @@ function Pointer(viewer) { y: 0 }; var _this = this; - this.viewer.once('launched', function() { + this.viewer.once('launched', function () { _this.viewer.stage.interactive = true; - _this.viewer.stage.on('mousemove', function(e) { + _this.viewer.stage.on('mousemove', function (e) { _this.pointermove(e); }); - _this.viewer.stage.on('touchmove', function(e) { + _this.viewer.stage.on('touchmove', function (e) { _this.pointermove(e); }); - _this.viewer.on('animate', function(e) { + _this.viewer.on('animate', function (e) { _this.move(); }); }); - window.addEventListener('keydown', function(e) { + window.addEventListener('keydown', function (e) { if (e.keyCode == 87) { _this.client.eject(); } else if (e.keyCode == 32) { @@ -240,14 +229,14 @@ function Pointer(viewer) { } Pointer.prototype = { - move: function() { - this.client.moveTo(this.viewer.cam.x + this.dest.x, this.viewer.cam.y + this.dest.y); + move: function () { + this.client.moveTo(this.viewer.cam.x.get() + this.dest.x, this.viewer.cam.y.get() + this.dest.y); }, - pointermove: function(e) { + pointermove: function (e) { var gamePos = e.data.getLocalPosition(this.viewer.stage); this.dest = { // TODO deadzone - x: gamePos.x - this.viewer.cam.x, - y: gamePos.y - this.viewer.cam.y + x: gamePos.x - this.viewer.cam.x.get(), + y: gamePos.y - this.viewer.cam.y.get() }; this.move(); } @@ -288,7 +277,7 @@ function Controller(client) { } var _this = this; - client.on('connected', function() { + client.on('connected', function () { _this.servgui.close(); _this.cellgui.open(); _this.leadergui.open(); @@ -296,18 +285,18 @@ function Controller(client) { _this.spawn(); } }); - client.on('reset', function() { + client.on('reset', function () { _this.servgui.open(); _this.cellgui.close(); _this.leadergui.close(); _this.resetLeader(); }); - client.on('lostMyBalls', function() { + client.on('lostMyBalls', function () { if (_this.autoRespawn) { _this.spawn(); } }); - client.on('leaderBoardUpdate', function(old, leaders) { + client.on('leaderBoardUpdate', function (old, leaders) { for (var i in leaders) { var rank = parseInt(i) + 1; _this.leaders[rank] = this.balls[leaders[i]].name || 'An unnamed cell'; @@ -319,7 +308,7 @@ function Controller(client) { } Controller.prototype = { - findServer: function() { + findServer: function () { // Because of SOP, this will never work x = new XMLHttpRequest(); x.open('POST', 'http://m.agar.io', false); @@ -336,16 +325,16 @@ Controller.prototype = { this.servgui.__controllers[i].updateDisplay(); } }, - connect: function() { + connect: function () { this.client.connect('ws://' + this.server.ip + ':' + this.server.port); }, - disconnect: function() { + disconnect: function () { this.client.disconnect(); }, - spawn: function() { + spawn: function () { this.client.spawn(this.nick); }, - resetLeader: function() { + resetLeader: function () { for (var i = 1; i <= 10; i++) { this.leaders[i] = '---'; } @@ -358,25 +347,25 @@ function IA(client) { } IA.prototype = { - begin: function() { + begin: function () { var _this = this; - this.interval = setInterval(function() { + this.interval = setInterval(function () { _this.food(); // _this.decide(); }, 100); }, - end: function() { + end: function () { clearInterval(this.interval_id); }, - getDistanceBetweenBalls: function(ball_1, ball_2) { //this calculates distance between 2 balls + getDistanceBetweenBalls: function (ball_1, ball_2) { //this calculates distance between 2 balls return Math.sqrt(Math.pow(ball_1.x - ball_2.x, 2) + Math.pow(ball_2.y - ball_1.y, 2)); }, - getAngleBetweenBalls: function(b1, b2) { // output in rad + getAngleBetweenBalls: function (b1, b2) { // output in rad dX = b2.x - b1.x; dY = b2.y - b1.y; return Math.tan(dY / dX); }, - food: function() { + food: function () { var candidate_ball = null; //first we don't have candidate to eat var candidate_distance = 0; var my_ball = this.client.balls[this.client.my_balls[0]]; //we get our first ball. We don't care if there more then one, its just example. @@ -399,7 +388,7 @@ IA.prototype = { this.client.log('closest ' + candidate_ball + ', distance ' + candidate_distance); this.client.moveTo(candidate_ball.x, candidate_ball.y); //we send move command to move to food's coordinates }, - decide: function() { + decide: function () { var my_ball = this.client.balls[this.client.my_balls[0]]; // TODO Handle more balls if (!my_ball) return; var candidates = []; @@ -448,7 +437,7 @@ IA.prototype = { }; var d = {}; // DEBUG Allow access from console -window.onload = function() { +window.onload = function () { d.client = new Client('worker'); d.viewer = new Viewer(d.client, document.getElementById('viewer')); d.controller = new Controller(d.client);