Add Project To Github

MouadAmzil · Mar 24, 2021 · 4784f9b · 4784f9b
1 parent 987a229
commit 4784f9b
Show file tree

Hide file tree

Showing 14 changed files with 386 additions and 0 deletions.
diff --git a/debug.log b/debug.log
@@ -0,0 +1 @@
+[1204/110836.382:ERROR:directory_reader_win.cc(43)] FindFirstFile: Le chemin d�acc�s sp�cifi� est introuvable. (0x3)
diff --git a/img/9roda.png b/img/9roda.png
diff --git a/img/dhj.png b/img/dhj.png
diff --git a/img/far.png b/img/far.png
diff --git a/img/husa.png b/img/husa.png
diff --git a/img/kac.png b/img/kac.png
diff --git a/img/kcam.png b/img/kcam.png
diff --git a/img/mas.png b/img/mas.png
diff --git a/img/mat.png b/img/mat.png
diff --git a/img/rsb.png b/img/rsb.png
diff --git a/img/wac.png b/img/wac.png
diff --git a/index.html b/index.html
@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>JS- Slider</title>
+    <link rel="stylesheet" href="style.css">
+    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+
+<body>
+    <div class="start-game">
+        <span>
+            Start Game Now !
+        </span>
+    </div>
+
+    <div class="info-container">
+        <div class="Name">
+            Name : <span></span>
+        </div>
+        <div class="Tries">
+            Tries : <span>0</span>
+        </div>
+    </div>
+    <!-- //////////////////////////////////////////////////////// -->
+    <div class="memory-game-block">
+        <!-- ///////////image WAC 1//////////////////// -->
+        <div class="game-block " data-team="wac">
+            <div class="face front"></div>
+            <div class="face back">
+                <img src="img\wac.png" width="180px" height="180px">
+            </div>
+        </div>
+        <div class="game-block" data-team="wac">
+            <div class="face front"></div>
+            <div class="face back">
+                <img src="img\wac.png" width="180px" height="180px">
+            </div>
+        </div>
+        <!-- //////////////////////////////////////////////////////// -->
+        <!-- ///////////image RAJA 2//////////////////// -->
+        <div class="game-block" data-team="raja">
+            <div class="face front"></div>
+            <div class="face back">
+                <img src="img\9roda.png" width="180px" height="180px">
+            </div>
+        </div>
+        <div class="game-block" data-team="raja" width="180px" height="180px">
+            <div class="face front"></div>
+            <div class="face back">
+                <img src="img\9roda.png" width="180px" height="180px">
+            </div>
+        </div>
+        <!-- //////////////////////////////////////////////////////// -->
+
+        <!-- ///////////image MAT 3//////////////////// -->
+        <div class="game-block" data-team="mat">
+            <div class="face front"></div>
+            <div class="face back">
+                <img src="img\mat.png" width="180px" height="180px">
+            </div>
+        </div>
+        <div class="game-block" data-team="mat" width="180px" height="180px">
+            <div class="face front"></div>
+            <div class="face back">
+                <img src="img\mat.png" width="180px" height="180px">
+            </div>
+        </div>
+        <!-- //////////////////////////////////////////////////////// -->
+        <!-- ///////////image RSB 4//////////////////// -->
+        <div class="game-block" data-team="rsb">
+            <div class="face front"></div>
+            <div class="face back">
+                <img src="img\rsb.png" width="180px" height="180px">
+            </div>
+        </div>
+        <div class="game-block" data-team="rsb" width="180px" height="180px">
+            <div class="face front"></div>
+            <div class="face back">
+                <img src="img\rsb.png" width="180px" height="180px">
+            </div>
+        </div>
+        <!-- //////////////////////////////////////////////////////// -->
+        <!-- ///////////image HUSA 5//////////////////// -->
+        <div class="game-block" data-team="husa">
+            <div class="face front"></div>
+            <div class="face back">
+                <img src="img\husa.png" width="180px" height="180px">
+            </div>
+        </div>
+        <div class="game-block" data-team="husa" width="180px" height="180px">
+            <div class="face front"></div>
+            <div class="face back">
+                <img src="img\husa.png" width="180px" height="180px">
+            </div>
+        </div>
+        <!-- //////////////////////////////////////////////////////// -->
+        <!-- ///////////image MAS 6//////////////////// -->
+        <div class="game-block" data-team="mas">
+            <div class="face front"></div>
+            <div class="face back">
+                <img src="img\mas.png" width="180px" height="180px">
+            </div>
+        </div>
+        <div class="game-block" data-team="mas" width="180px" height="180px">
+            <div class="face front"></div>
+            <div class="face back">
+                <img src="img\mas.png" width="180px" height="180px">
+            </div>
+        </div>
+        <!-- //////////////////////////////////////////////////////// -->
+        <!-- ///////////image FAR 7//////////////////// -->
+        <div class="game-block" data-team="far">
+            <div class="face front"></div>
+            <div class="face back">
+                <img src="img\far.png" width="180px" height="180px">
+            </div>
+        </div>
+        <div class="game-block" data-team="far" width="180px" height="180px">
+            <div class="face front"></div>
+            <div class="face back">
+                <img src="img\far.png" width="180px" height="180px">
+            </div>
+        </div>
+        <!-- //////////////////////////////////////////////////////// -->
+        <!-- ///////////image DHJ 8//////////////////// -->
+        <div class="game-block" data-team="dhj">
+            <div class="face front"></div>
+            <div class="face back">
+                <img src="img\dhj.png" width="180px" height="180px">
+            </div>
+        </div>
+        <div class="game-block" data-team="dhj" width="180px" height="180px">
+            <div class="face front"></div>
+            <div class="face back">
+                <img src="img\dhj.png" width="180px" height="180px">
+            </div>
+        </div>
+        <!-- //////////////////////////////////////////////////////// -->
+        <!-- ///////////image KCAM 9//////////////////// -->
+        <div class="game-block" data-team="kcam">
+            <div class="face front"></div>
+            <div class="face back">
+                <img src="img\kcam.png" width="180px" height="180px">
+            </div>
+        </div>
+        <div class="game-block" data-team="kcam" width="180px" height="180px">
+            <div class="face front"></div>
+            <div class="face back">
+                <img src="img\kcam.png" width="180px" height="180px">
+            </div>
+        </div>
+        <!-- //////////////////////////////////////////////////////// -->
+        <!-- ///////////image KAC 10//////////////////// -->
+        <div class="game-block" data-team="kac">
+            <div class="face front"></div>
+            <div class="face back">
+                <img src="img\kac.png" width="180px" height="180px">
+            </div>
+        </div>
+        <div class="game-block" data-team="kac" width="180px" height="180px">
+            <div class="face front"></div>
+            <div class="face back">
+                <img src="img\kac.png" width="180px" height="180px">
+            </div>
+        </div>
+        <!-- //////////////////////////////////////////////////////// -->
+    </div>
+    <script src=" script.js ">
+    </script>
+</body>
+
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,79 @@
+document.querySelector('.start-game span').onclick = function () {
+    let yourName = prompt("For get start the game please given you name".toUpperCase());
+    if (yourName === "" || yourName === null) {
+        yourName = "Unkownu";
+    }
+    document.querySelector('.Name span').textContent = yourName;
+    document.querySelector('.start-game').remove();
+}
+let duration = 1000;
+let MemoryGameBlock = document.querySelector('.memory-game-block');
+let arrayMemory = Array.from(MemoryGameBlock.children);
+let table = remplie(arrayMemory.length);
+////////////////////////////////////////////////////////////////
+arrayMemory.forEach((order, orderRange) => {
+    order.style.order = table[orderRange];
+    order.addEventListener('click', function () {
+        fillep(order);
+    })
+
+});
+///////////////////////////is-true////////////////////////
+function checkReponse(c1, c2) {
+    let check1 = c1.getAttribute('data-team');
+    let check2 = c2.getAttribute('data-team');
+    if (check1 === check2) {
+        c1.classList.remove('is-flipped');
+        c2.classList.remove('is-flipped');
+        c1.classList.add('is-true');
+        c2.classList.add('is-true');
+    } else {
+        document.querySelector('.Tries span').textContent=(parseInt(document.querySelector('.Tries span').textContent)+1).toString();
+        setTimeout(() => {
+            c1.classList.remove('is-flipped');
+            c2.classList.remove('is-flipped');
+        }, duration);
+    }
+}
+
+function fillep(seclector) {
+
+    seclector.classList.add('is-flipped');
+    //arrayMemory
+    let numberflipped = arrayMemory.filter(flipp => flipp.classList.contains('is-flipped'));
+    if (numberflipped.length === 2) {
+        stopClick();
+        checkReponse(numberflipped[0], numberflipped[1])
+
+    }
+}
+function stopClick() {
+    MemoryGameBlock.classList.add('stop-clicking');
+    setTimeout(() => {
+        MemoryGameBlock.classList.remove('stop-clicking');
+
+    }, duration);
+
+}
+function remplie(max) {
+    let i = 0, nb;
+    let v = [];
+    while (!(i === max)) {
+        // alert(i);
+        nb = random();
+        if (v.indexOf(nb) === -1) {
+            v[i] = nb;
+            i++;
+        }
+    }
+    function random() {
+        return Math.floor((max * Math.random()) + 1);
+    }
+    return v;
+}
+
+
+
+//file:///C:/Users/MYC/Desktop/HTML%20&%20CSS%20&%20JS/JS%20Big%20Tutorial/Js-2%20Game/index.html
+
+
diff --git a/style.css b/style.css
@@ -0,0 +1,132 @@
+* {
+    margin: 0;
+    box-sizing: border-box;
+    padding: 0;
+}
+
+body {
+    font-family: tahoma, Arial;
+}
+.stop-clicking{
+  pointer-events: none;
+}
+.start-game {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #2195f3c5;
+    z-index: 2;
+}
+.start-game span {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    background-color: #f44336;
+    color: #fff;
+    cursor: pointer;
+    padding: 10px 20px;
+    border-radius: 25px;
+}
+
+.info-container {
+    width: 90%;
+    margin-left: 5%;
+    overflow: hidden;
+    padding: 10px 20px;
+    background-color: #f3f3f3;
+    border: 3px solid #2196F3;
+    font-size: 30px;
+}
+
+.info-container .Name {
+    float: left;
+    width: 50%;
+}
+
+.info-container .Tries {
+    float: right;
+    text-align: right;
+}
+
+.memory-game-block {
+    width: 90%;
+    margin: 5%;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.game-block {
+    height: 200px;
+    transform-style: preserve-3d;
+    cursor: pointer;
+    position: relative;
+    flex: 1 0 200px;
+    margin: 5px;
+    transition: transform 1s;
+    transform: rotateY(180deg);
+}
+
+.memory-game-block .game-block .front::before {
+    content: '!';
+    color: #fff;
+    font-size: 130px;
+}
+
+.memory-game-block .game-block .front {
+    background-color: #333;
+    line-height: 200px;
+    transform: rotateY(180deg);
+}
+
+.memory-game-block .game-block .back {
+    background-color: #ebf597;
+}
+
+.memory-game-block .game-block .face {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    backface-visibility: hidden;
+    border: 2px solid #555;
+}
+.is-flipped {
+    transform: rotateY(0deg);
+}.is-true {
+    transform: rotateY(0deg);
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		[1204/110836.382:ERROR:directory_reader_win.cc(43)] FindFirstFile: Le chemin d�acc�s sp�cifi� est introuvable. (0x3)