added clock hand
This commit is contained in:
parent
a239c13bee
commit
95ac06bc13
4 changed files with 28 additions and 9 deletions
17
js/Clock.js
17
js/Clock.js
|
@ -12,7 +12,7 @@ function Clock(sideLength) {
|
|||
this.strokeColor = 'blue';
|
||||
this.x = trueCanvas.width / 2;
|
||||
this.y = trueCanvas.height / 2;
|
||||
this.lastCombo;
|
||||
this.lastCombo = Date.now() - 5000;
|
||||
this.comboMultiplier = 1;
|
||||
|
||||
for (var i = 0; i < this.sides; i++) {
|
||||
|
@ -151,5 +151,20 @@ function Clock(sideLength) {
|
|||
this.angle += this.angularVelocity;
|
||||
}
|
||||
drawPolygon(this.x + gdx, this.y + gdy + this.dy, this.sides, this.sideLength, this.angle, this.fillColor, 0, 'rgba(0,0,0,0)');
|
||||
this.drawClockHand();
|
||||
};
|
||||
|
||||
this.drawClockHand = function() {
|
||||
ctx.beginPath();
|
||||
var handColor = '#7f8c8d';
|
||||
ctx.lineWidth = 3;
|
||||
ctx.strokeStyle = handColor;
|
||||
ctx.moveTo(this.x, this.y);
|
||||
var handAngle = 360 * (Date.now() - this.lastCombo) / 5000;
|
||||
var coords = rotatePoint(0, this.sideLength / 2 * Math.sqrt(3), this.angle);
|
||||
ctx.lineTo(this.x + coords.x, this.y + coords.y);
|
||||
ctx.stroke();
|
||||
ctx.strokeStyle = 'rgba(0,0,0,0)';
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -275,7 +275,7 @@ window.onblur = function (e) {
|
|||
if (gameState == -1) {
|
||||
gameState = prevGameState;
|
||||
}
|
||||
else if(gameState != -2 && gameState != 0) {
|
||||
else if(gameState == 1) {
|
||||
prevGameState = gameState;
|
||||
gameState = -1;
|
||||
}
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
var grey = '#bdc3c7';
|
||||
|
||||
function render() {
|
||||
ctx.clearRect(0, 0, trueCanvas.width, trueCanvas.height);
|
||||
clearGameBoard();
|
||||
|
@ -9,11 +11,11 @@ function render() {
|
|||
op = 1;
|
||||
}
|
||||
ctx.globalAlpha = op;
|
||||
drawPolygon(trueCanvas.width / 2 , trueCanvas.height / 2 , 6, (settings.rows * settings.blockHeight) * (2/Math.sqrt(3)) + settings.hexWidth, 30, "#bdc3c7", false,6);
|
||||
drawPolygon(trueCanvas.width / 2 , trueCanvas.height / 2 , 6, (settings.rows * settings.blockHeight) * (2/Math.sqrt(3)) + settings.hexWidth, 30, grey, false,6);
|
||||
ctx.globalAlpha = 1;
|
||||
}
|
||||
} else {
|
||||
drawPolygon(trueCanvas.width / 2 + gdx, trueCanvas.height / 2 + gdy, 6, (settings.rows * settings.blockHeight) * (2/Math.sqrt(3)) + settings.hexWidth, 30, '#bdc3c7', false, 6);
|
||||
drawPolygon(trueCanvas.width / 2 + gdx, trueCanvas.height / 2 + gdy, 6, (settings.rows * settings.blockHeight) * (2/Math.sqrt(3)) + settings.hexWidth, 30, grey, false, 6);
|
||||
}
|
||||
|
||||
for (var i in MainClock.blocks) {
|
||||
|
|
12
js/view.js
12
js/view.js
|
@ -18,16 +18,17 @@ function showModal(text, secondaryText) {
|
|||
ctx.fillText(secondaryText, trueCanvas.width / 2, trueCanvas.height / 2 + fontSizeLarge / 4 + fontSizeSmall / 4 + 30);
|
||||
}
|
||||
|
||||
function renderText(x, y, fontSize, text) {
|
||||
function renderText(x, y, fontSize, color, text) {
|
||||
// if(typeof text == 'string' || text instanceof String) {
|
||||
// text = [text];
|
||||
// }
|
||||
|
||||
// fontSize = fontSize || 50;
|
||||
|
||||
ctx.font = fontSize + 'px Roboto'; // figure out what is not working
|
||||
// var lineHeight =;
|
||||
ctx.font = fontSize + 'px/0 Roboto'; // figure out what is not working
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillStyle = 'rgb(236, 240, 241)';
|
||||
// ctx.fillStyle = 'rgb(236, 240, 241)';
|
||||
ctx.fillStyle = color;
|
||||
|
||||
// for(var i=0; i<text.length; i++) {
|
||||
// ctx.fillText(text[i], x, y + (fontSize / 4) * (i+1) + 30 * i );
|
||||
|
@ -37,7 +38,7 @@ function renderText(x, y, fontSize, text) {
|
|||
}
|
||||
|
||||
function drawScoreboard() {
|
||||
renderText(trueCanvas.width / 2, trueCanvas.height / 2, 50, score);
|
||||
renderText(trueCanvas.width / 2 + gdx, trueCanvas.height / 2 + gdy, 50, grey, score);
|
||||
}
|
||||
|
||||
function clearGameBoard() {
|
||||
|
@ -64,6 +65,7 @@ function drawPolygon(x, y, sides, radius, theta, fillColor, lineWidth, lineColor
|
|||
ctx.closePath();
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
ctx.strokeStyle = 'rgba(0,0,0,0)';
|
||||
}
|
||||
|
||||
function showHighScores() {
|
||||
|
|
Loading…
Reference in a new issue