HTML CSS JavaScript Memory Game with 3D Animations and Score Tracker

🐍 Built a Snake Game using HTML, CSS, and JavaScript! I recently worked on building the classic Snake Game from scratch using Vanilla JavaScript. This project helped me practice DOM manipulation, game logic, and state management while creating an interactive browser game. ✨ Features of the game: • Dynamic grid-based game board • Smooth snake movement using keyboard arrow keys • Random food generation • Score system that increases when the snake eats food • High score saved using Local Storage • Timer to track gameplay duration • Start Game and Game Over modals • Restart functionality to play again instantly 🧠 Concepts I practiced while building this: • DOM manipulation • Event handling with keyboard input • Game loops using setInterval() • Working with arrays and objects for game state • Using Local Storage to persist data Projects like this are a great way to strengthen JavaScript fundamentals and understand how interactive applications work in the browser. I’m planning to improve this further by adding: 🎯 Self-collision detection 🎯 Better animations and UI 🎯 Mobile controls 🔗 Live Demo: https://lnkd.in/g8ZDj5hy #JavaScript #WebDevelopment #FrontendDevelopment #Coding #BuildInPublic #100DaysOfCode

A few weeks ago, I didn't fully understand what the Event Loop actually meant. Today, I built a gaming website — and honestly? I'm still processing it. 😅 🎮 Introducing ARCADEVERSE — a fully playable browser gaming site I built from scratch using nothing but HTML, CSS, and JavaScript. No React. No Vue. No frameworks. Just pure fundamentals. --- Here's what's inside 👇 🐍 Snake Game 🧩 2048 Puzzle ⌨️ Typing Speed Test 🎯 Whack-a-Mole 🃏 Blackjack 🌌 Asteroid Shooter All 6 games are playable directly in the browser — no downloads, no installs. --- 🛠️ Tech Stack: → HTML5 + CSS3 (Grid, Flexbox, CSS Variables, Animations) → Vanilla JavaScript (ES6+) → GSAP + ScrollTrigger for animations → Canvas API for Snake & Asteroids → Lenis-style smooth scroll --- Every single game was built to demonstrate real JavaScript concepts: ✅ DOM Manipulation — cards, scores, timers update live ✅ Higher Order Functions — map, filter, reduce, flatMap in every game ✅ Callbacks — every click, keypress, and touch is a callback ✅ Promises — dealer reveals, card flip delays, mole timers ✅ Async / Await — sequential animations and fetch simulations ✅ Event Loop — setInterval ticks, setTimeout queues, rAF game loops ✅ GSAP — scroll reveals, stagger entrances, parallax, hover effects --- The thing nobody tells you when you start coding: The best way to understand a concept is to BUILD something with it. I didn't fully get Promises until I had to delay a card flip and wait for the result. I didn't truly understand the Event Loop until my snake was moving on a setInterval tick. Building games made abstract concepts feel real. --- If you're learning JavaScript right now, build something playable. You'll surprise yourself. 🙌 #JavaScript #WebDevelopment #HTML #CSS #GSAP #VanillaJS #ShowAndTell #LearningInPublic #FrontendDevelopment

🚀 Just built a Hangman Game using HTML, CSS & JavaScript! 🎯 Features: • Letter-by-letter guessing system • Hint provided for each word • Maximum 6 wrong attempts • 😢 Sad emoji on loss • 🎉 Victory emoji on success This project helped me strengthen my understanding of: ✔ DOM Manipulation ✔ Event Handling ✔ Game Logic Implementation 💡 It was fun designing the logic behind tracking wrong guesses and updating the UI dynamically. 🔗 Check out the code here: https://lnkd.in/gMnvFf-i #WebDevelopment #JavaScript #FrontendDevelopment #CodingProjects #100DaysOfCode

𝗝𝘂𝘀𝘁 𝗕𝘂𝗶𝗹𝘁 𝗮 𝗚𝗮𝗹𝗮𝘅𝘆-𝗧𝗵𝗲𝗺𝗲𝗱 𝗠𝗲𝗺𝗼𝗿𝘆 𝗠𝗮𝘁𝗰𝗵𝗶𝗻𝗴 𝗚𝗮𝗺𝗲! 🌌 I recently developed an interactive Memory Matching Game using HTML, CSS, JavaScript, and jQuery as part of my learning in web development. The game challenges players to flip cards and find matching pairs within a 60-second time limit. Each match reveals a space-themed symbol, and the game includes sound effects, animations, a move counter, and dynamic card shuffling to make the experience engaging and interactive. ✨ Key Features: • Dynamic card generation and random shuffling • Card flip animations and smooth UI effects • 60-second countdown timer • Move tracking system • Sound feedback for correct and wrong matches • Restart functionality for a new shuffled game This project was completed under the supervision of Mam Juhinah Batool 🎥 I’m attaching a video demo of the game below. 🔗 The complete project is available on GitHub: https://lnkd.in/dWXBBFJJ #WebDevelopment #JavaScript #jQuery #FrontendDevelopment #StudentProject #LearningByDoing #CodingJourney #InteractiveWeb

🚀 Day 25 of #30DaysOfJavaScript Just built a ✊ Rock Paper Scissors Game using HTML, CSS & JavaScript! 🎮 It’s a simple game but helped me strengthen my core JavaScript concepts like logic building, DOM manipulation, and event handling. 🔥 Features: ✅ Player vs Computer gameplay ✅ Random AI moves ✅ Live score tracking ✅ Win / Lose / Draw logic ✅ Dark / Light mode toggle 🌙☀️ ✅ Fully responsive UI 📱 🌐 Live Demo: https://lnkd.in/gGdkuZaT 💻 GitHub Code: https://lnkd.in/g5JkVdx3 📚 What I learned: - Writing clean game logic - Handling user interactions - Updating UI dynamically - Improving UI/UX with simple features Consistency is the key 🔑 — 25 days strong and still going 💪 #JavaScript #WebDevelopment #FrontendDeveloper #100DaysOfCode #CodingJourney #HTML #CSS #Projects

Work in progress: Building the Snake Game using JavaScript logic Yesterday I shared the idea and visual design of the Snake Game. Today I started implementing the core logic in JavaScript. The first step was creating the board dynamically instead of writing HTML for every cell. The board is divided into blocks using fixed block width and height. Using the board's width and height, I calculate how many rows and columns can fit inside the board. I then use two nested loops to generate the grid. For each row and column, a new div element is created and added to the board. Each block is also stored inside an object using coordinates like row-column so that it can be accessed quickly later. Next comes the snake structure. The snake is represented as an array of objects where each object contains x and y coordinates. These coordinates represent the position of each segment of the snake on the grid. The render function is responsible for displaying the snake on the board. It loops through each segment of the snake and finds the corresponding block using its coordinates. Then it adds a class to visually fill that block, making it appear as part of the snake. This approach makes the board behave like a coordinate system where every cell can be accessed instantly using its row and column values. The next steps will be implementing movement logic, keyboard controls, food generation, collision detection, and score updates. Currently focusing on building the core logic step by step. #JavaScript #WebDevelopment #GameDevelopment #LearningByBuilding #FrontendDevelopment

Today I Learned: setTimeout() in JavaScript Today I explored how setTimeout() works in JavaScript ⏳ It allows you to execute a function after a specified delay Very useful for creating delays, animations, alerts, or API calls Example: setTimeout(() => { console.log("Hello after 2 seconds!"); }, 2000); Key Learning: Time is in milliseconds (1000ms = 1 second) Runs only once after the delay Helps in asynchronous programming Small concept, but very powerful in real-world projects! #JavaScript #WebDevelopment #FrontendDeveloper #CodingJourney #LearningEveryday

🚧 Building in Public: Creating Monopoly with HTML, CSS & JavaScript 🎲 What started as a simple idea turned into a real challenge… so I decided to build a Monopoly game from scratch using pure HTML, CSS, and JavaScript. From designing the board 🎯 To handling player movement 🧍♂️ To coding game logic and interactions ⚙️ It’s been fun, frustrating, and incredibly rewarding at the same time. Here’s a quick preview of my progress 👇 I’m still improving it — adding smarter gameplay, better UI, and more features. 💡 If you were to play this, what feature would you want me to add? #BuildInPublic #JavaScript #WebDevelopment #CodingJourney #FrontendDeveloper #Projects #100DaysOfCode

🚀 Just Built a Classic Snake Game with JavaScript! 🐍 Today I built a Snake Game using HTML, CSS, and JavaScript as part of my learning journey in frontend development. This project helped me practice DOM manipulation, game logic, and UI design while recreating one of the most iconic arcade games. ✨ Features included: • Smooth snake movement using keyboard controls • Random food generation 🍎 • Score and High Score system (saved with LocalStorage) • Game Over and Restart functionality • Timer to track play session ⏱️ • Sound effects for eating apples and game over 🔊 • Mobile control buttons for smaller screens I also focused on creating a modern UI with gradients, glow effects, and animations to make the game visually engaging. Building small games like this is a great way to strengthen JavaScript fundamentals and problem-solving skills. More improvements coming soon: • Increasing difficulty levels • Better mobile responsiveness • Smoother animations 🔗 I’ll keep updating this project as I learn more. 🎮 Play the game: https://lnkd.in/gtd754n3 Sheryians Coding School Sarthak Sharma Devendra Dhote Ritik Rajput #JavaScript #WebDevelopment #FrontendDevelopment #100DaysOfCode #CodingJourney #HTML #CSS

Day 5 of my 21-day challenge. Today I built a mouse hover spotlight effect using JavaScript and DOM manipulation. LINK: https://lnkd.in/gsWAn74n What it does: • The screen stays dark by default • When you move the mouse, a circular spotlight follows the cursor • Only the area around the cursor becomes visible • The rest of the page remains dimmed, creating a flashlight-like effect Concepts I practiced: • Mouse move events • Dynamic styling with JavaScript • DOM interaction to create real-time visual effects Small interaction, but it shows how powerful simple mouse events can be when combined with DOM manipulation. Learning step by step and building in public. #javascript #webdevelopment #frontenddevelopment #dom #learninginpublic #SheriyansCodingSchool