Página inicial Explorar Ajuda
Entrar
Mitrofanova-Natali
/
homework
Observar 1
Favorito 0
Fork 0
Arquivos Issues 0 Pull Requests 0 Wiki
Ver código fonte

add task black belt gadalka

Mitrofanova Natali 3 anos atrás
pai
2a5a358232
commit
2350872a0a
16 arquivos alterados com 454 adições e 0 exclusões
Visão dividida Mostrar estatísticas do Diff
  1. 5 0
      Gadalka/.idea/.gitignore
  2. 12 0
      Gadalka/.idea/Gadalka.iml
  3. 8 0
      Gadalka/.idea/modules.xml
  4. BIN
      Gadalka/bacgroung_fortune_teller.jpg
  5. BIN
      Gadalka/back-red_large-1024x1024.png
  6. 32 0
      Gadalka/index.html
  7. 62 0
      Gadalka/script.js
  8. 108 0
      Gadalka/style.css
  9. 5 0
      HW4. Base Structures and Loops/Gadalka/.idea/.gitignore
  10. 12 0
      HW4. Base Structures and Loops/Gadalka/.idea/Gadalka.iml
  11. 8 0
      HW4. Base Structures and Loops/Gadalka/.idea/modules.xml
  12. BIN
      HW4. Base Structures and Loops/Gadalka/bacgroung_fortune_teller.jpg
  13. BIN
      HW4. Base Structures and Loops/Gadalka/back-red_large-1024x1024.png
  14. 32 0
      HW4. Base Structures and Loops/Gadalka/index.html
  15. 62 0
      HW4. Base Structures and Loops/Gadalka/script.js
  16. 108 0
      HW4. Base Structures and Loops/Gadalka/style.css

+ 5 - 0
Gadalka/.idea/.gitignore
Ver arquivo 

@@ -0,0 +1,5 @@
 
+# Default ignored files
 
+/shelf/
 
+/workspace.xml
 
+# Editor-based HTTP Client requests
 
+/httpRequests/

+ 12 - 0
Gadalka/.idea/Gadalka.iml
Ver arquivo 

@@ -0,0 +1,12 @@
 
+<?xml version="1.0" encoding="UTF-8"?>
 
+<module type="WEB_MODULE" version="4">
 
+  <component name="NewModuleRootManager">
 
+    <content url="file://$MODULE_DIR$">
 
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
 
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
 
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
 
+    </content>
 
+    <orderEntry type="inheritedJdk" />
 
+    <orderEntry type="sourceFolder" forTests="false" />
 
+  </component>
 
+</module>

+ 8 - 0
Gadalka/.idea/modules.xml
Ver arquivo 

@@ -0,0 +1,8 @@
 
+<?xml version="1.0" encoding="UTF-8"?>
 
+<project version="4">
 
+  <component name="ProjectModuleManager">
 
+    <modules>
 
+      <module fileurl="file://$PROJECT_DIR$/.idea/Gadalka.iml" filepath="$PROJECT_DIR$/.idea/Gadalka.iml" />
 
+    </modules>
 
+  </component>
 
+</project>

BIN
Gadalka/bacgroung_fortune_teller.jpg
Ver arquivo


BIN
Gadalka/back-red_large-1024x1024.png
Ver arquivo


+ 32 - 0
Gadalka/index.html
Ver arquivo 

@@ -0,0 +1,32 @@
 
+<!doctype html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport"
 
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
+    <title>Document</title>
 
+    <link rel="stylesheet" href="style.css">
 
+</head>
 
+<body>
 
+<div id="wrapper">
 
+    <div id="card">
 
+        <div id="back-face" class="card gadalkaCard"></div>
 
+        <div id="front-face" class="card gadalkaCard">1</div>
 
+
 
+    </div>
 
+    <div id="textResult" class="hidden">Угадала</div>
 
+    <div class="table">
 
+        <div class=" card memory-card">0</div>
 
+        <div class=" card memory-card">1</div>
 
+    </div>
 
+
 
+
 
+    <button id="btn" class="hidden">Ещё раз</button>
 
+</div>
 
+
 
+
 
+
 
+<script src="script.js"></script>
 
+</body>
 
+</html>

+ 62 - 0
Gadalka/script.js
Ver arquivo 

@@ -0,0 +1,62 @@
 
+
 
+const btn = document.getElementById('btn');
 
+btn.addEventListener('click', btnHandler);
 
+document.querySelectorAll(".memory-card").forEach(card => {
 
+    card.addEventListener('click', startGame);
 
+})
 
+const result = document.getElementById("textResult");
 
+console.log(result.innerText);
 
+const card = document.getElementById("card");
 
+const frontFaceCard = document.getElementById("front-face");
 
+
 
+const predictArray = [];
 
+for (let i = 0; i <= 1; i++) {
 
+    let arrI = []
 
+    for (let j = 0; j <= 1; j++) {
 
+        let arrJ = [];
 
+        for (let k = 0; k <= 1; k++) {
 
+            let arrK = [];
 
+            arrK[0] = -1;
 
+            arrK[1] = -1;
 
+            arrJ[k] = arrK;
 
+        }
 
+        arrI[j] = arrJ
 
+    }
 
+    predictArray[i] = arrI;
 
+}
 
+
 
+
 
+const history = [1, 1, 1, 1];
 
+let gadalka = predictArray[1][1][1][1] > -1 ? predictArray[1][1][1][1] : Math.round(Math.random());
 
+console.log(gadalka)
 
+
 
+function startGame(e) {
 
+    frontFaceCard.innerText = gadalka;
 
+    let value = Number(e.target.innerText);
 
+    predictArray[history[0]][history[1]][history[2]][history[3]] = value;
 
+    history.push(Number(value));
 
+    history.shift();
 
+
 
+    card.classList.toggle('flip');
 
+    btn.classList.toggle("hidden");
 
+    result.classList.toggle("hidden");
 
+
 
+    btn.disabled = false;
 
+    result.innerText = gadalka === value ? "Угадала!" : "Не угадала!";
 
+
 
+    document.querySelectorAll(".memory-card").forEach(card => {
 
+        card.removeEventListener('click', startGame);
 
+    })
 
+}
 
+
 
+function btnHandler(){
 
+    gadalka = predictArray[history[0]][history[1]][history[2]][history[3]] > -1 ? predictArray[history[0]][history[1]][history[2]][history[3]] : Math.round(Math.random());
 
+    console.log(gadalka)
 
+    document.querySelectorAll(".memory-card").forEach(card => {
 
+        card.addEventListener('click', startGame);
 
+    });
 
+    card.classList.toggle('flip');
 
+    btn.classList.toggle("hidden");
 
+    result.classList.toggle("hidden");
 
+    btn.disabled = true;
 
+}

+ 108 - 0
Gadalka/style.css
Ver arquivo 

@@ -0,0 +1,108 @@
 
+html{
 
+    width: 100vw;
 
+    height: 100vh;
 
+}
 
+body{
 
+    margin: 0;
 
+    padding: 0;
 
+    display: flex;
 
+    flex-direction: column;
 
+    width: 100%;
 
+    height: 100%;
 
+    position: relative;
 
+}
 
+body::before{
 
+    content: "";
 
+    position: absolute;
 
+    z-index: -1;
 
+    width: 100%;
 
+    height: 100%;
 
+    background: url("bacgroung_fortune_teller.jpg") ;
 
+    opacity: 0.8;
 
+    background-size: cover;
 
+    background-repeat: no-repeat;
 
+    background-position: center;
 
+}
 
+.card{
 
+    display: flex;
 
+    justify-content: center;
 
+    align-items: center;
 
+    width: 200px;
 
+    height: 300px;
 
+    border: 1px solid grey;
 
+    border-radius: 15px;
 
+    font-size: 200px;
 
+    color: darkslategrey;
 
+}
 
+
 
+#wrapper{
 
+    margin: auto;
 
+    display: flex;
 
+    flex-direction: column;
 
+    align-items: center;
 
+    perspective: 1000px;
 
+}
 
+#card{
 
+    position: relative;
 
+    width: 200px;
 
+    height: 300px;
 
+
 
+    transform-style: preserve-3d;
 
+    transition: transform .5s;
 
+}
 
+#back-face{
 
+    position: absolute;
 
+    background: url("./back-red_large-1024x1024.png");
 
+    background-position: center;
 
+    background-size: cover;
 
+    backface-visibility: hidden;
 
+}
 
+#front-face{
 
+    transform: rotateY(180deg);
 
+    position: absolute;
 
+    background: #f1e8b8;
 
+}
 
+.table{
 
+
 
+    display: flex;
 
+}
 
+.memory-card{
 
+    transform-style: preserve-3d;
 
+    box-shadow: 1px 1px 0 rgba(0, 0, 0, .3);
 
+    transform: scale(1);
 
+    background: #f1e8b8;
 
+    cursor: pointer;
 
+    margin: 0 5px;
 
+}
 
+.memory-card:active{
 
+    transform: scale(0.97);
 
+    transition: transform .2s;
 
+}
 
+.textResult{
 
+    width: 100px;
 
+    height: 40px;
 
+}
 
+#card.flip{
 
+    transform: rotateY(180deg);
 
+}
 
+.hidden{
 
+    opacity: 0;
 
+}
 
+#textResult{
 
+    margin: 5px auto;
 
+    text-align: center;
 
+    font-size: 30px;
 
+    font-style: italic;
 
+    border-radius: 10px;
 
+    color: red;
 
+    background: #f1e8b8;
 
+    width: 200px;
 
+}
 
+#btn{margin-top: 5px;
 
+    font-size: 20px;
 
+    background: #f1e8b8;
 
+    width: 150px;
 
+    height: 35px;
 
+    border-radius: 15px;
 
+    border: 1px solid lightgray;
 
+}

+ 5 - 0
HW4. Base Structures and Loops/Gadalka/.idea/.gitignore
Ver arquivo 

@@ -0,0 +1,5 @@
 
+# Default ignored files
 
+/shelf/
 
+/workspace.xml
 
+# Editor-based HTTP Client requests
 
+/httpRequests/

+ 12 - 0
HW4. Base Structures and Loops/Gadalka/.idea/Gadalka.iml
Ver arquivo 

@@ -0,0 +1,12 @@
 
+<?xml version="1.0" encoding="UTF-8"?>
 
+<module type="WEB_MODULE" version="4">
 
+  <component name="NewModuleRootManager">
 
+    <content url="file://$MODULE_DIR$">
 
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
 
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
 
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
 
+    </content>
 
+    <orderEntry type="inheritedJdk" />
 
+    <orderEntry type="sourceFolder" forTests="false" />
 
+  </component>
 
+</module>

+ 8 - 0
HW4. Base Structures and Loops/Gadalka/.idea/modules.xml
Ver arquivo 

@@ -0,0 +1,8 @@
 
+<?xml version="1.0" encoding="UTF-8"?>
 
+<project version="4">
 
+  <component name="ProjectModuleManager">
 
+    <modules>
 
+      <module fileurl="file://$PROJECT_DIR$/.idea/Gadalka.iml" filepath="$PROJECT_DIR$/.idea/Gadalka.iml" />
 
+    </modules>
 
+  </component>
 
+</project>

BIN
HW4. Base Structures and Loops/Gadalka/bacgroung_fortune_teller.jpg
Ver arquivo


BIN
HW4. Base Structures and Loops/Gadalka/back-red_large-1024x1024.png
Ver arquivo


+ 32 - 0
HW4. Base Structures and Loops/Gadalka/index.html
Ver arquivo 

@@ -0,0 +1,32 @@
 
+<!doctype html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport"
 
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
+    <title>Document</title>
 
+    <link rel="stylesheet" href="style.css">
 
+</head>
 
+<body>
 
+<div id="wrapper">
 
+    <div id="card">
 
+        <div id="back-face" class="card gadalkaCard"></div>
 
+        <div id="front-face" class="card gadalkaCard">1</div>
 
+
 
+    </div>
 
+    <div id="textResult" class="hidden">Угадала</div>
 
+    <div class="table">
 
+        <div class=" card memory-card">0</div>
 
+        <div class=" card memory-card">1</div>
 
+    </div>
 
+
 
+
 
+    <button id="btn" class="hidden">Ещё раз</button>
 
+</div>
 
+
 
+
 
+
 
+<script src="script.js"></script>
 
+</body>
 
+</html>

+ 62 - 0
HW4. Base Structures and Loops/Gadalka/script.js
Ver arquivo 

@@ -0,0 +1,62 @@
 
+
 
+const btn = document.getElementById('btn');
 
+btn.addEventListener('click', btnHandler);
 
+document.querySelectorAll(".memory-card").forEach(card => {
 
+    card.addEventListener('click', startGame);
 
+})
 
+const result = document.getElementById("textResult");
 
+console.log(result.innerText);
 
+const card = document.getElementById("card");
 
+const frontFaceCard = document.getElementById("front-face");
 
+
 
+const predictArray = [];
 
+for (let i = 0; i <= 1; i++) {
 
+    let arrI = []
 
+    for (let j = 0; j <= 1; j++) {
 
+        let arrJ = [];
 
+        for (let k = 0; k <= 1; k++) {
 
+            let arrK = [];
 
+            arrK[0] = -1;
 
+            arrK[1] = -1;
 
+            arrJ[k] = arrK;
 
+        }
 
+        arrI[j] = arrJ
 
+    }
 
+    predictArray[i] = arrI;
 
+}
 
+
 
+
 
+const history = [1, 1, 1, 1];
 
+let gadalka = predictArray[1][1][1][1] > -1 ? predictArray[1][1][1][1] : Math.round(Math.random());
 
+console.log(gadalka)
 
+
 
+function startGame(e) {
 
+    frontFaceCard.innerText = gadalka;
 
+    let value = Number(e.target.innerText);
 
+    predictArray[history[0]][history[1]][history[2]][history[3]] = value;
 
+    history.push(Number(value));
 
+    history.shift();
 
+
 
+    card.classList.toggle('flip');
 
+    btn.classList.toggle("hidden");
 
+    result.classList.toggle("hidden");
 
+
 
+    btn.disabled = false;
 
+    result.innerText = gadalka === value ? "Угадала!" : "Не угадала!";
 
+
 
+    document.querySelectorAll(".memory-card").forEach(card => {
 
+        card.removeEventListener('click', startGame);
 
+    })
 
+}
 
+
 
+function btnHandler(){
 
+    gadalka = predictArray[history[0]][history[1]][history[2]][history[3]] > -1 ? predictArray[history[0]][history[1]][history[2]][history[3]] : Math.round(Math.random());
 
+    console.log(gadalka)
 
+    document.querySelectorAll(".memory-card").forEach(card => {
 
+        card.addEventListener('click', startGame);
 
+    });
 
+    card.classList.toggle('flip');
 
+    btn.classList.toggle("hidden");
 
+    result.classList.toggle("hidden");
 
+    btn.disabled = true;
 
+}

+ 108 - 0
HW4. Base Structures and Loops/Gadalka/style.css
Ver arquivo 

@@ -0,0 +1,108 @@
 
+html{
 
+    width: 100vw;
 
+    height: 100vh;
 
+}
 
+body{
 
+    margin: 0;
 
+    padding: 0;
 
+    display: flex;
 
+    flex-direction: column;
 
+    width: 100%;
 
+    height: 100%;
 
+    position: relative;
 
+}
 
+body::before{
 
+    content: "";
 
+    position: absolute;
 
+    z-index: -1;
 
+    width: 100%;
 
+    height: 100%;
 
+    background: url("bacgroung_fortune_teller.jpg") ;
 
+    opacity: 0.8;
 
+    background-size: cover;
 
+    background-repeat: no-repeat;
 
+    background-position: center;
 
+}
 
+.card{
 
+    display: flex;
 
+    justify-content: center;
 
+    align-items: center;
 
+    width: 200px;
 
+    height: 300px;
 
+    border: 1px solid grey;
 
+    border-radius: 15px;
 
+    font-size: 200px;
 
+    color: darkslategrey;
 
+}
 
+
 
+#wrapper{
 
+    margin: auto;
 
+    display: flex;
 
+    flex-direction: column;
 
+    align-items: center;
 
+    perspective: 1000px;
 
+}
 
+#card{
 
+    position: relative;
 
+    width: 200px;
 
+    height: 300px;
 
+
 
+    transform-style: preserve-3d;
 
+    transition: transform .5s;
 
+}
 
+#back-face{
 
+    position: absolute;
 
+    background: url("./back-red_large-1024x1024.png");
 
+    background-position: center;
 
+    background-size: cover;
 
+    backface-visibility: hidden;
 
+}
 
+#front-face{
 
+    transform: rotateY(180deg);
 
+    position: absolute;
 
+    background: #f1e8b8;
 
+}
 
+.table{
 
+
 
+    display: flex;
 
+}
 
+.memory-card{
 
+    transform-style: preserve-3d;
 
+    box-shadow: 1px 1px 0 rgba(0, 0, 0, .3);
 
+    transform: scale(1);
 
+    background: #f1e8b8;
 
+    cursor: pointer;
 
+    margin: 0 5px;
 
+}
 
+.memory-card:active{
 
+    transform: scale(0.97);
 
+    transition: transform .2s;
 
+}
 
+.textResult{
 
+    width: 100px;
 
+    height: 40px;
 
+}
 
+#card.flip{
 
+    transform: rotateY(180deg);
 
+}
 
+.hidden{
 
+    opacity: 0;
 
+}
 
+#textResult{
 
+    margin: 5px auto;
 
+    text-align: center;
 
+    font-size: 30px;
 
+    font-style: italic;
 
+    border-radius: 10px;
 
+    color: red;
 
+    background: #f1e8b8;
 
+    width: 200px;
 
+}
 
+#btn{margin-top: 5px;
 
+    font-size: 20px;
 
+    background: #f1e8b8;
 
+    width: 150px;
 
+    height: 35px;
 
+    border-radius: 15px;
 
+    border: 1px solid lightgray;
 
+}