funix
4 years ago
commit
c3fca7fc67
@ -0,0 +1,85 @@ |
|||||||
|
var riddle = ["var(--yellow)", "var(--green)", "var(--green)", "var(--red)"] |
||||||
|
|
||||||
|
var n1 = 0 |
||||||
|
var n2 = 0 |
||||||
|
var n3 = 0 |
||||||
|
var n0 = 0 |
||||||
|
|
||||||
|
var current = [] |
||||||
|
|
||||||
|
var colors = ["var(--red)", "var(--brown)", "var(--green)", "var(--blue)", "var(--yellow)", "var(--orange)", "var(--white)"] |
||||||
|
|
||||||
|
|
||||||
|
document.getElementById("choiceEl1").addEventListener("click", function() { |
||||||
|
this.style.background = colors[n0] |
||||||
|
current[0] = colors[n0] |
||||||
|
n0++ |
||||||
|
if (n0 == 7) { |
||||||
|
n0 = 0 |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
document.getElementById("choiceEl2").addEventListener("click", function() { |
||||||
|
this.style.background = colors[n1] |
||||||
|
current[1] = colors[n1] |
||||||
|
n1++ |
||||||
|
if (n1 == 7) { |
||||||
|
n1 = 0 |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
document.getElementById("choiceEl3").addEventListener("click", function() { |
||||||
|
this.style.background = colors[n2] |
||||||
|
current[2] = colors[n2] |
||||||
|
n2++ |
||||||
|
if (n2 == 7) { |
||||||
|
n2 = 0 |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
document.getElementById("choiceEl4").addEventListener("click", function() { |
||||||
|
this.style.background = colors[n3] |
||||||
|
current[3] = colors[n3] |
||||||
|
n3++ |
||||||
|
if (n3 == 7) { |
||||||
|
n3 = 0 |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
function shuffle() { |
||||||
|
let array = [0, 1, 2, 3] |
||||||
|
let currentIndex = 3, |
||||||
|
randomIndex; |
||||||
|
|
||||||
|
// While there remain elements to shuffle...
|
||||||
|
while (currentIndex != 0) { |
||||||
|
|
||||||
|
// Pick a remaining element...
|
||||||
|
randomIndex = Math.floor(Math.random() * currentIndex); |
||||||
|
currentIndex--; |
||||||
|
|
||||||
|
// And swap it with the current element.
|
||||||
|
[array[currentIndex], array[randomIndex]] = [ |
||||||
|
array[randomIndex], array[currentIndex] |
||||||
|
]; |
||||||
|
} |
||||||
|
|
||||||
|
return array; |
||||||
|
} |
||||||
|
|
||||||
|
var newShuffle = shuffle() |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function check() { |
||||||
|
|
||||||
|
for (let solve = 0; solve < 4; solve++) { |
||||||
|
r = newShuffle[solve] |
||||||
|
if (riddle[solve] == current[solve]) { |
||||||
|
document.getElementsByClassName("result")[r].style.background = "var(--black)" |
||||||
|
|
||||||
|
} else if (riddle.includes(current[solve])) { |
||||||
|
document.getElementsByClassName("result")[r].style.background = "var(--white)" |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,48 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html> |
||||||
|
|
||||||
|
<head> |
||||||
|
<meta charset="utf-8"> |
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||||
|
<title>MASTERMIND</title> |
||||||
|
<meta name="description" content=""> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
||||||
|
<link rel="stylesheet" href="style.css"> |
||||||
|
</head> |
||||||
|
|
||||||
|
<body> |
||||||
|
|
||||||
|
<!-- <div class="palette"> |
||||||
|
<div class="red" onclick="pick('red')"></div> |
||||||
|
<div class="blue"></div> |
||||||
|
<div class="green"></div> |
||||||
|
<div class="yellow"></div> |
||||||
|
<div class="orange"></div> |
||||||
|
<div class="brown"></div> |
||||||
|
</div> --> |
||||||
|
|
||||||
|
<div class="row"> |
||||||
|
<div class="choice"> |
||||||
|
<button id="choiceEl1"></button> |
||||||
|
<button id="choiceEl2"></button> |
||||||
|
<button id="choiceEl3"></button> |
||||||
|
<button id="choiceEl4"></button> |
||||||
|
</div> |
||||||
|
<div class="results"> |
||||||
|
<button class="result"></button> |
||||||
|
<button class="result"></button> |
||||||
|
<button class="result"></button> |
||||||
|
<button class="result"></button> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
<button id="check" onclick="check()">CHECK!</button> |
||||||
|
<script src="app.js" async defer></script> |
||||||
|
</body> |
||||||
|
|
||||||
|
</html> |
||||||
@ -0,0 +1,101 @@ |
|||||||
|
:root { |
||||||
|
--red: #f00; |
||||||
|
--green: rgb(39, 177, 39); |
||||||
|
--blue: #00f; |
||||||
|
--yellow: rgb(255, 238, 0); |
||||||
|
--brown: rgb(66, 26, 20); |
||||||
|
--orange: rgb(255, 102, 0); |
||||||
|
--white: #fff; |
||||||
|
--black: #000; |
||||||
|
} |
||||||
|
|
||||||
|
body, |
||||||
|
html { |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
button { |
||||||
|
width: 20px; |
||||||
|
height: 20px; |
||||||
|
border-radius: 40%; |
||||||
|
} |
||||||
|
|
||||||
|
.row { |
||||||
|
border: solid; |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
height: 60px; |
||||||
|
width: 90%; |
||||||
|
justify-content: space-evenly; |
||||||
|
margin-left: 5%; |
||||||
|
} |
||||||
|
|
||||||
|
.choice { |
||||||
|
/* border: solid; */ |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
justify-content: space-evenly; |
||||||
|
/* padding: 3px; */ |
||||||
|
width: 60%; |
||||||
|
margin: auto 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.results { |
||||||
|
/* border: solid; */ |
||||||
|
display: grid; |
||||||
|
grid-template-columns: auto auto; |
||||||
|
grid-gap: 10%; |
||||||
|
margin: auto; |
||||||
|
} |
||||||
|
|
||||||
|
.results button { |
||||||
|
/* padding: 25%; */ |
||||||
|
} |
||||||
|
|
||||||
|
.palette { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
} |
||||||
|
|
||||||
|
.palette div { |
||||||
|
width: 100%; |
||||||
|
height: 20%; |
||||||
|
} |
||||||
|
|
||||||
|
.red { |
||||||
|
background-color: var(--red); |
||||||
|
} |
||||||
|
|
||||||
|
.blue { |
||||||
|
background-color: var(--blue); |
||||||
|
} |
||||||
|
|
||||||
|
.yellow { |
||||||
|
background-color: var(--yellow); |
||||||
|
} |
||||||
|
|
||||||
|
.orange { |
||||||
|
background-color: var(--orange); |
||||||
|
} |
||||||
|
|
||||||
|
.green { |
||||||
|
background-color: var(--green); |
||||||
|
} |
||||||
|
|
||||||
|
.brown { |
||||||
|
background-color: var(--brown); |
||||||
|
} |
||||||
|
|
||||||
|
#check { |
||||||
|
width: 96%; |
||||||
|
height: 5%; |
||||||
|
position: absolute; |
||||||
|
bottom: 5px; |
||||||
|
left: 2%; |
||||||
|
border-radius: 30px; |
||||||
|
} |
||||||
Loading…
Reference in new issue