html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- Created by Margaret Guzman -->
<!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.</strong>
<p id="msg"></p>
<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
13
14
/* Created by Margaret Guzman */
#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
// Created by Margaret Guzman
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");
}
//this function produces 25 board spaces with IDs s1-s25, "s" stands for space
function loadBoard() {
for (i=1; i<=25; i++) {
s = document.createElement("div");
s.setAttribute("id", "s"+i);
boardCont.appendChild(s);
s.style.border = "1px solid black";
s.style.padding = "15px";
}
}
/*
this function produces a game piece for each game space with IDs p1-p25. "p" stands for piece. it also assigns each piece a color and location. the location is defined by its parent node and stored in an object property.
*/
function fillBoard() {
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run