wbrawner/hextris
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'gh-pages' of http://github.com/teamsnowman/hextris

Browse source
This commit is contained in:
garrettdreyfus 2014-05-25 10:03:42 -04:00
commit fe0cbb72c9
4 changed files with 86 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
index.html
View file

@ -29,11 +29,15 @@
cursor:pointer; cursor:pointer;
} }
#canvasCont {
width: 100%;
padding-bottom: 100%;
}
#canvas { #canvas {
position: absolute; position: absolute;
left: calc(50% - 80vmin / 2); /*height:100%;
height: 80vmin; width:100%;*/
width: 80vmin;
background-color:#ecf0f1; background-color:#ecf0f1;
z-index:3; z-index:3;
} }
@ -46,8 +50,10 @@
</style> </style>
</head> </head>
<body> <body>
<center id='title'><div>Hextris</div></center> <!-- <center id='title'><div>Hextris</div></center> -->
<canvas id="canvas" width="800" height="800"></canvas> <div id = 'canvasCont'>
<canvas id="canvas" width="800" height="692.820323"></canvas> <!--692.820323 = 800 * sqrt(3)/2-->
</div>
<div id="leftTap" style="position: absolute; left: 0; top:0; height:100%; width:50%;"></div> <div id="leftTap" style="position: absolute; left: 0; top:0; height:100%; width:50%;"></div>
<div id="rightTap" style="position: absolute; right: 0; top: 0; height:100%; width:50%;"></div> <div id="rightTap" style="position: absolute; right: 0; top: 0; height:100%; width:50%;"></div>
<div id='devtools' style='z-index:3;display:none;position:absolute;left:50%;width:400px;height:400px;top:50%;margin-top:-200px;margin-left:-200px;'> <div id='devtools' style='z-index:3;display:none;position:absolute;left:50%;width:400px;height:400px;top:50%;margin-top:-200px;margin-left:-200px;'>

26
js/entities.js
View file

@ -2,8 +2,7 @@ var angularVelocityConst = 4;
function Block(lane, color, iter, distFromHex, settled) { function Block(lane, color, iter, distFromHex, settled) {
this.settled = (settled === undefined) ? 0 : 1; this.settled = (settled === undefined) ? 0 : 1;
this.height = 15; this.height = settings.blockHeight;
this.width = 65;
this.lane = lane; this.lane = lane;
this.angle = 90 - (30 + 60 * lane); this.angle = 90 - (30 + 60 * lane);
this.angularVelocity = 0; this.angularVelocity = 0;
@ -11,18 +10,19 @@ function Block(lane, color, iter, distFromHex, settled) {
this.color = color; this.color = color;
this.deleted = 0; this.deleted = 0;
this.removed = 0; this.removed = 0;
this.tint = 0; //todo this.tint = 0;
this.opacity = 1; this.opacity = 1;
this.initializing = 1; this.initializing = 1;
this.ct = 0; this.ct = 0;
this.parentArr; this.parentArr;
this.iter = iter; this.iter = iter;
this.initLen = 9; this.initLen = 9;
this.attachedLane;
if (distFromHex) { if (distFromHex) {
this.distFromHex = distFromHex; this.distFromHex = distFromHex;
} else { } else {
this.distFromHex = 300; this.distFromHex = 320;
} }
this.incrementOpacity = function() { this.incrementOpacity = function() {
@ -146,7 +146,7 @@ var colorSounds = {"#e74c3c": new Audio("../sounds/lowest.ogg"),
function Clock(sideLength) { function Clock(sideLength) {
this.fillColor = '#2c3e50'; this.fillColor = '#2c3e50';
this.angularVelocity = 0; this.angularVelocity = 0;
this.position = 1; this.position = 0;
this.dy = 0; this.dy = 0;
this.sides = 6; this.sides = 6;
this.blocks = []; this.blocks = [];
@ -189,6 +189,7 @@ function Clock(sideLength) {
lane = (lane+this.sides) % this.sides; lane = (lane+this.sides) % this.sides;
block.distFromHex = MainClock.sideLength / 2 * Math.sqrt(3) + block.height * this.blocks[lane].length; block.distFromHex = MainClock.sideLength / 2 * Math.sqrt(3) + block.height * this.blocks[lane].length;
this.blocks[lane].push(block); this.blocks[lane].push(block);
block.attachedLane = lane;
block.parentArr = this.blocks[lane]; block.parentArr = this.blocks[lane];
consolidateBlocks(this, lane, this.blocks[lane].length - 1); consolidateBlocks(this, lane, this.blocks[lane].length - 1);
}; };
@ -198,11 +199,6 @@ function Clock(sideLength) {
return; 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) { if (position !== undefined) {
arr = tArr; arr = tArr;
@ -211,7 +207,7 @@ function Clock(sideLength) {
if (block.distFromHex - block.iter - (this.sideLength / 2) * Math.sqrt(3) <= 0) { if (block.distFromHex - block.iter - (this.sideLength / 2) * Math.sqrt(3) <= 0) {
block.distFromHex = (this.sideLength / 2) * Math.sqrt(3); block.distFromHex = (this.sideLength / 2) * Math.sqrt(3);
block.settled = 1; block.settled = 1;
consolidateBlocks(this, lane, block.getIndex()); consolidateBlocks(this, block.attachedLane, block.getIndex());
} else { } else {
block.settled = 0; 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) { 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.distFromHex = arr[position - 1].distFromHex + arr[position - 1].height;
block.settled = 1; block.settled = 1;
consolidateBlocks(this, lane, block.getIndex()); consolidateBlocks(this, block.attachedLane, block.getIndex());
} }
else { else {
block.settled = 0; block.settled = 0;
} }
} }
} else { } 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 (arr.length > 0) {
if (block.distFromHex + block.iter - arr[arr.length - 1].distFromHex - arr[arr.length - 1].height <= 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; block.distFromHex = arr[arr.length - 1].distFromHex + arr[arr.length - 1].height;

73
js/main.js
View file

@ -1,8 +1,26 @@
$(document).ready(function(){ $(document).ready(scaleCanvas);
//some sort loading anim until this point $(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 canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d'); var ctx = canvas.getContext('2d');
canvas.originalHeight = canvas.height; canvas.originalHeight = canvas.height;
canvas.originalWidth = canvas.width; canvas.originalWidth = canvas.width;
@ -24,6 +42,27 @@ $('#clickToExit').bind('click', toggleDevTools);
function toggleDevTools() { function toggleDevTools() {
$('#devtools').toggle(); $('#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 firstTime = 1;
var gameState = 0; var gameState = 0;
var framerate = 60; var framerate = 60;
@ -67,8 +106,8 @@ function init() {
gameState = -2; gameState = -2;
count = 0; count = 0;
blocks = []; blocks = [];
MainClock = new Clock(65); MainClock = new Clock(settings.hexWidth);
MainClock.y = -100; MainClock.y = -100/(window.devicePixelRatio ? window.devicePixelRatio : 1);
startTime = Date.now(); startTime = Date.now();
waveone = new waveGen(MainClock,Date.now(),[1,1,0],[1,1],[1,1]); waveone = new waveGen(MainClock,Date.now(),[1,1,0],[1,1],[1,1]);
if (firstTime) { if (firstTime) {
@ -213,11 +252,15 @@ function render() {
op = 1; op = 1;
} }
ctx.globalAlpha = op; 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; ctx.globalAlpha = 1;
} }
} else { } 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; var i;
@ -236,10 +279,10 @@ function render() {
} }
function stepInitialLoad() { 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) { if (Date.now() - startTime > 1300) {
MainClock.dy = 0; MainClock.dy = 0;
MainClock.y = canvas.height/2; MainClock.y = (canvas.height/2)/(window.devicePixelRatio ? window.devicePixelRatio : 1);
if (Date.now() - startTime - 500 > 1300) { if (Date.now() - startTime - 500 > 1300) {
gameState = 1; gameState = 1;
} }
@ -285,14 +328,10 @@ function animLoop() {
else if (gameState == -1) { else if (gameState == -1) {
showModal('Paused!', 'Press "P" to continue.'); showModal('Paused!', 'Press "P" to continue.');
} }
else if (gameState == 2) { // fix so that it clears blocks then checks for game over else if (gameState == 2) {
// if (checkGameOver()) {
// if (MainClock.angle != MainClock.targetAngle) {
requestAnimFrame(animLoop); requestAnimFrame(animLoop);
update(); // score will keep incrementing at gameover update();
render(); render();
// }
// checkGameOver();
showModal('Game over: ' + score + ' pts!', 'Press enter to restart!'); showModal('Game over: ' + score + ' pts!', 'Press enter to restart!');
highscores = localStorage.getItem('highscores').split(',').map(Number); highscores = localStorage.getItem('highscores').split(',').map(Number);
for (var i = 0; i < numHighScores; i++) { for (var i = 0; i < numHighScores; i++) {
@ -316,7 +355,7 @@ requestAnimFrame(animLoop);
function checkGameOver() { function checkGameOver() {
for (var i = 0; i < MainClock.sides; i++) { for (var i = 0; i < MainClock.sides; i++) {
if (MainClock.blocks[i].length > 8) { if (MainClock.blocks[i].length > settings.rows) {
return true; return true;
} }
} }
@ -325,4 +364,4 @@ function checkGameOver() {
window.onblur = function (e) { window.onblur = function (e) {
if (gameState == 1) gameState = -1; if (gameState == 1) gameState = -1;
} };

2
js/view.js
View file

@ -48,7 +48,7 @@ function clearShadows() {
function clearGameBoard() { function clearGameBoard() {
// ctx.shadowColor = '#2980b9'; // ctx.shadowColor = '#2980b9';
// ctx.shadowBlur = 25; // 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(); // clearShadows();
} }