In this tutorial we will build a speed typing game!
This is a nice game to play to improve typing speed and learn touch typing.
I try to go in detail with everything so this project should be easy even for beginners. You will learn many useful things like key detection, moving objects on the screen and many others.
Source code: [ Ссылка ]
TIMESTAMPS:
00:00:00 - Intro
00:00:25 - html structure and basic css for our app
00:08:48 - inserting random words to our game
00:17:44 - focus warning
00:21:22 - keyboard typing event
00:27:30 - adding blinking cursor
00:30:35 - handling letters typing
00:34:49 - handling space key
00:44:48 - extra wrong letters at the end of a word
00:47:04 - moving the blinking cursor
00:53:56 - handling backspace
01:02:33 - scrolling lines of words
01:08:39 - game timer (countdown)
01:16:39 - handling game’s end screen
01:22:44 - showing word per minute result
01:33:54 - new game button
01:34:58 - Outro
Build Typing Game with Javascript
Теги
typing game javascripttyping game jsspeed typing game javascriptmonkeytype clonetyping game project javascripttyping game javascript tutorialjavascripthtml css javascript projectjavascript project tutorialjavascript appjavascript app tutorialjavascript app for beginnershtml css javascript apphtml css javascript app tutorialjavascript gamehtml css javascript gamejavascript game tutorialjs projects for beginnersjavascript projects for beginners