Mastermind

Developer
Alexandr
Size
7,180 Kb
Views
52,624
  1. Mastermind Previews
  2. Mastermind HTML Codes
  3. Mastermind CSS Codes
  4. Mastermind JS Codes

How do I make an mastermind?

Mastermind or Master Mind is a code-breaking game for two players. It's a developing game for children. The modern game with pegs was invented in 1970 by Mordecai Meirowitz, an Israeli postmaster and telecommunications expert. It resembles an earlier pencil and paper game called Bulls and Cows that may date back a century or more. . What is a mastermind? How do you make a mastermind? This script and codes were developed by Alexandr on 30 July 2022, Saturday.

Mastermind Previews
IQ Test

Mastermind - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Mastermind</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet" type="text/css"/>
<body> <a class="a-github" href="http://aortan1.github.io/mastermind/" target="_blank"></a>
<h1>Mastermind</h1>
<div class="secrets "><div class="secret"></div><div class="secret"></div><div class="secret"></div><div class="secret"></div><div class="secret"></div><div class="secret fonc"></div></div>
<div class="game">
<div class="field" title="Разгадайте загаданную политру цветов в правильном порядке. Белая фишка - угадан цвет. Чёрная - угадан цвет и место.">
<h5 class="ruls" > <a href="http://rvgames.de/ru/otgadyvanie-mastermind.htm" target="_blank">Правила игры</a> <br> <a href="https://www.youtube.com/watch?v=OPeBUDXKGqA&list=LLzO7zUh_0jaWJtyEpEXY2wA&index=10" target="_blank">How to play</a> <input type="button" class = "sample" name = "inp_sample" value="SAMPLE" onclick="FunSample()">
</h5> <ul class="attempts"> <li> <h2>8</h2> <div class="result" d-f="0"><b></b><b></b><b></b><b></b><em></em></div> <div class="attempt"><i></i><i></i><i></i><i></i><tt></tt></div> </li> <li> <h2>7</h2> <div class="result" d-f="0"><b></b><b></b><b></b><b></b><em></em></div> <div class="attempt"><i></i><i></i><i></i><i></i><tt></tt></div> </li> <li> <h2>6</h2> <div class="result" d-f="0"><b></b><b></b><b></b><b></b><em></em></div> <div class="attempt"><i></i><i></i><i></i><i></i><tt></tt></div> </li> <li> <h2>5</h2> <div class="result" d-f="0"><b></b><b></b><b></b><b></b><em></em></div> <div class="attempt"><i></i><i></i><i></i><i></i><tt></tt></div> </li> <li> <h2>4</h2> <div class="result" d-f="0"><b></b><b></b><b></b><b></b><em></em></div> <div class="attempt"><i></i><i></i><i></i><i></i><tt></tt></div> </li> <li> <h2>3</h2> <div class="result" d-f="0"><b></b><b></b><b></b><b></b><em></em></div> <div class="attempt"><i></i><i></i><i></i><i></i><tt></tt></div> </li> <li> <h2>2</h2> <div class="result" d-f="0"><b></b><b></b><b></b><b></b><em></em></div> <div class="attempt"><i></i><i></i><i></i><i></i><tt></tt></div> </li> <li> <h2>1</h2> <div class="result" d-f="0"><b></b><b></b><b></b><b></b><em></em></div> <div class="attempt"><i></i><i></i><i></i><i></i><tt></tt></div> </li> </ul>
</div>
<div class="fild_buttons" title="Разгадайте загаданную политру цветов в правильном порядке. Чёрная фишка - угадан цвет и место. Белая - угадан только цвет."> <div class="buttons"> <form action="" name = "form_color" > <input type="button" class = "bcol b_white" name = "inp_color" value="1" onclick="FunColor(this)"> <input type="button" class = "bcol b_lilac" name = "inp_color" value="2" onclick="FunColor(this)" > </input> <input type="button" class = "bcol b_yellow" name = "inp_color" value="3" onclick="FunColor(this)"> </input> <input type="button" class = "bcol b_green" name = "inp_color" value="4" onclick="FunColor(this)"> </input> <input type="button" class = "bcol b_red" name = "inp_color" value="5" onclick="FunColor(this)"> </input> <input type="button" class = "bcol b_blue" name = "inp_color" value="6" onclick="FunColor(this)"> </input> <input type="button" class = "bcol b_pink" name = "inp_color" value="7" onclick="FunColor(this)"> </input> <input type="button" class = "bcol b_dark" name = "inp_color" value="8" onclick="FunColor(this)"> </input> <input type="button" class = "bcol b_cansel" name = "inp_cansel" value="Cancel" onclick="FunColor(this)"> </input> </form> <!-- value="DO IT." -->
</div>
</div>
</body> <script src="js/index.js"></script>
</body>
</html>

Mastermind - Script Codes CSS Codes

body {background: linear-gradient(to top, #8cd890, #0372ff);
height: 960px;
}
* { padding: 0; margin: 0; outline: none;
}
ul { list-style: none;
}
/*#myDIV {background-color: #fff;} */
h1 {
display: block;
width: 280px;
color: #55b618;
background-color: transparent;
font-family: 'Pacifico', arial;
font-size: 55px;
font-weight: 300;
padding: 0 20px 0 20px;
margin: 70px auto 5px;
border-radius: 20px;
border: 0px solid red;
}
a.a-github { display: block; position: absolute; z-index: 100; top: 70px; width: 100%; height: 750px; border: 0px solid black; cursor: crosshair;
}
h2 {
float: left;
font-family: 'Pacifico', cursive;
color: #002618;
font-size: 25px;
display: block;
position: absolute;
padding: 10px -10px 0 0;
}
h5.ruls {
display: block;
position: absolute;
top: 20px;
right: 35px;
height: 20px;
padding: 5px 5px 0 0px;
text-align: left;
}
h5.ruls a { padding-left: 5px ; line-height: 25px; font-family: 'Roboto', cursive; color: #009688;
}
input.sample { display: block; width: 100px; height: 100px; border-radius: 50%; margin: 20px 0px 0 0; font-size: 18px; color: white; background-color: #55b618;
}
.game{ width: 600px; height: 600px; margin: 0px auto; border-radius: 40px; }
.field { position: relative; height: 500px; border-radius: 40px 40px 0 0 ; border: 1px solid transparent;}
li { height: 100px;}
ul.attempts { padding: 20px 0 0 20px; }
ul.attempts li{ margin-bottom: -40px; }
div.attempt i,div.attempt tt{
display:inline-block;
float: left;
width: 40px;
height: 40px;
border-radius: 50% ;
margin: 0px 0px 0px 15px;
}
div.attempt tt{ display:none;}
div.secrets .secret{
display:inline-block;
width: 50px;
height: 50px;
border-radius: 50% ;
border: 1px solid black;
background-color: black;
margin: 0px 0px 0px 15px;
}
div.secret:nth-child(5){ display: none;
}
.secrets { width: 350px;
/* margin-left: 150px; */ margin: 5px auto 5px; padding: 0 0 0 46px; }
div.result {
float:left;
width: 50px;
height: 50px;
border-radius: 10px ;
border: 1px solid black;
margin: 0px 70px 0px 30px;
padding: 0px 5px 5px 0;
-webkit-box-sizing: border-box; -moz-box-sizing:border-box; box-sizing:border-box;
border: 2px solid #444444;
}
div.result b, div.result em {
float: left;
display:block;
width: 5px;
height: 5px;
border-radius: 50% ;
border: 1px solid black;
margin: 8px 0px 0px 8px;
background-color: #aaaaaa;
border: 3px solid #444444;
}
div.result em {
display: none;
position: relative;
top: -28px;
left: 9px;
}
div.fild_buttons { width: 600px;
}
.fild_buttons .buttons { width: 600px; display: flex; flex-direction: row; justify-content: space-around; margin-top: 18px;
/* margin: 18px auto; */
/* margin-left: 20px; */ }
.fild_buttons .buttons input {
/* display:inline-block; margin: 8px; */ margin: 0 8px; justify-content: space-around; width: 60px; height: 60px; border-radius: 50%; color: transparent; }
.fild_buttons .buttons input.b_pink, .fild_buttons .buttons input.b_dark{ display: none;}
.n-4-6 div.secret:nth-child(5),
.n-4-6 .fild_buttons .buttons input:nth-child(7),
.n-4-6 .fild_buttons .buttons input:nth-child(8),
.n-4-6 div.attempt tt, .n-4-6 div.result em
{display:none;}
.n-4-6 h5.ruls { right: 35px;}
.n-4-6 input.sample {display: block;}
.n-4-6 .fild_buttons .buttons input { width: 60px; height: 60px; margin: 0 8px;
}
.n-4-6 div.result{ margin-right: 70px;}
.n-4-6 div.secrets .secret{
width: 50px;
height: 50px;}
.n-5-8{background: linear-gradient(to top, #512DA8, #00796B); transition: 5s;}
.n-5-8 div.secret:nth-child(5),
.n-5-8 .fild_buttons .buttons input:nth-child(7),
.n-5-8 .fild_buttons .buttons input:nth-child(8)
{display:inline-block;}
.n-5-8 div.attempt tt, .n-5-8 div.result em
{display:block;}
.n-5-8 h5.ruls { right: 15px;}
.n-5-8 input.sample {display: none;}
.n-5-8 .fild_buttons .buttons input { width: 50px; height: 50px; margin: 5px;
}
.n-5-8 div.result{ margin-right: 60px;}
.n-5-8 div.secrets .secret{
width: 45px;
height: 45px;}
.secrets { opacity: 0;}
.game{ background-color: #455658; border: 1px solid #444444;}
.field{ border-bottom: 2px solid #557668; background: linear-gradient(to top, #556668, #DDDCCD);}
div.attempt i,div.attempt tt{
background: #B6B6B6;
border: 1px solid #33695B; }
div.result {border: 2px solid #444444;}
div.result b, div.result em{
background-color: #CDDCb9;
border: 3px solid #444444;
}
.fild_buttons input.b_cansel{
color: black; background-color: #607D8B;
}
h1.rai { color: white; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; font-size: 20px; background: "#388E3C"; background: -moz-linear-gradient( top , rgba(255, 0, 0, 1) 0%, rgba(255, 255, 0, 1) 15%, rgba(0, 255, 0, 1) 30%, rgba(0, 255, 255, 1) 50%, rgba(0, 0, 255, 1) 65%, rgba(255, 0, 255, 1) 80%, rgba(255, 0, 0, 1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 0, 0, 1)), color-stop(15%, rgba(255, 255, 0, 1)), color-stop(30%, rgba(0, 255, 0, 1)), color-stop(50%, rgba(0, 255, 255, 1)), color-stop(65%, rgba(0, 0, 255, 1)), color-stop(80%, rgba(255, 0, 255, 1)), color-stop(100%, rgba(255, 0, 0, 1)));
}
.b_white {background-color: #fff;}
.b_lilac {background-color: #9C27B0;}
.b_yellow{background-color: #FFC107;}
.b_green {background-color: #388E3C;}
.b_red {background-color: #D32F2F;}
.b_blue {background-color: #1976D2;}
.b_pink {background-color: #FF90a1;}
.b_dark {background-color: #202F8F;}
.ra {width: 300px;
border: 5px solid red;}
/* .fonc {padding-left: 40px; display: none;} */
.fonc {padding-left: 40px; display: none !important;}

Mastermind - Script Codes JS Codes

var n = 4; // число ячеек в строке
var n_colors = 6; // число вариантов цветов
var n_at=8; // число попыток или строк по 4 яцейки.
// if (sup==1) { n = 4;}
// alert (window.location.sup);
var Itags = document.getElementsByTagName("i");
var Btags = document.getElementsByTagName("b");
var Secrets = document.getElementsByClassName("secret");
var Fon = document.getElementsByClassName("fonc");
var Htag = document.getElementsByTagName("h1");
var Sec = document.getElementsByClassName("secrets");
var Att = document.getElementsByClassName("attempt");
var Sample = document.getElementsByClassName("sample");
var Butt = document.getElementsByClassName("bcol");
var Bod = document.getElementsByTagName("body");
window.onload=function(){
if (n==5) {Htag[0].style.width = "300px"; Htag[0].innerHTML="<h2>Ultimate</h2> Mastermind"; }
if (n==4) { // Htag[0].classList.add("raiii"); // alert("cont="+Htag[0].classList.contains('raiii')); // alert("leng="+document.getElementsByTagName("body")[0].classList.length); // МЕТОД classList ТУПО НЕ РАБОТАЕТ, И НА НЁМ ПРЕРЫВАЕТСЯ ВЫПОЛНЕНИЕ ДЖИ-ЕС. ПОЧЕМУ - ПОТОМУ ЧТО СТРАНИЦА ЕЩЁ НЕ ЗАГРУЗИЛАСЬ, А ДЖИ ЭС УЖЕ ИЩЕТ ТЕГ БАДИ. Bod[0].classList.add('n-4-6');}
if (n==5) { Bod[0].classList.add('n-5-8'); n_colors = 8; Itags = document.querySelectorAll("i,tt"); Btags = document.querySelectorAll("b,em"); } }; // alert(Itags.length);
var Secrets = document.getElementsByClassName("secret");
var Fon = document.getElementsByClassName("fonc");
var Htag = document.getElementsByTagName("h1");
var Sec = document.getElementsByClassName("secrets");
var Att = document.getElementsByClassName("attempt");
var Sample = document.getElementsByClassName("sample");
var Butt = document.getElementsByClassName("bcol");
function rand_till(n){ // если a = 6, ф-я выдаёт случайное из набора целых от 0 до 5.
var aa=Math.random();
var aaa = Math.floor(aa*n);
if (aaa == n) {aaa=0;}
return Math.floor(aa*n);
}
function FunSample() { var opac = window.getComputedStyle(document.getElementsByClassName("secrets")[0]).opacity;
if (opac==1) { window["location"].reload(true);
} // function go() { return; } for (var i = 0; i < n*n_at; i++ ){ // for (var j = 0; j < 77999; j++ ){ a=1;} // sleep(1000); //FunColor(Butt[rand_till(n_colors)]); setInterval(FunColor(Butt[rand_till(n_colors)]), 1000); } // Htag[0].style.opacity=0; // alert (Sample[0].style.display); Sample[0].style.display="block"; Sample[0].value="PLAY"; Htag[0].innerHTML="Mastermind"; Htag[0].style.fontSize="55px"; Htag[0].style.color="#55b618";
}
function FunColor(but) { var pressed_color = but.value; //код цвета нажатой кнопки var colors = []; var colors_cod = []; var colors_attempt = []; var sum1, sum2; // кол-во точных совпадений и совпадений цвета var m2, x, x_now, attempt_now, at; var end_of_attempt = false; var color_def; //!!ВАЖНО менять. Цвет пустой ячейки. color_def = window.getComputedStyle(document.getElementsByClassName("fonc")[0]).backgroundColor; // var Sample = document.getElementsByClassName("sample"); Sample[0].style.display="none";
for (i = 0; i < n_colors; i++ ){ // цвета от 1 до 6. Формирую массив цветов по стилям.
colors[i]=window.getComputedStyle(document.getElementsByClassName("bcol")[i]).backgroundColor; } if (window.getComputedStyle(Secrets[0]).backgroundColor == "rgb(0, 0, 0)") { // СОЗДАНИЕ СЕКРЕТНОГО НАБОРА ЦВЕТОВ color_def=window.getComputedStyle(Itags[0]).backgroundColor; Fon[0].style.backgroundColor = color_def; for (i = 0; i < n; i++ ){ colors_cod[i] = colors[rand_till(n_colors)]; Secrets[i].style.backgroundColor = colors_cod[i]; } } // Перебор ячеек i и определение текущей ячейки x_now и текущей попытки attempt_now j=n; at=1; for (i = n_at*n; i > 0; i-- ){ x=i-j; j=j-2; if (j == (-1)*n) {j=n;end_of_attempt = true;} citag= window.getComputedStyle(Itags[x]).backgroundColor; // if (n==4 && (i)%5==0 ) continue; if (citag==color_def) {x_now=x; attempt_now=at; break;} if (j==n) at++; end_of_attempt = false; }
// alert(attempt_now);
// Если попытка закончилась - можно записать в атрибут д-ф 1 и не расчитывать результат, а просто закрасить ячейку, а если там уже 1, только тогда расчитывать.
// var df = document.getElementsByClassName("result")[attempt_now-1].getAttribute('d-f');//значение атрибута d-f
// if (end_of_attempt && df==0) alert ("df=0"); //if (but.value=="Cansel") alert (x_now);
var v = 0;
AttNow=Att[n_at-attempt_now];
switch (v==1){
case false:
//if (but.value=="NICE!") {window.location="http://aortan1.github.io/mastermind?sup=true";}
if (but.value=="DO IT." || but.value=="NICE!") { // window["location"].sup=1; window["location"].reload(true);
}
else if (but.value=="Cancel"){x_now--; Itags[x_now].style.backgroundColor = color_def; return; }
else Itags[x_now].style.backgroundColor =colors[pressed_color-1];
break; case true: var style = document.createElement('style'); style.type = 'text/css'; var h = '.attempt i:hover{opacity:0.5; background-color:'+colors[pressed_color-1]+ '}'; var hover = document.createTextNode(h); var head = document.getElementsByTagName('head')[0]; style.appendChild(hover); head.appendChild(style); break;} if (end_of_attempt){ for (i = 0; i < n; i++ ){
colors_cod[i]=window.getComputedStyle(Secrets[i]).backgroundColor;
colors_attempt[i]= window.getComputedStyle(Itags[x_now+i+1-n]).backgroundColor; }
sum1=0; sum2=0;
for (i = 0; i < n; i++ ){
if (colors_cod[i]==colors_attempt[i]) sum1++; }
for (i = 0; i < n; i++ ){
for (j = 0; j < n; j++ ){
if (colors_cod[i]==colors_attempt[j]) {sum2++;colors_attempt[j]=0; break;} } }
sum2 = sum2-sum1;
//alert ("Black="+sum1+" white="+ sum2);
Bcan = document.getElementsByClassName("b_cansel"); if (sum1==n) {Bcan[0].value = "NICE!"; Bcan[0].style.backgroundColor = "#FFC107"; Bcan[0].style.color="white"; } if (x_now==n-1 && sum1!=n) {Bcan[0].style.backgroundColor = "#E91E63"; Bcan[0].style.color="black"; Bcan[0].value = "DO IT."; Bcan[0].style.fontSize = "15px"; Bcan[0].style.fontWeight= "bold"; }
if (sum1==n){Htag[0].innerHTML="ПОЗДРАВЛЯЮ!!! ВЫ РАЗГАДАЛИ КОМБИНАЦИЮ ЦВЕТОВ!!!";
// Htag[0].style.backgroundColor = "#388E3C"; Htag[0].style.color="white";
// Htag[0].style.fontSize = "20px";
Htag[0].classList.add("rai");
Sec[0].style.opacity = 1;
}
if (attempt_now==n_at && sum1!=n){
Htag[0].innerHTML="Попробуйте ещё раз, у вас получится.";
Htag[0].style.color="black";
Htag[0].style.fontSize = "18px";
Sec[0].style.opacity = 1;
// Sample[0].style.display="block";
// alert (Sample[0].style.display);
}
for (i = 0; i < n; i++ ){
ii = x_now+i+1-n;
if (sum1==0 && sum2>0){sum2--;
Btags[ii].style.backgroundColor = "white";
Btags[ii].style.borderColor = "white"; }
if (sum1>0){sum1--;
Btags[ii].style.backgroundColor = "black";
Btags[ii].style.borderColor = "black"; }
} // if (bcont!="rgb(0,0,0)"&& bcont!="rgb(255,255,255)") {alert("No result yet..");} else alert("Is result..");
}
// if (bcont!="rgb(0,0,0)"&& bcont!="rgb(255,255,255)") {alert("No result yet...");} else alert("Is result...");
}
Mastermind - Script Codes
Mastermind - Script Codes
Home Page Home
Developer Alexandr
Username Aortan
Uploaded July 30, 2022
Rating 3
Size 7,180 Kb
Views 52,624
Do you need developer help for Mastermind?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Alexandr (Aortan) Script Codes
Name
Webkit-scrollbar
A Pen by Alexander
Shape-outside
Colorful flexblock
Game of Life
Color Game of Life
Overflow-wrap and white-space
Tooltips
Dir_tree
A Pen by Alexandr
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!