{"id":19931666,"url":"https://github.com/kevinkiklee/stellio","last_synced_at":"2026-06-04T21:31:03.188Z","repository":{"id":81325384,"uuid":"83340903","full_name":"kevinkiklee/stellio","owner":"kevinkiklee","description":"A tile-matching game with the movie Interstellar theme","archived":false,"fork":false,"pushed_at":"2017-09-11T20:14:39.000Z","size":3711,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"gh-pages","last_synced_at":"2025-01-12T01:30:30.240Z","etag":null,"topics":["createjs","javascript"],"latest_commit_sha":null,"homepage":"http://kevinkiklee.com/stellio","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/kevinkiklee.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":"2017-02-27T18:05:20.000Z","updated_at":"2017-04-08T23:01:46.000Z","dependencies_parsed_at":null,"dependency_job_id":"61b42e91-265c-49ce-9508-c3eed4e9a145","html_url":"https://github.com/kevinkiklee/stellio","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/kevinkiklee%2Fstellio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevinkiklee%2Fstellio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevinkiklee%2Fstellio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevinkiklee%2Fstellio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kevinkiklee","download_url":"https://codeload.github.com/kevinkiklee/stellio/tar.gz/refs/heads/gh-pages","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241357616,"owners_count":19949770,"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":["createjs","javascript"],"created_at":"2024-11-12T23:07:46.303Z","updated_at":"2026-06-04T21:31:03.180Z","avatar_url":"https://github.com/kevinkiklee.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Stellio\n\n![screenshot](docs/stellio.gif)\n\nStellio is a tile-matching game inspired by Bejeweled with the movie Interstellar theme.\n\n\u003e Stellio is currently **under development**. If you have any suggestions or comments, please e-mail me at kevin.kik.lee@gmail.com\n\n## Implementation\n\n- Javascript\n- Create.js (Easel / Preload)\n\n## Gameplay\n- There are 6 different elements to match\n  - Earth (Blue)\n  - Mars (Red)\n  - Saturn (Orange)\n  - Venus (Yellow)\n  - Mercury (White)\n  - Black Hole (Black)\n\n- A match of 3 planets award 100 points\n- A match of 4 planets award 300 points\n- A match of 5 planets award 1000 points\n\n## Functionality\n\n- [X] The game keeps the scoreboard\n- [X] The tile tracks its element and position\n- [X] The board populates with a random seed of tiles\n- [X] A user can move a tile non-diagonally to match 3+ elements\n- [X] The user can start/restart the game\n\n#### Development Tasks\n\n- [ ] A tile of column falls to fill in the empty spaces\n- [ ] Restrict diagonal mouse/tile movement\n\n## Mouse Movement\n\n```javascript\nmoveTile(tile) {\n  return event =\u003e {\n    const OFFSET = 25;\n    const DISTANCE = 60;\n\n    const limitRowTop = tile.row_coord - DISTANCE + OFFSET;\n    // Continues...\n\n    const row = event.stageY;\n    const col = event.stageX;\n\n    if (row \u003c limitRowBot \u0026\u0026 row \u003e limitRowTop\n     \u0026\u0026 col \u003c limitColBot \u0026\u0026 col \u003e limitColTop\n     \u0026\u0026 row \u003e 40 \u0026\u0026 row \u003c 460\n     \u0026\u0026 col \u003e 40 \u0026\u0026 col \u003c 460)\n    {\n      this.stage.setChildIndex(\n        event.currentTarget, this.stage.getNumChildren() - 1\n      );\n\n      event.currentTarget.x = col - OFFSET;\n      event.currentTarget.y = row - OFFSET;\n    }\n  }\n}\n```\nMouse movement is bounded by the coordinates of the board and within 60px of the originating position.  The offset of 25px (the tile radius) is accounted for because the mouse position is bound to the top-left corner of the grabbed object.\n\nEisel.js sets the order of the display index from the sequence of the objects added (i.e. the last added element is displayed on the top).  To account for this, the index of the grabbed element is brought to the top by invoking `setChildIndex`.\n\n## Target Finder\n\n```javascript\nfindSwapTgt(tile) {\n  return event =\u003e {\n    let tgt;\n    const grid = this.grid;\n\n    const row_diff = event.target.y - tile.row_coord;\n    const col_diff = event.target.x - tile.col_coord;\n\n    // LEFT\n    if (row_diff \u003e -20 \u0026\u0026 row_diff \u003c  20\n     \u0026\u0026 col_diff \u003e -70 \u0026\u0026 col_diff \u003c -20) {\n      tgt = grid[tile.row][tile.col - 1];\n    }\n\n    // RIGHT\n    if (row_diff \u003e -20 \u0026\u0026 row_diff \u003c 20\n     \u0026\u0026 col_diff \u003e  20 \u0026\u0026 col_diff \u003c 70) {\n      tgt = grid[tile.row][tile.col + 1];\n    }\n\n    // Continues ....\n  }\n}\n```\nWhen the user releases the mouse from the drag event, `findSwapTgt` callback function is invoked.  The difference is calculated from the current position of the mouse and the originating coordinate.  Through the conditionals, the target is assigned from the corresponding element found in the grid.\n\n## Board Checking\n\n```javascript\ncheckBoard(initial, afterMove) {\n  const delay = initial ? 0 : 1400;\n\n  setTimeout(\n    () =\u003e {\n      this.cleared = true;\n\n      const transposedGrid = this.grid.map(\n        (row, col) =\u003e this.grid.map(row =\u003e row[col])\n      );\n\n      this.grid.forEach(row =\u003e {\n        this.checkSlice(row, initial, afterMove);\n      });\n\n      transposedGrid.forEach(col =\u003e {\n        this.checkSlice(col, initial, afterMove);\n      });\n\n      if (!this.cleared)\n        this.checkBoard(initial, afterMove);\n    },\n  delay, this);\n}\n```\n\nAfter the initial tile matching, the board is recursively checked for more matches, along with a delay added for synchronized animation.  If the board check is triggered from the initial board population, the delay does not exist.\n\n## Animation\n\n```javascript\naddMatchZoom(removeTiles) {\n  createjs.Tween.get(this.object, { loop: false })\n    .to({ scaleX: 1.2, scaleY: 1.2}, 300, createjs.Ease.getPowInOut(2))\n    .to({ scaleX: 1, scaleY: 1}, 300, createjs.Ease.getPowInOut(2))\n    .to({ alpha: 0 }, 300, createjs.Ease.getPowInOut(2))\n    .call(() =\u003e (removeTiles([this])));\n}\n\naddDelayedFadeIn() {\n  this.object.alpha = 0;\n  createjs.Tween.get(this.object, { loop: false })\n    .wait(900)\n    .to({ alpha: 1 }, 400, createjs.Ease.getPowInOut(3));\n}\n```\n\nThe animations use the PowInOut easing function.  Initial value change is steep in order to notify the user that the tile is in transition.  However, after the animation receives the attention of the user, the animation is significantly slowed down in order for the user to fully absorb which type of tiles have been affected.  Afterwards, the animation accelerates for the next animation to begin.  The following graph describes the PowInOut easing function where the x-axis represents time and y-axis represents the value.\n\n![ease-graph](docs/powinout.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkevinkiklee%2Fstellio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkevinkiklee%2Fstellio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkevinkiklee%2Fstellio/lists"}