{"id":17636179,"url":"https://github.com/joker314/word-reveal","last_synced_at":"2026-01-21T16:02:45.480Z","repository":{"id":145246582,"uuid":"137250800","full_name":"joker314/word-reveal","owner":"joker314","description":"An HTML5 game using the Canvas API where the player has to guess a word that is slowly revealed","archived":false,"fork":false,"pushed_at":"2019-02-06T19:17:52.000Z","size":52,"stargazers_count":2,"open_issues_count":9,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-07T01:55:34.756Z","etag":null,"topics":["game","website"],"latest_commit_sha":null,"homepage":"https://joker314.github.io/word-reveal","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/joker314.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":"2018-06-13T17:46:25.000Z","updated_at":"2023-10-10T14:31:37.000Z","dependencies_parsed_at":null,"dependency_job_id":"284e377d-48d2-4b65-adec-ab9ea4ce6adf","html_url":"https://github.com/joker314/word-reveal","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/joker314/word-reveal","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joker314%2Fword-reveal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joker314%2Fword-reveal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joker314%2Fword-reveal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joker314%2Fword-reveal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/joker314","download_url":"https://codeload.github.com/joker314/word-reveal/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joker314%2Fword-reveal/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28635926,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-21T15:01:31.228Z","status":"ssl_error","status_checked_at":"2026-01-21T14:42:58.942Z","response_time":86,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["game","website"],"created_at":"2024-10-23T02:28:09.608Z","updated_at":"2026-01-21T16:02:45.452Z","avatar_url":"https://github.com/joker314.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# word-reveal\nA game where a word is slowly revealed\n\n[**Play now**](https://joker314.github.io/word-reveal/)\n\n\n# Instructions\n\n## Displays\n\nOn the screen, you will see many displays.\n\n### Total Score\n\nYour total score is displayed above the yellow bar at the bottom. The yellow bar will show your total score too: it will scale based on how many total points you have. If you have 300 or more, it will cover the entire width of the canvas.\n\n### Round Score\n\nIn each round, your score is displayed, above the vertical bar on the left.\n\n### Time in Round\n\nThe green vertical bar will show how much time is left in the round. If it covers the red completely, the round just started. If it's half way down the red, so is the word cover (as well as the round). If the green bar is no longer visible, the round has ended.\n\n# Rules\n\nIn each round, you start with 70 round points. This steadily decreases. Each time you make an incorrect guess, **20 round points will be deducted**. When the round ends, the result is added to the total points.\n\nThe total points will begin at 50. To win, at the end of the game you must have 300 points.\n\nIf at any time your total points become 0 or below, you lose.\n\nTo make a guess, type what you think the word is through your keyboard. To remove multiple letter, you can't just hold down \"backspace\". To make it harder, you must press and release the backspace key for each letter you wish to remove. To submit your answer, hit the return key.\n\n# Programming\n\nTo help you, the code is split into three files.\n\n## `constants.js`\nA file that contains all the numeric constants.\n\n- The score needed to win at the end (`TARGET`)\n- How many rounds are needed (and therefore how many words must be fetched) (`ROUNDS`)\n- How many seconds are in each round (`ROUND_DURATION`)\n- The character code for the enter key, which is 13. (`ENTER`)\n- The character code for the backspace key, which is 8. (`BACKSPACE`)\n\n## `canvasFunctions.js`\nA file that contains all the functions that manipulate the canvas to draw game objects.\n\nNote that all these functions **must** take the CanvasRenderingContext2D as the first argument; and **must** take the HTML canvas element as the second argument. These are implied in the table below.\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eFunction name\u003c/th\u003e\n    \u003cth\u003eArguments\u003c/th\u003e\n    \u003cth\u003eWhat it does\u003c/th\u003e\n  \u003c/tr\u003e\n  \n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003ccode\u003edisplay\u003c/code\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003cul\u003e\n        \u003cli\u003etext to display\u003c/li\u003e\n        \u003cli\u003ebackground behind text\u003c/li\u003e\n        \u003cli\u003ecolour of text\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      Shows only the given text, in the centre of the canvas, over a certain background.\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003ccode\u003edrawWord\u003c/code\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003cul\u003e\n        \u003cli\u003epercentage of round left (0 to 100)\u003c/li\u003e\n        \u003cli\u003ehidden word\u003c/li\u003e\n        \u003cli\u003ecolour of word\u003c/li\u003e\n        \u003cli\u003ecolour of cover (i.e. solid rectangle that obscures word)\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      Renders the round's word onto the canvas, covered by a solid rectangle of the size and colours specified.\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003ccode\u003edrawBackground\u003c/code\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003cul\u003e\n        \u003cli\u003ecolour of background\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      Covers the entire canvas with a solid rectangle of the colour specified.\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003ccode\u003edrawCounter\u003c/code\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003cul\u003e\n        \u003cli\u003epercentage of round left (0 to 100)\u003c/li\u003e\n        \u003cli\u003epoints lost by incorrect guesses\u003c/li\u003e\n        \u003cli\u003ecolour of time left\u003c/li\u003e\n        \u003cli\u003ecolour of time used\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      Renders the vertical counter using the percentage argument. Renders the round's score using both the percentage *and* the points lost.\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003ccode\u003edrawTotal\u003c/code\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003cul\u003e\n        \u003cli\u003etotal score\u003c/li\u003e\n        \u003cli\u003ecolour of bar\u003c/li\u003e\n        \u003cli\u003ecolour of label\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      Renders the total score in the bar at the bottom, using the colour specified. Also, attaches a numeric label to show the score as an absolute number rather than as a visual fraction of the target.\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## `index.js` \nA file that handles the main game loop.\n\n### `getWords(rounds)`\n\nThis returns a promise, which should only ever resolve. Ideally, it should pull from an online database of words; however, it may fallback to a hard-coded list if there is no internet connection.\n\n### `nextRound()`\n\nUpgrades the round in the `gameState` object and resets the round's score, penalty, etc. \n\n### `roundCheck(ctx, canvas)`\n\nThis takes the `ctx` and `canvas` arguments, even though it doesn't directly manipulate the canvas. Instead, it will call `display` with relevant arguments that will depend on whether the game is a loss or a win.\n\nThis function will do nothing if the game hasn't reached an end.\n\n### gameState\n\n`gameState` is an object containing the state of the game.\n\n#### `total`\n\nThe total number of points\n\n#### `round`\n\nThe index of the round\n\n#### `points`\n\nThis is actually counter-intuitive. The `points` is the percentage of the round yet to complete. If there are no wrong guesses, this happens to be the number of `points` the user gets. To calculate the user's points, one must subtract the `penalty`\n\n#### `penalty`\n\nThe number which, when subtracted from `points`, is the round's points. This starts at 30 because `100 - 30 = 0`.\n\n#### `startedAt`\n\nThe high-quality timestamp since the page loaded (roughly) when the game initially started.\n\n#### `text`\n\nThe text which a user has entered through their keyboard but not submitted yet\n\n## General structure\n\nThe constants and canvas functions are imported. Then, `getWords(ROUNDS)` is called. The promise is resolved, and when that happens a series of things will happen.\n\nFirstly, the game loop is declared.\n\nSecondly, event listeners are binded to `document`\n\nThe game loop runs the following:\n\n- Has the game ended? If so, call `roundCheck(CTX, C)` and quit the game loop.\n- Draw the background, total score counter, round score counter, round timer, and the concealed word\n- Lower the number of time in the round remaining\n- If the time for this round has run out, move on to the next round\n- Tell the browser you're ready for the next game tick\n- Draw the inputted text to the screen so the user knows what they're typing\n\nThe event listener `keypress` runs:\n\n- Figure out the keycode of the key that has just been pressed, in a cross-browser way\n- If it's not backspace, add it to the `text` property in `gameState`\n\nThe event listener `keydown` runs:\n\n- Figure out the keycode of the key that has just been pressed, in a cross-browser way\n- If it's ENTER (13)\n  - Trim off any newline characters (`\\r` is the annoying one)\n  - Compare it with the target word\n  - If it's a match\n    - Run `nextRound()`\n  - Otherwise\n    - Clear the text and add 20 to the `penalty` property of `gameState`\n- If it's BACKSPACE (8)\n  - Remove the rightmost character, if it exists, from the `text` property of `gameState`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoker314%2Fword-reveal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoker314%2Fword-reveal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoker314%2Fword-reveal/lists"}