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

added real scaling

Browse source
This commit is contained in:
meadowstream 2014-05-25 10:41:06 -04:00
parent 63d33c7e11
commit c6613ad794
4 changed files with 63 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
index.html
View file

@ -50,9 +50,8 @@
</style>
</head>
<body>
<!-- <center id='title'><div>Hextris</div></center> -->
<div id = 'canvasCont'>
<canvas id="canvas" width="800" height="692.820323"></canvas> <!--692.820323 = 800 * sqrt(3)/2-->
<canvas id="canvas" width="100%" height="100%"></canvas>
</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>

29
js/entities.js
View file

@ -21,7 +21,7 @@ function Block(lane, color, iter, distFromHex, settled) {
if (distFromHex) {
this.distFromHex = distFromHex;
} else {
this.distFromHex = 320;
this.distFromHex = 320 * settings.scale;
}
this.incrementOpacity = function() {
@ -49,9 +49,15 @@ function Block(lane, color, iter, distFromHex, settled) {
return i;
}
}
}
};
this.draw = function(attached, index) {
this.height = settings.blockHeight;
if (Math.abs(settings.scale - settings.prevScale) > .000000001) {
debugger;
this.distFromHex *= (settings.scale/settings.prevScale);
}
this.incrementOpacity();
if(attached === undefined)
attached = false;
@ -145,7 +151,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 = [];
@ -206,8 +212,7 @@ function Clock(sideLength) {
if (position !== undefined) {
arr = tArr;
if (position <= 0) {
debugger;
if (block.distFromHex - block.iter - (this.sideLength / 2) * Math.sqrt(3) <= 0) {
if (block.distFromHex - block.iter * settings.scale - (this.sideLength / 2) * Math.sqrt(3) <= 0) {
block.distFromHex = (this.sideLength / 2) * Math.sqrt(3);
block.settled = 1;
consolidateBlocks(this, lane, block.getIndex());
@ -215,7 +220,7 @@ function Clock(sideLength) {
block.settled = 0;
}
} else {
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 * settings.scale - 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());
@ -226,12 +231,12 @@ function Clock(sideLength) {
}
} else {
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 * settings.scale - arr[arr.length - 1].distFromHex - arr[arr.length - 1].height <= 0) {
block.distFromHex = arr[arr.length - 1].distFromHex + arr[arr.length - 1].height;
this.addBlock(block);
}
} else {
if (block.distFromHex + block.iter - (this.sideLength / 2) * Math.sqrt(3) <= 0) {
if (block.distFromHex + block.iter * settings.scale - (this.sideLength / 2) * Math.sqrt(3) <= 0) {
block.distFromHex = (this.sideLength / 2) * Math.sqrt(3);
this.addBlock(block);
}
@ -252,7 +257,12 @@ function Clock(sideLength) {
else {
history[count].rotate += steps;
}
this.position = (this.position + this.sides) % this.sides;
while (this.position < 0) {
this.position += 6;
}
this.position = this.position % this.sides;
this.blocks.forEach(function(blocks) {
blocks.forEach(function(block) {
block.targetAngle = block.targetAngle - steps * 60;
@ -263,6 +273,7 @@ function Clock(sideLength) {
};
this.draw = function() {
this.sideLength = settings.hexWidth;
gdx = 0;
gdy = 0;
for (var i = 0; i < this.shakes.length; i++) {

90
js/main.js
View file

@ -1,35 +1,16 @@
$(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');
canvas.width = $(window).width();
canvas.height = $(window).height();
canvas.originalHeight = canvas.height;
canvas.originalWidth = canvas.width;
}
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.originalHeight = canvas.height;
canvas.originalWidth = canvas.width;
var count = 0;
if (window.devicePixelRatio) {
canvas.width *= window.devicePixelRatio;
canvas.height *= window.devicePixelRatio;
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
}
window.requestAnimFrame = (function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) {
@ -47,7 +28,11 @@ var settings;
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
settings = {
scale:1,
prevScale:1,
baseHexWidth:87,
hexWidth:87,
baseBlockHeight:20,
blockHeight:20,
rows:6,
speedModifier:0.8,
@ -55,7 +40,11 @@ if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigat
};
} else {
settings = {
scale:1,
prevScale:1,
hexWidth:65,
baseHexWidth:87,
baseBlockHeight:20,
blockHeight:15,
rows:8,
speedModifier:1,
@ -157,8 +146,10 @@ function exportHistory() {
//remember to update history function to show the respective iter speeds
function update() {
var now = Date.now();
settings.hexWidth = settings.baseHexWidth * settings.scale;
settings.blockHeight = settings.baseBlockHeight * settings.scale;
var now = Date.now();
if (now - prevTimeScored > 1000) {
score += 5 * (scoreScalar * scoreAdditionCoeff);
prevTimeScored = now;
@ -189,8 +180,8 @@ function update() {
for (i in blocks) {
MainClock.doesBlockCollide(blocks[i]);
if (!blocks[i].settled) {
if (!blocks[i].initializing) blocks[i].distFromHex -= blocks[i].iter;
} else if(!blocks[i].removed){
if (!blocks[i].initializing) blocks[i].distFromHex -= blocks[i].iter * settings.scale;
} else if (!blocks[i].removed) {
blocks[i].removed = 1;
}
}
@ -222,7 +213,7 @@ function update() {
MainClock.doesBlockCollide(block, j, MainClock.blocks[i]);
if (!MainClock.blocks[i][j].settled) {
MainClock.blocks[i][j].distFromHex -= block.iter;
MainClock.blocks[i][j].distFromHex -= block.iter * settings.scale;
}
}
}
@ -256,11 +247,7 @@ function render() {
ctx.globalAlpha = 1;
}
} else {
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();
drawPolygon(canvas.originalWidth / 2 + gdx, canvas.originalHeight / 2 + gdy, 6, (settings.rows * settings.blockHeight) * (2/Math.sqrt(3)) + settings.hexWidth, 30, '#bdc3c7', false, 6);
}
var i;
@ -276,6 +263,7 @@ function render() {
}
MainClock.draw();
settings.prevScale = settings.scale;
}
function stepInitialLoad() {
@ -322,6 +310,8 @@ function animLoop() {
}
else if (gameState == -2) { //initialization screen just before starting
requestAnimFrame(animLoop);
settings.hexWidth = settings.baseHexWidth * settings.scale;
settings.blockHeight = settings.baseBlockHeight * settings.scale;
stepInitialLoad();
render();
}
@ -329,26 +319,26 @@ function animLoop() {
showModal('Paused!', 'Press "P" to continue.');
}
else if (gameState == 2) {
requestAnimFrame(animLoop);
update();
render();
showModal('Game over: ' + score + ' pts!', 'Press enter to restart!');
highscores = localStorage.getItem('highscores').split(',').map(Number);
for (var i = 0; i < numHighScores; i++) {
if (highscores[i] < score) {
for (var j = numHighScores - 1; j > i; j--) {
highscores[j] = highscores[j - 1];
}
highscores[i] = score;
break;
requestAnimFrame(animLoop);
update();
render();
showModal('Game over: ' + score + ' pts!', 'Press enter to restart!');
highscores = localStorage.getItem('highscores').split(',').map(Number);
for (var i = 0; i < numHighScores; i++) {
if (highscores[i] < score) {
for (var j = numHighScores - 1; j > i; j--) {
highscores[j] = highscores[j - 1];
}
highscores[i] = score;
break;
}
localStorage.setItem('highscores', highscores);
}
else {
gameState = 0;
}
// }
localStorage.setItem('highscores', highscores);
}
else {
gameState = 0;
}
}
requestAnimFrame(animLoop);

12
js/view.js
View file

@ -46,19 +46,11 @@ function clearShadows() {
}
function clearGameBoard() {
// ctx.shadowColor = '#2980b9';
// ctx.shadowBlur = 25;
drawPolygon(canvas.originalWidth / 2, canvas.originalHeight / 2, 6, canvas.originalWidth / 2, 30, hexagonBackgroundColor, 0, 'rgba(0,0,0,0)');
// clearShadows();
}
function drawPolygon(x, y, sides, radius, theta, fillColor, lineWidth, lineColor) { // can make more elegant, reduce redundancy, fix readability
ctx.fillStyle = fillColor;
// ctx.shadowColor = '#2980b9';
// ctx.shadowColor = color;
// ctx.shadowColor = '#2ecc71';
// ctx.shadowBlur = 10;
// ctx.strokeStyle = rgba(0,0,0,0);
ctx.lineWidth = lineWidth;
ctx.strokeStyle = lineColor;
@ -70,14 +62,14 @@ function drawPolygon(x, y, sides, radius, theta, fillColor, lineWidth, lineColor
for (var i = 0; i < sides; i++) {
coords = rotatePoint(oldX, oldY, 360 / sides);
ctx.lineTo(coords.x + x, coords.y + y);
// ctx.moveTo(coords.x + x, coords.y + y);
oldX = coords.x;
oldY = coords.y;
}
ctx.closePath();
ctx.fill();
ctx.stroke();
};
}
function showHighScores() {
$('#highscores').html(function() {