{"id":18586746,"url":"https://github.com/oguzhanumutlu/javascript2d","last_synced_at":"2025-04-10T13:32:25.827Z","repository":{"id":46122985,"uuid":"412940874","full_name":"OguzhanUmutlu/JavaScript2D","owner":"OguzhanUmutlu","description":"Easy and cool game engine made with JavaScript!","archived":false,"fork":false,"pushed_at":"2023-05-28T22:18:56.000Z","size":174,"stargazers_count":6,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-24T21:51:12.050Z","etag":null,"topics":["2d","canvas","engine","game","javascript","js","rendering","web"],"latest_commit_sha":null,"homepage":"","language":"HTML","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/OguzhanUmutlu.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-10-03T00:27:02.000Z","updated_at":"2024-10-29T22:21:08.000Z","dependencies_parsed_at":"2024-11-07T00:54:29.225Z","dependency_job_id":null,"html_url":"https://github.com/OguzhanUmutlu/JavaScript2D","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OguzhanUmutlu%2FJavaScript2D","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OguzhanUmutlu%2FJavaScript2D/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OguzhanUmutlu%2FJavaScript2D/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OguzhanUmutlu%2FJavaScript2D/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/OguzhanUmutlu","download_url":"https://codeload.github.com/OguzhanUmutlu/JavaScript2D/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248225710,"owners_count":21068078,"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","canvas","engine","game","javascript","js","rendering","web"],"created_at":"2024-11-07T00:38:29.018Z","updated_at":"2025-04-10T13:32:20.817Z","avatar_url":"https://github.com/OguzhanUmutlu.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# JavaScript2D\r\nEasy and cool game engine made with JavaScript!\r\n\r\n[![](https://img.shields.io/badge/Discord-black?style=for-the-badge\u0026logo=discord)](https://discord.gg/emAhrw3mvM)\r\n\r\n\u003chr\u003e\r\n\r\n# NPM\r\n\r\n![NPM](https://nodei.co/npm/canvas-game-2d.png?downloads=true\u0026downloadRank=true)\r\n\r\n\u003chr\u003e\r\n\r\n# You can visit Wiki for any information!\r\n[Click to visit Wiki](https://github.com/OguzhanUmutlu/JavaScript2D/wiki)\r\n\r\n\u003chr\u003e\r\n\r\n# Setup \u0026 Installation\r\n\r\n## Injecting into HTML\r\n```html\r\n\u003cscript src=\"https://raw.githubusercontent.com/OguzhanUmutlu/JavaScript2D/main/script.js\"\u003e\u003c/script\u003e\r\n```\r\n\r\n*****\r\n\r\n## Injecting into Node.JS\r\n\r\n- Install [`2d-canvas-game`](https://www.npmjs.com/package/2d-canvas-game) as dependency first!\r\n\r\n```js\r\nconst {Vector2, ImageModel, SquareModel, TextModel, EntityData, Entity, Scene} = require(\"canvas-game-2d\");\r\n```\r\n\r\n*****\r\n\r\n- You can install it to your IDE by holding your mouse on it and clicking `Download library`\r\n\r\n\u003chr\u003e\r\n\r\n# Creating scene\r\n\r\n## Creating canvas tag\r\n\r\n```html\r\n\u003ccanvas style=\"outline: black 3px solid;\" id=\"canvas\" width=\"500\" height=\"500\"\u003e\u003c/canvas\u003e\r\n```\r\n\r\n*****\r\n\r\n## Creating scene in pure.js\r\n\r\n```html\r\n\u003cscript\u003e\r\n    const canvas = document.getElementById(\"canvas\");\r\n    const scene = new Scene(canvas);\r\n\u003c/script\u003e\r\n```\r\n\r\n*****\r\n\r\n## Creating scene in node.js\r\n\r\n```js\r\nconst { createCanvas } = require(\"canvas\");\r\nconst canvas = createCanvas(500, 500);\r\nconst scene = new Scene(canvas);\r\n```\r\n\r\n\u003chr\u003e\r\n\r\n# Simple Player Example\r\n\r\n## Creating player\r\n\r\n```js\r\n    const player = new Entity(\r\n        new EntityData()\r\n            .setX(0) // spawn position of player\r\n            .setY(0)\r\n            .setModel(new SquareModel(20, 20)) // width, height\r\n    );\r\n```\r\n\r\n## Registering player to scene\r\n\r\n```js\r\n    scene.addEntity(player);\r\n```\r\n\r\n## Storing keys they are held\r\n\r\n```js\r\n    const heldKeys = {};\r\n    addEventListener(\"keydown\", key =\u003e {\r\n        heldKeys[key.key] = true;\r\n    });\r\n    addEventListener(\"keyup\", key =\u003e {\r\n        delete heldKeys[key.key];\r\n    });\r\n```\r\n\r\n## Moving player\r\n\r\n```js\r\n    setInterval(() =\u003e {\r\n        let dx = 0;\r\n        let dy = 0;\r\n        if (heldKeys[\"w\"]) dy--;\r\n        if (heldKeys[\"a\"]) dx--;\r\n        if (heldKeys[\"s\"]) dy++;\r\n        if (heldKeys[\"d\"]) dx++;\r\n        player.x += dx;\r\n        player.y += dy; // simply change player's position\r\n    });\r\n```\r\n\r\n## To prevent going outside from canvas\r\n\r\n```js\r\n    setInterval(() =\u003e {\r\n        let dx = 0;\r\n        let dy = 0;\r\n        if (heldKeys[\"w\"]) dy--;\r\n        if (heldKeys[\"a\"]) dx--;\r\n        if (heldKeys[\"s\"]) dy++;\r\n        if (heldKeys[\"d\"]) dx++;\r\n        player.x += dx;\r\n        player.y += dy;\r\n        player.preventBorder(scene);\r\n    });\r\n```\r\n\r\n\u003chr\u003e\r\n\r\n# Adding obstacles\r\n\r\n## Creating class for obstacles\r\n\r\n```js\r\n    class Obstacle extends Entity {\r\n    }\r\n```\r\n\r\n## Adding obstacle\r\n\r\n```js\r\n    scene.addEntity(new Obstacle(\r\n        new EntityData()\r\n            .setX(50)\r\n            .setY(50)\r\n            .setModel(new SquareModel(20, 20))\r\n    ));\r\n```\r\n\r\n## Preventing player to move in it\r\n\r\n```js\r\n    setInterval(() =\u003e {\r\n        let dx = 0;\r\n        let dy = 0;\r\n        if (heldKeys[\"w\"]) dy--;\r\n        if (heldKeys[\"a\"]) dx--;\r\n        if (heldKeys[\"s\"]) dy++;\r\n        if (heldKeys[\"d\"]) dx++;\r\n        player.x += dx;\r\n        if (player.getCollidingEntities(scene, [Obstacle]).length \u003e 0) player.x -= dx;\r\n        player.y += dy;\r\n        if (player.getCollidingEntities(scene, [Obstacle]).length \u003e 0) player.y -= dy;\r\n        player.preventBorder(scene);\r\n    });\r\n```\r\n\r\n\u003chr\u003e\r\n\r\n# Adding texts\r\n\r\n## Creating text\r\n\r\n```js\r\n    const text = new Entity(\r\n        new EntityData()\r\n            .setX(30)\r\n            .setY(30)\r\n            .setModel(\r\n                new TextModel(10, 10) // width, height\r\n                    .setText(\"Hello World!\") // text of model\r\n                    .setFont(\"Impact\") // font of text\r\n                    .setColor(\"rgba(0, 255, 0, 0.5)\") // color of text\r\n                    .setPixels(16) // size of the text\r\n                    .setMaxWidth(100) // maximum size of the text\r\n            )\r\n    );\r\n```\r\n\r\n## Adding text as entity\r\n\r\n```js\r\n    scene.addEntity(text);\r\n```\r\n\r\n## Changing content of the text entity\r\n\r\n```js\r\n    text.model.setText(\"Bye World!\");\r\n```\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foguzhanumutlu%2Fjavascript2d","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foguzhanumutlu%2Fjavascript2d","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foguzhanumutlu%2Fjavascript2d/lists"}