Merge pull request #1 from mhuusko5/master
Some quick/small, but important changes to Hextris
This commit is contained in:
lengstrom
commit
2ac75f59de
13 changed files with 539 additions and 529 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -1 +1,2 @@
|
|||
.DS_Store
|
||||
.idea/*
|
||||
|
|
|
|||
135
checking.js
135
checking.js
|
|
@ -1,135 +0,0 @@
|
|||
// HackExeter
|
||||
function getIndex(list,index) {
|
||||
if(index>-1) {
|
||||
return index%list.length;
|
||||
}
|
||||
else {
|
||||
return list.length+index;
|
||||
}
|
||||
}
|
||||
function scoreCheckHorizontal(clock,side,index) {
|
||||
clockSides = clock.blocks;
|
||||
if(clockSides[getIndex(clockSides,side)][index] && clockSides[getIndex(clockSides,side-1)][index] && clockSides[getIndex(clockSides,side-2)][index]) {
|
||||
if(clockSides[getIndex(clockSides,side)][index].color == clockSides[getIndex(clockSides,side-1)][index].color && clockSides[getIndex(clockSides,side-1)][index].color == clockSides[getIndex(clockSides,side-2)][index].color) {
|
||||
return -2;
|
||||
}
|
||||
}
|
||||
if(clockSides[getIndex(clockSides,side)][index] && clockSides[getIndex(clockSides,side+1)][index] && clockSides[getIndex(clockSides,side-1)][index]) {
|
||||
if(clockSides[getIndex(clockSides,side)][index].color == clockSides[getIndex(clockSides,side+1)][index].color && clockSides[getIndex(clockSides,side+1)][index].color == clockSides[getIndex(clockSides,side-1)][index].color) {
|
||||
return -1;
|
||||
}
|
||||
}
|
||||
if(clockSides[getIndex(clockSides,side)][index] && clockSides[getIndex(clockSides,side+1)][index] && clockSides[getIndex(clockSides,side+2)][index]) {
|
||||
if(clockSides[getIndex(clockSides,side)][index].color == clockSides[getIndex(clockSides,side+1)][index].color && clockSides[getIndex(clockSides,side+1)][index].color == clockSides[getIndex(clockSides,side+2)][index].color) {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
return "false";
|
||||
}
|
||||
|
||||
function scoreCheckVertical(clock,side,index) {
|
||||
curSide = clock.blocks[side];
|
||||
if(curSide[index] && curSide[index-2] && curSide[index-1]) {
|
||||
if(curSide[index].color == curSide[index-2].color && curSide[index-2].color ==curSide[index-1].color) {
|
||||
return -2;
|
||||
}
|
||||
}
|
||||
|
||||
if(curSide[index] && curSide[index+1] && curSide[index-1]) {
|
||||
if(curSide[index].color == curSide[index+1].color && curSide[index+1].color == curSide[index-1].color) {
|
||||
return -1;
|
||||
}
|
||||
}
|
||||
|
||||
if(curSide[index] && curSide[index+2] && curSide[index+1]) {
|
||||
if(curSide[index].color == curSide[index+2].color&& curSide[index+2].color ==curSide[index+1].color) {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
return "false";
|
||||
}
|
||||
function consolidateBlocks(clock,side,index) {
|
||||
horizontal = scoreCheckHorizontal(clock,side,index);
|
||||
vertical = scoreCheckVertical(clock,side,index);
|
||||
deleted = [];
|
||||
if(horizontal != "false") {
|
||||
scoreScalar *= 2;
|
||||
deleted.push([side,index,horizontal]);
|
||||
}
|
||||
else {
|
||||
deleted.push([]);
|
||||
}
|
||||
if(vertical != "false") {
|
||||
scoreScalar *= 2;
|
||||
deleted.push([side,index,vertical]);
|
||||
}
|
||||
else {
|
||||
deleted.push([]);
|
||||
}
|
||||
eraseBlocks(clock,deleted);
|
||||
return;
|
||||
}
|
||||
|
||||
function eraseBlocks(clock,deleted) {
|
||||
if(deleted[0].length>0){
|
||||
side = deleted[0][0];
|
||||
index = deleted[0][1];
|
||||
horizontal = deleted[0][2];
|
||||
length =3;
|
||||
flag=0;
|
||||
if(clock.blocks[getIndex(clock.blocks,side+horizontal+length+1)][index]){
|
||||
try {
|
||||
flag= clock.blocks[getIndex(clock.blocks,side+horizontal+length)][index].color == clock.blocks[getIndex(clock.blocks,side+horizontal+length+1)][index].color;
|
||||
}
|
||||
catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
}
|
||||
while(flag) {
|
||||
if(clock.blocks[getIndex(clock.blocks,side+horizontal+length+1)][index]){
|
||||
flag= clock.blocks[getIndex(clock.blocks,side+horizontal+length)][index].color == clock.blocks[getIndex(clock.blocks,side+horizontal+length+1)][index].color;
|
||||
}
|
||||
length++;
|
||||
}
|
||||
console.log(length);
|
||||
for(var i=0;i<length;i++) {
|
||||
clock.blocks[getIndex(clock.blocks,side+horizontal+i)].splice(index,1);
|
||||
}
|
||||
for(var i=0;i<length;i++) {
|
||||
if(side+horizontal+i<clock.blocks.length) {
|
||||
consolidateBlocks(clock,getIndex(clock.blocks,side+horizontal+i),index);
|
||||
}
|
||||
}
|
||||
}
|
||||
if(deleted[1].length>0){
|
||||
side = deleted[1][0];
|
||||
index = deleted[1][1];
|
||||
vertical = deleted[1][2];
|
||||
vertlength=3;
|
||||
while(index+vertical+vertlength<clock.blocks[side].length-1 && (clock.blocks[slide][index+vertical+length].color ==clock.blocks[slide][index+vertical+length+1].color )) {
|
||||
vertlength+=1;
|
||||
}
|
||||
clock.blocks[side].splice(index+vertical,2+(1*(!deleted[0].length>0)));
|
||||
for(var i=0; i<clock.blocks[side].length-(index+vertical); i++) {
|
||||
consolidateBlocks(clock,side,index+vertical+i);
|
||||
}
|
||||
}
|
||||
sidesChanged = [];
|
||||
if(deleted[1].length>0){
|
||||
if(deleted[1][0] != "false") {
|
||||
sidesChanged.push(deleted[1][0]);
|
||||
}
|
||||
}
|
||||
if(deleted[0].length>0){
|
||||
for(var i=0;i<length;i++) {
|
||||
if(deleted[0][2] != "false" ) {
|
||||
sidesChanged.push(getIndex(clock.blocks,deleted[0][0]+deleted[0][2]+i));
|
||||
}
|
||||
}
|
||||
}
|
||||
sidesChanged.forEach(function(o){
|
||||
MainClock.blocks[o].forEach(function(block) {
|
||||
block.settled = 0;
|
||||
})
|
||||
});
|
||||
}
|
||||
145
entities.js
145
entities.js
|
|
@ -1,145 +0,0 @@
|
|||
// HackExeter
|
||||
//you can change these to sexier stuff
|
||||
function Block(lane, color, distFromHex, settled) {
|
||||
this.settled = (settled == undefined) ? 0 : 1;
|
||||
this.height = 20;
|
||||
this.width = 65;
|
||||
this.lane = lane;
|
||||
this.angle = 90 - (30 + 60 * lane);
|
||||
if (this.angle < 0) {
|
||||
this.angle += 360;
|
||||
}
|
||||
|
||||
this.color = color;
|
||||
|
||||
if (distFromHex) {
|
||||
this.distFromHex = distFromHex;
|
||||
}
|
||||
else {
|
||||
this.distFromHex = 300;
|
||||
}
|
||||
|
||||
this.draw = function() {
|
||||
this.width = 2 * this.distFromHex / Math.sqrt(3);
|
||||
this.widthswag = this.width + this.height + 3;
|
||||
|
||||
var p1 = rotatePoint(-this.width/2, this.height/2, this.angle);
|
||||
var p2 = rotatePoint(this.width/2, this.height/2, this.angle);
|
||||
var p3 = rotatePoint(this.widthswag/2, -this.height/2, this.angle);
|
||||
var p4 = rotatePoint(-this.widthswag/2, -this.height/2, this.angle);
|
||||
|
||||
ctx.fillStyle=this.color;
|
||||
var baseX = canvas.width/2 + Math.sin((this.angle) * (Math.PI/180)) * (this.distFromHex + this.height/2);
|
||||
var baseY = canvas.height/2 - Math.cos((this.angle) * (Math.PI/180)) * (this.distFromHex + this.height/2);
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(baseX + p1.x, baseY + p1.y);
|
||||
ctx.lineTo(baseX + p2.x, baseY + p2.y);
|
||||
ctx.lineTo(baseX + p3.x, baseY + p3.y);
|
||||
ctx.lineTo(baseX + p4.x, baseY + p4.y);
|
||||
ctx.lineTo(baseX + p1.x, baseY + p1.y);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
function Clock(sideLength) {
|
||||
this.fillColor = '#2c3e50';
|
||||
this.position = 0;
|
||||
this.sides = 6;
|
||||
this.blocks = [];
|
||||
this.angle = 30;
|
||||
this.sideLength = sideLength;
|
||||
this.strokeColor = 'blue';
|
||||
this.x = canvas.width / 2;
|
||||
this.y = canvas.height / 2;
|
||||
|
||||
for(var i=0; i< this.sides; i++) {
|
||||
this.blocks.push([]);
|
||||
}
|
||||
|
||||
this.addBlock = function(block) {
|
||||
block.settled = 1;
|
||||
var lane = this.sides - block.lane;// -this.position;
|
||||
lane += this.position;
|
||||
while (lane < 0) {
|
||||
lane += this.sides;
|
||||
}
|
||||
lane = lane % this.sides;
|
||||
block.distFromHex = MainClock.sideLength / 2 * Math.sqrt(3) + block.height * this.blocks[lane].length;
|
||||
this.blocks[lane].push(block);
|
||||
consolidateBlocks(this,lane,this.blocks[lane].length-1);
|
||||
};
|
||||
|
||||
this.doesBlockCollide = function(block, iter, position, tArr) {
|
||||
if (block.settled) return;
|
||||
|
||||
var lane = this.sides - block.lane;// -this.position;
|
||||
lane += this.position;
|
||||
|
||||
while (lane < 0) {
|
||||
lane += this.sides;
|
||||
}
|
||||
lane = lane % this.sides;
|
||||
var arr = this.blocks[lane];
|
||||
|
||||
if (position !== undefined) {
|
||||
arr = tArr;
|
||||
if (position <= 0) {
|
||||
if (block.distFromHex - (this.sideLength/2) * Math.sqrt(3) <= 0) {
|
||||
block.settled = 1;
|
||||
if (iter == 2 && block.distFromHex + 1 - (this.sideLength/2) * Math.sqrt(3) <= 0) {
|
||||
block.distFromHex--;
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (block.distFromHex + iter - arr[position - 1].distFromHex - arr[position - 1].height <= 0) {
|
||||
block.settled = 1;
|
||||
if (iter == 2 && block.distFromHex + 1 + iter - arr[position - 1].distFromHex - arr[position - 1].height <= 0) {
|
||||
block.distFromHex--;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (arr.length > 0) {
|
||||
if (block.distFromHex + iter - arr[arr.length - 1].distFromHex - arr[arr.length - 1].height <= 0) {
|
||||
if (iter == 2 && block.distFromHex + iter + 1 - arr[arr.length - 1].distFromHex - arr[arr.length - 1].height <= 0) {
|
||||
block.distFromHex--;
|
||||
}
|
||||
this.addBlock(block);
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (block.distFromHex + iter - (this.sideLength/2) * Math.sqrt(3) <= 0) {
|
||||
if (iter == 2 && block.distFromHex + iter + 1 - (this.sideLength/2) * Math.sqrt(3) <= 0) {
|
||||
block.distFromHex--;
|
||||
}
|
||||
this.addBlock(block);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.rotate = function(steps) {
|
||||
this.position += steps;
|
||||
while (this.position < 0) {
|
||||
this.position += 6;
|
||||
}
|
||||
|
||||
this.position = this.position % this.sides;
|
||||
this.blocks.forEach(function(blocks){
|
||||
blocks.forEach(function(block){
|
||||
block.angle = block.angle - steps * 60;
|
||||
});
|
||||
});
|
||||
|
||||
this.angle = this.angle + steps * 60;
|
||||
};
|
||||
|
||||
this.draw = function() {
|
||||
drawPolygon(this.x, this.y, this.sides, this.sideLength, this.angle, this.fillColor);
|
||||
};
|
||||
}
|
||||
36
index.html
36
index.html
|
|
@ -1,6 +1,5 @@
|
|||
<!-- HackExeter -->
|
||||
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
|
||||
<!DOCTYPE html>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, minimal-ui"/>
|
||||
<html>
|
||||
<head>
|
||||
<title>Wasted Time</title>
|
||||
|
|
@ -10,30 +9,33 @@
|
|||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
color: white;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-size: 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="vendor/hammer.min.js"></script>
|
||||
<script src="vendor/keypress.min.js"></script>
|
||||
</head>
|
||||
<body style="background-color:#2c3e50">
|
||||
|
||||
<div style='margin: 0 auto; width: 100%;text-align: center; margin-top: 20px;'><h1 style='color:#ecf0f1; font-size:50px;'>Hextris</h1>
|
||||
<span id="score">0 (x1)</span>
|
||||
</div>
|
||||
<canvas id="canvas" width = '700' height = '700' style='background-color:#2c3e50; position:absolute;left:50%;margin-left:-350px'></canvas>
|
||||
<div id="leftTap" style="position:absolute; left:0; top:0; height:400%;width:50%"></div>
|
||||
<div id="rightTap" style="position:absolute; left:50%; top:0; height:400%;width:50%"></div>
|
||||
<div style="margin: 1vmin auto 0 auto; width: 100%; text-align: center;">
|
||||
<h1 style="color: #ecf0f1; font-size: 10vmin;">Hextris</h1>
|
||||
<span id="score" style="color: #ecf0f1; font-size: 4vmin;">0 (x1)</span>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas" width="700" height="700" style="position: absolute; left: calc(50% - 80vmin / 2); height: 80vmin; width: 80vmin; background-color: #2c3e50;"></canvas>
|
||||
|
||||
<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>
|
||||
|
||||
<script src="js/math.js"></script>
|
||||
<script src="js/entities.js"></script>
|
||||
<script src="js/input.js"></script>
|
||||
<script src="js/checking.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
|
||||
<script src="math.js"></script>
|
||||
<script src="entities.js"></script>
|
||||
<script src="math.js"></script>
|
||||
<script src="hammer.min.js"></script>
|
||||
<script src="keypress.min.js"></script>
|
||||
<script src="input.js"></script>
|
||||
<script src="checking.js"></script>
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
43
input.js
43
input.js
|
|
@ -1,43 +0,0 @@
|
|||
// HackExeter
|
||||
keypress.register_combo({
|
||||
keys: "left",
|
||||
on_keyup: function(){MainClock.rotate(1)},
|
||||
});
|
||||
|
||||
keypress.register_combo({
|
||||
keys: "right",
|
||||
on_keyup: function(){MainClock.rotate(-1)},
|
||||
});
|
||||
|
||||
keypress.register_combo({
|
||||
keys: "enter",
|
||||
on_keyup: function(){
|
||||
if (gameState != 1) {
|
||||
init();
|
||||
}
|
||||
},
|
||||
});
|
||||
var tapLeft = Hammer(document.getElementById("leftTap")).on("tap", function(event) {
|
||||
if (gameState != 1) {
|
||||
init();
|
||||
}
|
||||
MainClock.rotate(1)
|
||||
|
||||
});
|
||||
var tapRight = Hammer(document.getElementById("rightTap")).on("tap", function(event) {
|
||||
if (gameState != 1) {
|
||||
init();
|
||||
}
|
||||
MainClock.rotate(-1)
|
||||
});
|
||||
keypress.register_combo({
|
||||
keys: "space",
|
||||
on_keyup: function(){
|
||||
iter = 1;
|
||||
scoreAdditionCoeff = 1;
|
||||
},
|
||||
on_keydown: function() {
|
||||
iter = 2;
|
||||
scoreAdditionCoeff = 2;
|
||||
}
|
||||
});
|
||||
131
js/checking.js
Normal file
131
js/checking.js
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
// HackExeter
|
||||
function getIndex(list, index) {
|
||||
if (index > -1) {
|
||||
return index % list.length;
|
||||
} else {
|
||||
return list.length + index;
|
||||
}
|
||||
}
|
||||
function scoreCheckHorizontal(clock, side, index) {
|
||||
clockSides = clock.blocks;
|
||||
if (clockSides[getIndex(clockSides, side)][index] && clockSides[getIndex(clockSides, side - 1)][index] && clockSides[getIndex(clockSides, side - 2)][index]) {
|
||||
if (clockSides[getIndex(clockSides, side)][index].color == clockSides[getIndex(clockSides, side - 1)][index].color && clockSides[getIndex(clockSides, side - 1)][index].color == clockSides[getIndex(clockSides, side - 2)][index].color) {
|
||||
return -2;
|
||||
}
|
||||
}
|
||||
if (clockSides[getIndex(clockSides, side)][index] && clockSides[getIndex(clockSides, side + 1)][index] && clockSides[getIndex(clockSides, side - 1)][index]) {
|
||||
if (clockSides[getIndex(clockSides, side)][index].color == clockSides[getIndex(clockSides, side + 1)][index].color && clockSides[getIndex(clockSides, side + 1)][index].color == clockSides[getIndex(clockSides, side - 1)][index].color) {
|
||||
return -1;
|
||||
}
|
||||
}
|
||||
if (clockSides[getIndex(clockSides, side)][index] && clockSides[getIndex(clockSides, side + 1)][index] && clockSides[getIndex(clockSides, side + 2)][index]) {
|
||||
if (clockSides[getIndex(clockSides, side)][index].color == clockSides[getIndex(clockSides, side + 1)][index].color && clockSides[getIndex(clockSides, side + 1)][index].color == clockSides[getIndex(clockSides, side + 2)][index].color) {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
return "false";
|
||||
}
|
||||
|
||||
function scoreCheckVertical(clock, side, index) {
|
||||
curSide = clock.blocks[side];
|
||||
if (curSide[index] && curSide[index - 2] && curSide[index - 1]) {
|
||||
if (curSide[index].color == curSide[index - 2].color && curSide[index - 2].color == curSide[index - 1].color) {
|
||||
return -2;
|
||||
}
|
||||
}
|
||||
|
||||
if (curSide[index] && curSide[index + 1] && curSide[index - 1]) {
|
||||
if (curSide[index].color == curSide[index + 1].color && curSide[index + 1].color == curSide[index - 1].color) {
|
||||
return -1;
|
||||
}
|
||||
}
|
||||
|
||||
if (curSide[index] && curSide[index + 2] && curSide[index + 1]) {
|
||||
if (curSide[index].color == curSide[index + 2].color && curSide[index + 2].color == curSide[index + 1].color) {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
return "false";
|
||||
}
|
||||
function consolidateBlocks(clock, side, index) {
|
||||
horizontal = scoreCheckHorizontal(clock, side, index);
|
||||
vertical = scoreCheckVertical(clock, side, index);
|
||||
deleted = [];
|
||||
if (horizontal != "false") {
|
||||
scoreScalar *= 2;
|
||||
deleted.push([side, index, horizontal]);
|
||||
} else {
|
||||
deleted.push([]);
|
||||
}
|
||||
if (vertical != "false") {
|
||||
scoreScalar *= 2;
|
||||
deleted.push([side, index, vertical]);
|
||||
} else {
|
||||
deleted.push([]);
|
||||
}
|
||||
eraseBlocks(clock, deleted);
|
||||
return;
|
||||
}
|
||||
|
||||
function eraseBlocks(clock, deleted) {
|
||||
if (deleted[0].length > 0) {
|
||||
side = deleted[0][0];
|
||||
index = deleted[0][1];
|
||||
horizontal = deleted[0][2];
|
||||
length = 3;
|
||||
flag = 0;
|
||||
if (clock.blocks[getIndex(clock.blocks, side + horizontal + length + 1)][index]) {
|
||||
try {
|
||||
flag = clock.blocks[getIndex(clock.blocks, side + horizontal + length)][index].color == clock.blocks[getIndex(clock.blocks, side + horizontal + length + 1)][index].color;
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
}
|
||||
while (flag) {
|
||||
if (clock.blocks[getIndex(clock.blocks, side + horizontal + length + 1)][index]) {
|
||||
flag = clock.blocks[getIndex(clock.blocks, side + horizontal + length)][index].color == clock.blocks[getIndex(clock.blocks, side + horizontal + length + 1)][index].color;
|
||||
}
|
||||
length++;
|
||||
}
|
||||
console.log(length);
|
||||
for (var i = 0; i < length; i++) {
|
||||
clock.blocks[getIndex(clock.blocks, side + horizontal + i)].splice(index, 1);
|
||||
}
|
||||
for (var i = 0; i < length; i++) {
|
||||
if (side + horizontal + i < clock.blocks.length) {
|
||||
consolidateBlocks(clock, getIndex(clock.blocks, side + horizontal + i), index);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (deleted[1].length > 0) {
|
||||
side = deleted[1][0];
|
||||
index = deleted[1][1];
|
||||
vertical = deleted[1][2];
|
||||
vertlength = 3;
|
||||
while (index + vertical + vertlength < clock.blocks[side].length - 1 && (clock.blocks[slide][index + vertical + length].color == clock.blocks[slide][index + vertical + length + 1].color )) {
|
||||
vertlength += 1;
|
||||
}
|
||||
clock.blocks[side].splice(index + vertical, 2 + (1 * (!deleted[0].length > 0)));
|
||||
for (var i = 0; i < clock.blocks[side].length - (index + vertical); i++) {
|
||||
consolidateBlocks(clock, side, index + vertical + i);
|
||||
}
|
||||
}
|
||||
sidesChanged = [];
|
||||
if (deleted[1].length > 0) {
|
||||
if (deleted[1][0] != "false") {
|
||||
sidesChanged.push(deleted[1][0]);
|
||||
}
|
||||
}
|
||||
if (deleted[0].length > 0) {
|
||||
for (var i = 0; i < length; i++) {
|
||||
if (deleted[0][2] != "false") {
|
||||
sidesChanged.push(getIndex(clock.blocks, deleted[0][0] + deleted[0][2] + i));
|
||||
}
|
||||
}
|
||||
}
|
||||
sidesChanged.forEach(function(o) {
|
||||
MainClock.blocks[o].forEach(function(block) {
|
||||
block.settled = 0;
|
||||
})
|
||||
});
|
||||
}
|
||||
143
js/entities.js
Normal file
143
js/entities.js
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
// HackExeter
|
||||
//you can change these to sexier stuff
|
||||
function Block(lane, color, distFromHex, settled) {
|
||||
this.settled = (settled == undefined) ? 0 : 1;
|
||||
this.height = 20;
|
||||
this.width = 65;
|
||||
this.lane = lane;
|
||||
this.angle = 90 - (30 + 60 * lane);
|
||||
if (this.angle < 0) {
|
||||
this.angle += 360;
|
||||
}
|
||||
|
||||
this.color = color;
|
||||
|
||||
if (distFromHex) {
|
||||
this.distFromHex = distFromHex;
|
||||
} else {
|
||||
this.distFromHex = 300;
|
||||
}
|
||||
|
||||
this.draw = function() {
|
||||
this.width = 2 * this.distFromHex / Math.sqrt(3);
|
||||
this.widthswag = this.width + this.height + 3;
|
||||
|
||||
var p1 = rotatePoint(-this.width / 2, this.height / 2, this.angle);
|
||||
var p2 = rotatePoint(this.width / 2, this.height / 2, this.angle);
|
||||
var p3 = rotatePoint(this.widthswag / 2, -this.height / 2, this.angle);
|
||||
var p4 = rotatePoint(-this.widthswag / 2, -this.height / 2, this.angle);
|
||||
|
||||
ctx.fillStyle = this.color;
|
||||
var baseX = canvas.originalWidth / 2 + Math.sin((this.angle) * (Math.PI / 180)) * (this.distFromHex + this.height / 2);
|
||||
var baseY = canvas.originalHeight / 2 - Math.cos((this.angle) * (Math.PI / 180)) * (this.distFromHex + this.height / 2);
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(baseX + p1.x, baseY + p1.y);
|
||||
ctx.lineTo(baseX + p2.x, baseY + p2.y);
|
||||
ctx.lineTo(baseX + p3.x, baseY + p3.y);
|
||||
ctx.lineTo(baseX + p4.x, baseY + p4.y);
|
||||
ctx.lineTo(baseX + p1.x, baseY + p1.y);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
function Clock(sideLength) {
|
||||
this.fillColor = '#2c3e50';
|
||||
this.position = 0;
|
||||
this.sides = 6;
|
||||
this.blocks = [];
|
||||
this.angle = 30;
|
||||
this.sideLength = sideLength;
|
||||
this.strokeColor = 'blue';
|
||||
this.x = canvas.originalWidth / 2;
|
||||
this.y = canvas.originalHeight / 2;
|
||||
|
||||
for (var i = 0; i < this.sides; i++) {
|
||||
this.blocks.push([]);
|
||||
}
|
||||
|
||||
this.addBlock = function(block) {
|
||||
block.settled = 1;
|
||||
var lane = this.sides - block.lane;// -this.position;
|
||||
lane += this.position;
|
||||
while (lane < 0) {
|
||||
lane += this.sides;
|
||||
}
|
||||
lane = lane % this.sides;
|
||||
block.distFromHex = MainClock.sideLength / 2 * Math.sqrt(3) + block.height * this.blocks[lane].length;
|
||||
this.blocks[lane].push(block);
|
||||
consolidateBlocks(this, lane, this.blocks[lane].length - 1);
|
||||
};
|
||||
|
||||
this.doesBlockCollide = function(block, iter, position, tArr) {
|
||||
if (block.settled) {
|
||||
return;
|
||||
}
|
||||
|
||||
var lane = this.sides - block.lane;// -this.position;
|
||||
lane += this.position;
|
||||
|
||||
while (lane < 0) {
|
||||
lane += this.sides;
|
||||
}
|
||||
lane = lane % this.sides;
|
||||
var arr = this.blocks[lane];
|
||||
|
||||
if (position !== undefined) {
|
||||
arr = tArr;
|
||||
if (position <= 0) {
|
||||
if (block.distFromHex - (this.sideLength / 2) * Math.sqrt(3) <= 0) {
|
||||
block.settled = 1;
|
||||
if (iter == 2 && block.distFromHex + 1 - (this.sideLength / 2) * Math.sqrt(3) <= 0) {
|
||||
block.distFromHex--;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (block.distFromHex + iter - arr[position - 1].distFromHex - arr[position - 1].height <= 0) {
|
||||
block.settled = 1;
|
||||
if (iter == 2 && block.distFromHex + 1 + iter - arr[position - 1].distFromHex - arr[position - 1].height <= 0) {
|
||||
block.distFromHex--;
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (arr.length > 0) {
|
||||
if (block.distFromHex + iter - arr[arr.length - 1].distFromHex - arr[arr.length - 1].height <= 0) {
|
||||
if (iter == 2 && block.distFromHex + iter + 1 - arr[arr.length - 1].distFromHex - arr[arr.length - 1].height <= 0) {
|
||||
block.distFromHex--;
|
||||
}
|
||||
this.addBlock(block);
|
||||
}
|
||||
} else {
|
||||
if (block.distFromHex + iter - (this.sideLength / 2) * Math.sqrt(3) <= 0) {
|
||||
if (iter == 2 && block.distFromHex + iter + 1 - (this.sideLength / 2) * Math.sqrt(3) <= 0) {
|
||||
block.distFromHex--;
|
||||
}
|
||||
this.addBlock(block);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.rotate = function(steps) {
|
||||
this.position += steps;
|
||||
while (this.position < 0) {
|
||||
this.position += 6;
|
||||
}
|
||||
|
||||
this.position = this.position % this.sides;
|
||||
this.blocks.forEach(function(blocks) {
|
||||
blocks.forEach(function(block) {
|
||||
block.angle = block.angle - steps * 60;
|
||||
});
|
||||
});
|
||||
|
||||
this.angle = this.angle + steps * 60;
|
||||
};
|
||||
|
||||
this.draw = function() {
|
||||
drawPolygon(this.x, this.y, this.sides, this.sideLength, this.angle, this.fillColor);
|
||||
};
|
||||
}
|
||||
50
js/input.js
Normal file
50
js/input.js
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
// HackExeter
|
||||
keypress.register_combo({
|
||||
keys: "left",
|
||||
on_keyup: function() {
|
||||
MainClock.rotate(1)
|
||||
}
|
||||
});
|
||||
|
||||
keypress.register_combo({
|
||||
keys: "right",
|
||||
on_keyup: function() {
|
||||
MainClock.rotate(-1)
|
||||
}
|
||||
});
|
||||
|
||||
keypress.register_combo({
|
||||
keys: "enter",
|
||||
on_keyup: function() {
|
||||
if (gameState != 1) {
|
||||
init();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var tapLeft = Hammer(document.getElementById("leftTap")).on("tap", function(event) {
|
||||
if (gameState != 1) {
|
||||
init();
|
||||
}
|
||||
MainClock.rotate(1)
|
||||
|
||||
});
|
||||
|
||||
var tapRight = Hammer(document.getElementById("rightTap")).on("tap", function(event) {
|
||||
if (gameState != 1) {
|
||||
init();
|
||||
}
|
||||
MainClock.rotate(-1)
|
||||
});
|
||||
|
||||
keypress.register_combo({
|
||||
keys: "space",
|
||||
on_keyup: function() {
|
||||
iter = 1;
|
||||
scoreAdditionCoeff = 1;
|
||||
},
|
||||
on_keydown: function() {
|
||||
iter = 2;
|
||||
scoreAdditionCoeff = 2;
|
||||
}
|
||||
});
|
||||
169
js/main.js
Normal file
169
js/main.js
Normal file
|
|
@ -0,0 +1,169 @@
|
|||
// HackExeter
|
||||
var canvas = document.getElementById('canvas');
|
||||
var ctx = canvas.getContext('2d');
|
||||
canvas.originalHeight = canvas.height;
|
||||
canvas.originalWidth = canvas.width;
|
||||
if (window.devicePixelRatio) {
|
||||
canvas.width *= window.devicePixelRatio;
|
||||
canvas.height *= window.devicePixelRatio;
|
||||
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
|
||||
}
|
||||
|
||||
var gameState = 0; // 0 - start, 1 - playing, 2 - end
|
||||
var framerate = 60;
|
||||
|
||||
var score = 0;
|
||||
var scoreScalar = 1;
|
||||
|
||||
ct = 0;
|
||||
|
||||
window.requestAnimFrame = (function() {
|
||||
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) {
|
||||
window.setTimeout(callback, 1000 / framerate);
|
||||
};
|
||||
})();
|
||||
|
||||
|
||||
var blocks = [];
|
||||
var MainClock;
|
||||
var iter;
|
||||
var lastGen;
|
||||
var prevScore;
|
||||
var nextGen;
|
||||
|
||||
function init() {
|
||||
score = 0;
|
||||
scoreScalar = 1;
|
||||
gameState = 1;
|
||||
ct = 0;
|
||||
blocks = [];
|
||||
MainClock = new Clock(65);
|
||||
iter = 1;
|
||||
lastGen = Date.now();
|
||||
prevScore = Date.now();
|
||||
nextGen = 1000;
|
||||
requestAnimFrame(animloop);
|
||||
}
|
||||
|
||||
var colors = ["#e74c3c", "#f1c40f", "#3498db"];
|
||||
var hexagonBackgroundColor = 'rgb(236, 240, 241)';
|
||||
var hexagonBackgroundColorClear = 'rgba(236, 240, 241, 0.5)';
|
||||
var swegBlue = '#2c3e50'; //tumblr?
|
||||
var scoreAdditionCoeff = 1;
|
||||
|
||||
function render() {
|
||||
document.getElementById("score").innerHTML = score + " (x" + scoreScalar * scoreAdditionCoeff + ")";
|
||||
var now = Date.now();
|
||||
if (now - lastGen > nextGen) {
|
||||
blocks.push(new Block(randInt(0, 6), colors[randInt(0, colors.length)]));
|
||||
lastGen = Date.now();
|
||||
var minTime = 500 / iter;
|
||||
if (minTime < 100) {
|
||||
minTime = 100;
|
||||
}
|
||||
nextGen = randInt(minTime, 1500 / iter);
|
||||
}
|
||||
if (now - prevScore > 1000) {
|
||||
score += 5 * (scoreScalar * scoreAdditionCoeff);
|
||||
prevScore = now;
|
||||
iter += 0.1;
|
||||
}
|
||||
ctx.clearRect(0, 0, canvas.originalWidth, canvas.originalHeight);
|
||||
drawPolygon(canvas.originalWidth / 2, canvas.originalHeight / 2, 6, canvas.originalWidth / 2, 30, hexagonBackgroundColor);
|
||||
var objectsToRemove = [];
|
||||
var i;
|
||||
for (i in MainClock.blocks) {
|
||||
for (var j = 0; j < MainClock.blocks[i].length; j++) {
|
||||
var block = MainClock.blocks[i][j];
|
||||
MainClock.doesBlockCollide(block, iter, j, MainClock.blocks[i]);
|
||||
if (!MainClock.blocks[i][j].settled) {
|
||||
MainClock.blocks[i][j].distFromHex -= iter;
|
||||
}
|
||||
block.draw();
|
||||
}
|
||||
}
|
||||
|
||||
for (i in blocks) {
|
||||
MainClock.doesBlockCollide(blocks[i], iter);
|
||||
if (!blocks[i].settled) {
|
||||
blocks[i].distFromHex -= iter;
|
||||
} else {
|
||||
objectsToRemove.push(i);
|
||||
}
|
||||
blocks[i].draw();
|
||||
}
|
||||
|
||||
objectsToRemove.forEach(function(o) {
|
||||
blocks.splice(o, 1);
|
||||
});
|
||||
MainClock.draw();
|
||||
drawPolygon(canvas.originalWidth / 2, canvas.originalHeight / 2, 6, 270, 30, "gray", false);
|
||||
}
|
||||
|
||||
function animloop() {
|
||||
if (gameState == 0) {
|
||||
showModal('Start!', 'Press enter to start!');
|
||||
} else if (gameState == 1) {
|
||||
requestAnimFrame(animloop);
|
||||
render();
|
||||
checkGameOver();
|
||||
} else if (gameState == 2) {
|
||||
showModal('Game over: ' + score + ' pts!', 'Press enter to restart!');
|
||||
|
||||
}
|
||||
}
|
||||
requestAnimFrame(animloop);
|
||||
|
||||
|
||||
function drawPolygon(x, y, sides, radius, theta, color, fill) { // can make more elegant, reduce redundancy, fix readability
|
||||
if (fill == undefined) {
|
||||
fill = true;
|
||||
}
|
||||
if (fill) {
|
||||
ctx.fillStyle = color;
|
||||
} else {
|
||||
ctx.strokeStyle = color;
|
||||
}
|
||||
|
||||
ctx.beginPath();
|
||||
var coords = rotatePoint(0, radius, theta);
|
||||
ctx.moveTo(coords.x + x, coords.y + y);
|
||||
var oldX = coords.x;
|
||||
var oldY = coords.y;
|
||||
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();
|
||||
if (fill) {
|
||||
ctx.fill();
|
||||
} else {
|
||||
ctx.stroke();
|
||||
}
|
||||
};
|
||||
|
||||
function checkGameOver() { // fix font, fix size of hex
|
||||
for (var i = 0; i < MainClock.sides; i++) {
|
||||
if (MainClock.blocks[i].length > 8) {
|
||||
gameState = 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function showModal(text, secondaryText) {
|
||||
var buttonSize = 150;
|
||||
var fontSizeLarge = 50;
|
||||
var fontSizeSmall = 25;
|
||||
drawPolygon(canvas.originalWidth / 2, canvas.originalHeight / 2, 6, canvas.originalWidth / 2, 30, hexagonBackgroundColorClear);
|
||||
ctx.fillStyle = swegBlue;
|
||||
// drawPolygon(canvas.originalWidth / 2, canvas.originalHeight / 2, 6, buttonSize, 30, swegBlue);
|
||||
ctx.font = fontSizeLarge + 'px "Roboto"';
|
||||
ctx.textAlign = 'center';
|
||||
// ctx.fillStyle = hexagonBackgroundColor;
|
||||
ctx.fillText(text, canvas.originalWidth / 2, canvas.originalHeight / 2 + (fontSizeLarge / 4));
|
||||
ctx.font = fontSizeSmall + 'px "Roboto"';
|
||||
ctx.fillText(secondaryText, canvas.originalWidth / 2, canvas.originalHeight / 2 + fontSizeLarge / 4 + fontSizeSmall / 4 + 30);
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@ function rotatePoint(x, y, theta) {
|
|||
|
||||
return {
|
||||
x: rotX,
|
||||
y: rotY,
|
||||
y: rotY
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -15,8 +15,10 @@ function randInt(min, max) {
|
|||
}
|
||||
|
||||
//http://stackoverflow.com/questions/15397036/drawing-dashed-lines-on-html5-canvas
|
||||
CanvasRenderingContext2D.prototype.dashedLine = function (x1, y1, x2, y2, dashLen) {
|
||||
if (dashLen == undefined) dashLen = 2;
|
||||
CanvasRenderingContext2D.prototype.dashedLine = function(x1, y1, x2, y2, dashLen) {
|
||||
if (dashLen == undefined) {
|
||||
dashLen = 2;
|
||||
}
|
||||
this.moveTo(x1, y1);
|
||||
|
||||
var dX = x2 - x1;
|
||||
165
main.js
165
main.js
|
|
@ -1,165 +0,0 @@
|
|||
// HackExeter
|
||||
var canvas = document.getElementById('canvas');
|
||||
var ctx = canvas.getContext('2d');
|
||||
|
||||
var gameState = 0; // 0 - start, 1 - playing, 2 - end
|
||||
var framerate = 60;
|
||||
|
||||
var score = 0;
|
||||
var scoreScalar = 1;
|
||||
|
||||
ct = 0;
|
||||
|
||||
window.requestAnimFrame = (function(){
|
||||
return window.requestAnimationFrame ||
|
||||
window.webkitRequestAnimationFrame ||
|
||||
window.mozRequestAnimationFrame ||
|
||||
function( callback ) {
|
||||
window.setTimeout(callback, 1000 / framerate);
|
||||
};
|
||||
})();
|
||||
|
||||
|
||||
var blocks = [];
|
||||
var MainClock;
|
||||
var iter;
|
||||
var lastGen;
|
||||
var prevScore;
|
||||
var nextGen;
|
||||
|
||||
function init() {
|
||||
score = 0;
|
||||
scoreScalar = 1;
|
||||
gameState = 1;
|
||||
ct = 0;
|
||||
blocks = [];
|
||||
MainClock = new Clock(65);
|
||||
iter = 1;
|
||||
lastGen = Date.now();
|
||||
prevScore = Date.now();
|
||||
nextGen = 1000;
|
||||
requestAnimFrame(animloop);
|
||||
}
|
||||
var colors = ["#e74c3c", "#f1c40f","#3498db"];
|
||||
var hexagonBackgroundColor = 'rgb(236, 240, 241)';
|
||||
var hexagonBackgroundColorClear = 'rgba(236, 240, 241, 0.5)';
|
||||
var swegBlue = '#2c3e50'; //tumblr?
|
||||
var scoreAdditionCoeff = 1;
|
||||
|
||||
function render() {
|
||||
document.getElementById("score").innerHTML = score + " (x"+scoreScalar * scoreAdditionCoeff+")";
|
||||
var now = Date.now();
|
||||
if(now - lastGen > nextGen) {
|
||||
blocks.push(new Block(randInt(0, 6), colors[randInt(0, colors.length)]));
|
||||
lastGen = Date.now();
|
||||
var minTime = 500/iter;
|
||||
if(minTime < 100) {
|
||||
minTime = 100;
|
||||
}
|
||||
nextGen = randInt(minTime, 1500/iter);
|
||||
}
|
||||
if(now - prevScore > 1000) {
|
||||
score += 5 * (scoreScalar * scoreAdditionCoeff);
|
||||
prevScore = now;
|
||||
iter += 0.1;
|
||||
}
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
drawPolygon(canvas.width / 2, canvas.height / 2, 6, canvas.width / 2, 30, hexagonBackgroundColor);
|
||||
var objectsToRemove = [];
|
||||
var i;
|
||||
for (i in MainClock.blocks) {
|
||||
for (var j = 0; j < MainClock.blocks[i].length; j++) {
|
||||
var block = MainClock.blocks[i][j];
|
||||
MainClock.doesBlockCollide(block, iter, j, MainClock.blocks[i]);
|
||||
if (!MainClock.blocks[i][j].settled) {
|
||||
MainClock.blocks[i][j].distFromHex -= iter;
|
||||
}
|
||||
block.draw();
|
||||
}
|
||||
}
|
||||
|
||||
for (i in blocks) {
|
||||
MainClock.doesBlockCollide(blocks[i], iter);
|
||||
if (!blocks[i].settled) {
|
||||
blocks[i].distFromHex -= iter;
|
||||
}
|
||||
else {
|
||||
objectsToRemove.push(i);
|
||||
}
|
||||
blocks[i].draw();
|
||||
}
|
||||
|
||||
objectsToRemove.forEach(function(o){
|
||||
blocks.splice(o, 1);
|
||||
});
|
||||
MainClock.draw();
|
||||
drawPolygon(canvas.width/2, canvas.height/2, 6, 270, 30, "gray", false);
|
||||
}
|
||||
|
||||
function animloop(){
|
||||
if (gameState == 0) {
|
||||
showModal('Start!', 'Press enter to start!');
|
||||
}
|
||||
else if (gameState == 1) {
|
||||
requestAnimFrame(animloop);
|
||||
render();
|
||||
checkGameOver();
|
||||
}
|
||||
else if (gameState == 2) {
|
||||
showModal('Game over: '+score+' pts!', 'Press enter to restart!');
|
||||
|
||||
}
|
||||
}
|
||||
requestAnimFrame(animloop);
|
||||
|
||||
|
||||
function drawPolygon(x, y, sides, radius, theta, color, fill) { // can make more elegant, reduce redundancy, fix readability
|
||||
if(fill==undefined)
|
||||
fill = true;
|
||||
if(fill)
|
||||
ctx.fillStyle = color;
|
||||
else
|
||||
ctx.strokeStyle = color;
|
||||
|
||||
ctx.beginPath();
|
||||
var coords = rotatePoint(0, radius, theta);
|
||||
ctx.moveTo(coords.x + x, coords.y + y);
|
||||
var oldX = coords.x;
|
||||
var oldY = coords.y;
|
||||
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();
|
||||
if(fill)
|
||||
ctx.fill();
|
||||
else
|
||||
ctx.stroke();
|
||||
};
|
||||
|
||||
function checkGameOver() { // fix font, fix size of hex
|
||||
for(var i=0; i<MainClock.sides;i++) {
|
||||
if(MainClock.blocks[i].length>8)
|
||||
{
|
||||
gameState = 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function showModal(text, secondaryText) {
|
||||
var buttonSize = 150;
|
||||
var fontSizeLarge = 50;
|
||||
var fontSizeSmall = 25;
|
||||
drawPolygon(canvas.width / 2, canvas.height / 2, 6, canvas.width / 2, 30, hexagonBackgroundColorClear);
|
||||
ctx.fillStyle = swegBlue;
|
||||
// drawPolygon(canvas.width / 2, canvas.height / 2, 6, buttonSize, 30, swegBlue);
|
||||
ctx.font = fontSizeLarge+'px "Roboto"';
|
||||
ctx.textAlign = 'center';
|
||||
// ctx.fillStyle = hexagonBackgroundColor;
|
||||
ctx.fillText(text, canvas.width / 2, canvas.height / 2 + (fontSizeLarge / 4));
|
||||
ctx.font = fontSizeSmall+'px "Roboto"';
|
||||
ctx.fillText(secondaryText, canvas.width/2, canvas.height/2 + fontSizeLarge / 4 + fontSizeSmall / 4 + 30);
|
||||
}
|
||||
0
hammer.min.js → vendor/hammer.min.js
vendored
0
hammer.min.js → vendor/hammer.min.js
vendored
0
keypress.min.js → vendor/keypress.min.js
vendored
0
keypress.min.js → vendor/keypress.min.js
vendored
Loading…
Reference in a new issue