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

added mobile version

Browse source
This commit is contained in:
meadowstream 2014-05-25 18:27:25 -04:00
parent 0e9db3d7ab
commit 464a7dde43
4 changed files with 54 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
js/entities.js
View file

@ -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)');
};
}

54
js/main.js
View file

@ -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) {

10
js/view.js
View file

@ -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

2
js/wavegen.js
View file

@ -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;
}
}
};