├── README.md
└── Memory game
├── README.md
├── index.html
├── js
└── javascript.js
└── style
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | # Memory-game
2 | hello this is my project-game. my game is beautiful and is big game.
3 |
--------------------------------------------------------------------------------
/Memory game/README.md:
--------------------------------------------------------------------------------
1 | # Memory-game
2 | hello this is my project-game. my game is beautiful and is big game.
3 |
--------------------------------------------------------------------------------
/Memory game/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | بازی حافظه
7 |
11 |
12 |
13 |
بازی حافظه
14 |
15 |
شروع مجدد
16 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/Memory game/js/javascript.js:
--------------------------------------------------------------------------------
1 | alert('hello Welcome to the memory game 👋🤚🖐🤝');
2 | const emojis = ["🎃","🎃","👽","👽","💣","💣","💎","💎","🤑","🤑","☠️","☠️","💡","💡","🤠","🤠"];
3 | var shuffEmojis = emojis.sort(() =>(Math.random() > .5) ? 2 : -1);
4 | for (var i = 0; i < emojis.length; i++) {
5 | let box = document.createElement('div');
6 | box.className = 'item';
7 | box.innerHTML = shuffEmojis[i];
8 | box.onclick = function () {
9 | this.classList.add('boxOpen');
10 | setTimeout(function(){
11 | if(document.querySelectorAll('.boxOpen').length > 1) {
12 | if (document.querySelectorAll('.boxOpen')[0].innerHTML ==
13 | document.querySelectorAll('.boxOpen')[1].innerHTML) {
14 | document.querySelectorAll('.boxOpen')[0].classList.add('boxMatch');
15 | document.querySelectorAll('.boxOpen')[1].classList.add('boxMatch');
16 | document.querySelectorAll('.boxOpen')[1].classList.remove('boxOpen');
17 | document.querySelectorAll('.boxOpen')[0].classList.remove('boxOpen');
18 | if(document.querySelectorAll('.boxMatch').length == emojis.length) {
19 | alert('شما برنده شدید 🎉🎊🎇🥳');
20 | alert('Thank you very much for using the game 😀😃😄🙏');
21 | }
22 | }else{
23 | document.querySelectorAll('.boxOpen')[1].classList.remove('boxOpen');
24 | document.querySelectorAll('.boxOpen')[0].classList.remove('boxOpen');
25 | }
26 | }
27 | },800)
28 | }
29 | document.querySelector('.game').appendChild(box);
30 | }
--------------------------------------------------------------------------------
/Memory game/style/style.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: iransnas;
3 | src: url(fonts/IRANSansWeb.wolff);
4 | }
5 | *{
6 | margin: 0;
7 | padding: 0;
8 | box-sizing: border-box;
9 | font-family: iransnas;
10 | }
11 | body{
12 | display: flex;
13 | justify-content: center;
14 | align-items: center;
15 | min-height: 100vh;
16 | background: #0a3c2f;
17 | }
18 | .container{
19 | position: relative;
20 | display: flex;
21 | justify-content: center;
22 | align-items: center;
23 | flex-direction: column;
24 | gap: 30px;
25 | background: #0e614b;
26 | padding: 40px 60px;
27 | }
28 | .container h2{
29 | font-size: 1.5em;
30 | color: white;
31 | }
32 | .reset{
33 | padding: 7px 35px;
34 | color: #267e65;
35 | background: #fff;
36 | border: none;
37 | font-size: 17px;
38 | cursor: pointer;
39 | font-weight: 600;
40 | border-radius: 10px;
41 | }
42 | .reset:focus{
43 | color: #fff;
44 | background-color: #267e65;
45 | }
46 | .game{
47 | width: 300px;
48 | height: 300px;
49 | display: flex;
50 | justify-content: center;
51 | flex-wrap: wrap;
52 | gap: 10px;
53 | transform-style: preserve-3d;
54 | perspective: 500px;
55 | }
56 | .item{
57 | position: relative;
58 | width: 65px;
59 | height: 65px;
60 | display: flex;
61 | justify-content: center;
62 | align-items: center;
63 | font-size: 2.2em;
64 | background: #fff;
65 | transition: 0.25s;
66 | transform: rotateY(180deg);
67 | }
68 | .item::after{
69 | content: '';
70 | position: absolute;
71 | inset: 0;
72 | background: #209d7b;
73 | transition: 0.25s;
74 | transform: rotateY(0deg);
75 | backface-visibility: hidden;
76 | }
77 | .item.boxOpen{
78 | transform: rotateY(0deg);
79 | }
80 | .boxOpen::after{
81 | transform: rotateY(180deg);
82 | }
83 | .boxOpen::after,
84 | .boxMatch::after{
85 | transform: rotateY(180deg);
86 | }
--------------------------------------------------------------------------------