{"id":17617776,"url":"https://github.com/juniortour/es6-mario","last_synced_at":"2025-04-30T08:13:01.261Z","repository":{"id":104351740,"uuid":"117681595","full_name":"JuniorTour/es6-mario","owner":"JuniorTour","description":"🎮 A web game made by ES6 syntax and HTML5 Canvas.","archived":false,"fork":false,"pushed_at":"2022-11-19T10:09:19.000Z","size":7855,"stargazers_count":75,"open_issues_count":3,"forks_count":13,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-30T08:12:53.166Z","etag":null,"topics":["canvas","es6","game","html5","javascript","mario","webpack"],"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/JuniorTour.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}},"created_at":"2018-01-16T12:35:25.000Z","updated_at":"2024-12-06T16:42:21.000Z","dependencies_parsed_at":null,"dependency_job_id":"eece3367-eec8-4801-815f-2d0ff2c62d54","html_url":"https://github.com/JuniorTour/es6-mario","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/JuniorTour%2Fes6-mario","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JuniorTour%2Fes6-mario/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JuniorTour%2Fes6-mario/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JuniorTour%2Fes6-mario/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JuniorTour","download_url":"https://codeload.github.com/JuniorTour/es6-mario/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251666338,"owners_count":21624295,"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","es6","game","html5","javascript","mario","webpack"],"created_at":"2024-10-22T19:15:45.285Z","updated_at":"2025-04-30T08:13:01.232Z","avatar_url":"https://github.com/JuniorTour.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🎮 ES6-Mario\n\nA web game written in ES6 syntax and HTML5 features, such as `Module, Canvas`.\n\nYou can get a specific impression of the `ES6` syntax, `HTML Canvas` Related API and `Webpack` simple config through this project.\n\nLearned from [Meth Meth Method On Youtube](https://www.youtube.com/channel/UC8A0M0eDttdB11MHxX58vXQ) by [@Meth Meth Method](https://github.com/meth-meth-method) . Also recommend this channel strongly for you!\n\nMany thanks to the author [@pomler](https://github.com/pomle), learned a lot from him.\n\n\n\n### [中文README](https://github.com/JuniorTour/es6-mario/blob/master/public/notes/README-zh.md)\n\n\n## Browser Support\n\n- Modern Chrome and Firefox\n\n- iOS Safari 9+\n\n- Android 7.0+\n\n- NO IE\n\n\n\n## Demo\n\n### Online Demo\n\n# [Click to Play es6-mario Online](https://juniortour.github.io/es6-mario/public/dist/index.html)\n\n# Scan to Play:\n\n![JuniorTour-ES6-Mario](https://user-images.githubusercontent.com/14243906/202845661-0f9923bd-55ad-4b9f-a774-40f6ae6bb8db.png)\n\n\n### Gif Demo\n\n![mario-eg-1-60fps.gif](https://github.com/JuniorTour/es6-mario/blob/master/public/notes/demo-img/mario-eg-1-60fps.gif?raw=true)\n\n![mario-eg-2-60fps.gif](https://github.com/JuniorTour/es6-mario/blob/master/public/notes/demo-img/mario-eg-2-60fps.gif?raw=true)\n\n\n\n## Run\n\n```\ngit clone https://github.com/JuniorTour/es6-mario\n\ncd es6-mario\n\nnpm install\n\nnpm run dev     // Start Development at http://localhost:8080\n\nnpm run build   // Bundle project with Webpack to ./public/dist\n\nnpm run prod    // Bundle project with Webpack to ./public/dist and Serve the bundled project in Production Env at http://localhost:666\n\n```\n\n\n\n## Study Guide\n\nAt first, personally I think `good code is self documenting`, the code of this project is **semantic**. The class name, variable name can express themselves. Only read the source code you can understand the main logic of this game.\n\nLet me introduce the main logic:\n\n0. This game is start from `es6-mario/public/js/main.js`, in this function, each Entities(Like mario, goomba etc) are created. And the `Main Loop` start:\n\n```javascript\nconst timer = new Timer(fps);\n\ntimer.update = function update(deltaTime) {\n  level.update(deltaTime);\n\n  camera.pos.x = Math.max(0, mario.pos.x - 100);\n\n  level.comp.draw(context, camera);\n};\n\ntimer.start();\n```\n\nThis is the core of game, the three lines are responsible for `update the entity status`, `move the camera`, `draw every layers`.\n\n\n\n1. Update the entity\n\nThis part start from `level.update(deltaTime);` in the main loop, then step into the `update()` method in public/js/Level.js .\n\n```javascript\n    update(deltaTime) {\n        this.entities.forEach(entity =\u003e {\n            entity.update(deltaTime, this);\n        });\n\n\n        this.entities.forEach(entity =\u003e {\n            entity.finalize();\n\n            this.entityCollider.check(entity);\n        });\n\n        this.totalTime += deltaTime;\n    }\n```\n\nHere, this method invoke each entities' update method, calculate the status (pos, collision etc) of them.\n\n\n\n2. Move camera\n\nThis function is cooperate with the draw layers function, after main loop update the pos of camera, each layer will update itself according to the pos of camera.\n\nFor example, in /public/js/layers/background.js, every time it `drawBackgroundLayer`, the exact pos of background layer will move according to the pos of camera.\n\n```javascript\n    return function drawBackgroundLayer(context, camera) {\n        const drawWidth = resolver.toIndex(camera.size.x),\n            drawFrom = resolver.toIndex(camera.pos.x);\n        const drawEnd = drawFrom + drawWidth;\n\n        redraw(drawFrom, drawEnd);\n\n        context.drawImage(\n            buffer,\n            -camera.pos.x % 16,\n            -camera.pos.y);\n    }\n```\n\n\n\n3. Draw layers\n\nThe code of his part is mainly under the /public/js/layers. There are background layer, camera layer, collision layer, sprite layer, dashboard layer. As the name of each layers, it control the painting of itself.\n\nIn here: https://www.youtube.com/watch?v=I1RTsqUz-t0\u0026t=903s , you can get a directly demo.\n\n\n\n4. Input, Timer, Entity Trait, Physical Effect and so on\n\nIn addition to the function above, this game also have many other unique function you deserve to learn about.\n\n\n\nBesides, If you really intend to learn this project systemically, I **strongly recommend the series of the original author: \u003chttps://www.youtube.com/watch?v=g-FpDQ8Eqw8\u0026t=2s\u003e  **。\n\n\n\n\n\n## Experience Summary\n\n0. Regularly Clean up your code\n\nBy `split the implementation and declaration with module syntax`, `build a Class`.\n\n([More.........](https://github.com/JuniorTour/es6-mario/blob/master/public/notes/notes.md))\n\n\n\n## Topic Summary Notes\n\n0. Es6 Syntax\n\n- \u003c1\u003e Module\n\n``` javascript\n\n\u003cscript type=\"module\" src=\"/js/main.js\"\u003e\u003c/script\u003e\n\nimport {loadLevel} from './loader.js'\nimport {loadBackgroundSprites, loadMarioSprite} from './sprites.js'\n\n```\n\n- \u003c2\u003e Super Class\n\n  ([More.........](https://github.com/JuniorTour/es6-mario/blob/master/public/notes/notes.md))\n\n\n\n\n\n## ToDo-List\n\n| No.  | Content                    | Finish Date | Extra                                    |\n| ---- | -------------------------- | ----------- | ---------------------------------------- |\n| 0    | Basic Structure            | 2018/2/14   | The day before Spring Festival.          |\n| 1    | Bundle Tool                | 2018/3/1    | For better compatibilty and performance. |\n| 2    | Mobile Support             | 2018/3/4    | For more players. Including Virtual Pad. |\n| 3    | Original Map and Minor fix | 2018/3/1    |                                          |\n| 4    | Performance Optimize       | ......      | Try to run this game smoothly in low end device. |\n| 5    | Game Related Optimize      | ......      | Make this game more funny!               |\n| 6    | Webpack Env Config         | 2020/9/27      | Something makes today special. |\n\n\n\n\n\n## File Structure\n\n```javascript\n|__ public                          Source Code\n  |__ index.html\n  |__ assets\n      |__ img\n        |__ characters.gif\n        |__ font.png\n        |__ tiles.png\n      |__ levels                    Level Content Config\n        |__ 1-1.json\n      |__ sound\n        |__ overworld-bgm.mp3\n      |__ sprites                   Charecter Sprites Config\n        |__ goomba.json\n        |__ koopa.json\n        |__ mario.json\n        |__ overworld.json\n        |__ underworld.json\n  |__ build\n    |__ prod-server.js\n    |__ webpack.config.js     webpack Config\n  |__ css\n    |__ ......\n  |__ js\n    |__ entities\n      |__ Goomba.js\n      |__ Koopa.js\n      |__ Mario.js\n    |__ input                       Keyboard and Touch Input Control\n      |__ ......\n    |__ layers\n      |__ background.js\n      |__ camera.js\n      |__ collision.js\n      |__ dashboard.js\n      |__ sprites.js\n    |__ loaders\n      |__ font.js\n      |__ level.js\n    |__ polyfill\n      |__ ......\n    |__ traits                      Charecter Traits Config\n      |__ Go.js\n      |__ Jump.js\n      |__ Killable.js\n      |__ PendulumMove.js\n      |__ Physics.js\n      |__ PlayerController.js\n      |__ Solid.js\n      |__ Stomer.js\n      |__ Velocity.js\n    |__ anim.js\n    |__ BoundingBox.js\n    |__ Camera.js\n    |__ compositor.js\n    |__ debug.js\n    |__ entities.js\n    |__ Entity.js\n    |__ EntityCollider.js\n    |__ input.js\n    |__ KeyboardState.js\n    |__ main.js\n    |__ math.js\n    |__ sprites.js\n    |__ SpriteSheet.js\n    |__ TileCollider.js\n    |__ TileResolver.js\n    |__ Timer.js\n    |__ Level.js\n    |__ loader.js\n  |__ notes\n    |__ ......\n|__ .babelrc\n|__ .gitignore\n|__ package.json\n|__ README.md\n\n```\n\n\n\n\n\n## The End\n\nThis project is developing, there are still many bugs, please forgive for this troubles, I will fix it up asap and you are welcome to help it.\n\n If you have any idea about this project, feel free to talk with me in any way.\n\nMy GitHub: [@JuniorTour](https://github.com/JuniorTour).\n\nMy Email: [juniortour@qq.com](mailto:juniortour@qq.com).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjuniortour%2Fes6-mario","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjuniortour%2Fes6-mario","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjuniortour%2Fes6-mario/lists"}