instructions text fixed tap -> arrow keys on desktop
This commit is contained in:
parent
6ef7cdea7b
commit
b00c0099d8
3 changed files with 42 additions and 7 deletions
|
@ -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>
|
||||
|
|
|
@ -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');
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue