https://github.com/joker314/word-reveal
An HTML5 game using the Canvas API where the player has to guess a word that is slowly revealed
https://github.com/joker314/word-reveal
game website
Last synced: 6 months ago
JSON representation
An HTML5 game using the Canvas API where the player has to guess a word that is slowly revealed
- Host: GitHub
- URL: https://github.com/joker314/word-reveal
- Owner: joker314
- License: gpl-3.0
- Created: 2018-06-13T17:46:25.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2019-02-06T19:17:52.000Z (over 7 years ago)
- Last Synced: 2025-04-07T01:55:34.756Z (over 1 year ago)
- Topics: game, website
- Language: JavaScript
- Homepage: https://joker314.github.io/word-reveal
- Size: 50.8 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# word-reveal
A game where a word is slowly revealed
[**Play now**](https://joker314.github.io/word-reveal/)
# Instructions
## Displays
On the screen, you will see many displays.
### Total Score
Your 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.
### Round Score
In each round, your score is displayed, above the vertical bar on the left.
### Time in Round
The 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.
# Rules
In 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.
The total points will begin at 50. To win, at the end of the game you must have 300 points.
If at any time your total points become 0 or below, you lose.
To 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.
# Programming
To help you, the code is split into three files.
## `constants.js`
A file that contains all the numeric constants.
- The score needed to win at the end (`TARGET`)
- How many rounds are needed (and therefore how many words must be fetched) (`ROUNDS`)
- How many seconds are in each round (`ROUND_DURATION`)
- The character code for the enter key, which is 13. (`ENTER`)
- The character code for the backspace key, which is 8. (`BACKSPACE`)
## `canvasFunctions.js`
A file that contains all the functions that manipulate the canvas to draw game objects.
Note 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.
Function name
Arguments
What it does
display
- text to display
- background behind text
- colour of text
Shows only the given text, in the centre of the canvas, over a certain background.
drawWord
- percentage of round left (0 to 100)
- hidden word
- colour of word
- colour of cover (i.e. solid rectangle that obscures word)
Renders the round's word onto the canvas, covered by a solid rectangle of the size and colours specified.
drawBackground
- colour of background
Covers the entire canvas with a solid rectangle of the colour specified.
drawCounter
- percentage of round left (0 to 100)
- points lost by incorrect guesses
- colour of time left
- colour of time used
Renders the vertical counter using the percentage argument. Renders the round's score using both the percentage *and* the points lost.
drawTotal
- total score
- colour of bar
- colour of label
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.
## `index.js`
A file that handles the main game loop.
### `getWords(rounds)`
This 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.
### `nextRound()`
Upgrades the round in the `gameState` object and resets the round's score, penalty, etc.
### `roundCheck(ctx, canvas)`
This 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.
This function will do nothing if the game hasn't reached an end.
### gameState
`gameState` is an object containing the state of the game.
#### `total`
The total number of points
#### `round`
The index of the round
#### `points`
This 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`
#### `penalty`
The number which, when subtracted from `points`, is the round's points. This starts at 30 because `100 - 30 = 0`.
#### `startedAt`
The high-quality timestamp since the page loaded (roughly) when the game initially started.
#### `text`
The text which a user has entered through their keyboard but not submitted yet
## General structure
The 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.
Firstly, the game loop is declared.
Secondly, event listeners are binded to `document`
The game loop runs the following:
- Has the game ended? If so, call `roundCheck(CTX, C)` and quit the game loop.
- Draw the background, total score counter, round score counter, round timer, and the concealed word
- Lower the number of time in the round remaining
- If the time for this round has run out, move on to the next round
- Tell the browser you're ready for the next game tick
- Draw the inputted text to the screen so the user knows what they're typing
The event listener `keypress` runs:
- Figure out the keycode of the key that has just been pressed, in a cross-browser way
- If it's not backspace, add it to the `text` property in `gameState`
The event listener `keydown` runs:
- Figure out the keycode of the key that has just been pressed, in a cross-browser way
- If it's ENTER (13)
- Trim off any newline characters (`\r` is the annoying one)
- Compare it with the target word
- If it's a match
- Run `nextRound()`
- Otherwise
- Clear the text and add 20 to the `penalty` property of `gameState`
- If it's BACKSPACE (8)
- Remove the rightmost character, if it exists, from the `text` property of `gameState`