-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathprogram1.html
More file actions
170 lines (168 loc) · 7.61 KB
/
program1.html
File metadata and controls
170 lines (168 loc) · 7.61 KB
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">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Game Development Workshop – Nenasa</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">
<link href="https://unpkg.com/aos@2.3.4/dist/aos.css" rel="stylesheet">
<style>
:root {
--bg-light: #ffffff;
--text-light: #212529;
--bg-dark: #121212;
--text-dark: #f8f9fa;
--card-bg-light: #ffffff;
--card-bg-dark: #1e1e1e;
}
body {
font-family: 'Poppins', sans-serif;
background-color: var(--bg-light);
color: var(--text-light);
transition: background-color 0.3s, color 0.3s;
}
header {
background-color: var(--bg-light);
transition: background-color 0.3s;
}
@media (min-width: 992px) {
header {
padding-left: 2%;
padding-right: 2%;
}
}
.navbar-brand {
background-image: url('/assets/img/nenasa_Logo.png');
width: 120px;
height: 40px;
background-size: contain;
background-repeat: no-repeat;
}
@media (min-width: 992px) {
header {
padding-left: 2%;
padding-right: 2%;
}
}
footer {
background-color: var(--bg-light);
color: var(--text-light);
padding: 2rem 0;
}
.hero-section {
padding: 4rem 0;
}
html { scroll-behavior: smooth; }
</style>
</head>
<body>
<!-- Header and Navigation -->
<header class="fixed-top">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<a class="navbar-brand" href="./index"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav align-items-lg-center">
<li class="nav-item">
<a class="nav-link" href="./index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./competitions">Competitions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./programs">Workshops</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./about">About</a>
</li>
<li class="nav-item">
<!-- chng -->
<a class="nav-link" href="./contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="mt-5 pt-5">
<section class="hero-section">
<div class="container">
<div class="row g-4 align-items-center">
<div class="col-lg-6" data-aos="fade-right">
<h1 class="fw-bold mb-3">Game Development Workshop</h1>
<p class="lead">Our primary goal was to introduce them to the foundational concepts of game development and help them realize that game creation is not only fun but also accessible to anyone with a passion for learning.<br><br>
The session began with an overview of what makes a game engaging—storytelling, interactivity, challenge, and feedback. We explained the difference between 2D and 3D games, and how assets such as sprites, sounds, and animations come together to create a compelling experience. Students were introduced to key game development components like game loops, event-driven programming, and frame rendering. We used Scratch to demonstrate logic building with block-based coding, which helped them understand core concepts such as conditions, variables, loops, and event handlers in a visual and interactive way.<br><br>
For older students, we introduced Unity and gave them a hands-on walkthrough of creating a simple 2D platformer. They learned how to add player controls using C# scripting, how to implement physics like gravity and collisions. We also touched on UI elements like health bars and score counters.<br><br>
In addition, we explored how game development ties into other STEM fields—math for collision detection and movement calculations, physics for realistic interactions, and art for visual storytelling. The session concluded with a fun mini-hackathon where students teamed up to brainstorm, design, and prototype their own simple games.<br><br>
Overall, the session was not just about teaching technical skills, but about opening up a world of possibilities. It gave students the confidence to see themselves not just as consumers of technology, but as future creators and innovators in the gaming industry.</p>
</div>
<div class="col-lg-6" data-aos="fade-left">
<img src="assets/img/nakkawatta1.jpg" alt="Game Development Workshop" class="img-fluid rounded">
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="text-center pt-4 pb-4">
<div class="container">
<!-- Logos row: partner - main - partner -->
<div class="d-flex justify-content-center align-items-center gap-4 flex-wrap mb-3">
<!-- Partner (left) -->
<img src="assets/img/nenasa_Logo.png" alt="Partner logo 1"
class="img-fluid" style="height:36px" loading="lazy">
<!-- Main site logo (center) -->
<img src="assets/img/SIGHT-logo.png" alt="Main site logo"
class="img-fluid" style="height:48px" loading="lazy">
<!-- Partner (right) -->
<img src="assets/img/IEEE-SL.png" alt="Partner logo 2"
class="img-fluid" style="height:36px" loading="lazy">
</div>
<!-- Social links -->
<ul class="list-unstyled d-flex justify-content-center gap-3 fs-4 mb-3">
<li>
<a href="https://www.facebook.com/share/1HcgRAAKkG/" target="_blank" rel="noopener"
class="text-decoration-none text-body" aria-label="Facebook">
<i class="bi bi-facebook"></i>
</a>
</li>
<li>
<a href="https://www.instagram.com/ieeenenasa?igsh=cmxsMmJudm5hamdl" target="_blank" rel="noopener"
class="text-decoration-none text-body" aria-label="Instagram">
<i class="bi bi-instagram"></i>
</a>
</li>
<li>
<a href="https://www.linkedin.com/company/ieee-nenasa/" target="_blank" rel="noopener"
class="text-decoration-none text-body" aria-label="LinkedIn">
<i class="bi bi-linkedin"></i>
</a>
</li>
<li>
<a href="contact.html"
class="text-decoration-none text-body" aria-label="Email">
<i class="bi bi-envelope"></i>
</a>
</li>
</ul>
<!-- Copyright / claims -->
<p class="mb-1 small">© <span id="year"></span> IEEE Sri Lanka Section. All rights reserved.</p>
<p class="mb-0 small text-muted">
Design & Developed by Nenasa Project
</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script>
<script>
document.getElementById('year').textContent = new Date().getFullYear();
AOS.init({ once: true });
</script>
</body>
</html>