<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>simon game</title>
<link href="https://fonts.googleapis.com/css?family=Lato|Permanent+Marker|Kavivanar" rel="stylesheet">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css'>
<link rel='stylesheet prefetch' href='https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<body>
<H1></H1>
<div class="maincircle shadowbox">
<a id="btn1" class="btn1 btn btnsize"> </a>
<a id="btn2" class="btn2 btn btnsize"> </a>
<a id="btn3" class="btn3 btn btnsize"> </a>
<a id="btn4" class="btn4 btn btnsize"> </a>
<div class="innercircle ">
<div style="top: 5%; left: 12%;position:
absolute; font-size: 32pt; font-weight: bolder" class="marcfont">SIMON</div>
<div style="top: 38%; left: 5%;position: absolute;" >
<div id ="disp" class="disp ">-88-</div>
<div class="font">Count</div>
</div>
<div class="btnstart " style="top: 40%; left: 42%;">
<a id="start" class="btn"></a>
<div>Start</div>
</div>
<div id="btnstrictcontrol" class="btnstrictcontrol" style="top: 32%; right: 12%;"></div>
<div class="btnstrict" style="top: 40%; right: 8%;">
<btn id="strict" class="btn"></btn>
<div>Strict</div>
</div>
<div style="bottom: 12%; left: 35%;position: absolute;">
<input id ="onoff" unchecked data-toggle="toggle" type="checkbox">
</div>
</div>
</div>
<span class=" Monsieur_La_Doulaisefont" style="margin-left: 45%; font-size:35pt "> Simon game</span>
</body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bluebird/2.9.4/bluebird.min.js'></script>
<script src='https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/vanderdrilu/simon-game-vjMdMw */
.maincircle {
width: 500px;
height: 500px;
border: 2px solid #212121;
margin: 10% 20%;
border-radius: 300px 300px 300px 300px;
position: relative;
}
.innercircle {
width: 50%;
height: 50%;
background-color: lavender;
border: 15px solid #212121;
border-radius: 200% 200% 200% 200%;
position: absolute;
left: 25%;
top: 25%;
}
.pismo {
color: ghostwhite;
text-align: right;
font-family: "Trebuchet MS", "Lucida Sans Unicode";
}
.btnred {
background-color: brown;
}
body {
background-image: url(http://4.bp.blogspot.com/_4MehpqzcQVE/TNN-7f_sTEI/AAAAAAAAAg4/PyreN9jFrdo/s1600/pipe+shelves8.jpg);
background-repeat: no-repeat;
background-position: 0px 0%;
}
.btn:focus,
.btn:hover,
.btn:visited {
color: ghostwhite;
text-decoration: none !important;
/* outline: none !important;*/
}
.btnsize {
width: 50.1%;
height: 50.1%;
border-radius: 100% 0 0 0;
position: absolute;
border: 20px solid;
display: block;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes blick1 {
50% {
color: transparent;
}
}
@keyframes blick1 {
50% {
color: transparent;
}
}
.btn1 {
background-color: #2f7421;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
left: 0%;
top: 0%;
}
.btn2 {
background-color: darkgoldenrod;
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
left: 0%;
bottom: 0%;
}
.btn3 {
background-color: #0f0fd6;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
right: 0%;
bottom: 0%;
}
.btn4 {
background-color: red;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
top: 0%;
right: 0%;
}
.btnstart {
width: 30px;
height: 30px;
background-color: red;
border: 4px solid;
border-radius: 200px 200px 200px 200px;
position: absolute;
color: black;
font-size: 12pt;
}
.btnstrict {
width: 30px;
height: 30px;
background-color: yellow;
border: 4px solid;
border-radius: 200px 200px 200px 200px;
position: absolute;
color: black;
font-size: 12pt;
}
.btnstrictcontrol {
width: 10px;
height: 10px;
background-color: beige;
border: 1px solid;
border-radius: 10px 10px 10px 10px;
position: absolute;
}
.disp {
width: 50px;
height: 35px;
background-color: #800000;
border: 3px double black;
box-shadow: -2px 2px 8px red;
overflow: hidden;
box-shadow: inset -2px 1px 5px 0px rgba(242, 233, 233, 0.75);
font-size: 18px;
font-weight: bold;
color: rgba(31, 0, 0, 0.26);
border-radius: 12px 12px 12px 12px;
text-align: center;
}
.font {
text-align: center;
font-size: 12pt;
}
.shadowbox {
box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.6), -3px 4px 12px rgba(0, 0, 0, 0.5), -4px 6px 15px rgba(0, 0, 0, 0.4), -5px 8px 18px rgba(0, 0, 0, 0.3);
}
.latofont {
font-family: 'Lato', sans-serif;
}
.fixfont {
font-family: 'Permanent Marker', cursive;
}
.Kavi {
font-family: 'Kavivanar', cursive;
}
.marcfont {
font-family: 'Marck Script', cursive;
}
H1 {
margin: -5% 27%;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: 800%;
color: #800000;
position: fixed;
}
/*Downloaded from https://www.codeseek.co/vanderdrilu/simon-game-vjMdMw */
$(document).ready(function () {
var zvuk = {
1: "https://s3.amazonaws.com/freecodecamp/simonSound1.mp3",
2: "https://s3.amazonaws.com/freecodecamp/simonSound2.mp3",
3: "https://s3.amazonaws.com/freecodecamp/simonSound3.mp3",
4: "https://s3.amazonaws.com/freecodecamp/simonSound4.mp3",
5: "http://soundbible.com/grab.php?id=172&type=mp3",
6: "http://soundbible.com/grab.php?id=1003&type=mp3",
7: "https://www.soundjay.com/misc/fail-trombone-02.mp3"
};
var farba = {
1: 'rgba(47, 116, 33, 1)',
2: 'darkgoldenrod',
3: 'rgb(15, 15, 214',
4: 'red'
};
var isplayBoo = false;
var onoff = false;
var strictEnabled = false;
var a = {
1: new Audio(zvuk["1"]),
2: new Audio(zvuk["2"]),
3: new Audio(zvuk["3"]),
4: new Audio(zvuk["4"]),
5: new Audio(zvuk["5"]),
6: new Audio(zvuk["6"]),
7: new Audio(zvuk["7"])
};
a.defaultplaybackRate = 1.0;
var timefactor = 1;
var history = [];
var counter = 0;
var ID = {
random: 0,
n: 0
};
var timeoutkey;
$('a').click(function () {
if (onoff === true && isplayBoo == false) {
var select = $(this);
id = select.attr('id');
ID.n = id[3];
if (id == 'start') {
rigthtimestop();
timeoutkey = setTimeout(function () {
rigthtime();
}, 10000);
gameset();
fromrecord(0);
}
else {
a[ID.n].play();
/* $('#btn' + nId).css('animation', 'blick1 0.5s');*/
$('#btn' + ID.n).css('background-color', 'whitesmoke');
navratoriginalnejfarby(ID.n);
/* $('#btn' + nId).css('background-color', farba[nId]);*/
if (history[counter] == ID.n) {
/*good*/
if (counter == history.length - 1) {
/*ak je to posledný pridaj ďalší ťah */
if (history.length == 12) {
win(0, 4, 0.1);
a['6'].play();
reset();
}
else {
gameset();
isplayBoo = true;
counter = 0;
setTimeout(function () {
fromrecord(0);
}, 1200);
}
/*plus jedna sekunda a spustí záznam*/
}
else {
counter++;
}
číslovač();
}
else {
/*wrong*/
a['5'].play();
Wrong();
}
}
}
});
function rigthtime() {
a['7'].play();
$('#disp').text("! !");
$('#disp').css('animation', 'blick1 0.5s');
setTimeout(function () { Wrong(); }, 3000);
}
function rigthtimestop() {
clearTimeout(timeoutkey);
}
function číslovač() {
$('#disp').text(history.length);
}
function win(y, x, t) {
timefactor = t;
isplayBoo = true;
if (x == 0)
x = 4;
if (y < 100) {
$('#btn' + x).css('background-color', 'whitesmoke');
navratoriginalnejfarby(x);
y += 1;
t += 0.01;
x -= 1;
{
}
$('H1').text('You win');
}
else {
isplayBoo = false;
$('H1').empty();
}
setTimeout(function () { win(y, x, t); }, 400 * timefactor);
}
function gameset() {
ID.random = random_button();
history.push(ID.random);
}
function random_button() {
return Math.floor(Math.random() * 4 + 1);
}
function reset() {
$('H1').empty();
counter = 0;
history = [];
}
function fromrecord(x) {
rigthtimestop();
isplayBoo = true;
timefactor = 1 / (1.8 * history.length / ((x + 1) / 0.4));
return Promise.delay(800 * timefactor)
.then(function () {
if (x < history.length) {
a[history[x]].play();
$('#btn' + history[x]).css('background-color', 'whitesmoke');
navratoriginalnejfarby(history[x]);
return fromrecord(x += 1);
}
else {
isplayBoo = false;
timeoutkey = setTimeout(function () {
rigthtime();
}, 6000);
}
});
}
function navratoriginalnejfarby(twoID) {
setTimeout(function () {
$('#btn' + twoID).css('background-color', farba[twoID]);
}, 300 * timefactor);
}
/*zvyšné tlačítka switch a strict*/
$('#strict').click(function () {
if (strictEnabled === true) {
strictEnabled = false;
$('#btnstrictcontrol').css('background-color', 'beige');
}
else {
$('#btnstrictcontrol').css('background-color', 'orange');
strictEnabled = true;
}
});
$('#onoff').change(function () {
if ($('#onoff').prop('checked')) {
onoff = true;
$('#disp').css('color', '#FF0000');
$('#disp').text('--');
$('#disp').css('animation', 'blick1 1s');
}
else {
onoff = false;
$('#disp').css('color', '#990000');
$('#disp').text('-88-');
$('#disp').css('animation', 'blick1 1s');
reset();
}
});
function Wrong() {
if (strictEnabled === true) {
reset();
}
else {
counter = 0;
číslovač();
/*plus jedna sekunda a spustí záznam*/
setTimeout(function () {
fromrecord(0);
}, 1500);
}
}
});