-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwho-let-the-dogs-out.php
124 lines (106 loc) · 7.16 KB
/
who-let-the-dogs-out.php
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html lang="en">
<?php $title = 'Portfolio of Josy Li | jQuery Game'; include 'head.php'?>
<body>
<?php include 'nav.php'?>
<header class="page-header">
<img
sizes="(max-width: 1400px) 100vw, 1400px"
srcset="
./media/dog/wholetthedogsout-banner_wms4il_c_scale,w_200.png 200w,
./media/dog/wholetthedogsout-banner_wms4il_c_scale,w_636.png 636w,
./media/dog/wholetthedogsout-banner_wms4il_c_scale,w_985.png 985w,
./media/dog/wholetthedogsout-banner_wms4il_c_scale,w_1223.png 1223w,
./media/dog/wholetthedogsout-banner_wms4il_c_scale,w_1400.png 1400w"
src="./media/dog/wholetthedogsout-banner_wms4il_c_scale,w_1400.png"
alt="">
<h1>Who Let The Dogs Out</h1>
</header>
<main>
<section class="section-height reveal active" id="project-main">
<div class="titlecontainer">
<h2 class="project-title">Overview</h2>
<hr>
</div>
<p>Tools: jQuery, CSS, HTML, Adobe Photoshop</p>
<p>Duration: 2 weeks</p>
<p>
Who Let the Dogs Out is a matching game developed based on jquery library. Players can enter their names to personalize their gameplay and select from different difficulty levels. The game also includes a feature that randomizes the target dog breed and the dog breeds on the game board in the "hard" mode, adding an element of surprise and challenge to the gameplay.
</p>
<div class="project-button-container">
<a href="https://josy.dev/game/" target="_blank" rel="noopener noreferrer">
<button class="project-button">
Live Site
</button>
</a>
<a href="https://github.com/josyliyh/who-let-the-dogs-out.git" target="_blank" rel="noopener noreferrer">
<button class="project-button">
GitHub
</button>
</a>
</div>
<div class="titlecontainer reveal" id="features">
<h2 class="project-title">Features</h2>
<hr>
</div>
<article class="feature reveal">
<h3>Target dog breed</h3>
<p>The game utilizes the math.random method and clone method to randomly select and duplicate a target dog breed.</p>
<video width="300px" autoplay muted loop>
<source src="./media/dog/screenshot_rand.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<p class="codepen" data-height="300" data-default-tab="js" data-slug-hash="QWxdyrm" data-editable="true" data-user="Josyyhli" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/Josyyhli/pen/QWxdyrm">
Untitled</a> by j (<a href="https://codepen.io/Josyyhli">@Josyyhli</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
</article>
<article class="feature reveal">
<h3>Count-down timer</h3>
<p>Once they click start, the timer will countdown 90 seconds.</p>
<p>Players can pause and resume at any time.</p>
<img src="../media/dog/screenshot_timer.png" loading="lazy" alt="">
<p>The code snippet below shows how I display the timer with minute and second</p>
<p class="codepen" data-height="300" data-default-tab="js" data-slug-hash="rNKjxKP" data-editable="true" data-user="Josyyhli" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/Josyyhli/pen/rNKjxKP">
Untitled</a> by j (<a href="https://codepen.io/Josyyhli">@Josyyhli</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
</article>
<article class="feature reveal">
<h3>Scorekeeping board</h3>
<p>
Players will get one point if they choose the same dog breed as the target dog and will lose one point if they choose the wrong dog breed.
</p>
<video width="600px" autoplay muted loop>
<source src="./media/dog/screenshot_score.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<p>The code snippet below shows how I update the score whenever a dog breed is chosen.</p>
<p class="codepen" data-height="300" data-default-tab="js" data-slug-hash="dyKNGaM" data-editable="true" data-user="Josyyhli" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/Josyyhli/pen/dyKNGaM">
Untitled</a> by j (<a href="https://codepen.io/Josyyhli">@Josyyhli</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
</article>
<article class="reflection reveal">
<div class="titlecontainer" id="reflection">
<h2 class="project-title">Reflection</h2>
<hr>
</div>
<p>
I am thrilled to have had the opportunity to create a game similar to one I enjoyed as a child. The entire process, from planning and development to debugging and styling, was an enjoyable and enlightening experience.
</p>
<p>
As this was one of my first projects as a developer, I am proud of the final result and am amazed by the capabilities of JavaScript.
</p>
</article>
</section>
</main>
</body>
<script src="./scripts/script.js"></script>
</html>