Skip to content

added level page and progress bar #223

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sanghp786 wants to merge 1 commit into
base: gh-pages
Choose a base branch
from
Open

added level page and progress bar #223

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,29 @@
<div id="helpScreen" class='unselectable'>
<div id='inst_main_body'></div>
</div>
<div id="welcomeScreen" class='unselectable screen'>
<div class="welcomeContainer">
<div id="welcomeTitle">Welcome to Hextris</div>
<div id="welcomeStartBtn" class="menuBtn">Start</div>
</div>
</div>
<div id="levelsScreen" class='unselectable screen'>
<div class="levelsContainer">
<div id="levelsHeader">Select Level</div>
<div id="levelsList" class="levelsScroll"></div>
<div id="backToWelcomeBtn" class="menuBtn">Back</div>
</div>
</div>
<!-- level complete screen -->
<div id="levelCompleteScreen" class='unselectable screen'>
<div class="completeContainer">
<div id="completeTitle" class="GOTitle">LEVEL COMPLETE!</div>
<div id="completeLevelNum"></div>
<div id="completeScore"></div>
<div id="nextLevelBtn" class="menuBtn">NEXT LEVEL</div>
<div id="replayLevelBtn" class="menuBtn">REPLAY</div>
</div>
</div>
<img id="openSideBar" class='helpText' src="./images/btn_help.svg"/>
<div class="faded overlay"></div>
<img id="pauseBtn" src="./images/btn_pause.svg"/>
Expand All @@ -84,6 +107,12 @@
<div id='highScoreInGameText'>
<div id='highScoreInGameTextHeader'>HIGH SCORE</div><div id='currentHighScore'>10292</div>
</div>
<!-- level display on top during gameplay -->
<div id="levelDisplay" style="position:absolute; top:10px; left:10px; font-family:Exo; font-size:2.5vmin; color:#2c3e50; z-index:200; display:none;">LEVEL <span id="currentLevelNum">1</span></div>
<!-- progress bar on top: fills green every 200 score; press 1 to clear blocks when full -->
<div id="progressContainer" style="position:absolute; top:70px; left:50%; width:50%; max-width:400px; height:8px; background:#bdc3c7; border-radius:4px; overflow:hidden; transform:translateX(-50%); z-index:200; display:none;">
<div id="progressBar" style="height:100%; width:0%; background:#2ecc71; transition:width 0.3s linear;"></div>
</div>
<div id="gameoverscreen">
<div id='container'>
<div id='gameOverBox' class='GOTitle'>GAME OVER</div>
Expand Down
2 changes: 2 additions & 0 deletions js/checking.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,4 +81,6 @@ function consolidateBlocks(hex,side,index){
hex.texts.push(new Text(hex.x,hex.y,"+ "+adder.toString(),"bold Q ",deletedBlocks[0].color,fadeUpAndOut));
hex.lastColorScored = deletedBlocks[0].color;
score += adder;
window.progressCounter += adder; // accumulate for bar fill (200 per cycle)
updateProgressBar();
}
195 changes: 193 additions & 2 deletions js/initialization.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,13 @@ function initialize(a) {
highscores = [];
}
}
// level progress saved in localStorage, default only level 1 unlocked
window.currentLevel = 1;
window.maxUnlockedLevel = parseInt(localStorage.getItem('maxUnlockedLevel')) || 1;
window.blocks = [];
// progress for bar (stays full green after 200 until '1' pressed; resets every 200)
window.progressCounter = 0;
window.barFull = false;
window.MainHex;
window.gdx = 0;
window.gdy = 0;
Expand All @@ -133,15 +139,15 @@ function initialize(a) {
window.importedHistory = undefined;
window.startTime = undefined;
window.gameState;
setStartScreen();
showWelcome();
if (a != 1) {
window.canRestart = 1;
window.onblur = function(e) {
if (gameState == 1) {
pause();
}
};
$('#startBtn').off();
$('#startBtn').off().hide();
if (settings.platform == 'mobile') {
$('#startBtn').on('touchstart', startBtnHandler);
} else {
Expand Down Expand Up @@ -176,6 +182,16 @@ function initialize(a) {
document.addEventListener("backbutton", handlePause, false);
document.addEventListener("menubutton", handlePause, false); //menu button on android

$('#welcomeStartBtn').off().on('click', function() {
showLevels();
});
$('#backToWelcomeBtn').off().on('click', function() {
showWelcome();
});
// complete screen buttons
$('#nextLevelBtn').off().on('click', nextLevel);
$('#replayLevelBtn').off().on('click', replayLevel);

setTimeout(function() {
if (settings.platform == "mobile") {
try {
Expand Down Expand Up @@ -290,3 +306,178 @@ function handleClickBefore(e) {
return;
}
}

function getLevelTarget(level) {
return 250 * (level + 1);
}

function saveLevelProgress() {
localStorage.setItem('maxUnlockedLevel', maxUnlockedLevel);
}

function renderLevelsList() {
var list = $('#levelsList');
list.empty();
for(var i = 1; i <= 100; i++) {
var item = $('<div class="level-item">' + i + '</div>');
if (i > maxUnlockedLevel) {
item.addClass('locked');
} else {
item.on('click', (function(lvl) {
return function() {
startLevel(lvl);
};
})(i));
}
list.append(item);
}
list.scrollTop(0);
}

function showWelcome() {
hideAllScreens();
$('#welcomeScreen').fadeIn(150, "linear");
$('#startBtn').hide();
init();
gameState = 0;
requestAnimFrame(animLoop);
}

function showLevels() {
hideAllScreens();
$('#levelsScreen').fadeIn(150, "linear");
renderLevelsList();
gameState = 0;
requestAnimFrame(animLoop);
}

function hideAllScreens() {
$('#welcomeScreen').fadeOut(150);
$('#levelsScreen').fadeOut(150);
$('#helpScreen').fadeOut(150);
$('#gameoverscreen').fadeOut(150);
$('#levelCompleteScreen').fadeOut(150);
$('#overlay').fadeOut(150);
$('#buttonCont').fadeOut(150);
$('.helpText').fadeOut(150);
updateLevelDisplay(false);
}

function startLevel(level) {
currentLevel = level;
hideAllScreens();
setTimeout(function() {
if (settings.platform == "mobile") {
try {
document.body.removeEventListener('touchstart', handleTapBefore, false);
} catch (e) {}
try {
document.body.removeEventListener('touchstart', handleTap, false);
} catch (e) {}
document.body.addEventListener('touchstart', handleTap, false);
} else {
try {
document.body.removeEventListener('mousedown', handleClickBefore, false);
} catch (e) {}
try {
document.body.removeEventListener('mousedown', handleClick, false);
} catch (e) {}
document.body.addEventListener('mousedown', handleClick, false);
}
}, 5);
if (!canRestart) return false;
// always full init for fresh level start (after complete or menu)
init(1);
checkVisualElements(0);
updateLevelDisplay(true);
}

function completeLevelIfQualified() {
var target = getLevelTarget(currentLevel);
if (score >= target) {
if (currentLevel + 1 > maxUnlockedLevel) {
maxUnlockedLevel = currentLevel + 1;
saveLevelProgress();
}
showLevelComplete();
}
}

function showLevelComplete() {
// stop game, clear save, dim canvas, show complete banner
gameState = 0;
clearSaveState();
importing = 0;
hideAllScreens();
var c = document.getElementById("canvas");
c.className = "blur";
$('#pauseBtn').hide();
$('#restartBtn').hide();
$('#levelCompleteScreen').fadeIn(150, "linear");
$('#completeLevelNum').text('LEVEL ' + currentLevel);
$('#completeScore').text('SCORE: ' + score);
// handlers set once in init
}

function updateLevelDisplay(show) {
if (show) {
$('#currentLevelNum').text(currentLevel);
$('#levelDisplay').show();
$('#progressContainer').show();
window.barFull = false;
window.progressCounter = 0;
window.currentProgress = 0;
updateProgressBar();
} else {
$('#levelDisplay').hide();
$('#progressContainer').hide();
}
}

function nextLevel() {
var next = currentLevel + 1;
if (next > 100) next = 100;
startLevel(next);
}

function replayLevel() {
startLevel(currentLevel);
}

function updateProgressBar() {
// progress fills/stays green after 200 until '1'; resets after clear
var mod = window.progressCounter % 200;
if (mod === 0 && window.progressCounter > 0) {
window.barFull = true;
} else if (!window.barFull) {
window.currentProgress = mod; // temp for calc
}
if (window.barFull) {
window.currentProgress = 200; // force stay full
} else {
window.currentProgress = mod;
}
// if full, stay 100% until cleared
var percent = (window.currentProgress / 200) * 100;
$('#progressBar').css('width', percent + '%');
}

function clearBlocksForSpace() {
// clear all falling/settled blocks to make space (called on '1' when bar full)
blocks = [];
for (var i = 0; i < MainHex.blocks.length; i++) {
MainHex.blocks[i] = [];
}
// bomb effect: boom text at center
if (MainHex) {
MainHex.texts.push(new Text(trueCanvas.width / 2, trueCanvas.height / 2 - 50, "💣 BOOM!", "bold 40px", "#e74c3c", fadeUpAndOut));
}
window.barFull = false;
window.progressCounter = 0;
window.currentProgress = 0;
updateProgressBar();
// slight delay for visual
setTimeout(function() {
if (gameState == 1) updateProgressBar();
}, 100);
}
33 changes: 24 additions & 9 deletions js/input.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,15 +103,26 @@ function addKeyListeners() {
init(1);
}
if (gameState == 2) {
init();
// after gameover, route to levels (follows full menu flow with progress etc)
$("#gameoverscreen").fadeOut();
showLevels();
}
if (gameState===0) {
resumeGame();
}
}
});

// '1' clears blocks when progress bar full (every 200 score)
keypress.register_combo({
keys: "1",
on_keydown: function() {
if (gameState == 1 && window.currentProgress >= 200) {
clearBlocksForSpace();
}
}
});

$("#pauseBtn").on('touchstart mousedown', function() {
if (gameState != 1 && gameState != -1) {
return;
Expand Down Expand Up @@ -152,33 +163,37 @@ function addKeyListeners() {

if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
$("#restart").on('touchstart', function() {
init();
canRestart = false;
// after gameover restart, route back to levels menu (follows welcome/levels/progress flow)
$("#gameoverscreen").fadeOut();
showLevels();
canRestart = false;
});

}
else {
$("#restart").on('mousedown', function() {
init();
canRestart = false;
// after gameover restart, route back to levels menu (follows welcome/levels/progress flow)
$("#gameoverscreen").fadeOut();
showLevels();
canRestart = false;
});

}
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
$("#restartBtn").on('touchstart', function() {
init(1);
canRestart = false;
// after gameover restart, route back to levels menu (follows welcome/levels/progress flow)
$("#gameoverscreen").fadeOut();
showLevels();
canRestart = false;
});

}
else {
$("#restartBtn").on('mousedown', function() {
init(1);
canRestart = false;
// after gameover restart, route back to levels menu (follows welcome/levels/progress flow)
$("#gameoverscreen").fadeOut();
showLevels();
canRestart = false;
});


Expand Down
Loading