instructions text fixed tap -> arrow keys on desktop

This commit is contained in:
Garrett Finucane 2015-08-27 19:12:05 -04:00
parent 6ef7cdea7b
commit b00c0099d8
3 changed files with 42 additions and 7 deletions

View file

@ -61,7 +61,7 @@
</head>
<body>
<canvas id="canvas"></canvas>
<div class="faded overlay"></div>
<div id="overlay" class="faded overlay"></div>
<div id='startBtn' ></div>
<div id="helpScreen" class='unselectable'>
<div id='inst_main_body'></div>

View file

@ -71,12 +71,19 @@ function render() {
}
function renderBeginningText() {
renderText((trueCanvas.width)/2 + 1.5 * settings.scale, (trueCanvas.height)/3 - 35 - 135 * settings.scale, 20, '#2c3e50', 'Tap on the left or the right of the screen', '20px Exo');
renderText((trueCanvas.width)/2 + 1.5 * settings.scale, (trueCanvas.height)/3 - 35 - 105 * settings.scale, 20, '#2c3e50', 'to rotate the hexagon.', '20px Exo');
drawKey("",(trueCanvas.width)/2 + 1.5 * settings.scale - 5 , (trueCanvas.height)/3 - 35 - 107 * settings.scale);
renderText((trueCanvas.width)/2 + 1.5 * settings.scale, (trueCanvas.height * 3.1)/3 - 35 - 135 * settings.scale, 20, '#2c3e50', 'Match 3+ blocks to score points.', '20px Exo');
renderText((trueCanvas.width)/2 + 1.5 * settings.scale, (trueCanvas.height * 3.1 )/3 - 35 - 105 * settings.scale, 20, '#2c3e50', 'Tap the center to double the speed.', '20px Exo');
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
renderText((trueCanvas.width)/2 + 1.5 * settings.scale, (trueCanvas.height)/3 - 35 - 135 * settings.scale, 20, '#2c3e50', 'Tap on the left or the right of the screen', '20px Exo');
renderText((trueCanvas.width)/2 + 1.5 * settings.scale, (trueCanvas.height)/3 - 35 - 105 * settings.scale, 20, '#2c3e50', 'to rotate the hexagon.', '20px Exo');
drawKey("",(trueCanvas.width)/2 + 1.5 * settings.scale - 5 , (trueCanvas.height)/3 - 35 - 107 * settings.scale);
renderText((trueCanvas.width)/2 + 1.5 * settings.scale, (trueCanvas.height * 3.1)/3 - 35 - 135 * settings.scale, 20, '#2c3e50', 'Match 3+ blocks to score points.', '20px Exo');
}
else {
renderText((trueCanvas.width)/2 + 1.5 * settings.scale, (trueCanvas.height)/3 - 35 - 135 * settings.scale, 20, '#2c3e50', 'Use the right and left arrow keys', '20px Exo');
renderText((trueCanvas.width)/2 + 1.5 * settings.scale, (trueCanvas.height)/3 - 35 - 105 * settings.scale, 20, '#2c3e50', 'to rotate the hexagon.', '20px Exo');
drawKey("",(trueCanvas.width)/2 + 1.5 * settings.scale - 5 , (trueCanvas.height)/3 - 35 - 107 * settings.scale);
renderText((trueCanvas.width)/2 + 1.5 * settings.scale, (trueCanvas.height * 3.1)/3 - 35 - 120 * settings.scale, 20, '#2c3e50', 'Match 3+ blocks to score points.', '20px Exo');
}
//renderText((trueCanvas.width)/2 + 1.5 * settings.scale, (trueCanvas.height)/2 - 35 - 65 * settings.scale, 20, '#2c3e50', (settings.platform == 'mobile' ? 'Tap the middle to toggle 2x speed!' : 'Hold the down arrow to toggle 2x speed!'), '20px Exo');
}

View file

@ -163,6 +163,30 @@ function updateHighScores (){
$("#2place").text(highscores[1]);
$("#3place").text(highscores[2]);
}
function fadeFade(opacity,step,thresh,sign){
//if(sign){
//if(opacity < thresh){
//console.log("hi");
//ctx.clearRect(0,0, trueCanvas.width,trueCanvas.height);
//ctx.globalAlpha = opacity;
//ctx.fillStyle = 'rgb(236,240,241)';
//ctx.fillRect(0, 0, trueCanvas.width, trueCanvas.height);
//ctx.globalAlpha = 1;
//setTimeout(function(){fadeFade(opacity + step,step,thresh,sign)},1);
//}
//}
//else{
//if(opacity > thresh){
//ctx.globalAlpha = opacity;
//ctx.fillStyle = 'rgb(236,240,241)';
//ctx.clearRect(0,0, trueCanvas.width,trueCanvas.height);
//ctx.fillRect(0, 0, trueCanvas.width, trueCanvas.height);
//ctx.globalAlpha = 1;
//setTimeout(function(){fadeFade(opacity + step,step,thresh,sign)},1);
//}
//}
}
var pausable = true;
function pause(o) {
if (gameState == 0 || gameState == 2 || !pausable) {
@ -189,11 +213,13 @@ function pause(o) {
$("#pauseBtn").attr("src", "./images/btn_pause.svg");
$('.helpText').fadeOut(300, 'linear');
$('#overlay').fadeOut(300, 'linear');
hideText();
setTimeout(function() {
gameState = prevGameState;
pausable =true;
}, 400);
setTimeout(function(){fadeFade(0.9,-0.0025,0,false)},5);
} else if (gameState != -2 && gameState !== 0 && gameState !== 2) {
$('#restartBtn').fadeIn(300, "linear");
$('#buttonCont').fadeIn(300, "linear");
@ -203,10 +229,12 @@ function pause(o) {
}
$('#fork-ribbon').fadeIn(300, 'linear');
$("#pauseBtn").attr("src","./images/btn_resume.svg");
$('#overlay').fadeIn(300, 'linear');
prevGameState = gameState;
setTimeout(function() {
pausable = true;
}, 400);
setTimeout(function(){fadeFade(0,0.0025,0.9,true)},1);
gameState = -1;
}
}