From b9022e1000b12c1e001fcbe5f7cc742c01d32ea3 Mon Sep 17 00:00:00 2001 From: Michel Date: Tue, 24 Jun 2014 13:14:13 +0200 Subject: [PATCH 1/8] Fixed being hit twice resulting in weird color change of the pole So hit = changed color, then the timer stops and sets the color back, but you were hit in between this time and the color will be changed again for a fraction of a second << this is solved now. --- src/common/game/gameobjects/Pole.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/common/game/gameobjects/Pole.js b/src/common/game/gameobjects/Pole.js index 1d5a7f1..82e280a 100644 --- a/src/common/game/gameobjects/Pole.js +++ b/src/common/game/gameobjects/Pole.js @@ -50,10 +50,9 @@ var Pole = Ball.extend({ this.prevColor = this.getColor(); //retrieve original color this.setColor(Settings.pole.hitColor); //set new color to indicate being hit this.saveHighscore(); //Save current score if highscore - this.hit = false; //remove hit flag this.hitBy = -1; //remove hitBy var savedThis = this; - setTimeout(function() { savedThis.setColor(savedThis.prevColor); savedThis.coolDown = false }, 1000); //set cooldown period + setTimeout(function() { savedThis.setColor(savedThis.prevColor); savedThis.coolDown = false; savedThis.hit = false; }, 1000); //set cooldown period } }, From 0b57b2e927b325241e100ec26ac1fc13351d8325 Mon Sep 17 00:00:00 2001 From: Michel Date: Tue, 24 Jun 2014 13:27:10 +0200 Subject: [PATCH 2/8] Ring around powerup is now editable in settings --- src/common/Settings.js | 3 ++- src/common/game/Drawer.js | 4 ++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/common/Settings.js b/src/common/Settings.js index e3612d1..51f4e77 100644 --- a/src/common/Settings.js +++ b/src/common/Settings.js @@ -83,7 +83,8 @@ var Settings = { color: "green", hitColor: "red", minsize: 5, - maxsize: 60 + maxsize: 60, + ring: 4 //size of the powerup ring around the pole }, /**** SHIELD ****/ diff --git a/src/common/game/Drawer.js b/src/common/game/Drawer.js index bd6d995..26af687 100644 --- a/src/common/game/Drawer.js +++ b/src/common/game/Drawer.js @@ -93,12 +93,12 @@ Drawer = function(_canvasContext){ var powerup = _pole.player.getPowerup(); if(powerup != null && _pole.getPowerupDraw()){ canvasContext.beginPath(); - canvasContext.arc(_pole.getBody().position.x, _pole.getBody().position.y, _pole.getRadius()+2, 0, Math.PI*2, true); + canvasContext.arc(_pole.getBody().position.x, _pole.getBody().position.y, _pole.getRadius() + Settings.pole.ring, 0, Math.PI*2, true); canvasContext.closePath(); canvasContext.fillStyle = powerup.color; canvasContext.fill(); - this.drawCoolDown(_pole, 4); + this.drawCoolDown(_pole, Settings.pole.ring+2); } } From fe33a6ae8e6d18b8d9475cad5a4f021487efb959 Mon Sep 17 00:00:00 2001 From: Michel Date: Tue, 24 Jun 2014 13:40:09 +0200 Subject: [PATCH 3/8] Ring around pole is no longer draw with the black circle on top Instead, it just draws the ring to a certain angle (so we only draw one circle instead of two on top of each other now) --- src/common/game/Drawer.js | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/src/common/game/Drawer.js b/src/common/game/Drawer.js index 26af687..8f5f457 100644 --- a/src/common/game/Drawer.js +++ b/src/common/game/Drawer.js @@ -91,14 +91,22 @@ Drawer = function(_canvasContext){ this.drawPowerupSkin = function (_pole){ var powerup = _pole.player.getPowerup(); - if(powerup != null && _pole.getPowerupDraw()){ - canvasContext.beginPath(); - canvasContext.arc(_pole.getBody().position.x, _pole.getBody().position.y, _pole.getRadius() + Settings.pole.ring, 0, Math.PI*2, true); - canvasContext.closePath(); + if(powerup != null && _pole.getPowerupDraw() && _pole.getCDAngle() > 0){ + var startAngle = Settings.startAngle; + var endAngle = (startAngle + _pole.getCDAngle()) % 360; canvasContext.fillStyle = powerup.color; + canvasContext.moveTo(_pole.getPosition().x, _pole.getPosition().y) + canvasContext.beginPath(); + canvasContext.arc( + _pole.getBody().position.x, _pole.getBody().position.y, _pole.getRadius() + Settings.pole.ring, startAngle * Math.PI / 180, + endAngle * Math.PI / 180, true + ); + canvasContext.lineTo(_pole.getPosition().x, _pole.getPosition().y); + canvasContext.fill(); - this.drawCoolDown(_pole, Settings.pole.ring+2); + canvasContext.closePath(); + //this.drawCoolDown(_pole, Settings.pole.ring+2); } } From 3145ca8262ddbedc3fdf4ce78108baa85b68175e Mon Sep 17 00:00:00 2001 From: Michel Date: Tue, 24 Jun 2014 13:49:52 +0200 Subject: [PATCH 4/8] Ring around powerup is now also drawn in the new way --- src/common/game/Drawer.js | 60 ++++++++++++++++++--------------------- 1 file changed, 27 insertions(+), 33 deletions(-) diff --git a/src/common/game/Drawer.js b/src/common/game/Drawer.js index 8f5f457..5acf317 100644 --- a/src/common/game/Drawer.js +++ b/src/common/game/Drawer.js @@ -78,53 +78,47 @@ Drawer = function(_canvasContext){ * @param {object} _powerup - The powerup object to be drawn */ this.drawPowerup = function (_powerup){ - canvasContext.beginPath(); - canvasContext.arc(_powerup.getPosition().x, _powerup.getPosition().y, _powerup.getRadius(), 0, Math.PI*2, true); - canvasContext.closePath(); - - canvasContext.fillStyle = _powerup.getColor(); - canvasContext.fill(); - - //Draw the cooldown part - this.drawCoolDown(_powerup, 2); + drawCoolDown(_powerup, 2); //powerup should have a cooldown effect }; + /** + * Draws the ring around the pole when a powerup is active + * Note: this only happens when the pole is allowed to have a ring (so not on mainscreen) + * + * @method Draw#drawPowerupSkin + * @param {object} _pole - The pole around which the ring will be drawn + */ this.drawPowerupSkin = function (_pole){ var powerup = _pole.player.getPowerup(); - if(powerup != null && _pole.getPowerupDraw() && _pole.getCDAngle() > 0){ - var startAngle = Settings.startAngle; - var endAngle = (startAngle + _pole.getCDAngle()) % 360; - - canvasContext.fillStyle = powerup.color; - canvasContext.moveTo(_pole.getPosition().x, _pole.getPosition().y) - canvasContext.beginPath(); - canvasContext.arc( - _pole.getBody().position.x, _pole.getBody().position.y, _pole.getRadius() + Settings.pole.ring, startAngle * Math.PI / 180, - endAngle * Math.PI / 180, true - ); - canvasContext.lineTo(_pole.getPosition().x, _pole.getPosition().y); - - canvasContext.fill(); - canvasContext.closePath(); - //this.drawCoolDown(_pole, Settings.pole.ring+2); + if(powerup != null && _pole.getPowerupDraw()){ + drawCoolDown(_pole, Settings.pole.ring, powerup.getColor()); } } - this.drawCoolDown = function (_object, _offset){ + /** + * Draws the powerup / pole with a cooldown effect + * + * @method Drawer#drawCoolDown + * @param {Object} _object - The object for which the cooldown is drawn + * @param {number} _offset - The offset which actually shows the ring around the object + * @param {string} _color - Optional; the color of the cooldown ring, or the color of the object if not specified + */ + this.drawCoolDown = function (_object, _offset, _color){ if(_object.getCDAngle() > 0){ var startAngle = Settings.startAngle; var endAngle = (startAngle + _object.getCDAngle()) % 360; - canvasContext.fillStyle = "black"; //Has to be the current background color - canvasContext.moveTo(_object.getPosition().x, _object.getPosition().y); + canvasContext.fillStyle = _color || _object.getColor(); + canvasContext.moveTo(_object.getPosition().x, _object.getPosition().y) canvasContext.beginPath(); canvasContext.arc( - _object.getPosition().x, _object.getPosition().y, _object.getRadius() + _offset, startAngle * Math.PI / 180, - endAngle * Math.PI / 180, false - ); + _object.getBody().position.x, _object.getBody().position.y, _object.getRadius() + _offset, startAngle * Math.PI / 180, + endAngle * Math.PI / 180, true + ); canvasContext.lineTo(_object.getPosition().x, _object.getPosition().y); - canvasContext.fill(); - canvasContext.closePath(); + + canvasContext.fill(); + canvasContext.closePath(); } } } From 6a0ba54f96785942263736804da69d8d3e3feae7 Mon Sep 17 00:00:00 2001 From: Michel Date: Tue, 24 Jun 2014 13:58:22 +0200 Subject: [PATCH 5/8] Fixed some stupid error with 'this' --- src/common/game/Drawer.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/common/game/Drawer.js b/src/common/game/Drawer.js index 5acf317..717c828 100644 --- a/src/common/game/Drawer.js +++ b/src/common/game/Drawer.js @@ -78,7 +78,7 @@ Drawer = function(_canvasContext){ * @param {object} _powerup - The powerup object to be drawn */ this.drawPowerup = function (_powerup){ - drawCoolDown(_powerup, 2); //powerup should have a cooldown effect + this.drawCoolDown(_powerup, 0); //powerup should have a cooldown effect }; /** @@ -91,7 +91,7 @@ Drawer = function(_canvasContext){ this.drawPowerupSkin = function (_pole){ var powerup = _pole.player.getPowerup(); if(powerup != null && _pole.getPowerupDraw()){ - drawCoolDown(_pole, Settings.pole.ring, powerup.getColor()); + this.drawCoolDown(_pole, Settings.pole.ring, powerup.getColor()); } } From 6c038c70f93981fdd075277e39f18132cf65cd44 Mon Sep 17 00:00:00 2001 From: Kees Lampe Date: Tue, 24 Jun 2014 14:20:21 +0200 Subject: [PATCH 6/8] colorgenerator --- src/common/Settings.js | 10 +++++----- src/common/game/util/ColorGenerator.js | 3 +-- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/common/Settings.js b/src/common/Settings.js index 51f4e77..c04d71f 100644 --- a/src/common/Settings.js +++ b/src/common/Settings.js @@ -8,8 +8,8 @@ var Settings = { updateInterval: 17, /**** SERVER CONNECTION ****/ - server: 'http://localhost', - //server: 'http://vps-76938-1774.hosted.at.hostnet.nl', //Server Olaf + //server: 'http://localhost', + server: 'http://vps-76938-1774.hosted.at.hostnet.nl', //Server Olaf port: 5050, playerLimit: 30, @@ -19,7 +19,7 @@ var Settings = { //want anders wordt de oude powerup overschreden met de nieuwe timer :D hier nog een fix voor zoeken. smallShield: { time: 10, - color: "greenyellow", + color: "blue", length: 3.5, path: "../client/img/powerup.png", chance: 0.15 @@ -44,7 +44,7 @@ var Settings = { bigPole: { time: 10, color: "aqua", - radius: 1.2, //by which factor the pole will be multiplied + radius: 1.5, //by which factor the pole will be multiplied path: "../client/img/powerup.png", chance: 0.15 }, @@ -102,7 +102,7 @@ var Settings = { x: 100, y: 100, nrOfNewBalls: 3, //Number of new balls created per player. - colors: ["#2237FF", "#FFBA00", "#FF0067", "#838FFF", "#FFD870", "#FFBC8C", + colors: ["#2237FF", "#2237FF", "#FF0067", "#838FFF", "#FFD870", "#FFBC8C", "#FF70AA", "#FF004D", "#7716FF", "#FFE700"] }, diff --git a/src/common/game/util/ColorGenerator.js b/src/common/game/util/ColorGenerator.js index 0fc53c1..a916d6c 100644 --- a/src/common/game/util/ColorGenerator.js +++ b/src/common/game/util/ColorGenerator.js @@ -6,8 +6,7 @@ */ var ColorGenerator = { - colors: ["#988CFF", "#FF3636", "#8CE4FF", "#90FF8C", "#F4FF8C", "#FFBC8C", - "#FF8CF5", "#FF40DC", "#4640FF", "#29FFFB", "#38FF49", "#F5FF38"], + colors: Setting.balls.colors, /** * Returns a random color from the predefined color list above. From 7ea6efe019143028a00b1236bb5517652e21a202 Mon Sep 17 00:00:00 2001 From: Kees Lampe Date: Tue, 24 Jun 2014 14:31:19 +0200 Subject: [PATCH 7/8] colorgen --- src/common/Settings.js | 2 +- src/common/game/util/ColorGenerator.js | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/common/Settings.js b/src/common/Settings.js index c04d71f..00721f0 100644 --- a/src/common/Settings.js +++ b/src/common/Settings.js @@ -19,7 +19,7 @@ var Settings = { //want anders wordt de oude powerup overschreden met de nieuwe timer :D hier nog een fix voor zoeken. smallShield: { time: 10, - color: "blue", + color: "lightblue", length: 3.5, path: "../client/img/powerup.png", chance: 0.15 diff --git a/src/common/game/util/ColorGenerator.js b/src/common/game/util/ColorGenerator.js index a916d6c..c0b7bd8 100644 --- a/src/common/game/util/ColorGenerator.js +++ b/src/common/game/util/ColorGenerator.js @@ -1,3 +1,7 @@ +if(typeof module != 'undefined'){ + var Settings = require('../../Settings.js'); +} + /** * Class for a color generator * @class ColorGenerator @@ -6,7 +10,7 @@ */ var ColorGenerator = { - colors: Setting.balls.colors, + colors: Settings.ball.colors, /** * Returns a random color from the predefined color list above. From 9fec127a936b20d011cd02cedd99f594b31aaff3 Mon Sep 17 00:00:00 2001 From: Kees Lampe Date: Tue, 24 Jun 2014 14:37:19 +0200 Subject: [PATCH 8/8] colors staan nu colorgenerator --- src/client/index.html | 6 +++--- src/client/mainscreen.html | 6 +++--- src/common/Settings.js | 4 +--- src/common/game/util/ColorGenerator.js | 3 ++- 4 files changed, 9 insertions(+), 10 deletions(-) diff --git a/src/client/index.html b/src/client/index.html index 8d5bd09..eea3f70 100644 --- a/src/client/index.html +++ b/src/client/index.html @@ -22,14 +22,14 @@ + + + - - - diff --git a/src/client/mainscreen.html b/src/client/mainscreen.html index 9b00983..4a7d131 100644 --- a/src/client/mainscreen.html +++ b/src/client/mainscreen.html @@ -22,15 +22,15 @@ + + + - - - diff --git a/src/common/Settings.js b/src/common/Settings.js index 00721f0..6dde1b5 100644 --- a/src/common/Settings.js +++ b/src/common/Settings.js @@ -101,9 +101,7 @@ var Settings = { //Positions of initial ball x: 100, y: 100, - nrOfNewBalls: 3, //Number of new balls created per player. - colors: ["#2237FF", "#2237FF", "#FF0067", "#838FFF", "#FFD870", "#FFBC8C", - "#FF70AA", "#FF004D", "#7716FF", "#FFE700"] + nrOfNewBalls: 3 //Number of new balls created per player. }, player: { diff --git a/src/common/game/util/ColorGenerator.js b/src/common/game/util/ColorGenerator.js index c0b7bd8..c490717 100644 --- a/src/common/game/util/ColorGenerator.js +++ b/src/common/game/util/ColorGenerator.js @@ -10,7 +10,8 @@ if(typeof module != 'undefined'){ */ var ColorGenerator = { - colors: Settings.ball.colors, + colors: ["#2237FF", "#2237FF", "#FF0067", "#838FFF", "#FFD870", "#FFBC8C", + "#FF70AA", "#FF004D", "#7716FF", "#FFE700"], /** * Returns a random color from the predefined color list above.