{"id":19255247,"url":"https://github.com/devlzl/gameengine","last_synced_at":"2026-06-29T06:30:19.548Z","repository":{"id":216438209,"uuid":"734287245","full_name":"devlzl/GameEngine","owner":"devlzl","description":"Canvas-based 2D Game Engine with flexible configuration.","archived":false,"fork":false,"pushed_at":"2023-12-21T10:07:52.000Z","size":1566,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-05T07:47:24.098Z","etag":null,"topics":["canvas","game-engine"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/devlzl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-12-21T10:07:47.000Z","updated_at":"2024-01-18T07:10:01.000Z","dependencies_parsed_at":null,"dependency_job_id":"50263a98-ce71-42a0-ae30-e15c65af8aa3","html_url":"https://github.com/devlzl/GameEngine","commit_stats":null,"previous_names":["devlzl/gameengine"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devlzl%2FGameEngine","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devlzl%2FGameEngine/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devlzl%2FGameEngine/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devlzl%2FGameEngine/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devlzl","download_url":"https://codeload.github.com/devlzl/GameEngine/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240349310,"owners_count":19787484,"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":["canvas","game-engine"],"created_at":"2024-11-09T18:39:58.914Z","updated_at":"2026-06-29T06:30:19.364Z","avatar_url":"https://github.com/devlzl.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# GameEngine\nCanvas-based 2D Game Engine with flexible configuration.\n\n\n## Examples\n[AirForce (click to play)](https://devlzl.github.io/GameEngine/examples/AirForce/index.html)  \n[![AirForce](./screenshot/AirForce.png)](https://devlzl.github.io/GameEngine/examples/AirForce/index.html)\n\n[Breakout (click to play)](https://devlzl.github.io/GameEngine/examples/Breakout/index.html)  \n[![Breakout](./screenshot/Breakout.png)](https://devlzl.github.io/GameEngine/examples/Breakout/index.html)\n\n[FlappyBird (click to play)](https://devlzl.github.io/GameEngine/examples/FlappyBird/index.html)  \n[![FlappyBird](./screenshot/FlappyBird.png)](https://devlzl.github.io/GameEngine/examples/FlappyBird/index.html)\n\n\n## Usage\n1. Copy the `template` directory to any position and rename it to whatever you like.\n2. Refer to the `examples` or `Docs` to create your game.\n\n\n## Docs\n### Application Structure\n```\n├── img                     # image resources\n    ├── demo.jpg\n    └── ...\n├── scene                   # game scenes and game elements\n    ├── main                # each scene\n        ├── element         # elements in the scene\n            ├── Player.js\n            ├── Enemy.js\n            └── ...\n        └── MainScene.js    # scene file\n    └── ...\n├── config.js               # config file for debugging\n├── GameEngine.js           # the core of the game engine, merged files from src directory\n├── index.html\n├── main.js                 # entry\n```\n\n### API\n```JavaScript\n// [Game]\n// ======\n// Create Game object,\n// \"images\" is an object with \"image name\" as key and \"image path\" as value,\n// \"callback\" will be called after all images are loaded successfully,\n// after creating a Game object, it will be bound to \"window.game\",\n// so you can use \"game.xxx\" to get properties or call methods.\nnew Game(images, callback)\n\n// Load the first game scene at the very beginning.\ngame.runWithScene(scene)\n\n// Replace game scene.\ngame.replaceScene(scene)\n\n// Register action on key.\ngame.registerAction(key, callback)\n\n// Get the width or height of the canvas.\ngame.width\ngame.height\n\n\n\n\n// [Scene]\n// =======\n// Creat new scene, extends from Scene.\nclass MainScene extends Scene {\n    constructor() {\n        // \"super()\" should be called first in the constructor.\n        super()\n    }\n    update() {\n        // The \"update\" method should be implemented,\n        // but you should call super.update() first,\n        // this method will automatically call the \"update\" method of all elements.\n        super.update()\n    }\n    debug() {\n        // If debug() is implemented, it will be called automatically when \"openDebugger()\" is called.\n    }\n}\n\n// Set background color.\nsetBackground(color)\n\n// Add an element to the scene,\n// the added element has \"this.scene\" property to access the current scene,\n// \"element\" can be any object that implements the \"draw\" method,\n// (if the element implements the \"update\" or \"debug\" method, it will be automatically called by scene).\naddElement(element)\n\n// Remove element from scene.\nremoveElement(element)\n\n// Replace element.\nreplaceElement(oldElement, newElement)\n\n\n\n\n// [GameImage]\n// ===========\n// GameImage is an element that can be added to the scene.\n// simple usage\nconst image = new GameImage(\"imageName\")\n// complex usage\nclass MyElement extends GameImage {\n    constructor() {\n        super(name)\n    }\n    update() {\n        // update position, rotation, etc.\n    }\n    debug() {\n    }\n}\n\n// Properties that can be read and written.\nx           // X-axis position, default is 0\ny           // Y-axis position, default is 0\nw           // width (read only)\nh           // height (read only)\nflipX       // whether to flip x, default is false\nflipY       // whether to flip y, default is false\nrotation    // angle of rotation, default is 0\n\n// replace image resource.\nreplace(text)\n\n\n\n\n// [GameLabel]\n// ===========\n// GameLabel is an element that can be added to the scene.\nconst label = new GameLabel(text, x, y, font, color)\n\n// replace text content.\nreplace(text)\n\n\n\n\n// [Animation]\n// ===========\n// Animation is an element that can be added to the scene.\nclass MyElement extends Animation {\n    constructor() {\n        super(name)\n    }\n    update() {\n        super.update()\n        // additional update logic\n    }\n    draw() {\n        super.draw()\n        // other code\n    }\n}\n\n// animationConfig in config.js\n{\n    name: \"image name\",\n    number: numberOfImages,\n    duration: howLongToChangeImage,\n}\n\n\n\n\n// [ParticleSystem]\n// ================\n// ParticleSystem is an element that can be added to the scene.\n// speed: max speed of each particle\n// life: life of each particle\n// number: number of particles\n// duration: particle system duration(frames)\nconst particle = new ParticleSystem(imageName, x, y, speed=5, life=7, number=100, duration=30)\n\n\n\n\n// [Utils]\n// =======\n// Utils provides useful utility functions.\n\n// a | b is an object with x, y, w, h properties,\n// if a and b intersect, return { intersect: true, direction: \"x\"|\"y\"|\"both\" }.\nrectIntersects(a, b)\n\n// return a random integer between start and end (including start and end).\nrandomBetween(start, end)\n\n\n\n\n// [Debugger]\n// ==========\n// When openDebugger() is called, the following features are enabled:\n// 1. Listen to the \"p\" key to pause the main loop.\n// 2. Generate debug slider on page based on \"config.js\".\nopenDebugger()\n```\n\n\n## Architectural Overview\n```\n                   Game\n           (runloop with 60FPS)\n           /         |         \\\n    update()       clear()      draw()\n       |                          |\n scene.update()               scene.draw()\n       |                          |\nfor e of elements          for e of elements\n   e.update()                  e.draw()\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevlzl%2Fgameengine","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevlzl%2Fgameengine","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevlzl%2Fgameengine/lists"}