├── audio
├── cling.wav
└── cool.wav
├── img
└── button_Start_Reactor_sharpen.png
├── index.html
├── pattern.ico
├── code.txt
├── favicon-16x16.png
├── favicon-32x32.png
└── favicon.ico
├── script.js
└── style.css
/audio/cling.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alvinadrianto/remember-pattern/f5dcd2c46ff51792cda9b5d7adda1a9a08bfaab9/audio/cling.wav
--------------------------------------------------------------------------------
/audio/cool.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alvinadrianto/remember-pattern/f5dcd2c46ff51792cda9b5d7adda1a9a08bfaab9/audio/cool.wav
--------------------------------------------------------------------------------
/img/button_Start_Reactor_sharpen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alvinadrianto/remember-pattern/f5dcd2c46ff51792cda9b5d7adda1a9a08bfaab9/img/button_Start_Reactor_sharpen.png
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | Remember Pattern
19 |
20 |
21 | Remember Pattern
22 |
23 |
24 |
25 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
76 |
77 |
78 |
79 |
--------------------------------------------------------------------------------
/pattern.ico/code.txt:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/pattern.ico/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alvinadrianto/remember-pattern/f5dcd2c46ff51792cda9b5d7adda1a9a08bfaab9/pattern.ico/favicon-16x16.png
--------------------------------------------------------------------------------
/pattern.ico/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alvinadrianto/remember-pattern/f5dcd2c46ff51792cda9b5d7adda1a9a08bfaab9/pattern.ico/favicon-32x32.png
--------------------------------------------------------------------------------
/pattern.ico/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alvinadrianto/remember-pattern/f5dcd2c46ff51792cda9b5d7adda1a9a08bfaab9/pattern.ico/favicon.ico
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | const kotakPreview = document.querySelectorAll('.preview');
2 | const kotakAction = document.querySelectorAll('.action');
3 | const kotak = document.querySelectorAll('.kotak');
4 | const h1 = document.querySelector('h1');
5 | const h4 = document.querySelector('h4');
6 | const cling = document.querySelector('#cling');
7 | const cool = document.querySelector('#cool');
8 |
9 | let currentBlink;
10 | let stage;
11 | let resultPola = [];
12 | let actionPola = [];
13 | let tempPola = [];
14 | let final;
15 | let chance;
16 | let click;
17 |
18 | function randomkotak(kotak) {
19 | const r = Math.floor(Math.random() * kotak.length);
20 | return r;
21 | }
22 |
23 | function blink() {
24 | click = false;
25 | h4.innerHTML = `Generate...`;
26 | if (final) {
27 | for (currentBlink = stage; currentBlink <= stage; currentBlink++) {
28 | const rKotak = randomkotak(kotakPreview);
29 | resultPola.push(kotakPreview[rKotak]);
30 | actionPola.push(kotakAction[rKotak]);
31 | }
32 | }
33 |
34 | tempPola = actionPola.slice();
35 | resultPola.forEach((k, i) => {
36 | setTimeout(() => {
37 | setTimeout(() => {
38 | resultPola[i].style.background = '#44a8fe';
39 | cool.play();
40 |
41 | setTimeout(() => {
42 | resultPola[i].style.background = 'black';
43 | }, i + 1 * 300);
44 | }, i * 500);
45 |
46 | setTimeout(() => {
47 | click = true;
48 | h4.innerHTML = `Ready to Click`;
49 | }, resultPola.length * 500 + 100);
50 | }, 1000);
51 | });
52 | }
53 |
54 | function klik() {
55 | cling.play();
56 | if (click) {
57 | if (this == tempPola[0]) {
58 | tempPola.shift();
59 | } else {
60 | final = false;
61 | while (chance >= 0) {
62 | if (chance == 2) {
63 | alert(`You entered the wrong pattern, You have ${chance} more chance`);
64 | blink();
65 | break;
66 | } else if (chance == 1) {
67 | alert(`You entered the wrong pattern, You have ${chance} more chance`);
68 | blink();
69 | break;
70 | } else {
71 | alert(`Chance Run Out`);
72 | let replay = confirm('Want to play again?');
73 | if (replay == true) {
74 | mulai();
75 | return;
76 | } else {
77 | window.location.reload();
78 | return;
79 | }
80 | }
81 | }
82 | chance--;
83 | return;
84 | }
85 |
86 | if (tempPola.length == 0) {
87 | stage++;
88 | final = true;
89 | h4.innerHTML = `Correct`;
90 | setTimeout(() => {
91 | h4.innerHTML = ``;
92 | }, 1000);
93 | setTimeout(() => {
94 | h1.innerHTML = `Stage ${stage + 1} `;
95 | }, 1000);
96 | setTimeout(() => {
97 | blink();
98 | }, 1000);
99 | }
100 |
101 | this.style.background = 'rgba(68, 168, 254, 0.6)';
102 |
103 | setTimeout(() => {
104 | this.style.background = 'url(img/button_Start_Reactor_sharpen.png)';
105 |
106 | if (screen.width >= 992) {
107 | this.style.backgroundSize = '6.7rem';
108 | this.style.backgroundPosition = 'center';
109 | return;
110 | } else {
111 | this.style.backgroundSize = '3.6rem';
112 | this.style.backgroundPosition = 'center';
113 | }
114 | }, 100);
115 |
116 | return;
117 | }
118 |
119 | return;
120 | }
121 |
122 | function mulai() {
123 | resultPola = [];
124 | actionPola = [];
125 | stage = 0;
126 | currentBlink = 0;
127 | final = true;
128 | chance = 2;
129 | h1.innerHTML = `Stage ${stage + 1} `;
130 | click = true;
131 | h4.innerHTML = ``;
132 | blink();
133 | kotakAction.forEach((k) => {
134 | k.addEventListener('click', klik);
135 | });
136 | }
137 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | h1,
2 | h4 {
3 | color: white;
4 | text-shadow: 3px 3px 1px black;
5 | }
6 |
7 | h1 {
8 | margin-top: 3rem !important;
9 | }
10 |
11 | body {
12 | background: #716c6c !important;
13 | position: relative;
14 | }
15 |
16 | /* Content */
17 | .content {
18 | left: 255px;
19 | }
20 |
21 | .pv {
22 | width: 230px !important;
23 | height: 230px;
24 | border-radius: 5%;
25 | box-shadow: 0px 0px 5px black;
26 | background-color: black;
27 | border: 5px solid #c8c8c8;
28 | }
29 |
30 | .preview {
31 | width: 65px !important;
32 | height: 65px !important;
33 | position: relative;
34 | border-radius: 5%;
35 | background: black;
36 | }
37 |
38 | .preview:hover {
39 | cursor: not-allowed;
40 | }
41 |
42 | .action {
43 | margin: 7px 7px !important;
44 | width: 55px !important;
45 | height: 55px !important;
46 | position: relative;
47 | box-shadow: 0px 0px 6px 1px black;
48 | border-radius: 5%;
49 | background: url(img/button_Start_Reactor_sharpen.png);
50 | background-size: 3.6rem;
51 | background-position: center;
52 | }
53 |
54 | .act {
55 | margin-top: 3rem !important;
56 | border-radius: 10px;
57 | padding: 10px 10px;
58 | width: 240px !important;
59 | background-color: #c8c8c8;
60 | border: 3px solid black;
61 | margin-bottom: 2rem;
62 | }
63 |
64 | .action:hover {
65 | cursor: pointer;
66 | }
67 |
68 | /* Alert Custom */
69 | .alert {
70 | position: relative;
71 | background-color: rgba(0, 0, 0, 0.6);
72 | left: 0;
73 | top: -10px;
74 | height: 110vh;
75 | z-index: 98;
76 | }
77 |
78 | .alert-custom {
79 | position: absolute;
80 | width: 700px !important;
81 | height: 350px !important;
82 | border: 3px solid black;
83 | border-radius: 10px;
84 | top: 200px;
85 | left: 320px;
86 | background-color: gray;
87 | z-index: 99;
88 | }
89 |
90 | h2 {
91 | color: yellow;
92 | text-shadow: 3px 3px 1px black;
93 | padding-top: 2rem;
94 | padding-bottom: 2rem;
95 | background-color: #c8c8c8;
96 | border-top-left-radius: 7px;
97 | border-top-right-radius: 7px;
98 | border-bottom: 3px solid black;
99 | }
100 |
101 | h3 {
102 | padding-top: 4rem;
103 | color: white;
104 | text-shadow: 2px 2px 0px black;
105 | }
106 |
107 | .hide {
108 | display: none !important;
109 | }
110 |
111 | @media (min-width: 992px) {
112 | body {
113 | background: #716c6c !important;
114 | }
115 |
116 | h1 {
117 | margin-top: 4rem !important;
118 | }
119 |
120 | .pv {
121 | width: 390px !important;
122 | height: 390px;
123 | border-radius: 5%;
124 | box-shadow: 0px 0px 5px black;
125 | margin-left: 0px;
126 | margin-bottom: 2rem !important;
127 | }
128 |
129 | .act {
130 | border: 5px solid rgb(0, 0, 0);
131 | width: 390px !important;
132 | padding: 20px 20px;
133 | margin-left: 50px;
134 | background-color: #c8c8c8;
135 | margin-top: 0rem !important;
136 | }
137 |
138 | .preview {
139 | width: 120px !important;
140 | height: 120px !important;
141 | position: relative;
142 | }
143 |
144 | .action {
145 | width: 100px !important;
146 | height: 100px !important;
147 | position: relative;
148 | box-shadow: 0px 0px 10px 1px black;
149 | border-radius: 5%;
150 | background: url(img/button_Start_Reactor_sharpen.png);
151 | background-size: 6.7rem;
152 | background-position: center;
153 | }
154 | }
155 |
--------------------------------------------------------------------------------