🚀 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

Built a Pac-Man from scratch. No libraries. No frameworks. Just vanilla JavaScript, HTML5 Canvas, and CSS. 👾 The result? Pac-Man Neon Arcade — a fully functional, neon-themed recreation of the classic game, running entirely in the browser. Here's what's under the hood: 🕹️ Game logic built with ES6 Modules — character movement, collision detection, and a full state machine 🎨 HTML5 Canvas for rendering the maze, Pac-Man, and ghost animations 👻 Individual AI written for each ghost — they don't all behave the same 🔊 Sound effects, high score tracking, multiple difficulty levels, and pause/resume The most challenging part? Writing the ghost AI from scratch. Each ghost has its own targeting logic, which is what makes the original game feel alive — and replicating that without any game engine was a great exercise in thinking algorithmically. No npm install. No build step. Just clone and open index.html. 🔗 GitHub: https://lnkd.in/gg7ybRS5 🔗 Live Link: https://lnkd.in/gYYxsmaQ Would love feedback from fellow devs — especially on the architecture and AI logic! #JavaScript #HTML5Canvas #GameDev #VanillaJS #BuildInPublic #WebDevelopment #OpenSource

🎮 Just built a browser-based strategy game from scratch — Stone vs Stick! A 3×3 tactical board game built purely with HTML, CSS & JavaScript. No frameworks, no libraries — just clean vanilla code. What's inside: 🪨 vs 🪵 two-player strategy on a connected node grid Two phases — Placement & Movement Win by lining up 3 pieces: horizontal, vertical, or diagonal First to 5 rounds wins the match 🤖 AI opponent with strategic blocking & winning logic 🪙 Animated coin toss to decide who goes first 🎨 4 immersive themes — Forest, Mountain, Water & Fire 📱 Fully responsive — works on mobile & desktop Drag & drop piece movement with snap-to-node validation This was a fun challenge in pure JS game logic — turn management, win detection, AI decision trees, CSS 3D animations, and touch/drag interactions all without a single dependency. 🔗 Play it here: [https://lnkd.in/ggtXKhVU] Built and deployed via GitHub Pages. #buildinpublic #javascript #webdev #gamedev #opensource #html #css #frontenddevelopment

𝗝𝘂𝘀𝘁 𝗕𝘂𝗶𝗹𝘁 𝗮 𝗚𝗮𝗹𝗮𝘅𝘆-𝗧𝗵𝗲𝗺𝗲𝗱 𝗠𝗲𝗺𝗼𝗿𝘆 𝗠𝗮𝘁𝗰𝗵𝗶𝗻𝗴 𝗚𝗮𝗺𝗲! 🌌 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

🎮 Built a Snake Game using HTML, CSS & JavaScript — with persistent high scores! This project was more than just recreating a classic game. I focused on making it interactive and state-aware. 💡 Highlights: • Smooth snake movement & keyboard controls • Real-time score tracking • 🧠 High score saved using LocalStorage (persists even after refresh) • Game over + restart functionality • Clean UI for better user experience ⚙️ One interesting challenge was managing game state and ensuring the high score updates correctly without breaking the flow. This project helped me understand DOM manipulation, event handling, and how browsers can store data locally. 🚀 Next: Adding levels, sound effects, and mobile responsiveness! Would love your thoughts and suggestions 🙌 #JavaScript #WebDevelopment #Frontend #Projects #Coding #100DaysOfCode

🚧 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

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

🚀 Just Built an Escape Room Game using HTML & JavaScript! 🎮🔥 Excited to share my latest project – a fully interactive Escape Game developed using core web technologies! 🧠💡 In this game, players must solve puzzles, unlock clues, and make smart decisions to escape within a limited time. It’s designed to challenge logical thinking, problem-solving skills, and creativity. 🔧 Tech Used: • HTML for structure • CSS for styling & UI • JavaScript for game logic & interactivity ✨ Key Features: ✔️ Interactive puzzles & challenges ✔️ Timer-based gameplay ⏳ ✔️ Dynamic clues & user responses ✔️ Smooth and engaging UI This project helped me strengthen my concepts in DOM manipulation, event handling, and logic building in JavaScript. 💭 Building this game was not just fun, but also a great learning experience in creating real-world interactive applications. 🎥 Check out the demo video below and let me know your feedback! #WebDevelopment #JavaScript #HTML #Coding #GameDevelopment #FrontendDeveloper #Projects #LearningByDoing #TechWithArjun

🚀 I built a Dino Runner game from scratch – no frameworks, just pure HTML/CSS/JS! Ever wanted to understand how classic endless runners work? I challenged myself to recreate the Chrome Dino Game as a beginner‑friendly project. 🎮 Live demo: https://lnkd.in/gPHSD8eT 📂 Code & README: https://lnkd.in/gNsSXyvE What’s inside? Canvas‑based animation & game loop Collision detection & simple physics (gravity, jump) Dynamic difficulty (speed & spawn rate increase with score) Responsive design + mobile tap support Deployed on GitHub Pages – one click to play Why I’m proud of it: It’s 100% vanilla – no libraries, no builds. Just HTML, CSS (Flexbox + media queries), and JavaScript. A great way to practice DOM manipulation, requestAnimationFrame, and event handling. Try to beat my high score! 🦖💨 👇 Feedback & suggestions are very welcome. 🎯 From idea to live game – my first HTML/CSS/JS project: Dino Runner When I started learning web dev, I never thought I could build an interactive game. Two weeks later, here it is – a complete endless runner inspired by Chrome’s offline dinosaur. What I learned: How requestAnimationFrame() powers smooth animations Simple gravity & jump mechanics Collision detection between rectangles Using localStorage? (not here, but next time 😄) Deploying instantly with GitHub Pages The best part? The entire game fits in one index.html file. No complex setup – open it and play. 🔗 Live demo + full code in the comments If you’re also learning to code – just start building. It doesn’t have to be perfect, it just has to be yours. #buildinpublic #learntocode #webdev #javascript #gamedevelopment

🚀 Project Showcase: Tic Tac Toe Game using HTML, CSS & JavaScript Excited to share one of my recent mini-projects – a Tic Tac Toe Game built using HTML, CSS, and JavaScript! 🎮 This project helped me strengthen my understanding of DOM manipulation, game logic, and responsive UI design. 🔹 Key Features: Interactive 2-player gameplay Dynamic win detection logic Clean and responsive user interface Reset game functionality 🔹 Technologies Used: HTML – Structure of the game board CSS – Styling and layout JavaScript – Game logic and interactivity Building this project was a great way to practice JavaScript fundamentals and problem-solving skills while creating something fun and interactive. Looking forward to building more projects and continuously improving my development skills! 💻✨ Check my GitHub repo : 🔗 https://lnkd.in/gCz98WpX Day 5 of #100DaysOfCode #WebDevelopment #JavaScript #HTML #CSS #FrontendDevelopment #CodingProjects #LearningJourney