Skip to content

Commit 62ffbee

Browse files
left23left23
committedMay 11, 2014
first commit, placement of elements, basic jquery display toggle, graphics
0 parents  commit 62ffbee

10 files changed

+208
-0
lines changed
 

‎README.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
One Game a Month for May
2+
3+
Theme: Family
4+
5+
Whack-a-Monarch

‎camilla.png

83.3 KB
Loading

‎index.html

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Index</title>
5+
6+
<link rel="stylesheet" href="styles.css" type="text/css">
7+
<script src="jquery-1.10.2.min.js" type="text/javascript"></script>
8+
<script src="script.js" type="text/javascript"></script>
9+
10+
</head>
11+
12+
<body class="index">
13+
14+
<div id="container">
15+
<div class="picture">
16+
17+
<button type="button">Play</button>
18+
19+
<div id="moleOne" class="mole">
20+
</div>
21+
22+
<div id="moleTwo" class="mole">
23+
</div>
24+
25+
<div id="moleThree" class="mole">
26+
</div>
27+
28+
<div id="moleFour" class="mole">
29+
</div>
30+
31+
32+
33+
34+
35+
36+
</div>
37+
</div>
38+
39+
</body>
40+
41+
</html>
42+
43+
44+

‎jquery-1.10.2.min.js

+6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎king.png

46 KB
Loading

‎prince.png

53.4 KB
Loading

‎queen.png

66.4 KB
Loading

‎scene.jpg

62.1 KB
Loading

‎script.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
$( document ).ready(function() {
2+
3+
4+
$("button").click(function() {
5+
var mole = $(".mole").toArray();
6+
var elemlength = mole.length;
7+
var randomnum = Math.floor(Math.random()*elemlength);
8+
var randomitem = mole[randomnum];
9+
$(randomitem).css("display", "block").addClass("active");
10+
});
11+
12+
13+
$(".mole").click(function() {
14+
15+
if ($(this).hasClass("active")) {
16+
$(this).css("display", "none").removeClass("active");
17+
}
18+
});
19+
20+
});

‎styles.css

+133
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
/* RGBA -> Red Green Blue Alpha
2+
3+
Alpha channel = value of 0% is fully transparent, a value of 100% is fully opaque
4+
5+
rgba(0,0,0,1); -> black
6+
rgba(123,123,123,1); -> grey
7+
rgba(203,203,203,1); -> light grey
8+
rgba(255,255,255,1); -> white
9+
10+
rgba(255,0,0,1); -> red
11+
rgba(0,255,0,1); -> green
12+
rgba(0,0,255,1); -> blue
13+
14+
*/
15+
16+
/* http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
17+
/* apply a natural box layout model to all elements */
18+
*, *:before, *:after {
19+
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
20+
}
21+
22+
23+
24+
/* mobile first */
25+
26+
27+
@media screen and (max-width : 768px) {
28+
body {
29+
background-color:black;
30+
}
31+
32+
#container {
33+
margin: 0 auto;
34+
width: 100%;
35+
min-height:320px;
36+
max-height:480px;
37+
}
38+
39+
.picture {
40+
width: 100%;
41+
min-height:320px;
42+
max-height:480px;
43+
padding:1em 1em 0;
44+
}
45+
46+
}
47+
48+
49+
50+
@media screen and (min-width : 769px) {
51+
body {
52+
background-color:black;
53+
}
54+
#container {
55+
margin: 0 auto;
56+
width: 600px;
57+
height:480px;
58+
}
59+
60+
.picture {
61+
width: 600px;
62+
height:480px;
63+
padding:1em 1em 0;
64+
}
65+
66+
}
67+
68+
69+
70+
body {
71+
font:400 12px/18px arial, sans-serif;
72+
color:rgb(0,0,0);
73+
}
74+
75+
#container {
76+
background: #23538a; /* Old browsers */
77+
background: -moz-linear-gradient(top, #23538a 0%, #a7cfdf 100%); /* FF3.6+ */
78+
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#23538a), color-stop(100%,#a7cfdf)); /* Chrome,Safari4+ */
79+
background: -webkit-linear-gradient(top, #23538a 0%,#a7cfdf 100%); /* Chrome10+,Safari5.1+ */
80+
background: -o-linear-gradient(top, #23538a 0%,#a7cfdf 100%); /* Opera 11.10+ */
81+
background: -ms-linear-gradient(top, #23538a 0%,#a7cfdf 100%); /* IE10+ */
82+
background: linear-gradient(to bottom, #23538a 0%,#a7cfdf 100%); /* W3C */
83+
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#23538a', endColorstr='#a7cfdf',GradientType=0 ); /* IE6-9 */
84+
text-align: center;
85+
overflow:hidden;
86+
}
87+
88+
.picture {
89+
background-size:cover;
90+
background-position:50% 50%;
91+
background-repeat:no-repeat;
92+
position:relative;
93+
}
94+
.index .picture {
95+
background-image:url(scene.jpg);
96+
}
97+
98+
99+
div.mole {
100+
display:none;
101+
/*display:block;*/
102+
height:214px;
103+
width:186px;
104+
background-size:cover;
105+
background-position:50% 50%;
106+
background-repeat:no-repeat;
107+
position:absolute;
108+
}
109+
110+
div#moleOne {
111+
background-image:url(camilla.png);
112+
top:167px;
113+
left:18px;
114+
}
115+
div#moleTwo {
116+
background-image:url(prince.png);
117+
top:223px;
118+
left:138px;
119+
}
120+
div#moleThree {
121+
background-image:url(queen.png);
122+
top:157px;
123+
left:272px;
124+
}
125+
div#moleFour {
126+
background-image:url(king.png);
127+
top:104px;
128+
left:399px;
129+
}
130+
131+
132+
133+

0 commit comments

Comments
 (0)
Please sign in to comment.