diff --git a/js/entities.js b/js/entities.js index 03af8eb..3e44ef7 100644 --- a/js/entities.js +++ b/js/entities.js @@ -16,13 +16,13 @@ function Block(lane, color, iter, distFromHex, settled) { this.ct = 0; this.parentArr; this.iter = iter; - this.initLen = 9; + this.initLen = settings.creationDt; this.attachedLane; if (distFromHex) { this.distFromHex = distFromHex; } else { - this.distFromHex = 340 * settings.scale; + this.distFromHex = settings.startDist * settings.scale; } this.incrementOpacity = function() { @@ -98,8 +98,8 @@ function Block(lane, color, iter, distFromHex, settled) { ctx.fillStyle = this.color; ctx.globalAlpha = this.opacity; - var baseX = canvas.originalWidth / 2 + Math.sin((this.angle) * (Math.PI / 180)) * (this.distFromHex + this.height / 2) + gdx; - var baseY = canvas.originalHeight / 2 - Math.cos((this.angle) * (Math.PI / 180)) * (this.distFromHex + this.height / 2) + gdy; + var baseX = trueCanvas.width / 2 + Math.sin((this.angle) * (Math.PI / 180)) * (this.distFromHex + this.height / 2) + gdx; + var baseY = trueCanvas.height / 2 - Math.cos((this.angle) * (Math.PI / 180)) * (this.distFromHex + this.height / 2) + gdy; ctx.beginPath(); ctx.moveTo(baseX + p1.x, baseY + p1.y); ctx.lineTo(baseX + p2.x, baseY + p2.y); @@ -156,8 +156,8 @@ function Clock(sideLength) { this.shakes = []; this.sideLength = sideLength; this.strokeColor = 'blue'; - this.x = canvas.originalWidth / 2; - this.y = canvas.originalHeight / 2; + this.x = trueCanvas.width / 2; + this.y = trueCanvas.height / 2; for (var i = 0; i < this.sides; i++) { this.blocks.push([]); @@ -271,9 +271,9 @@ function Clock(sideLength) { }; this.draw = function() { + this.x = trueCanvas.width/2; if (gameState == 1) { - this.x = canvas.width/2; - this.y = canvas.height/2; + this.y = trueCanvas.height/2; } this.sideLength = settings.hexWidth; gdx = 0; @@ -295,6 +295,7 @@ function Clock(sideLength) { else { this.angle += this.angularVelocity; } + debugger; drawPolygon(this.x + gdx, this.y + gdy + this.dy, this.sides, this.sideLength, this.angle, this.fillColor, 0, 'rgba(0,0,0,0)'); }; } diff --git a/js/main.js b/js/main.js index 5e60c3e..2ef8173 100644 --- a/js/main.js +++ b/js/main.js @@ -4,24 +4,41 @@ $(window).resize(scaleCanvas); function scaleCanvas() { canvas.width = $(window).width(); canvas.height = $(window).height(); - canvas.originalHeight = canvas.height; - canvas.originalWidth = canvas.width; + if (canvas.height > canvas.width) { - settings.scale = canvas.width/800; + settings.scale = (canvas.width/800) * settings.baseScale; } else { - settings.scale = canvas.height/800; + settings.scale = (canvas.height/800) * settings.baseScale; } - + + trueCanvas = { + width:canvas.width, + height:canvas.height + }; + if (window.devicePixelRatio) { - canvas.style.width = canvas.width/window.devicePixelRatio + "px"; - canvas.style.height = canvas.height/window.devicePixelRatio + "px"; - ctx.scale(window.devicePixelRatio,window.devicePixelRatio) + //from https://gist.github.com/joubertnel/870190 + var cw = $("#canvas").attr('width'); + var ch = $("#canvas").attr('height'); + + $("#canvas").attr('width', cw * window.devicePixelRatio); + $("#canvas").attr('height', ch * window.devicePixelRatio); + $("#canvas").css('width', cw); + $("#canvas").css('height', ch); + + trueCanvas = { + width:cw, + height:ch + }; + + ctx.scale(window.devicePixelRatio, window.devicePixelRatio); } } var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var count = 0; +var trueCanvas = {width:canvas.width,height:canvas.height}; window.requestAnimFrame = (function() { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { @@ -39,8 +56,11 @@ var settings; if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { settings = { + startDist:227, + creationDt:40, + baseScale:1.4, scale:1, - prevScale:1, + prevScale:1.3, baseHexWidth:87, hexWidth:87, baseBlockHeight:20, @@ -51,6 +71,9 @@ if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigat }; } else { settings = { + baseScale:1, + startDist:340, + creationDt:30, scale:1, prevScale:1, hexWidth:65, @@ -110,6 +133,7 @@ function init() { } function addNewBlock(blocklane, color, iter, distFromHex, settled) { //last two are optional parameters + iter *= settings.speedModifier; if (!history[count]) { history[count] = {}; } @@ -231,7 +255,7 @@ function update() { } function render() { - ctx.clearRect(0, 0, canvas.originalWidth, canvas.originalHeight); + ctx.clearRect(0, 0, trueCanvas.width, trueCanvas.height); clearGameBoard(); if (gameState == -2) { @@ -241,11 +265,11 @@ function render() { op = 1; } ctx.globalAlpha = op; - drawPolygon(canvas.originalWidth / 2 , canvas.originalHeight / 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, "#bdc3c7", false,6); ctx.globalAlpha = 1; } } else { - drawPolygon(canvas.originalWidth / 2 + gdx, canvas.originalHeight / 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, '#bdc3c7', false, 6); } var i; @@ -265,14 +289,15 @@ function render() { } function stepInitialLoad() { - var dy = getStepDY(Date.now() - startTime, 0, (100 + canvas.height/2), 1300); + var dy = getStepDY(Date.now() - startTime, 0, (100 + trueCanvas.height/2), 1300); if (Date.now() - startTime > 1300) { MainClock.dy = 0; - MainClock.y = (canvas.height/2); + MainClock.y = (trueCanvas.height/2); if (Date.now() - startTime - 500 > 1300) { gameState = 1; } } else { + console.log(dy); MainClock.dy = dy; } } @@ -315,7 +340,6 @@ function animLoop() { render(); } else if (gameState == -1) { - debugger; showModal('Paused!', 'Press "P" to continue.'); } else if (gameState == 2) { diff --git a/js/view.js b/js/view.js index dbacb32..f538e08 100644 --- a/js/view.js +++ b/js/view.js @@ -7,15 +7,15 @@ function showModal(text, secondaryText) { var buttonSize = 150; var fontSizeLarge = 50; var fontSizeSmall = 25; - drawPolygon(canvas.originalWidth / 2, canvas.originalHeight / 2, 6, canvas.originalWidth / 2 - 25, 30, hexagonBackgroundColorClear); - // drawPolygon(canvas.originalWidth / 2, canvas.originalHeight / 2, 6, buttonSize, 30, swegBlue); + drawPolygon(trueCanvas.width / 2, trueCanvas.height / 2, 6, trueCanvas.width / 2 - 25, 30, hexagonBackgroundColorClear); + // drawPolygon(trueCanvas.width / 2, trueCanvas.height / 2, 6, buttonSize, 30, swegBlue); ctx.font = fontSizeLarge + 'px Helvetica'; // figure out what is not working ctx.textAlign = 'center'; ctx.fillStyle = centerBlue; // ctx.fillStyle = hexagonBackgroundColor; - ctx.fillText(text, canvas.originalWidth / 2, canvas.originalHeight / 2 + (fontSizeLarge / 4)); + ctx.fillText(text, trueCanvas.width / 2, trueCanvas.height / 2 + (fontSizeLarge / 4)); ctx.font = fontSizeSmall + 'px Helvetica'; - ctx.fillText(secondaryText, canvas.originalWidth / 2, canvas.originalHeight / 2 + fontSizeLarge / 4 + fontSizeSmall / 4 + 30); + ctx.fillText(secondaryText, trueCanvas.width / 2, trueCanvas.height / 2 + fontSizeLarge / 4 + fontSizeSmall / 4 + 30); } function renderText(lines, x, y, fontSize) { @@ -39,7 +39,7 @@ function updateScoreboard() { } function clearGameBoard() { - drawPolygon(canvas.originalWidth / 2, canvas.originalHeight / 2, 6, canvas.originalWidth / 2, 30, hexagonBackgroundColor, 0, 'rgba(0,0,0,0)'); + drawPolygon(trueCanvas.width / 2, trueCanvas.height / 2, 6, trueCanvas.width / 2, 30, hexagonBackgroundColor, 0, 'rgba(0,0,0,0)'); } function drawPolygon(x, y, sides, radius, theta, fillColor, lineWidth, lineColor) { // can make more elegant, reduce redundancy, fix readability diff --git a/js/wavegen.js b/js/wavegen.js index 62b2d82..ee174b8 100644 --- a/js/wavegen.js +++ b/js/wavegen.js @@ -19,7 +19,7 @@ function waveGen(clock) { this.computeDifficulty(); if (this.dt - this.lastGen > this.nextGen) { if (this.nextGen > 1000) { - this.nextGen -= 3 * (this.nextGen/1300); + this.nextGen -= (3 * (this.nextGen/1300)) * settings.creationSpeedModifier; } } };