Skip to content

Commit fc3719f

Browse files
mohammad0omarmohammad0omar
committed
upload project files with the readme
0 parents  commit fc3719f

File tree

13 files changed

+540
-0
lines changed

13 files changed

+540
-0
lines changed

‎game.html

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>game</title>
8+
<link href='https://fonts.googleapis.com/css?family=Audiowide|Iceland|Monoton|Pacifico|Press+Start+2P|Vampiro+One'
9+
rel='stylesheet' type='text/css'>
10+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
11+
<link rel="stylesheet" type="text/css" href="style.css">
12+
</head>
13+
<body>
14+
<div class="start text-center align-items-center justify-content-center">
15+
<h1 onclick="start()"><a> Memory Game</a>
16+
<p>How to play: memorize the number shown for a few seconds then retype it and check your answer <br> Click
17+
to continue</p>
18+
</h1>
19+
</div>
20+
<div id="game">
21+
<div class="row w-50 bar">
22+
<p class="text-warning col-8 text-left">Level: <span id="level"></span></p>
23+
<p class="text-danger col-4 text-right">Wrong: <span id="wrong"></span>/3</p>
24+
</div>
25+
<h1 class="text-center text-danger" id="number"></h1>
26+
<form>
27+
<input type="number" placeholder="put the number" id="in" class="col-12 in border-bottom" min="0" autofocus
28+
required>
29+
<button class="btn-success btn-lg h-100 col-12 mt-2" type="submit">Check</button>
30+
<button type="button" class="btn-danger btn-lg mt-2 h-100 col-12" onclick="showTemp(1000)">Hint</button>
31+
</form>
32+
</div>
33+
<script src="script.js"></script>
34+
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
35+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
36+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
37+
</body>
38+
</html>

‎game1.html

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>game1</title>
9+
<link href='https://fonts.googleapis.com/css?family=Audiowide|Iceland|Monoton|Pacifico|Press+Start+2P|Vampiro+One'
10+
rel='stylesheet' type='text/css'>
11+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
12+
<link rel="stylesheet" type="text/css" href="style.css">
13+
</head>
14+
15+
<body>
16+
17+
<div class="start text-center align-items-center justify-content-center">
18+
19+
<h1 onclick="start()"><a> The gallows Game</a>
20+
<p>How to play: try to know what is the hidden word <br> Click to
21+
continue</p></h1>
22+
23+
</div>
24+
<div id="game">
25+
<svg class="bar1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
26+
preserveAspectRatio="xMidYMid meet" viewBox="0 0 640 640" >
27+
<defs>
28+
<path d="M500.87 378.12L500.87 97.42L151.98 100.38L156.92 378.12" id="epOUG4orR"></path>
29+
<path d="M330.87 101.37C359.8 106.81 354.86 112.89 316.05 119.62C302.05 122.05 358.98 139.68 333.84 140.91C327.99 141.19 323.53 141.3 320 141.24C291.42 140.82 341.43 130.15 339.01 121.78C336.88 114.4 325.6 106.27 305.17 97.42"
30+
id="a3UEA8fydq"></path>
31+
<path d="M326.42 156.72L326.42 141.26L326.42 156.72Z" id="k2UbqAO5ab"></path>
32+
<path d="M353.6 181.92C353.6 195.83 341.43 207.13 326.42 207.13C311.42 207.13 299.24 195.83 299.24 181.92C299.24 168.01 311.42 156.72 326.42 156.72C341.43 156.72 353.6 168.01 353.6 181.92Z"
33+
id="dldKpe0nw"></path>
34+
<path d="M339.4 207.13C344.92 207.13 349.4 211.61 349.4 217.13C349.4 233.31 349.4 271.87 349.4 288.06C349.4 293.58 344.92 298.06 339.4 298.06C332.56 298.06 322.02 298.06 315.17 298.06C309.65 298.06 305.17 293.58 305.17 288.06C305.17 271.87 305.17 233.31 305.17 217.13C305.17 211.61 309.65 207.13 315.17 207.13C322.02 207.13 332.56 207.13 339.4 207.13Z"
35+
id="c2hGeFXXpY"></path>
36+
<path d="M387.7 217.01C391.8 217.01 395.12 220.33 395.12 224.42C395.12 226.03 395.12 223.45 395.12 225.06C395.12 229.16 391.8 232.48 387.7 232.48C379.3 232.48 361.51 232.48 353.11 232.48C349.02 232.48 345.7 229.16 345.7 225.06C345.7 223.45 345.7 226.03 345.7 224.42C345.7 220.33 349.02 217.01 353.11 217.01C361.51 217.01 379.3 217.01 387.7 217.01Z"
37+
id="asDAhdbx5"></path>
38+
<path d="M337.64 330.56C336.49 330.56 335.56 329.63 335.56 328.48C335.56 320.67 335.56 299.29 335.56 291.47C335.56 290.32 336.49 289.4 337.64 289.4C339.99 289.4 344.97 289.4 347.33 289.4C348.47 289.4 349.4 290.32 349.4 291.47C349.4 299.29 349.4 320.67 349.4 328.48C349.4 329.63 348.47 330.56 347.33 330.56C344.97 330.56 339.99 330.56 337.64 330.56Z"
39+
id="czxNu7bDL"></path>
40+
<path d="M301.83 217.01C305.93 217.01 309.24 220.33 309.24 224.42C309.24 226.03 309.24 223.45 309.24 225.06C309.24 229.16 305.93 232.48 301.83 232.48C293.43 232.48 275.64 232.48 267.24 232.48C263.14 232.48 259.83 229.16 259.83 225.06C259.83 223.45 259.83 226.03 259.83 224.42C259.83 220.33 263.14 217.01 267.24 217.01C275.64 217.01 293.43 217.01 301.83 217.01Z"
41+
id="b3EGlNjPrx"></path>
42+
<path d="M308.24 330.56C307.09 330.56 306.16 329.63 306.16 328.48C306.16 320.67 306.16 299.29 306.16 291.47C306.16 290.32 307.09 289.4 308.24 289.4C310.59 289.4 315.57 289.4 317.92 289.4C319.07 289.4 320 290.32 320 291.47C320 299.29 320 320.67 320 328.48C320 329.63 319.07 330.56 317.92 330.56C315.57 330.56 310.59 330.56 308.24 330.56Z"
43+
id="g8YoVgGgp"></path>
44+
<path d="M315.06 170.56L315.06 181.43" id="icfE6WPGa"></path>
45+
<path d="M330.87 170.56L330.87 181.43" id="c1sR6xgOmp"></path>
46+
<path d="M313.08 189.09L323.91 188.35L333.84 189.83L325.72 194.28" id="g2SDES8xmT"></path>
47+
</defs>
48+
<g>
49+
<g>
50+
<g>
51+
<g>
52+
<use xlink:href="#epOUG4orR" opacity="1" fill-opacity="0" stroke="#852847" stroke-width="6"
53+
stroke-opacity="1"></use>
54+
</g>
55+
</g>
56+
<g>
57+
<g>
58+
<use xlink:href="#a3UEA8fydq" opacity="1" fill-opacity="0" stroke="#852847" stroke-width="5"
59+
stroke-opacity="1"></use>
60+
</g>
61+
</g>
62+
<g>
63+
<g>
64+
<use xlink:href="#k2UbqAO5ab" opacity="1" fill-opacity="0" stroke="#852847" stroke-width="2"
65+
stroke-opacity="1"></use>
66+
</g>
67+
</g>
68+
<g>
69+
<use id="1" xlink:href="#dldKpe0nw" opacity="1" fill="#776f6a" fill-opacity="1"></use>
70+
</g>
71+
<g>
72+
<use id="2" xlink:href="#c2hGeFXXpY" opacity="1" fill="#6b6b6b" fill-opacity="1"></use>
73+
</g>
74+
<g>
75+
<use id="3" xlink:href="#asDAhdbx5" opacity="1" fill="#66625e" fill-opacity="1"></use>
76+
</g>
77+
<g>
78+
<use id="5" xlink:href="#czxNu7bDL" opacity="1" fill="#66625e" fill-opacity="1"></use>
79+
</g>
80+
<g>
81+
<use id="4" xlink:href="#b3EGlNjPrx" opacity="1" fill="#66625e" fill-opacity="1"></use>
82+
</g>
83+
<g>
84+
<use id="6" xlink:href="#g8YoVgGgp" opacity="1" fill="#66625e" fill-opacity="1"></use>
85+
</g>
86+
87+
88+
89+
</g>
90+
</g>
91+
</svg>
92+
<h1 class="text-center text-danger" id="number1"></h1>
93+
<form >
94+
<input type="text" placeholder="enter a one char" id="in" maxlength="1" class="col-12 in border-bottom" min="0" autofocus required>
95+
<button class="btn-success btn-lg h-100 col-12 mt-2" type="submit">Check</button>
96+
<button type="button" class="btn-danger btn-lg mt-2 h-100 col-12" onclick="location.reload()">Restart</button>
97+
</form>
98+
</div>
99+
<script src="script1.js"></script>
100+
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
101+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
102+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
103+
</body>
104+
105+
</html>

‎index.html

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<html>
2+
3+
<head>
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<meta name="description" content="zoomin interface">
6+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
7+
<link rel="stylesheet" type="text/css" href="style.css">
8+
<link href='https://fonts.googleapis.com/css?family=Allan' rel='stylesheet'>
9+
<link href="https://cdn.layerjs.org/libs/layerjs/layerjs-0.6.0.css" type="text/css" rel="stylesheet" />
10+
<link href='https://fonts.googleapis.com/css?family=Audiowide|Iceland|Monoton|Pacifico|Press+Start+2P|Vampiro+One'
11+
rel='stylesheet' type='text/css'>
12+
<title>Games</title>
13+
</head>
14+
15+
<body lj-type="stage" class="cont">
16+
<div lj-type="layer" lj-default-frame="zoomout" lj-layout="canvas">
17+
<div lj-type="frame" id="zoomout" lj-fit-to="fixed">
18+
<h1><a>Let's Play</a></h1>
19+
<h2>A project by Mohammad Omar</h2>
20+
<p>
21+
Project done for a client side course in Lebanese International University.<br>
22+
Library used : https://layerjs.org
23+
</p>
24+
</div>
25+
<div lj-type="frame" id="zoomin" lj-fit-to="fixed" lj-scale="0.25">
26+
<div lj-type="stage" id="contentstage">
27+
<div lj-type="layer" id="contentlayer" lj-layout="canvas" lj-native-scroll="false">
28+
<div lj-type="frame" id="frame1" lj-fit-to="responsive" lj-neighbors.r="frame2">
29+
<a class="coverlink" href="#frame1;zoomin;minimenu.hamburger"></a>
30+
<iframe width="100%" height="100%" frameborder="0" src="game.html"></iframe>
31+
</div>
32+
<div lj-type="frame" id="frame2" lj-fit-to="responsive" lj-neighbors.l="frame1">
33+
<a class="coverlink" href="#frame2;zoomin;minimenu.hamburger"></a>
34+
<iframe width="100%" height="100%" frameborder="0" src="game1.html"></iframe>
35+
</div>
36+
</div>
37+
</div>
38+
</div>
39+
</div>
40+
<div lj-type="layer" id="minimenu" lj-default-frame="!none" lj-native-scroll="false">
41+
<a href="#zoomout;frame1;minimenu.!none;" lj-type="frame" id="hamburger" lj-start-position="top"
42+
lj-fit-to="fixed" lj-transition="down" onclick="relo()">
43+
&#x2630;
44+
</a>
45+
</div>
46+
<script src="https://cdn.layerjs.org/libs/layerjs/layerjs-0.6.0.min.js"></script>
47+
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
48+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
49+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
50+
<script>layerJS.init();
51+
function relo() {
52+
let frames = document.getElementsByTagName("iframe");
53+
frames[0].src = frames[0].src;
54+
frames[1].src = frames[1].src;
55+
}</script>
56+
</body>
57+
58+
</html>

‎readme.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# javascript games
2+
2 games build with javascript (vanilla js) with the help of html and css
3+
4+
the project also include svgs and frames and use layerjs library -> https://layerjs.org
5+
6+
# screenshots
7+
# home screen
8+
9+
![picture](screenshots/home.png)
10+
11+
12+
# memory game
13+
![picture](screenshots/g1.png)
14+
15+
16+
# The gallows Game
17+
![picture](screenshots/g2.png)
18+

‎screenshots/g1.png

27 KB
Loading

‎screenshots/g2.png

35.1 KB
Loading

‎screenshots/home.png

329 KB
Loading

‎script.js

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎script1.js

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎style.css

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)