<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
</div>
</div>
var combination = new Array();
var result = '';
var userResult = '';
var int;
var correctCombination = 0
var localStorage;
localStorage.clickcount = 0;
var instructionModal = new bootstrap.Modal(document.getElementById('staticBackdropInstruction'), {
backdrop: 'static',
keyboard: false
});
var scoreModal = new bootstrap.Modal(document.getElementById('staticBackdropScore'), {
backdrop: 'static',
keyboard: false
});
/** open instruction on load **/
function openInstruction() {
instructionModal.show()
}
/** open score after complete a game **/
function openScore() {
scoreModal.show();
document.getElementById("nextGameLink").setAttribute("href", "../Game-4/index.html");
}
//generate unique combination
function makeid(length) {
var characters = ["P", "B", "G", "Y", "O", "R"];
var charactersLength = characters.length;
for (var i = 0; i < length; i++) {
var rand_num = Math.floor(Math.random() * (charactersLength - i))
var x = characters.indexOf(characters[rand_num]);
combination[i] = characters[rand_num];
document.getElementById("char_" + i).innerHTML = combination[i];
characters.splice(x, 1);
}
console.log(combination);
result = combination.join('');
//return result;
}
//get user combination value
function getLensValue(lensValue) {
console.log("user select = " + lensValue);
userResult += lensValue;
//user_combination.push(xyz);
//console.log(user_combination);
if (typeof (Storage) !== "undefined") {
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
localStorage.clickcount = 1;
}
// document.getElementById("result").innerHTML = "You have clicked the button " + localStorage.clickcount + " time(s).";
console.log("You have clicked the button " + localStorage.clickcount + " time(s).");
if (localStorage.clickcount == 3) {
console.log("3 times click");
checkMatch();
localStorage.clickcount = 0;
}
} else {
console.log("Sorry, your browser does not support web storage...");
}
}
// match combination
function checkMatch() {
console.log(result);
console.log(userResult);
if (result == userResult) {
console.log("match combination");
userResult = '';
makeid(3);
correctCombination = correctCombination + 1;
showDots(correctCombination);
} else {
console.log("please try again");
// animate__animated animate__tada
var element = document.getElementById("shakingError");
element.classList.add("animate__tada");
element.classList.add("border-error");
//remove shaking error classes after few second
setTimeout(function () {
element.classList.remove('animate__tada');
element.classList.remove("border-error");
}, 2000);
makeid(3);
userResult = '';
}
uncheckRadio();
}
//uncheck previous radio
function uncheckRadio() {
for (var i = 0; i < 6; i++) {
var radioButton = document.getElementById("getLensValue_" + i);
radioButton.checked = false;
}
}
//check combination
function showDots(total) {
console.log("Total Combinations = " + total)
i = 1;
while (i <= 6) {
if (total == i) {
var element = document.getElementById("dot_" + i);
element.classList.remove("d-opacity");
//for winning condition
if (total == 6) {
//alert("you won");
clearInterval(int);
score = $('.count');
//disabled radio
for (var i = 0; i < 6; i++) {
document.getElementsByClassName("checkClick")[i].setAttribute("disabled", "disabled");
}
//confirm("You Scored => " + score.html());
$(".game-score").html(score.html());
openScore()
}
} else {
console.log("no");
}
i++;
}
}
//counter
function count() {
display = $('.count');
from = display.html();
to = 0;
difference = (from > to) ? from - to : to - from;
//console.log(difference);
speed = 30000 / difference;
int = setInterval(function () {
if (from > to) {
from--;
display.text(from);
if (from == 0) {
//confirm("You Loose");
$(".game-score").html(from);
openScore()
}
} else {
clearInterval(int);
}
}, speed);
}
//count();
makeid(3)
var int;
var instructionModal = new bootstrap.Modal(document.getElementById('staticBackdropInstruction'), {
backdrop: 'static',
keyboard: false
});
var scoreModal = new bootstrap.Modal(document.getElementById('staticBackdropScore'), {
backdrop: 'static',
keyboard: false
});
/** open instruction on load **/
function openInstruction() {
instructionModal.show()
}
/** open score after complete a game **/
function openScore() {
scoreModal.show();
document.getElementById("nextGameLink").setAttribute("href", "../secret-mission/index.html");
}
function count() {
display = $('.fStopTimer');
from = display.html();
to = 0;
difference = (from > to) ? from - to : to - from;
//console.log(difference);
speed = 30000 / difference;
int = setInterval(function() {
if (from > to) {
from--;
display.text(from);
if (from == 0) {
//confirm("You Loose your score is => " + from);
$(".game-score").html(from);
openScore();
}
} else {
clearInterval(int);
}
}, 100);
}
//count();
$('input[type=radio][name=proteinLens]').change(function() {
if (this.value == 'true') {
clearInterval(int);
var val = $('.fStopTimer');
var score = val.html(); /* score */
$("#changeImgAcc2ProteinLens").css({
"filter": "blur(0px)"
})
//confirm("Your score is => " + score);
console.log("Apperture = " + this.value);
$(".game-score").html(score);
openScore();
for (var i = 0; i < 6; i++) {
document.getElementsByClassName("protienRadio")[i].setAttribute("disabled", "disabled");
}
} else {
var errorProtien = $('#shakingErrorProtien');
errorProtien.addClass("animate__tada border-error")
//remove shaking error classes after few second
setTimeout(function() {
errorProtien.removeClass("animate__tada border-error")
}, 1500);
}
});
var instructionModal = new bootstrap.Modal(document.getElementById('staticBackdropInstruction'), {
backdrop: 'static',
keyboard: false
});
var scoreModal = new bootstrap.Modal(document.getElementById('staticBackdropScore'), {
backdrop: 'static',
keyboard: false
});
/** open instruction on load **/
function openInstruction() {
instructionModal.show()
}
/** open score after complete a game **/
function openScore() {
scoreModal.show()
document.getElementById("nextGameLink").setAttribute("href", "../Game-3/index.html");
}
var int;
function count() {
display = $('.fruitCatchertimer');
from = display.html();
to = 0;
difference = (from > to) ? from - to : to - from;
//console.log(difference);
speed = 30000 / difference;
int = setInterval(function() {
if (from > to) {
from--;
display.text(from);
if (from == 0) {
//confirm("You Loose your score is => " + from);
$(".game-score").html(from);
openScore();
}
} else {
clearInterval(int);
}
}, 10);
}
function stopTimer() {
clearInterval(int);
var val = $('.fruitCatchertimer');
var score = val.html();
//confirm("Your score is => " + score);
$(".game-score").html(score);
openScore();
}
