Home Explore Help
Register Sign In
Mitrofanova-Natali
/
homework
Watch 1
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

add task black belt gadalka2

Mitrofanova Natali 2 years ago
parent
2350872a0a
commit
ff34373bd7
8 changed files with 213 additions and 0 deletions
Split View Show Diff Stats
  1. 5 0
      HW5 Objects, in, JSON/Gadalka 2/.idea/.gitignore
  2. 12 0
      HW5 Objects, in, JSON/Gadalka 2/.idea/Gadalka.iml
  3. 8 0
      HW5 Objects, in, JSON/Gadalka 2/.idea/modules.xml
  4. BIN
      HW5 Objects, in, JSON/Gadalka 2/bacgroung_fortune_teller.jpg
  5. BIN
      HW5 Objects, in, JSON/Gadalka 2/back-red_large-1024x1024.png
  6. 32 0
      HW5 Objects, in, JSON/Gadalka 2/index.html
  7. 48 0
      HW5 Objects, in, JSON/Gadalka 2/script.js
  8. 108 0
      HW5 Objects, in, JSON/Gadalka 2/style.css

+ 5 - 0
HW5 Objects, in, JSON/Gadalka 2/.idea/.gitignore
View File 

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

+ 12 - 0
HW5 Objects, in, JSON/Gadalka 2/.idea/Gadalka.iml
View File 

@@ -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
HW5 Objects, in, JSON/Gadalka 2/.idea/modules.xml
View File 

@@ -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
HW5 Objects, in, JSON/Gadalka 2/bacgroung_fortune_teller.jpg
View File


BIN
HW5 Objects, in, JSON/Gadalka 2/back-red_large-1024x1024.png
View File


+ 32 - 0
HW5 Objects, in, JSON/Gadalka 2/index.html
View File 

@@ -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>

+ 48 - 0
HW5 Objects, in, JSON/Gadalka 2/script.js
View File 

@@ -0,0 +1,48 @@
 
+
 
+const btn = document.getElementById('btn');
 
+btn.addEventListener('click', btnHandler);
 
+document.querySelectorAll(".memory-card").forEach(card => {
 
+    card.addEventListener('click', startGame);
 
+})
 
+const result = document.getElementById("textResult");
 
+const card = document.getElementById("card");
 
+const frontFaceCard = document.getElementById("front-face");
 
+
 
+const predictValue = {};
 
+
 
+
 
+
 
+let history = "1111";
 
+let gadalka = predictValue[history]  ? predictValue[history] : Math.round(Math.random()).toString();
 
+console.log(gadalka)
 
+
 
+function startGame(e) {
 
+    frontFaceCard.innerText = gadalka;
 
+    let value = e.target.innerText;
 
+    predictValue[history] = value;
 
+    history += value;
 
+    history = history.slice(1);
 
+
 
+    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 = predictValue[history]  ? predictValue[history] : Math.round(Math.random()).toString();
 
+    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
HW5 Objects, in, JSON/Gadalka 2/style.css
View File 

@@ -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;
 
+}