renx777
12/30/2017 - 4:44 PM
Simon game
Simon game
html,body{
height:100%;
width:100%;
}
h1{
font-size:100px;
font-family:josefin slab;
text-align:center;
color:black;
margin-top:10px;
}
#count {
text-align: center;
height: 40px;
width: 50px;
background: #32050C;
border: 4px solid black;
border-radius: 10px;
}
span {
text-align: center;
font-size: 30px;
color: #DC0D29;
}
div {
text-align: center;
}
body {
background-image:url("https://cdn.elegantthemes.com/blog/wp-content/uploads/2013/09/bg-8-full.jpg") ;
}
.wrapper {
position: relative;
width: 500px;
margin: 0 auto;
margin-top:-60px;
}
.back {
positon: absolute;
top: 240px;
width: 500px;
height: 500px;
z-index: 0;
background-color: #000;
border-radius: 50%;
border: 10px solid black;
border: 6px outset black;
box-shadow: 0 15px 10px black ;
}
.pad {
width: 230px;
height: 230px;
float: left;
z-index: 1;
margin: 10px;
}
.yellow.light {
background-color: #fed93f;
}
.blue.light {
background-color: #1c8cff;
}
.red.light {
background-color: #ff4c4c;
}
.green.light {
background-color: #13ff7c;
}
.green {
border-top-left-radius: 300px;
background-color: #00a74a;
}
.red {
float: left;
border-top-right-radius: 300px;
background-color: #9f0f17;
clear: right;
}
.blue {
float: right;
border-bottom-right-radius: 300px;
background-color: #094a8f;
clear: right;
}
.yellow {
float: left;
border-bottom-left-radius: 300px;
background-color: #cca707;
clear: left;
}
.circle {
width: 250px;
height: 250px;
border-radius: 50%;
margin-left: 23%;
margin-top: 23%;
background-color: #D3D3D3;
position: absolute;
text-align: center;
border: 10px solid black;
z-index: 10;
}
.button {
position: relative;
}
#strictBtn {
font-family: OpenSans;
color: red;
background-color: yellow;
border: 5px solid black;
border-radius: 100%;
box-shadow: 0px 2px 0px grey;
position: absolute;
top: 0px;
transition: all ease 0.3s;
margin-top: 50%;
margin-left: 50px;
}
#startBtn:active {
box-shadow: 0 1px 0 black;
top: 3px;
}
input {
width: 30px;
height: 30px;
}
#startBtn {
color: red;
background-color: red;
border: 5px solid black;
border-radius: 100%;
box-shadow: 0px 2px 0px grey;
position: absolute;
top: 0px;
transition: all ease 0.3s;
margin-top: 50%;
}
#strictBtn:active {
box-shadow: 0 1px 0 black;
top: 3px;
}
#star {
margin-top: 63%;
margin-left: 30px;
}
#stri {
margin-top: -39px;
margin-left: 130px;
}
#count {
margin-top: -90px;
margin-left: 30px;
}
#cou {
margin-left: -130px;
margin-top: 3px
}
.onoffswitch {
position: relative;
width: 90px;
margin-left:80px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #999999;
border-radius: 20px;
}
.onoffswitch-inner {
display: block;
width: 200%;
margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before,
.onoffswitch-inner:after {
display: block;
float: left;
width: 50%;
height: 30px;
padding: 0;
line-height: 30px;
font-size: 14px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "ON";
padding-left: 10px;
background-color: red;
color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "OFF";
padding-right: 10px;
background-color: #08090A;
color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 18px;
margin: 6px;
background: #FFFFFF;
position: absolute;
top: 0;
bottom: 0;
right: 56px;
border: 2px solid #999999;
border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}
#strictLight {
font-family: OpenSans;
color: red;
background-color: #32050C;
height:15px;
width:15px;
border-radius: 100%;
border:2px solid black;
position: absolute;
top: 0px;
transition: all ease 0.3s;
margin-top:-55%;
margin-left:57px;
}
@media screen and (max-width: 500px) {
.wrapper {
top: 40px;
-moz-transform: scale(0.6);
-ms-transform: scale(0.6);
-o-transform: scale(0.6);
-webkit-transform: scale(0.6);
transform: scale(0.6);
-o-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
left: 50%;
margin-left: -142px;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
var simon;
$(document).ready(function () {
$(".pad").css("pointer-events", "none");
var sequence = [];
var userguess = [];
simon = {
onbutton: false,
startbutton: false,
count: 1,
strictmode: false,
generateseq: function () {
var rand = [".yellow", ".green", ".red", ".blue"];
var id = Math.floor(Math.random() * rand.length);
sequence.push(rand[id]);
},
lightup: function () {
var j = 0;
var k = sequence;
console.log(sequence)
$('.pad').css("pointer-events", "none")
var m = setTimeout(function () {
$('.pad').css("pointer-events", "auto")
}, k.length * 1000)
var l = setInterval(changecol, 1000);
function changecol() {
$(k[j]).addClass('light');
if (k[j] === ".green") {
var a = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound1.mp3");
a.play();
} else if (k[j] === ".red") {
var a = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound2.mp3")
a.play();
} else if (k[j] === ".blue") {
var a = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound3.mp3");
a.play();
} else if (k[j] === ".yellow") {
var a = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound4.mp3")
a.play();
}
setTimeout(function () {
$(k[j]).removeClass('light');
j++
}, 600);
}
if (j > k.length - 1) {
clearInterval(l);
};
},
check: function (l) {
if (l !== sequence[p]) {
if (this.strictmode === true) {
sequence = [];
this.count = 1;
userguess = [];
console.log(sequence)
this.generateseq();
console.log(sequence)
this.lightup();
setTimeout(function () {
$('#cnt').text("!!");
}, 300)
setTimeout(function () {
$('#cnt').text(simon.count)
}, 600);
} else {
this.lightup();
this.count++;
p++
}
} else {
userguess.push(l);
p++;
}
// console.log(userguess);
// console.log(sequence)
if (userguess.length == sequence.length) {
this.generateseq();
this.count++;
$('#cnt').text(simon.count);
this.lightup();
userguess = [];
p = 0;
// console.log(userguess);
// console.log(sequence)
}
},
userinput: function (s) {
var l = "." + s;
if (l === ".green") {
var a = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound1.mp3");
a.play();
} else if (l === ".red") {
var a = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound2.mp3")
a.play();
} else if (l === ".blue") {
var a = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound3.mp3");
a.play();
} else {
var a = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound4.mp3")
a.play();
}
$(l).addClass('light');
setTimeout(function () {
$(l).removeClass('light');
}, 300);
this.check(l);
}
}
var p = 0;
$('#strictBtn').on('click', function () {
console.log(sequence)
if (simon.strictmode == false) {
simon.strictmode = true;
$('#strictLight').css('background-color', '#DC0D29')
} else {
simon.strictmode = false;
$('#strictLight').css('background-color', '#32050C')
}
})
$('#startBtn').on('click', function () {
simon.startbutton = true;
if (simon.onbutton == true && simon.startbutton == true) {
console.log(sequence)
$(".pad").css("pointer-events", "auto");
simon.generateseq();
simon.lightup();
$('#cnt').text(simon.count);
}
})
$("#myonoffswitch").on('click', function () {
if ($('#myonoffswitch').is(":checked")) {
simon.onbutton = true;
} else {
simon.onbutton = false;
$(".pad").css("pointer-events", "none");
location.reload(true)
$('#cnt').text('--')
}
})
})
<body>
<h1>Simon Game</h1>
<div class="wrapper">
<div class="back">
<div class="pad green" id="green" onclick="simon.userinput(this.id)">
</div>
<div class="pad red" id="red" onclick="simon.userinput(this.id)">
</div>
<div class="pad blue" id="blue" onclick="simon.userinput(this.id)">
</div>
<div class="pad yellow" id="yellow" onclick="simon.userinput(this.id)">
</div>
<div class="circle">
<div class="button">
<input type="button" id="strictBtn" value="">
</div>
<div class="button">
<input type="button" id="startBtn" value="" >
</div>
<h4 id="star">start</h4>
<h4 id="stri">strict</h3>
<div id="count">
<span id="cnt">--</span>
</div>
<h4 id="cou">count</h4>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<div class="button">
<input type="button" id="strictLight" value="" >
</div>
</div>
</body>