added shadows
This commit is contained in:
Michael Yang
parent
4ca5d26df8
commit
d04972140a
4 changed files with 40 additions and 21 deletions
|
|
@ -26,7 +26,7 @@
|
|||
<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>
|
||||
<canvas id="canvas" width="800" height="800" style="position: absolute; left: calc(50% - 80vmin / 2); height: 80vmin; width: 80vmin; background-color: rgba(0,0,0,0);"></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>
|
||||
|
|
|
|||
|
|
@ -44,8 +44,7 @@ function horizontalScore(clock,side,index){
|
|||
break;
|
||||
}
|
||||
}
|
||||
if(downcount+upcount>=2){
|
||||
|
||||
if(downcount+upcount>=2) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
// HackExeter
|
||||
var angularVelocityConst = 6;
|
||||
|
||||
function Block(lane, color, distFromHex, settled) {
|
||||
|
|
@ -41,12 +40,12 @@ function Block(lane, color, distFromHex, settled) {
|
|||
}
|
||||
|
||||
this.width = 2 * this.distFromHex / Math.sqrt(3);
|
||||
this.widthswag = this.width + this.height + 3;
|
||||
this.widthWide = 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);
|
||||
var p3 = rotatePoint(this.widthWide / 2, -this.height / 2, this.angle);
|
||||
var p4 = rotatePoint(-this.widthWide / 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);
|
||||
|
|
@ -64,8 +63,8 @@ function Block(lane, color, distFromHex, settled) {
|
|||
|
||||
}
|
||||
var colorSounds = {"#e74c3c": new Audio("../sounds/lowest.ogg"),
|
||||
"#f1c40f":new Audio("../sounds/highest.ogg"),
|
||||
"#3498db":new Audio("../sounds/middle.ogg")
|
||||
"#f1c40f":new Audio("../sounds/highest.ogg"),
|
||||
"#3498db":new Audio("../sounds/middle.ogg")
|
||||
};
|
||||
|
||||
function Clock(sideLength) {
|
||||
|
|
@ -176,7 +175,9 @@ function Clock(sideLength) {
|
|||
else {
|
||||
this.angle += this.angularVelocity;
|
||||
}
|
||||
|
||||
ctx.shadowColor = '#2980b9';
|
||||
ctx.shadowBlur = 15;
|
||||
drawPolygon(this.x, this.y, this.sides, this.sideLength, this.angle, this.fillColor);
|
||||
clearShadows();
|
||||
};
|
||||
}
|
||||
|
|
|
|||
41
js/main.js
41
js/main.js
|
|
@ -1,4 +1,3 @@
|
|||
// HackExeter
|
||||
var canvas = document.getElementById('canvas');
|
||||
var ctx = canvas.getContext('2d');
|
||||
canvas.originalHeight = canvas.height;
|
||||
|
|
@ -48,7 +47,7 @@ function init() {
|
|||
var colors = ["#e74c3c", "#f1c40f", "#3498db"];
|
||||
var hexagonBackgroundColor = 'rgb(236, 240, 241)';
|
||||
var hexagonBackgroundColorClear = 'rgba(236, 240, 241, 0.5)';
|
||||
var swegBlue = '#2c3e50'; //tumblr?
|
||||
var centerBlue = '#2c3e50'; //tumblr?
|
||||
var scoreAdditionCoeff = 1;
|
||||
|
||||
function render() {
|
||||
|
|
@ -61,9 +60,9 @@ function render() {
|
|||
if (minTime < 100) {
|
||||
minTime = 100;
|
||||
}
|
||||
if(nextGen>400){
|
||||
nextGen-=10*((nextGen-200)/1000);
|
||||
}
|
||||
if(nextGen>400){
|
||||
nextGen-=10*((nextGen-200)/1000);
|
||||
}
|
||||
}
|
||||
if (now - prevScore > 1000) {
|
||||
score += 5 * (scoreScalar * scoreAdditionCoeff);
|
||||
|
|
@ -71,7 +70,7 @@ function render() {
|
|||
iter += 0.1;
|
||||
}
|
||||
ctx.clearRect(0, 0, canvas.originalWidth, canvas.originalHeight);
|
||||
drawPolygon(canvas.originalWidth / 2, canvas.originalHeight / 2, 6, canvas.originalWidth / 2, 30, hexagonBackgroundColor);
|
||||
clearGameBoard();
|
||||
var objectsToRemove = [];
|
||||
var i;
|
||||
for (i in MainClock.blocks) {
|
||||
|
|
@ -99,11 +98,12 @@ function render() {
|
|||
blocks.splice(o, 1);
|
||||
});
|
||||
MainClock.draw();
|
||||
drawPolygon(canvas.originalWidth / 2, canvas.originalHeight / 2, 6, 270, 30, "gray", false);
|
||||
drawPolygon(canvas.originalWidth / 2, canvas.originalHeight / 2, 6, 270, 30, '#95a5a6', false);
|
||||
}
|
||||
|
||||
function animloop() {
|
||||
if (gameState == 0) {
|
||||
clearGameBoard();
|
||||
showModal('Start!', 'Press enter to start!');
|
||||
} else if (gameState == 1) {
|
||||
requestAnimFrame(animloop);
|
||||
|
|
@ -116,6 +116,12 @@ function animloop() {
|
|||
}
|
||||
requestAnimFrame(animloop);
|
||||
|
||||
function clearGameBoard() {
|
||||
ctx.shadowColor = '#2980b9';
|
||||
ctx.shadowBlur = 25;
|
||||
drawPolygon(canvas.originalWidth / 2, canvas.originalHeight / 2, 6, canvas.originalWidth / 2 - 25, 30, hexagonBackgroundColor);
|
||||
clearShadows();
|
||||
}
|
||||
|
||||
function drawPolygon(x, y, sides, radius, theta, color, fill) { // can make more elegant, reduce redundancy, fix readability
|
||||
if (fill == undefined) {
|
||||
|
|
@ -124,6 +130,12 @@ function drawPolygon(x, y, sides, radius, theta, color, fill) { // can make more
|
|||
if (fill) {
|
||||
ctx.fillStyle = color;
|
||||
} else {
|
||||
// ctx.shadowColor = '#2980b9';
|
||||
// ctx.shadowColor = color;
|
||||
// ctx.shadowColor = '#2ecc71';
|
||||
// ctx.shadowBlur = 10;
|
||||
// ctx.strokeStyle = rgba(0,0,0,0);
|
||||
ctx.lineWidth = 3;
|
||||
ctx.strokeStyle = color;
|
||||
}
|
||||
|
||||
|
|
@ -159,13 +171,20 @@ 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, canvas.originalWidth / 2 - 25, 30, hexagonBackgroundColorClear);
|
||||
// drawPolygon(canvas.originalWidth / 2, canvas.originalHeight / 2, 6, buttonSize, 30, swegBlue);
|
||||
ctx.font = fontSizeLarge + 'px "Roboto"';
|
||||
ctx.font = fontSizeLarge + 'px Roboto'; // 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.font = fontSizeSmall + 'px "Roboto"';
|
||||
ctx.font = fontSizeSmall + 'px Roboto';
|
||||
ctx.fillText(secondaryText, canvas.originalWidth / 2, canvas.originalHeight / 2 + fontSizeLarge / 4 + fontSizeSmall / 4 + 30);
|
||||
}
|
||||
|
||||
function clearShadows() {
|
||||
ctx.shadowColor = 0;
|
||||
ctx.shadowBlur = 0;
|
||||
ctx.shadowOffsetX = 0;
|
||||
ctx.shadowOffsetY = 0;
|
||||
}
|
||||
Loading…
Reference in a new issue