-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
170 lines (170 loc) · 5.87 KB
/
index.html
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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!DOCTYPE html>
<html lang="en" data-theme="dracula">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript Game Development</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<div class="hero bg-base-100 pt-8">
<div class="hero-content text-center">
<div class="max-w-md">
<h1 class="text-5xl font-bold">JavaScript Game Development!</h1>
<p class="py-6">
2D games with HTML, CSS & plain vanilla JavaScript, no frameworks
and no libraries! From sprite animation to state management.
</p>
</div>
</div>
</div>
<div class="container max-w-[1280px] mx-auto">
<section class="flex flex-wrap justify-center gap-6 mt-4">
<a
href="Project-1 - Sprite Animations/index.html"
class="card w-96 bg-base-300 shadow-xl col-span-4"
>
<figure class="px-10 pt-10">
<img
src="assets/sprite-animations.gif"
alt="dog"
class="rounded-xl h-[300px] w-[300px]"
/>
</figure>
<div class="card-body items-center text-center">
<h2 class="card-title">Project 1</h2>
<p>Vanilla JavaScript sprite animation techniques</p>
</div>
</a>
<a
href="Project-2 - Parallax Backgrounds/index.html"
class="card w-96 bg-base-300 shadow-xl col-span-4"
>
<figure class="px-10 pt-10">
<img
src="assets/parallax-background.gif"
alt="background"
class="rounded-xl h-[300px] w-[300px]"
/>
</figure>
<div class="card-body items-center text-center">
<h2 class="card-title">Project 2</h2>
<p>Parallax backgrounds with JavaScript</p>
</div>
</a>
<a
href="Project-3 - NPC movment animations/index.html"
class="card w-96 bg-base-300 shadow-xl col-span-4"
>
<figure class="px-10 pt-10">
<img
src="assets/npc-movment-animations.gif"
alt="background"
class="rounded-xl h-[300px] w-[300px] object-cover"
/>
</figure>
<div class="card-body items-center text-center">
<h2 class="card-title">Project 3</h2>
<p>Enemy movement patterns</p>
</div>
</a>
<a
href="Project-4 - Collision detection/index.html"
class="card w-96 bg-base-300 shadow-xl col-span-4"
>
<figure class="px-10 pt-10">
<img
src="assets/animations-on-trigger.gif"
alt="background"
class="rounded-xl h-[300px] w-[300px] object-cover"
/>
</figure>
<div class="card-body items-center text-center">
<h2 class="card-title">Project 4</h2>
<p>Collision animations from a sprite sheet</p>
</div>
</a>
<a
href="Project-5 - Point and shoot game/index.html"
class="card w-96 bg-base-300 shadow-xl col-span-4"
>
<figure class="px-10 pt-10">
<img
src="assets/point-and-shoot.png"
alt="background"
class="rounded-xl h-[300px] w-[300px] object-cover"
/>
</figure>
<div class="card-body items-center text-center">
<h2 class="card-title">Project 5</h2>
<p>Point & shoot game</p>
</div>
</a>
<a
href="Project-6 - Enemy variety/index.html"
class="card w-96 bg-base-300 shadow-xl col-span-4"
>
<figure class="px-10 pt-10">
<img
src="assets/enemy-variety.gif"
alt="background"
class="rounded-xl h-[300px] w-[300px] object-cover"
/>
</figure>
<div class="card-body items-center text-center">
<h2 class="card-title">Project 6</h2>
<p>Enemy variety in JavaScript games</p>
</div>
</a>
<a
href="Project-7 - Side-scroller game/index.html"
class="card w-96 bg-base-300 shadow-xl col-span-4"
>
<figure class="px-10 pt-10">
<img
src="assets/side-scroll-game.png"
alt="background"
class="rounded-xl h-[300px] w-[300px] object-cover"
/>
</figure>
<div class="card-body items-center text-center">
<h2 class="card-title">Project 7</h2>
<p>Side-scroller game with mobile support</p>
</div>
</a>
<a
href="Project-8 - State managment/index.html"
class="card w-96 bg-base-300 shadow-xl col-span-4"
>
<figure class="px-10 pt-10">
<img
src="assets/state-managment.gif"
alt="background"
class="rounded-xl h-[300px] w-[300px] object-cover"
/>
</figure>
<div class="card-body items-center text-center">
<h2 class="card-title">Project 8</h2>
<p>State management in JavaScript games</p>
</div>
</a>
<a
href="Project-9 - Final endless runner game with all the features/index.html"
class="card w-96 bg-base-300 shadow-xl col-span-4"
>
<figure class="px-10 pt-10">
<img
src="assets/js-complete-game.gif"
alt="game"
class="rounded-xl h-[300px] w-[300px] object-cover"
/>
</figure>
<div class="card-body items-center text-center">
<h2 class="card-title">Project 9</h2>
<p>Final endless runner game with all the features</p>
</div>
</a>
</section>
</div>
</body>
</html>