WaterSplash is an interactive web-based game developed using HTML5, CSS3, and JavaScript. Avoid obstacles and score as high as you can!
Core Technologies Used
✅ HTML
-
HTML5 Doctype: The page starts with
<!DOCTYPE html>, indicating HTML5. -
Semantic Tags: Uses
<div>,<button>, and<span>for layout and interaction. -
Meta Tags: Includes basic metadata like charset and viewport for mobile responsiveness.
🎨 CSS
-
Inline CSS: Styling is embedded directly within the
<style>tag in the HTML file. -
Custom Fonts: Uses
@font-faceto load a custom font fromfonts/directory. -
Animations: CSS
@keyframesused for splash effects and button transitions. -
Responsive Design: Uses
vw,vh, andmedia queriesto adapt layout across devices.
⚙️ JavaScript
-
Vanilla JavaScript: No external libraries or frameworks; all logic is written in plain JS.
-
Event Listeners:
onclickhandlers trigger game start and splash animations. -
DOM Manipulation: Uses
document.getElementById()andstyle.displayto show/hide elements. -
Splash Effect: Simulates water splash using animated
<div>elements styled with CSS.
🕹️ Game Logic and Structure
-
Start Button: Triggers the game via
startGame()function. -
Splash Animation: Multiple
<div>elements with classsplashare animated using CSS and JS. -
Game Flow: Simple interaction — click to start, splash effect plays, then game ends or resets.
📁 File Structure and Assets
-
HTML File:
index.html— contains all markup, styles, and scripts. -
Fonts: Custom font loaded from
fonts/folder. -
Images: Background and splash visuals stored in
images/or embedded via CSS. -
No External Dependencies: No CDN, no external JS libraries, no backend calls.
