Built a 2D fighting game prototype in HTML5 Canvas and vanilla JavaScript. What started as a very simple sprite animation experiment has now grown into a more game-like experience with: player movement, jump mechanics, punch, kick, block, and dodge actions, round system and score tracking, pause/resume flow, start screen and match-over UI, HUD improvements, companion pets for player and CPU It’s still a prototype, but this project taught me a lot about game loops, animation sequencing, UI flow, and turning a small idea into something more playable step by step. GitHub: https://lnkd.in/d2jTqQgw #javascript #html5 #canvas #webdevelopment #gamedev #frontend #opensource #learninginpublic
More Relevant Posts
-
🎮 Built a Real-Time Mouse Tracker using HTML5 Canvas As part of my preparation for HTML5/game development roles, I built a simple interactive mouse tracker using Canvas. ✨ Features: Real-time mouse position tracking Smooth rendering using requestAnimationFrame Dynamic drawing on canvas This helped me understand core concepts like: Canvas rendering Animation loop Event handling Excited to keep building more interactive experiences and games! Would love to get feedback 🙌 “Exploring opportunities in HTML5 game development.” GitHub: https://lnkd.in/g3bGYcXs 7Seas Entertainment Limited Innomatics Research Labs #HTML5 #Canvas #GameDevelopment #Frontend #JavaScript
To view or add a comment, sign in
-
🚀 Built a Fun Stick Hero Game using HTML, CSS & JavaScript! Excited to share my latest mini project 🎮 — a Stick Hero Game inspired by classic arcade mechanics! ✨ Features: Smooth canvas-based animations Dynamic platform generation Real-time scoring system “Perfect hit” bonus logic 💯 Responsive full-screen gameplay 🛠️ Tech Stack: HTML5 | CSS3 | JavaScript (Canvas API) 💡 What I learned: Game loop using requestAnimationFrame Working with Canvas for animations Handling user interactions (mouse events) Logic building for collision detection & physics This project helped me strengthen my JavaScript fundamentals and understand how real-time games work behind the scenes. 👉 Try building it yourself or let me know if you want the code! #JavaScript #WebDevelopment #FrontendDeveloper #GameDevelopment #HTML5 #CSS3 #Coding #Projects #LearningByDoing
To view or add a comment, sign in
-
Anime.js – A Powerful JavaScript Animation Engine for Modern Web Experiences Anime.js is a lightweight, flexible animation engine for modern JavaScript applications. Whether you’re working with DOM elements, SVGs, or JavaScript objects, Anime.js makes animations simple, powerf... Read more → https://lnkd.in/dQ4MJQh5 #TheCampusCoders #Tech #Developers #Programming #WebDev
To view or add a comment, sign in
-
Tabs are common in dashboards and settings pages, but small motions can make them feel more polished. In this tutorial, Vaibhav shows you how to build an animated tab component with Shadcn/ui, React, Tailwind CSS, and Motion. You'll learn about spring tab indicators, stacked card hover effects, entrance animations, and more. https://lnkd.in/gKBXVA9P
To view or add a comment, sign in
-
-
CSS Magic in 5 steps. 🪄💻 From subtle pulses to energetic bounces—these animations cover the basics every developer should have in their toolkit. Which one are you using today? 🛠️
To view or add a comment, sign in
-
Recreated an F1-style section transition using Next.js + GSAP 👀 After a bit of experimenting, I managed to recreate the effect using a dynamic grid, GSAP animations, and scroll based interactions. Also made a full breakdown video where I explained everything step by step. Watch here: https://lnkd.in/gkTUtvK4 #nextjs #gsap #frontend #webdevelopment #creativecoding
To view or add a comment, sign in
-
A JavaScript library with zero releases is quietly running morph animations across 4000 projects flubber. 6900 stars. MIT license. Last real commit years ago. The author gave a talk in 2017 and moved on It does one thing well. Turns any 2D shape into any other 2D shape without the animation falling apart. Anyone who tried to morph an SVG triangle into a star with d3.transition() knows the failure mode — vertices teleport across the screen, the shape folds inside out, the whole thing looks like a bug report flubber fixes it with clever point-matching and hands back an interpolator function. Call it with a value from 0 to 1, get the in-between frame. The whole API fits on a screen Useful for data viz transitions, logo morphs, icon toggles, anything where one shape has to become another Correct math from 2017 is still correct math in 2026. Some libraries don't need updates. They need to still work
To view or add a comment, sign in
-
-
Make your websites come alive with CSS Animations 💻✨ From smooth transitions to eye-catching effects — animations can completely transform user experience 🚀🔥 Level up your frontend game and design interfaces that users love interacting with 💯 Want to learn these animations? Comment “CSS” 👇 #CSSAnimations #WebDevelopment #FrontendDeveloper #UIDesign #WebDesign #CodingReels #LearnToCode #DeveloperLife #AnimationDesign #TechSkills #Programming #CodeWithMe #ReelsIndia
To view or add a comment, sign in
-
Tired of using multiple animation libraries for one website? Scroll reveal, parallax, counters, tickers — it should be simple. MotionFlow gives you everything in one clean lightweight javascript library. Less setup. Less conflicts. Better results. Try it: https://motionflow.dev #frontend #javascript #webdesign #motionflow
To view or add a comment, sign in
-
Few weeks ago I saw someone on X built loader indicator based on math equation in Javascript, and it's beautiful. I can see myself using it in one of my iOS app in the future. So, I port them to Swift. Not just porting the loader implementation, but also built in control to tweak and modify the loaders and you can see the changes in real time. I also make SPM packages for this port and you can get the code on my GitHub. #Swift #SwiftUI #Animation
To view or add a comment, sign in
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