diff --git a/index.html b/index.html
index 44090c4..d132fb9 100644
--- a/index.html
+++ b/index.html
@@ -22,18 +22,22 @@
body {
color: #ecf0f1;
font-family: 'Roboto', sans-serif;
- background-color:#ecf0f1;
+ background-color:#ecf0f1;
}
#clickToExit {
cursor:pointer;
}
+ #canvasCont {
+ width: 100%;
+ padding-bottom: 100%;
+ }
+
#canvas {
- position: absolute;
- left: calc(50% - 80vmin / 2);
- height: 80vmin;
- width: 80vmin;
+ position: absolute;
+ /*height:100%;
+ width:100%;*/
background-color:#ecf0f1;
z-index:3;
}
@@ -46,8 +50,10 @@
- Hextris
-
+
+
+
+
diff --git a/js/entities.js b/js/entities.js
index 6e26636..112411f 100644
--- a/js/entities.js
+++ b/js/entities.js
@@ -2,8 +2,7 @@ var angularVelocityConst = 4;
function Block(lane, color, iter, distFromHex, settled) {
this.settled = (settled === undefined) ? 0 : 1;
- this.height = 15;
- this.width = 65;
+ this.height = settings.blockHeight;
this.lane = lane;
this.angle = 90 - (30 + 60 * lane);
this.angularVelocity = 0;
@@ -11,18 +10,19 @@ function Block(lane, color, iter, distFromHex, settled) {
this.color = color;
this.deleted = 0;
this.removed = 0;
- this.tint = 0; //todo
+ this.tint = 0;
this.opacity = 1;
this.initializing = 1;
this.ct = 0;
this.parentArr;
this.iter = iter;
this.initLen = 9;
+ this.attachedLane;
if (distFromHex) {
this.distFromHex = distFromHex;
} else {
- this.distFromHex = 300;
+ this.distFromHex = 320;
}
this.incrementOpacity = function() {
@@ -146,7 +146,7 @@ var colorSounds = {"#e74c3c": new Audio("../sounds/lowest.ogg"),
function Clock(sideLength) {
this.fillColor = '#2c3e50';
this.angularVelocity = 0;
- this.position = 1;
+ this.position = 0;
this.dy = 0;
this.sides = 6;
this.blocks = [];
@@ -189,6 +189,7 @@ function Clock(sideLength) {
lane = (lane+this.sides) % this.sides;
block.distFromHex = MainClock.sideLength / 2 * Math.sqrt(3) + block.height * this.blocks[lane].length;
this.blocks[lane].push(block);
+ block.attachedLane = lane;
block.parentArr = this.blocks[lane];
consolidateBlocks(this, lane, this.blocks[lane].length - 1);
};
@@ -198,12 +199,7 @@ function Clock(sideLength) {
return;
}
- var lane = this.sides - block.lane;// -this.position;
- lane += this.position;
-
- lane = (lane+this.sides) % this.sides;
- var arr = this.blocks[lane];
-
+
if (position !== undefined) {
arr = tArr;
if (position <= 0) {
@@ -211,7 +207,7 @@ function Clock(sideLength) {
if (block.distFromHex - block.iter - (this.sideLength / 2) * Math.sqrt(3) <= 0) {
block.distFromHex = (this.sideLength / 2) * Math.sqrt(3);
block.settled = 1;
- consolidateBlocks(this, lane, block.getIndex());
+ consolidateBlocks(this, block.attachedLane, block.getIndex());
} else {
block.settled = 0;
}
@@ -219,13 +215,19 @@ function Clock(sideLength) {
if (arr[position - 1].settled && block.distFromHex - block.iter - arr[position - 1].distFromHex - arr[position - 1].height <= 0) {
block.distFromHex = arr[position - 1].distFromHex + arr[position - 1].height;
block.settled = 1;
- consolidateBlocks(this, lane, block.getIndex());
+ consolidateBlocks(this, block.attachedLane, block.getIndex());
}
else {
block.settled = 0;
}
}
} else {
+ var lane = this.sides - block.lane;// -this.position;
+ lane += this.position;
+
+ lane = (lane+this.sides) % this.sides;
+ var arr = this.blocks[lane];
+
if (arr.length > 0) {
if (block.distFromHex + block.iter - arr[arr.length - 1].distFromHex - arr[arr.length - 1].height <= 0) {
block.distFromHex = arr[arr.length - 1].distFromHex + arr[arr.length - 1].height;
diff --git a/js/main.js b/js/main.js
index 2120f33..8b198c4 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,8 +1,26 @@
-$(document).ready(function(){
- //some sort loading anim until this point
-});
+$(document).ready(scaleCanvas);
+$(window).resize(scaleCanvas);
+function scaleCanvas() {
+ var h = $(window).height();
+ var w = $(window).width();
+ if (w > h) {
+ $('#canvas').css("width", h * (window.devicePixelRatio ? window.devicePixelRatio : 1) + 'px');
+ $('#canvas').css("height", (h * (Math.sqrt(3)/2)) * (window.devicePixelRatio ? window.devicePixelRatio : 1) + 'px');
+ }
+ else {
+ $('#canvas').css("width", w * (window.devicePixelRatio ? window.devicePixelRatio : 1) + 'px');
+ $('#canvas').css("height", (w * (Math.sqrt(3)/2)) * (window.devicePixelRatio ? window.devicePixelRatio : 1) + 'px');
+ }
+
+
+ $('#canvas').css("left", w/2 + 'px');
+ $('#canvas').css("top", h/2 + 'px');
+ $('#canvas').css("margin-left", -$("#canvas").width()/2 + 'px');
+ $('#canvas').css("margin-top", -$("#canvas").height()/2 + 'px');
+}
var canvas = document.getElementById('canvas');
+
var ctx = canvas.getContext('2d');
canvas.originalHeight = canvas.height;
canvas.originalWidth = canvas.width;
@@ -24,6 +42,27 @@ $('#clickToExit').bind('click', toggleDevTools);
function toggleDevTools() {
$('#devtools').toggle();
}
+
+var settings;
+
+if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
+ settings = {
+ hexWidth:87,
+ blockHeight:20,
+ rows:6,
+ speedModifier:0.8,
+ creationSpeedModifier:0.8
+ };
+} else {
+ settings = {
+ hexWidth:65,
+ blockHeight:15,
+ rows:8,
+ speedModifier:1,
+ creationSpeedModifier:0.8
+ };
+}
+
var firstTime = 1;
var gameState = 0;
var framerate = 60;
@@ -67,8 +106,8 @@ function init() {
gameState = -2;
count = 0;
blocks = [];
- MainClock = new Clock(65);
- MainClock.y = -100;
+ MainClock = new Clock(settings.hexWidth);
+ MainClock.y = -100/(window.devicePixelRatio ? window.devicePixelRatio : 1);
startTime = Date.now();
waveone = new waveGen(MainClock,Date.now(),[1,1,0],[1,1],[1,1]);
if (firstTime) {
@@ -213,11 +252,15 @@ function render() {
op = 1;
}
ctx.globalAlpha = op;
- drawPolygon(canvas.originalWidth / 2 , canvas.originalHeight / 2 , 6, 220, 30, "#bdc3c7", false,6);
+ drawPolygon(canvas.originalWidth / 2 , canvas.originalHeight / 2 , 6, (settings.rows * settings.blockHeight) * (2/Math.sqrt(3)) + settings.hexWidth, 30, "#bdc3c7", false,6);
ctx.globalAlpha = 1;
}
} else {
- drawPolygon(canvas.originalWidth / 2 , canvas.originalHeight / 2 , 6, 220, 30, '#bdc3c7', false,6);
+ ctx.save();
+ ctx.translate(canvas.originalWidth / 2 + gdx, canvas.originalHeight / 2 + gdy);
+ ctx.rotate(MainClock.angle * (Math.PI/180) + 30 * (Math.PI/180));
+ drawPolygon(0, 0, 6, (settings.rows * settings.blockHeight) * (2/Math.sqrt(3)) + settings.hexWidth, 30, '#bdc3c7', false,6);
+ ctx.restore();
}
var i;
@@ -236,10 +279,10 @@ function render() {
}
function stepInitialLoad() {
- var dy = getStepDY(Date.now() - startTime, 0, 100 + canvas.height/2, 1300);
+ var dy = getStepDY(Date.now() - startTime, 0, (100 + canvas.height/2)/(window.devicePixelRatio ? window.devicePixelRatio : 1), 1300);
if (Date.now() - startTime > 1300) {
MainClock.dy = 0;
- MainClock.y = canvas.height/2;
+ MainClock.y = (canvas.height/2)/(window.devicePixelRatio ? window.devicePixelRatio : 1);
if (Date.now() - startTime - 500 > 1300) {
gameState = 1;
}
@@ -285,14 +328,10 @@ function animLoop() {
else if (gameState == -1) {
showModal('Paused!', 'Press "P" to continue.');
}
- else if (gameState == 2) { // fix so that it clears blocks then checks for game over
- // if (checkGameOver()) {
- // if (MainClock.angle != MainClock.targetAngle) {
+ else if (gameState == 2) {
requestAnimFrame(animLoop);
- update(); // score will keep incrementing at gameover
+ update();
render();
- // }
- // checkGameOver();
showModal('Game over: ' + score + ' pts!', 'Press enter to restart!');
highscores = localStorage.getItem('highscores').split(',').map(Number);
for (var i = 0; i < numHighScores; i++) {
@@ -316,7 +355,7 @@ requestAnimFrame(animLoop);
function checkGameOver() {
for (var i = 0; i < MainClock.sides; i++) {
- if (MainClock.blocks[i].length > 8) {
+ if (MainClock.blocks[i].length > settings.rows) {
return true;
}
}
@@ -324,5 +363,5 @@ function checkGameOver() {
}
window.onblur = function (e) {
- if (gameState == 1) gameState = -1;
-}
+ if (gameState == 1) gameState = -1;
+};
diff --git a/js/view.js b/js/view.js
index 8ceb563..17cc04e 100644
--- a/js/view.js
+++ b/js/view.js
@@ -48,7 +48,7 @@ function clearShadows() {
function clearGameBoard() {
// ctx.shadowColor = '#2980b9';
// ctx.shadowBlur = 25;
- drawPolygon(canvas.originalWidth / 2, canvas.originalHeight / 2, 6, canvas.originalWidth / 2 - 25, 30, hexagonBackgroundColor, 0, 'rgba(0,0,0,0)');
+ drawPolygon(canvas.originalWidth / 2, canvas.originalHeight / 2, 6, canvas.originalWidth / 2, 30, hexagonBackgroundColor, 0, 'rgba(0,0,0,0)');
// clearShadows();
}