{"id":18407638,"url":"https://github.com/practical-works/game-logic","last_synced_at":"2025-10-18T06:49:28.697Z","repository":{"id":44563509,"uuid":"481712653","full_name":"practical-works/game-logic","owner":"practical-works","description":"🎮 Core game development related logic examples.","archived":false,"fork":false,"pushed_at":"2022-05-09T04:41:16.000Z","size":1418,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-12T21:14:31.848Z","etag":null,"topics":["2d-game","2d-game-framework","canvas","canvas-game","game","game-dev","game-development","game-framework","game-frameworks","game-library","game-logic","game-tutorial","html5-game-development","javascript","javascript-game","js","js-canvas","js-canvas-game","js-game","js-game-engine"],"latest_commit_sha":null,"homepage":"https://practical-works.github.io/game-logic","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/practical-works.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-04-14T18:39:23.000Z","updated_at":"2023-09-11T08:47:57.000Z","dependencies_parsed_at":"2022-08-31T00:31:47.346Z","dependency_job_id":null,"html_url":"https://github.com/practical-works/game-logic","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/practical-works%2Fgame-logic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/practical-works%2Fgame-logic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/practical-works%2Fgame-logic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/practical-works%2Fgame-logic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/practical-works","download_url":"https://codeload.github.com/practical-works/game-logic/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248631681,"owners_count":21136562,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["2d-game","2d-game-framework","canvas","canvas-game","game","game-dev","game-development","game-framework","game-frameworks","game-library","game-logic","game-tutorial","html5-game-development","javascript","javascript-game","js","js-canvas","js-canvas-game","js-game","js-game-engine"],"created_at":"2024-11-06T03:14:43.750Z","updated_at":"2025-10-18T06:49:23.650Z","avatar_url":"https://github.com/practical-works.png","language":"JavaScript","readme":"# 🎮 Game Logic\n\n[![Web](https://img.shields.io/badge/web-blue?logo=w3c)](https://github.com/topics/web)\n[![HTML5](https://img.shields.io/badge/html5-blue?logo=html5)](https://github.com/topics/html5)\n[![JavaScript](https://img.shields.io/badge/javaScript-blue?logo=javascript)](https://github.com/topics/javascript)\n\nThis is a set of examples implementing some useful simple common game development related logic.\u003cbr /\u003e\nIt features some techniques for game core logic structuring, layout manipulation, control handling, collision detection, and data calculation.\n\n[**🌐 View Live**](https://practical-works.github.io/game-logic)\n\n![Screenshot1](./screenshot1.gif?raw=true)\n![Screenshot2](./screenshot2.gif?raw=true)\n\n## 🎯 Objectives\n\n- ⬛ Base:\n    - [x] Define and render **game screen**.\n    - [x] Create and run **game loop**.\n    - [x] Define **game object**.\n    - [x] Render **ractangle** game object.\n    - [x] Render **text** game object.\n    - [x] Render **image** (sprite) game object.\n    - [x] Render **animation** from **multiple images**.\n    - [ ] Render animation from **single image** (spritesheet).\n- 📐 Layout:\n    - [x] Define **size** (width and height) of game object.\n    - [x] Define **position** (x and y) of game object.\n    - [x] Define **hotspot** (x and y) of game object.\n    - [x] Handle **hotspot-based positioning** of game object.\n    - [x] Define and handle **parent-child hierarchy** between game objects.\n    - [x] Perform **relative hierarchical positioning** of game objects.\n    - [x] **Center** position and hotspot of game object.\n    - [x] **Align** game objects in **horizontal** and **vertical** line.\n    - [x] **Align** game objects in **grid**.\n- ⌨️ Control:\n    - [x] Handle **keyboard input**.\n    - [x] Read keyboard input **always**.\n    - [x] Read keyboard input **on first key press only**.\n    - [x] Handle **mouse input**.\n    - [x] **Move** game object based on input (keyboard and mouse).\n- 💥 Collision:\n    - [x] Detect **point collision** between game objects.\n    - [x] Detect **rectangle collision** between game objects.\n    - [x] **Stop** moving game object based on collision.\n    - [x] Detect **distance** between game objects.\n- 💽 Data:\n    - [x] Define game **player** data.\n    - [x] Calculate **health percentage** of player.\n    - [x] Calculate **experience** of player based on **level**.\n    - [x] Move game object with **tween** animation effect.\n- 🏃 Movement:\n    - [x] Implement basic **top-down movement** (eight directions movement).\n    - [x] Add **speed** feature to top-down movement.\n    - [x] Add **acceleration** and **deceleration** features to top-down movement.\n    - [x] Implement **platformer movement** (side-scroller movement).\n    - [x] Add **speed**, **acceleration**, and **deceleration** to platformer movement.\n    - [x] Add basic **fixed-height jump** feature to platformer movement.\n    - [x] Add **variable-height jump** feature.\n    - [x] Add **multiple jump** (double jump or more) feature.\n- 🎦 Viewport:\n    - [ ] Define **layer** and **z-index** for game objects.\n    - [ ] Render **multiple layers** (background and foreground) of game objects.\n    - [ ] Define **scene** game object with **virtual size** (width and height).\n    - [ ] Define **camera** (viewport) game object.\n    - [ ] **Move camera** and **scroll** across scene.\n    - [ ] Attain **parallax** effect between layers.\n\n## 🎇 Examples\n\n### Example 0\n\n[▶️ Run Game 0](https://practical-works.github.io/game-logic/game0)\n\nThis is the main example that showcases all of the **base**, **layout**, **control**, **collision**, **data**, and **movement/top-down** objectives described above.\n\nTo fully check out this example:\n- Drag any object with \u003ckbd\u003e🖱️ left mouse button\u003c/kbd\u003e.\n- Move `😺 actor` object in eight directions with \u003ckbd\u003e⌨️ arrow keys\u003c/kbd\u003e.\n- Move `■ map` object in eight directions with \u003ckbd\u003e⌨️ wasd keys\u003c/kbd\u003e.\n- Move `💀 enemy` object to cursor's location with \u003ckbd\u003e⌨️ space key\u003c/kbd\u003e.\n- Collide `😺 actor` and `💀 enemy` objects to decrease `❤️ health bar`.\n- Collide `😺 actor` and `🌾 bottom-field` to increase `❤️ health bar`.\n- Collide `😺 actor` and `🌾 top-field` to increase `🏁 experience bar`.\n- See `🐭 mouse` cursor coordinates in bottom-right of game screen.\n- See `✈ velocity` and `✜ direction` of movement (on x and y axis) in top-left of game screen.\n\n### Example 1\n\n[▶️ Run Game 1](https://practical-works.github.io/game-logic/game1)\n\nThis example showcases the **movement/platformer** objectives described above.\n\nTo fully check out this example:\n- Move `😺 actor` object right or left with \u003ckbd\u003e⌨️ arrow keys\u003c/kbd\u003e.\n- Make Jump `😺 actor` object with \u003ckbd\u003e⌨️ space key\u003c/kbd\u003e.\n- Try multiple jumps in air.\n- See `✈ velocity` and `✜ direction` of movement (on x and y axis), and `↑ jumps` count (per maximum jumps) in top-left of game screen.\n\n## 🚀 Development\n\n### 🏁 Setup\n\n1. Clone the repository:\n\n    ```bash\n    cd somewhere\n    git clone https://github.com/practical-works/game-logic.git\n    cd game-logic\n    ```\n\n2. Run an **HTTP server** (using any tool of your choice) in the root folder:\n\n    For example, using [**HTTP-Server**](https://github.com/http-party/http-server), in the root folder, you can run:\n    ```bash\n    http-server -c-1\n    ```\n    💡 This will by default run a local server on `http://localhost:8080`.\u003cbr /\u003e\n    💡 The `-c-1` flag will prevent caching.\n\n### 🏭 Environment\n\n- Runtime: [**Chrome**](https://www.google.com/chrome)\n- Editor: [**Sublime Text**](https://www.sublimetext.com)\n\n## 📚 Learning Resources\n\n- 📕 [Anatomy of a video game](https://developer.mozilla.org/en-US/docs/Games/Anatomy)\n- 📕 [Implementing game control mechanisms](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms)\n- 📕 [2D breakout game using pure JavaScript](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript)\n- 📕 [JavaScript Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)\n- 📕 [Game development](https://developer.mozilla.org/en-US/docs/Games)\n- 📼 [Game-Related Math](https://www.linkedin.com/learning/game-development-foundations-game-related-math)\n\n## 📄 License\n\n[MIT](./LICENSE) © [Ambratolm](https://github.com/Ambratolm)","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpractical-works%2Fgame-logic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpractical-works%2Fgame-logic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpractical-works%2Fgame-logic/lists"}