var Component=(()=>{var h=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var m=(e,l)=>()=>(l||e((l={exports:{}}).exports,l),l.exports),g=(e,l)=>{for(var c in l)s(e,c,{get:l[c],enumerable:!0})},d=(e,l,c,r)=>{if(l&&typeof l=="object"||typeof l=="function")for(let a of y(l))!b.call(e,a)&&a!==c&&s(e,a,{get:()=>l[a],enumerable:!(r=p(l,a))||r.enumerable});return e};var k=(e,l,c)=>(c=e!=null?h(f(e)):{},d(l||!e||!e.__esModule?s(c,"default",{value:e,enumerable:!0}):c,e)),u=e=>d(s({},"__esModule",{value:!0}),e);var t=m((w,o)=>{o.exports=_jsx_runtime});var L={};g(L,{default:()=>_,frontmatter:()=>v});var n=k(t()),v={title:"Javascript | Sample Typing Game",description:'I created a "Typing Game" using JavaScript.',date:new Date(1583712e6),emoji:"\u2328",tags:["javascript"],published:!0};function i(e){let l=Object.assign({p:"p",h2:"h2",a:"a",span:"span",strong:"strong",img:"img",figure:"figure",pre:"pre",code:"code",hr:"hr",h3:"h3"},e.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(l.p,{children:'I created a "Typing Game" using JavaScript.'}),(0,n.jsxs)(l.h2,{id:"overview",children:[(0,n.jsx)(l.a,{href:"#overview","aria-label":"Link to section",className:"subheading-anchor",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Overview"]}),(0,n.jsx)(l.p,{children:"This game requires players to type in displayed English words from the keyboard within a time limit."}),(0,n.jsx)(l.p,{children:(0,n.jsx)(l.a,{href:"https://atman-33.github.io/typing-game-js/",children:(0,n.jsx)(l.strong,{children:"Play Sample Game"})})}),(0,n.jsx)(l.p,{children:(0,n.jsx)(l.a,{href:"https://github.com/atman-33/typing-game-js",children:(0,n.jsx)(l.strong,{children:"Source Code Here"})})}),(0,n.jsx)(l.p,{children:(0,n.jsx)(l.img,{alt:"image",src:"/blog/12/typing.png"})}),(0,n.jsxs)(l.h2,{id:"project-structure",children:[(0,n.jsx)(l.a,{href:"#project-structure","aria-label":"Link to section",className:"subheading-anchor",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Project Structure"]}),(0,n.jsx)(l.p,{children:"The project structure is as follows:"}),(0,n.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{__rawString__:`js_typing_game \u251C index.html \u251C css \u2502 \u2514 base.css \u2514 js \u251C Common.js \u2514 class \u3000 \u251C FlashingText.js \u3000 \u2514 Typing.js `,"data-language":"text","data-theme":"github-dark-dimmed",style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0",children:(0,n.jsxs)(l.code,{"data-language":"text","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{children:"js_typing_game"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{children:"\u251C index.html"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{children:"\u251C css"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{children:"\u2502 \u2514 base.css"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{children:"\u2514 js"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{children:" \u251C Common.js"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{children:" \u2514 class"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{children:"\u3000 \u251C FlashingText.js"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{children:"\u3000 \u2514 Typing.js"})})]})})}),(0,n.jsxs)(l.h2,{id:"source-code-explanation",children:[(0,n.jsx)(l.a,{href:"#source-code-explanation","aria-label":"Link to section",className:"subheading-anchor",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Source Code Explanation"]}),(0,n.jsxs)(l.p,{children:["The main file responsible for running the game is ",(0,n.jsx)(l.code,{__isInlineCode__:"true",children:"index.html"}),"."]}),(0,n.jsx)(l.p,{children:"Here is an overview of the functionality of each file, so you can get a grasp of the major components:"}),(0,n.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{__rawString__:`index.html - Main game logic base.css - Styling for the game screen and keyboard Common.js - Text loading for questions FlashingText.js - Text blinking effect Typing.js - Typing character validation and keyboard lighting `,"data-language":"text","data-theme":"github-dark-dimmed",style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0",children:(0,n.jsxs)(l.code,{"data-language":"text","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{children:"index.html - Main game logic"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{children:"base.css - Styling for the game screen and keyboard"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{children:"Common.js - Text loading for questions"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{children:"FlashingText.js - Text blinking effect"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{children:"Typing.js - Typing character validation and keyboard lighting"})})]})})}),(0,n.jsx)(l.p,{children:"I will primarily explain the key code segments."}),(0,n.jsx)(l.hr,{}),(0,n.jsxs)(l.h3,{id:"indexhtml",children:[(0,n.jsx)(l.a,{href:"#indexhtml","aria-label":"Link to section",className:"subheading-anchor",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"\u2460index.html"]}),(0,n.jsxs)(l.p,{children:["In this case, I defined the game state (",(0,n.jsx)(l.code,{__isInlineCode__:"true",children:"gameState"}),') to transition from "Preparing" to "Typing Game" to "Game Over" based on player actions.']}),(0,n.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{__rawString__:`

Javascript | Sample Typing Game

JavaScript | Sample of a Shooting Game Using CreateJS and Classes