html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Memory Game</title>
</head>
<body>
<embed src="music/beHappy.mp3" loop="true" autostart="true" height="0" width="0">
<section id="game_section">
<h1><i class="fas fa-brain"></i> Memory Game</h1>
<p class="game_info"><span>Game description :</span> When you press Start , the game will begin and colors will be displayed for only 3 seconds. Then you should choose every two similar cards. Your score depends on the number of hits ... GOOD LUCK </p>
<button id="start">Start</button>
<select id ="level_select">
<option value="1">12 cards - Easy</option>
<option value="2">16 cards - Medium</option>
<option value="3">20 cards - Hard</option>
</select>
<div id ="score_section">
<p id ="high_score_p">High score <br/><span id="high_score"></span> hits in <span id="corr_time">00:00</span></p>
<p>Hits : <span id="hits"></span></p>
<p>Time : <span id="time">00:00</span></p>
<div class="clear"></div>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: arial,serif;
}
body{
background-color: #050601;
}
#game_section{
Position:relative;
padding:20px 0 50px 0;
text-align:center;
}
#game_section h1{
color: #b6dbb1;
font-size:2em;
text-align:center;
background-color: #282727;
margin:auto;
margin-bottom:40px;
Width:80%;
max-width:300px;
border-radius:10px;
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
window.onload = function hi(){
var start_btn = document.getElementById("start");
var game_info=document.getElementById("game_info");
var level_select = document.getElementById("level_select");
var img_link= "https://cdn-images-1.medium.com/max/1200/1*QNimSWsBQxta_xt3XksQaw.png";
var hits_span = document.getElementById("hits");
var time_span = document.getElementById("time");
var highscore_span = document.getElementById("high_score");
var corr_time_span = document.getElementById("corr_time");
var hits , highscore ,corr_time;
var cards=[];
var cards_num;
var i;
var nums_array=[];
var colors_array =["red","red","yellow","yellow","green","green", "blue","blue","orange","orange","DeepPink","DeepPink","cyan","cyan","tomato","tomato","navy","navy","indigo","indigo"];
var levels_arr=[12,16,20];
var selected_level;
var generated_colors=[];
for ( i=1;i<=levels_arr[levels_arr.length-1];i++){
cards.push(document.getElementById("card_" + i));
cards[i-1].style.display="none";
}
start_btn.addEventListener("click",produce_colors);
level_select.addEventListener("change",function(){
if(in_game){
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run