Hello everyone! 👋 I'm developing an absurd Rube Goldberg-style circuit-building game, browser-based, using Three.js and JavaScript. 🎮 Features and Current Progress: I've integrated free assets from Kenney. I'm currently testing the selection of assets grouped by sub-levels (by name). The key feature is the "circuit editing mode": users can select any piece, drag it onto the screen, and manipulate it (rotate, scale, and move it along all three axes). Piece positions are saved using a lightweight backend. The game is in a very early stage, but since everything loads directly in the browser, no installation is needed! I plan to post regular updates here and hope you find the concept interesting! More content in my IG account: devpixelbytes #devpixlbytes #ThreeJS #JavaScript #RubeGoldberg #gamedev
More Relevant Posts
-
🚀 Just built an improved version of my Tic Tac Toe Game using HTML, CSS, and JavaScript! In this version, I focused on enhancing both UI and game functionality to make the experience more interactive and user-friendly. 🎯 Key Features: Clean and modern UI with gradient background Distinct colors for X and O for better visibility Real-time score tracking system Winner detection with result display Reset functionality for continuous gameplay Fully responsive design for mobile devices 💡 This project helped me strengthen my understanding of DOM manipulation, event handling, and managing game logic in JavaScript. 🔗 Live Demo: https://lnkd.in/dTf_RWvZ I’m continuously improving my skills by building and upgrading projects step by step. #javascript #frontenddeveloper #webdevelopment #coding #projects #learning #html #css
To view or add a comment, sign in
-
-
🚀 Just built my Tic Tac Toe game using HTML, CSS & JavaScript! As part of my JavaScript learning journey, I created a fully functional game that covers: 🎯 DOM Manipulation 🎯 Event Handling 🎯 Game Logic Implementation 🎯 Responsive UI Design This project helped me understand how real-world applications manage state, user interactions, and logic behind the scenes. ✨ Features: * Interactive 2-player gameplay * Win detection algorithm * Reset & New Game functionality * Modern mobile-inspired UI 💡 Next step: Planning to add an AI opponent and turn this into a smarter game. 🔗 Check out the project here: https://lnkd.in/gPVZPyK9 Would love your feedback! 🙌 #JavaScript #WebDevelopment #Frontend #LearningInPublic #Projects #100DaysOfCode #ApnaCollege
To view or add a comment, sign in
-
I've been experimenting with custom route transitions to make navigating between pages feel a bit more native and alive. To build this, I used Next.js and next-transition-router to handle the actual page rendering logic, custom SVGs for the wave layers, and GSAP to animate the sweeps. Getting the animations to sync perfectly with the route changes took a bit of fine-tuning, but the final result makes the whole site feel much more cohesive. I've opened up the source code for anyone who wants to check it out. You're welcome to refer to the logic or just copy the setup straight into your own builds: https://lnkd.in/gM7GDChZ #nextjs #gsap #frontenddevelopment #webdevelopment #reactjs #uiengineering #webanimation #javascript #frontend #css #softwareengineering
To view or add a comment, sign in
-
🚀 Day 23 – Throttling Events in JavaScript Ever noticed your app lagging during scroll or resize? 🤔 That’s because some events fire hundreds of times per second! 💡 Today I explored Throttling — a simple yet powerful technique to control how often a function executes. 👉 Instead of running a function continuously, throttling ensures it runs at fixed intervals ⏱️ 🔥 Why it matters: ✔ Improves performance ✔ Prevents unnecessary function calls ✔ Makes UI smoother ⚡ Common Use Cases: 📜 Scroll events 📏 Window resize 🖱️ Mouse movement 🎯 Animations & tracking 🧠 Pro Tip (Angular Devs): Using @RxJS makes throttling super easy with throttleTime() 🔥 Small optimization… but a huge impact on performance! 💯 💬 What’s your go-to: Throttling or Debouncing? #Day23 #JavaScript #Angular #WebDevelopment #Frontend #Performance #RxJS #CodingJourney
To view or add a comment, sign in
-
-
🚀 Just built an advanced Tic Tac Toe Game using HTML, CSS, and JavaScript! This project helped me dive deeper into DOM manipulation, event handling, and game logic implementation. 🎯 Key Features: Dynamic player name input Real-time turn-based gameplay Winner detection with result display Automatic disabling of board after win New Game & Reset functionality Fully responsive design for mobile devices 💡 Through this project, I improved my ability to handle user interaction, manage game state, and build interactive web applications. 🔗 Live Demo: https://lnkd.in/d829cDrB� I’m currently focusing on strengthening my JavaScript and frontend development skills by building real-world projects. #javascript #frontenddeveloper #webdevelopment #coding #projects #learning #html #css
To view or add a comment, sign in
-
-
🪝: useState and useEffect are 20% of what hooks can do. Here are the others that actually matter. Everyone knows useState and useEffect. Here are the hooks I use constantly that don't get enough attention: useReducer → When useState has more than 2-3 related values, switch to useReducer → Especially useful for form state with validation → The logic is predictable and testable useRef → Not just for DOM access — use it to persist values across renders WITHOUT triggering re-renders → Storing previous values, debounce timers, animation frame IDs → Massively underused useMemo → Cache expensive computation results → But remember: useMemo itself has a cost. Don't use it for cheap operations. useCallback → Stabilise function references passed to child components → Prevents unnecessary re-renders when used with React.memo useContext → Perfect for theme, auth, or language — data that truly IS global → NOT a replacement for proper state management when state is complex Custom hooks — the real power → Every time I write the same logic in 2+ components, I extract it to a custom hook → useWalletConnection, useFormValidation, useDebounce → Your components become clean. Your logic becomes reusable. The rule I follow: If a component is longer than 100 lines, I probably need a custom hook. What's your most-used React hook that isn't useState or useEffect? #ReactHooks #ReactJS #JavaScript #FrontendDev #useReducer #useMemo #WebDevelopment #CleanCode
To view or add a comment, sign in
-
Turning simple ideas into interactive experiences! I created a Hangman Game using HTML, CSS, and JavaScript where users guess animal names with limited attempts. Every wrong guess brings the hangman closer 👀 Great practice for DOM manipulation and logic building! Try it :- https://lnkd.in/gXCPCZMX #CodingJourney #JavaScriptProjects #Frontend Rohit Jain Full Stack Learning Akshat Sharma Dheeraj Jangid
To view or add a comment, sign in
-
Memory Card Game built with React 🧠🎴 I recently developed a fun and interactive Memory Card Game using React.js, where the main goal is to match pairs of cards while improving memory and focus. 🔧 Tech Stack Used: React (Functional Components) React Hooks (useState, useEffect) JavaScript (ES7+) CSS for styling and animations ✨ Key Features: Card flip animation 🎴 Randomized card shuffle 🔀 Move counter to track performance 📊 Win detection system 🏆 Responsive design for all devices 📱💻 This project helped me strengthen my understanding of React state management, component structure, and UI logic handling. I’m continuously working on improving my front-end development skills and building more interactive projects. 🔗 GitHub: https://lnkd.in/dRXZtVjK 🌐 Live: https://lnkd.in/dH_hAGXi Feedback and suggestions are always welcome! 🙌 #ReactJS #JavaScript #FrontendDevelopment #WebDevelopment #Coding #Projects #100DaysOfCode
To view or add a comment, sign in
-
-
Built a Word Scramble Game using pure HTML, CSS, and JavaScript! This project focuses on core frontend concepts like DOM manipulation, event-driven programming, and state management—without using any frameworks. 💡 Features include: • Dynamic word scrambling logic • Difficulty-based gameplay • Countdown timer using async JS • Score tracking system • Light/Dark mode with localStorage What I enjoyed most was designing the game logic from scratch and handling real-time UI updates efficiently. Small projects like this really helped me strengthen my understanding of JavaScript fundamentals. Would love to hear your feedback! 🙌
To view or add a comment, sign in
-
🚀 Just Built a Memory Game with React.js! Excited to share one of my recent projects — a fully interactive Memory Game built using React.js 🎯 🔹 Features: - Clean and responsive UI - Smooth card flip animations - Game logic using React state & hooks - Dynamic score tracking - Optimized performance for better user experience This project helped me strengthen my understanding of: 💡 Component-based architecture 💡 State management in React 💡 Event handling & logic building I’m continuously working on improving my frontend development skills and building more interactive projects like this. demo: https://lnkd.in/gBdwh_Yn 🎥 Check out the demo video below! #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript #Projects #LearningByDoing
To view or add a comment, sign in
More from this author
Explore content categories
- Career
- Productivity
- Finance
- Soft Skills & Emotional Intelligence
- Project Management
- Education
- Technology
- Leadership
- Ecommerce
- User Experience
- Recruitment & HR
- Customer Experience
- Real Estate
- Marketing
- Sales
- Retail & Merchandising
- Science
- Supply Chain Management
- Future Of Work
- Consulting
- Writing
- Economics
- Artificial Intelligence
- Employee Experience
- Workplace Trends
- Fundraising
- Networking
- Corporate Social Responsibility
- Negotiation
- Communication
- Engineering
- Hospitality & Tourism
- Business Strategy
- Change Management
- Organizational Culture
- Design
- Innovation
- Event Planning
- Training & Development