added new startanim
This commit is contained in:
meadowstream
parent
47e0e9632d
commit
3ec79fcb35
3 changed files with 55 additions and 27 deletions
18
index.html
18
index.html
|
|
@ -28,22 +28,18 @@
|
|||
left: calc(50% - 80vmin / 2);
|
||||
height: 80vmin;
|
||||
width: 80vmin;
|
||||
/*margin-top: 3vmin;*/
|
||||
background: -webkit-radial-gradient(#2980b9 35%, rgba(44,62,80,50) 68%);
|
||||
z-index:3;
|
||||
}
|
||||
|
||||
#title {
|
||||
z-index:99999;
|
||||
margin-top:20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul class='navbar'>
|
||||
<li><button onclick='showHighScores()'>High Scores</button></li>
|
||||
<li id='title'>Hextris</li>
|
||||
<li><button onclick='showHelp()'>Help</button></li>
|
||||
</ul>
|
||||
<div id='score'> Score: --- </div>
|
||||
<div id='highscores' class='not-visible'></div>
|
||||
<!-- <div style="margin: 1vmin auto 0 auto; width: 100%; text-align: center; margin-top: 5vmin;"> -->
|
||||
<!-- <h1 style="color: #ecf0f1; font-size: 5vmin;">Hextris</h1> -->
|
||||
<!-- </div> -->
|
||||
<center id='title'><div>Hextris</div></center>
|
||||
<canvas id="canvas" width="800" height="800"></canvas>
|
||||
<div id="leftTap" style="position: absolute; left: 0; top: 20%; height:80%; width:50%;"></div>
|
||||
<div id="rightTap" style="position: absolute; right: 0; top: 20%; height:80%; width:50%;"></div>
|
||||
|
|
|
|||
|
|
@ -134,6 +134,7 @@ function Clock(sideLength) {
|
|||
this.fillColor = '#2c3e50';
|
||||
this.angularVelocity = 0;
|
||||
this.position = 0;
|
||||
this.dy = 0;
|
||||
this.sides = 6;
|
||||
this.blocks = [];
|
||||
this.angle = 180 / this.sides;
|
||||
|
|
@ -274,7 +275,7 @@ function Clock(sideLength) {
|
|||
}
|
||||
ctx.shadowColor = '#2980b9';
|
||||
ctx.shadowBlur = 15;
|
||||
drawPolygon(this.x + gdx, this.y + gdy, this.sides, this.sideLength, this.angle, this.fillColor);
|
||||
drawPolygon(this.x + gdx, this.y + gdy + this.dy, this.sides, this.sideLength, this.angle, this.fillColor);
|
||||
clearShadows();
|
||||
};
|
||||
}
|
||||
|
|
|
|||
61
js/main.js
61
js/main.js
|
|
@ -49,6 +49,7 @@ var nextGen;
|
|||
var spawnLane = 0;
|
||||
var importing = 0;
|
||||
var importedHistory;
|
||||
var startTime;
|
||||
|
||||
function init() {
|
||||
history = {};
|
||||
|
|
@ -58,14 +59,16 @@ function init() {
|
|||
prevScore = 0;
|
||||
spawnLane = 0;
|
||||
scoreScalar = 1;
|
||||
gameState = 1;
|
||||
gameState = -2;
|
||||
count = 0;
|
||||
blocks = [];
|
||||
MainClock = new Clock(65);
|
||||
MainClock.y = -100;
|
||||
iter = 1;
|
||||
startTime = Date.now();
|
||||
waveone = new waveGen(MainClock,0,[1,1,0],[1,1],[1,1]);
|
||||
console.log(waveone);
|
||||
requestAnimFrame(animloop);
|
||||
requestAnimFrame(animLoop);
|
||||
}
|
||||
|
||||
function addNewBlock(blocklane, color, distFromHex, settled) { //last two are optional parameters
|
||||
|
|
@ -188,8 +191,6 @@ function update() {
|
|||
function render() {
|
||||
ctx.clearRect(0, 0, canvas.originalWidth, canvas.originalHeight);
|
||||
clearGameBoard();
|
||||
// renderText(score + " (x" + scoreScalar * scoreAdditionCoeff + ")", canvas.originalWidth/2, canvas.originalHeight/2 - 360);
|
||||
|
||||
var i;
|
||||
for (i in MainClock.blocks) {
|
||||
for (var j = 0; j < MainClock.blocks[i].length; j++) {
|
||||
|
|
@ -203,23 +204,53 @@ function render() {
|
|||
}
|
||||
|
||||
MainClock.draw();
|
||||
drawPolygon(canvas.originalWidth / 2, canvas.originalHeight / 2, 6, 220, 30, '#95a5a6', false);
|
||||
drawPolygon(canvas.originalWidth / 2, MainClock.y + MainClock.dy, 6, 220, 30, '#95a5a6', false);
|
||||
}
|
||||
|
||||
function animloop() {
|
||||
if (gameState === 0) {
|
||||
clearGameBoard();
|
||||
showModal('Start!', 'Press enter to start!');
|
||||
}
|
||||
else if (gameState == -1) {
|
||||
showModal('Paused!', 'Press "P" to continue.');
|
||||
function stepInitialLoad() {
|
||||
var dur = 1300;
|
||||
var dy = getStepDY(Date.now() - startTime, 0, 100 + canvas.height/2, dur);
|
||||
if (Date.now() - startTime > dur) {
|
||||
MainClock.dy = 0;
|
||||
MainClock.y = canvas.height/2;
|
||||
gameState = 1;
|
||||
} else {
|
||||
MainClock.dy = dy;
|
||||
}
|
||||
else if (gameState == 1) {
|
||||
requestAnimFrame(animloop);
|
||||
}
|
||||
|
||||
//t: current time, b: begInnIng value, c: change In value, d: duration
|
||||
function getStepDY(t, b, c, d) {
|
||||
if ((t/=d) < (1/2.75)) {
|
||||
return c*(7.5625*t*t) + b;
|
||||
} else if (t < (2/2.75)) {
|
||||
return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b;
|
||||
} else if (t < (2.5/2.75)) {
|
||||
return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b;
|
||||
} else {
|
||||
return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b;
|
||||
}
|
||||
};
|
||||
|
||||
function animLoop() {
|
||||
if (gameState == 1) {
|
||||
requestAnimFrame(animLoop);
|
||||
update();
|
||||
render();
|
||||
checkGameOver();
|
||||
}
|
||||
else if (gameState === 0) {
|
||||
clearGameBoard();
|
||||
showModal('Start!', 'Press enter to start!');
|
||||
}
|
||||
else if (gameState == -2) { //initialization screen just before starting
|
||||
requestAnimFrame(animLoop);
|
||||
stepInitialLoad();
|
||||
render();
|
||||
}
|
||||
else if (gameState == -1) {
|
||||
showModal('Paused!', 'Press "P" to continue.');
|
||||
}
|
||||
else if (gameState == 2) {
|
||||
if (checkGameOver()) {
|
||||
showModal('Game over: ' + score + ' pts!', 'Press enter to restart!');
|
||||
|
|
@ -240,7 +271,7 @@ function animloop() {
|
|||
}
|
||||
}
|
||||
}
|
||||
requestAnimFrame(animloop);
|
||||
requestAnimFrame(animLoop);
|
||||
|
||||
function checkGameOver() {
|
||||
for (var i = 0; i < MainClock.sides; i++) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue