Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mariokreitz/game_dev

This repository is a collection of small projects that demonstrate how to use the Canvas element and the Web Audio API. It is meant to be used as a reference and a learning resource.
https://github.com/mariokreitz/game_dev

canvas canvas-game canvas2d html javascript javascript-game sprite sprite-animation

Last synced: about 1 month ago
JSON representation

This repository is a collection of small projects that demonstrate how to use the Canvas element and the Web Audio API. It is meant to be used as a reference and a learning resource.

Awesome Lists containing this project

README 

        
# Canvas Projects 🎨🎶



Welcome to my **Canvas Projects** repository—a creative hub where I experiment, learn, and document my journey with the **Canvas** element and **Web Audio API**. Each project here is a stepping stone towards mastering web-based visuals, immersive audio, and clean, organized code.



## 🌟 Project Collection



- **[Audio Visual Effects](audio_visual_effects)** 🎧  

  Explore how sound and visuals come together! Syncing audio with dynamic visuals, this project creates interactive experiences that respond to sound in real-time.



- **[Collision Detection](collision_detection)** 🎯  

  Practicing the fundamentals of collision detection with moving circles—a critical skill for interactive graphics and game development.



- **[Flying Creatures](flying_creatures)** 🦋  

  A playful project where I animate "creatures" to flutter across the screen, enhancing my skills in movement, animation, and pathfinding on the canvas.



- **[Parallax Effect](parallax)** 🌌  

  Experimenting with parallax scrolling to create depth and perspective, adding layers that bring scenes to life with dynamic motion.



- **[Sprite Animation](sprite_animation)** 🎞️  

  Delving into frame-by-frame sprite animation to animate characters and objects—a foundational technique for lively, interactive experiences.



- **[State Management](state_management)** 🧩  

  Implementing the state design pattern in JavaScript to manage the player's object states. This folder demonstrates how to handle transitions between different states, inspired by the DoFactory's JavaScript design patterns guide. [link](https://www.dofactory.com/javascript/design-patterns)



## 🎮 Featured Projects



### [Simple Side Scroller](https://github.com/mariokreitz/simple_side_scroller) 🕹️ [![Netlify Status](https://api.netlify.com/api/v1/badges/162deb84-9165-4fe5-b11d-c3c0955518a0/deploy-status)](https://app.netlify.com/sites/simple-sidescrolling-game/deploys)



**Simple Side Scroller** is a 2D game where players earn points by jumping over enemies, showcasing my growth in web game development. It’s based on my **game_dev** repository and features fullscreen mode, debug mode, mobile compatibility, and restart functionality.



### 🏹 [Raven Hunter](https://github.com/mariokreitz/raven-hunter) [![Netlify Status](https://api.netlify.com/api/v1/badges/2ff2ba82-c25c-426a-b548-589852dfe566/deploy-status)](https://app.netlify.com/sites/raven-hunt/deploys)



**Raven Hunter** integrates Canvas animations, collision detection, and dynamic effects, combining techniques from across this repository into an engaging, cohesive game experience.



## 📂 Code Structure and Class Organization



This repository also explores modular code organization in the **code_structure** folder, where I apply object-oriented principles, encapsulation, and naming conventions to keep code organized and scalable.



Each folder serves as a learning module with code snippets, notes, and setup instructions, capturing each new concept and skill as I grow in game development and web graphics!



## 🎨 Credits



Special thanks to the artists whose assets brought these projects to life:



- **Flying Creatures Art Assets**: Created by [Bevouliin](https://bevouliin.com/).

- **Sound Effects**: Found on [opengameart.org](https://opengameart.org/content/magic-sfx-sample), created by [ViRiX](https://opengameart.org/users/virix).