html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<title>Match Three - Margaret Guzman</title>
</head>
<body>
<div id="gameHead">
<h1>Match Three</h1>
<strong id="instruct">Tap or click on a piece to select it, then tap or click on an adjacent piece to switch them. You have 20 moves to get your score as high as possible. Good luck!</strong>
<div id="msg-moves">
<p id="msg"></p>
<p id="moves"></p>
</div>
<center><button id="begin" onclick="begin()">Begin</button></center>
</div>
<div id="boardCont"></div>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
#boardCont {
z-index: 0;
height: 400px;
width: 400px;
display: grid;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
#begin {
display: block;
}
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
/*
By Margaret Guzman. Comment on SoloLearn or GitHub if you enjoy! My other completed projects are available on my website at https://margaretbguzman.com/
*/
window.onload = init;
function init() {
boardCont = document.getElementById("boardCont");
gameHead = document.getElementById("gameHead");
loadBoard();
console.log("initialized");
start = document.getElementById("begin");
msg = document.getElementById("msg");
movesMsg = document.getElementById("moves");
}
//this function produces 25 board spaces with IDs s1-s25, "s" stands for space
function loadBoard() {
for (let i=1; i<=25; i++) {
s = document.createElement("div");
s.setAttribute("id", "s"+i);
boardCont.appendChild(s);
s.ID = i;
s.style.border = "1px solid black";
s.style.padding = "15px";
}
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run