{"id":16432572,"url":"https://github.com/malikwhitten67/reduxengine","last_synced_at":"2025-02-25T14:49:08.970Z","repository":{"id":195999375,"uuid":"694125526","full_name":"MalikWhitten67/ReduxEngine","owner":"MalikWhitten67","description":"A performant css and html game engine","archived":false,"fork":false,"pushed_at":"2023-09-22T10:54:45.000Z","size":73,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-08T05:48:27.037Z","etag":null,"topics":["2d-game-engine","css-engine","css3","hacktoberfest","html5-engine","javascript-engines"],"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/MalikWhitten67.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}},"created_at":"2023-09-20T11:33:41.000Z","updated_at":"2025-01-02T09:02:04.000Z","dependencies_parsed_at":"2023-09-21T00:19:51.745Z","dependency_job_id":null,"html_url":"https://github.com/MalikWhitten67/ReduxEngine","commit_stats":null,"previous_names":["malikwhitten67/reduxengine"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MalikWhitten67%2FReduxEngine","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MalikWhitten67%2FReduxEngine/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MalikWhitten67%2FReduxEngine/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MalikWhitten67%2FReduxEngine/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MalikWhitten67","download_url":"https://codeload.github.com/MalikWhitten67/ReduxEngine/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240689859,"owners_count":19841947,"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-engine","css-engine","css3","hacktoberfest","html5-engine","javascript-engines"],"created_at":"2024-10-11T08:43:48.096Z","updated_at":"2025-02-25T14:49:08.937Z","avatar_url":"https://github.com/MalikWhitten67.png","language":"JavaScript","readme":"# ReduxEngine\nA performant css and html game engine\n\n\n# Why?\n\nCanvas truly sucks and I believe the future of 2d web games should move to element based CSS manipulation. CSS has enough capabilities of both 2d and 3d in which is sufficient enough for a full blown engine.\n\n# Installation\n\n```html\n\u003cscript src=\"/path/to/Redux.js\"\u003e\n```\n\n# Usage \n\n```html\n\u003cdiv id=\"game-container\"\u003e\u003c/div\u003e\n```\n\n```js\nimport { Scene, Camera, Entity, ReduxEngine } from 'ReduxEngine'\n/***\n* @param {String} containerId - The id of the container element\n* @param {Number} width - The width of the container element\n* @param {Number} height - The height of the container element\n* @param {Number} frameRate - The frame rate of the game\n*\n***/\nconst engine = new ReduxEngine('game-container', 800, 600, 60)\n\nengine.setUpdateCallback((entities)=\u003e{\n   // specify logic for engine state updates\n})\n\n\nclass StartMenu extends Scene{\n constructor(engine){\n    super(engine)\n    let startText = document.createElement('h1')\n    startText.innerText = \"Click Me To Start\"\n\n    /**\n    * @class UI\n    * @description Base class for UI elements\n    * @param {Number} x - The x position of the UI element\n    * @param {Number} y - The y position of the UI element\n    * @param {Number} width - The width of the UI element\n    * @param {Number} height - The height of the UI element\n    * @param {String|HTMLElement} customContent - Custom content for the UI element\n    * @param {String} tag - The tag for the UI element\n    * @property {HTMLElement} element - The UI element\n    * @method on - Add an event listener to the UI element\n     **/\n \n\n    \n\n    startText =  new UI(100, 100, 200, 50, startText, 'startui');\n    // you can use external files using the new require function\n    startText.require('./file')  // this replaces the html - you can get element id's by setting the id to the element in the file then calling the on function\n  }\n\n  updateCallback(entities){\n   // run some code when the scene is updated\n  }\n\n  startLogic(){\n   // run some code when the scene is started\n  }\n\n  // This is ran at loop start here we can apply logic to the ui element and add it to the screen\n\n  uilogic(){\n   this.startText.on('ID', 'click', (e) =\u003e{\n     this.engine.startScene('Game')\n   })\n   // append the uiElement to the game scene\n    this.addUIElement(this.startText);\n  }\n\n  inputHandler() {\n     // add input handling to the scene itself\n  }\n}\n\nclass GameMenu extends Scene {\n constructor(engine){\n   super(engine)\n\n   /***\n   * @param {Number} x - the left and right position of the Entity on the x axis\n   * @param {Number} y - the top and bottom position of the Entity on the y axis\n   * @param {width}  width - Set the width of the Entity\n   * @param {height} height - set the height of the Entity\n   * @param {String} color - set the color of the Entity\n   * @param {String} textureScript - apply Redux texture scripts to Entities\n   * x, y, width, height, color,initialState, textureScript\n   ***/\n\n   this.player = new Entity(100, 100, 50, 50, null, 'blue')\n\n   // animation state allows us to add textureScripts to our elements - images gifs vector border radius bgColor etc\n\n   this.player.addAnimationState('inPlace', `texture('https://picsum.photos/200/300')`);\n\n   this.entities.push(this.player) // apply the Entity to the game scene\n   // Apply a camera to the given scene - it follows the player closely\n   const camera = new Camera(this.engine.window(), 'white');\n   // set camera\n   this.engine.setCamera(camera)\n   // set the camera to follow the player entity\n   camera.follow(this.player);\n }\n\n  updateCallback(entities){\n   // run some code when the scene is updated\n  }\n\n startLogic(){\n   // run some code when the scene is started\n  }\n \n inputHandler() {\n     // addCustomInput is ran inside the game loop reading user input\n     this.addCustomInput('ArrowRight', () =\u003e {\n        const newX = this.player.x + 10\n\n        /**\n        * @class ReduxEngine\n        * @method {window} @returns {HTMLELEMENT}  - game window element\n        * @returns current animation state of the player \n        **/\n\n        if(newX + this.player.width \u003c= this.engine.window().clientWidth){\n           // update the players position relative to the end of the window\n           this.player.setPosition(newX, this.player.y)\n        }\n\n        /**\n        * @class Entity\n        * @method {String} animationState\n        * @returns current animation state of the player \n        **/\n\n        if(this.player.animationState !== 'inPlace'){\n          // change the animation state of the Entity\n          this.player.changeState('inPlace')\n       }\n     }, ()=\u003e{\n     // do something when the RightArrow is released\n    })\n   \n  }\n}\n\nengine.addScene('Game', GameMenu)\nengine.addScene('Start', StartMenu)\nengine.startScene('Start') // init the start menu\nengine.start() // loop the engine\n// you can opt to log the fps on screen\nlet fps = 60\nengine.logFps(fps, 'red')\n```\n\n\n \n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmalikwhitten67%2Freduxengine","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmalikwhitten67%2Freduxengine","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmalikwhitten67%2Freduxengine/lists"}